Figmaを用いてデザイナーとエンジニアが協働し、効率的なコラボレーションとデザインシステムの構築方法を実践的に解説する。
シェアックリップ
シェアされたアックリップです。
そのほかの #Figma ピックアップ
ウェブサイト再デザイン過程で、Figmaの設計段階からアクセシビリティ要件を組み込み、デザイン時のアクセシビリティレビュー方法を詳しく解説する。
デジタル庁デザインシステムの活用方法。「見やすくする」がコントラスト比などで具体的に定義でき、入力欄設計やエラーメッセージの扱いまで実装レベルでガイドされる。Figma・HTML・React サンプルも提供される、組織で共有できる設計資料。
FigmaのAIアクセシビリティチェッカーが検出する6項目を、JIS X 8341-3（WCAG 2.0）の達成基準と比較分析。デザイン段階での検出の有用性と実装後の試験が必要な項目を整理。
WCAGで定義されるコントラスト比の計算方法と、デザインレビューで見落とされやすい3つの罠（グレー本文・背景色上の文字・プレースホルダ）を技術的に解説。
日本の企業・行政が公開している12のデザインシステムを、構築方針・アクセシビリティ・実装方法で分類・紹介。これからUI規則を整える組織向けの参考ガイド。
Customize a Venngage Accessible Template
YouTube 海外
Venngageのアクセシブルテンプレートライブラリの使用方法と、テンプレート選択から編集・カスタマイズまでの手順をチュートリアル形式で紹介。
そのほかの #デザインシステム ピックアップ
UI・UX・CX・HCD・UD・アクセシビリティといった関連用語40個を5つの分類で整理して解説。コントラスト比やカラーユニバーサルデザイン、代替テキストなど実例で学べる。聾学校での経験から、音声に頼らない環境での視覚情報の重要性を示す。
Vaadin Button の Web Component 開発の 9 年以上の歴史をとおして、アクセシビリティに対応するための技術的課題と解決方法を描く。Shadow DOM 設計、フォーカス管理、tooltip の accessible 化など、進化の過程を追う。
色調パレットをアクセシビリティ規則に基づいて自動修正するエンジンの実装。WCAG対比率を満たすよう色を調整し、OKLCH色空間を使って知覚的な色合い変化を最小限に抑える。
デザインシステムがキーボード操作とフォーカス移動を一貫して管理するメカニズムを解説。フォーカストラップ・ARIA・イベントハンドリングの実装と、アプリ側のオーバーライドが破壊する事例を紹介。
レトロアーケード美学を保ちながら WCAG コントラスト要件を満たす色設計と、Flash of Unstyled Content を避ける実装方法を解説。CSS カスタムプロパティと同期スクリプトを組み合わせた構成。
プロジェクト管理ツール Pleasanter の 2027 年 1 月予定の UI テーマ改善について、CSS 変数削除やクラス名変更などの変更点をまとめた。