Figmaでアクセシビリティを「後付け」にするな。設計段階で最強のインクルーシブ体験を構築する極意
こんにちは。プロダクト開発の現場では、UIを「美しく作る」ことと「正しく届ける」ことの境界線が曖昧になりがちです。
多くのデザイナーが陥る罠――それは、「アクセシビリティ対応を実装フェーズの最後に行うこと」です。これでは、手戻りの嵐が待っています。アクセシビリティは、デザインの「機能」です。
今日は、Figmaを使って、デザインプロセスの中で極めて自然に、かつ強固にWCAG（Web Content Accessibility Guidelines）基準をクリアするための「実戦的」な手法をお伝えします。これをマスターすれば、あなたのデザインは「見た目だけ」ではなく、「誰にとっても使いやすい」ものへと進化します。
—
1. なぜFigmaでアクセシビリティをやるのか？
「アクセシビリティチェックは開発環境（Lighthouseなど）でやればいいのでは？」と思うかもしれません。しかし、実装してからコントラスト比が低いと指摘されて、CSSを全部書き直すのは地獄です。
Figmaで完結させる最大のメリットは、「デザインシステムそのものをアクセシブルに構築できること」にあります。一度ルールを決めてしまえば、あとはコンポーネントが勝手にアクセシビリティを守ってくれる――これこそが、伝説のUIエンジニアが目指す姿です。
—
2. 準備：必須のプラグイン（これ以外は捨てる）
Figmaの標準機能も進化していますが、プロの現場では以下の2つが「黄金のコンビ」です。まずはこれらをインストールしてください。
- [Stark](https://www.getstark.co/): カラーコントラスト、フォーカス順序、Altテキストの管理まで行う「アクセシビリティの司令塔」。
- [A11y – Focus Order](https://www.figma.com/community/plugin/804000335048123049): スクリーンリーダーが読み上げる順序を可視化・設定するための決定版。
—
3. 実践：WCAG基準を満たす「効率的」な3ステップ
STEP 1：カラーコントラストの「自動防衛」
WCAGのAA/AAA基準をクリアするためには、コントラスト比（AAなら4.5:1以上）を維持する必要があります。
1. Starkを起動し、「Contrast」パネルを開きます。
2. チェックしたいテキストと背景を選択。
3. もし比率が足りない場合、Starkのカラーピッカーを使って「合格する色」に自動調整します。
【極意】：この時、その色を「ローカルスタイル」として保存してください。
`Text / Primary / Accessible` のように命名ルールを統一すれば、チーム全員が「このスタイルを使えばコントラストは安泰」という安心感を持って開発できます。
STEP 2：スクリーンリーダー順序の「設計」
開発者は、あなたが書いたデザインのコードを上から順に読みます。しかし、視覚的なレイアウトとDOM構造が一致していないと、スクリーンリーダーは支離滅裂な順序で情報を読み上げます。
1. A11y – Focus Order を使います。
2. 画面内の要素をクリックするだけで、数字（1, 2, 3…）が振られます。
3. 視線の誘導と読み上げ順序が一致しているかをここで確認してください。
// Figma上での設計思考
// 1. ヘッダーロゴ -> 2. メインナビ -> 3. 検索窓 -> 4. メインコンテンツ
// この順序を「レイヤーパネル」でも上から順に整理しておくのがプロの作法です。
STEP 3：インタラクティブ要素の「状態定義」
フォーカスインジケーター（Tabキーで選択した時の枠）をデザインすることを忘れていませんか？
- ボタンの「Focus State」をコンポーネントのバリアントに含める：
`Focus: Visible`（青い枠など）を定義し、開発者に「このインジケーターをCSSで実装してね」と伝えるのです。これがなければ、キーボードユーザーは自分がどこにいるか分からなくなります。
—
4. 精度を高める「Hello World」的な動作確認フロー
初めてアクセシビリティ対応を行うなら、まずは「ログインフォーム」から始めてください。
1. コントラスト: ラベルと入力欄の文字色が背景に対して十分な比率か。
2. フォーカス順序: Tabキーで `ユーザー名` -> `パスワード` -> `ログインボタン` の順に移動するか。
3. エラー表示: エラーが起きた時、色だけでなく「アイコンやテキスト」で状態を伝えているか（色盲ユーザーへの配慮）。
この3つをクリアしたログインフォームは、あなたのプロダクトにおける「最も信頼できるコンポーネント」になります。
—
先輩エンジニアからのアドバイス
アクセシビリティは「制限」ではなく「可能性の拡張」です。
高齢の方、一時的な怪我でマウスが使えない方、晴天の屋外で画面を見ている方――あらゆるユーザーがあなたのプロダクトを「普通に使える」状態を作ることは、UXデザインにおける究極のゴールです。
まずは今日、既存のプロジェクトの「カラーコントラスト」を1箇所だけチェックしてみてください。その小さな一歩が、数ヶ月後の大規模な手戻りを防ぎ、ユーザーからの「このアプリ、使いやすいね」という言葉に繋がります。
さあ、Figmaを開いて、誰一人取り残さないデザインを始めましょう。何かあればいつでも聞いてくださいね。応援しています。