【実務・中級編】Figmaのアクセシビリティチェック機能徹底活用！WCAG基準を満たすデザインの効率的な検証方法 – UI/UX・デザインツール活用バイブル

アクセシビリティは「後付けの修正」ではない：Figmaで完結させるインクルーシブ・デザインのワークフロー

テックリードの皆さん、日々のコンポーネント設計やデザインシステムの運用、本当にお疲れ様です。

プロダクトの規模が拡大するにつれ、アクセシビリティ（a11y）対応の重要性は増すばかりです。しかし、多くの現場でこんな悪夢が起きていないでしょうか？

> 「実装フェーズに入ってからLighthouseやaxeでコントラスト比のエラーが大量検知される」
> 「QAから『スクリーンリーダーの読み上げ順序がバラバラで実用に耐えない』と差し戻し食らう」
> 「デザイン修正のためにFigmaに戻り、オートレイアウトを組み直し、エンジニアに再トランスパイルを依頼する…」

これ、完全にアンチパターンです。

アクセシビリティを「開発の最後のチェックリスト」として扱う時代は終わりました。真にスケーラブルなプロダクト開発において、a11yはデザインの初期段階（Figma上）で構造化され、検証されるべきものです。

今回は、Figmaのネイティブ機能、神プラグイン、そしてデザインシステムとの連携を極限まで高め、開発スピードを落とさずにWCAG 2.1（将来の2.2も見据えて）の基準をクリアする実践的なワークフローを叩き込みます。

—

1. カラーコントラスト：感覚を排除し、数学的に担保する

WCAG 2.1の基準（AAでは通常テキスト4.5:1以上、UIコンポーネントや大きなテキストは3:1以上）を、人間の目視確認に頼るのはエンジニアの恥です。Figma上でこれを完全自動化します。

絶対に入れるべき神プラグイン：「Accessibility Color Contrast Checker (ACCC)」または「Stark」

コントラスト検証はプラグインに任せましょう。特に Stark や Accessibility Color Contrast Checker は、デザインシステムの色変数をアタッチした状態でリアルタイムにコントラスト比を算出してくれるため必須です。

テックリード流：デザイントークン設計の極意

コントラスト違反を防ぐ根本的な解決策は、「色の組み合わせをシステム側で制約する」ことです。
Figmaの「Variables（変数）」機能を使用し、単なるHEXコード（例: `#333333`）ではなく、意味論的（セマンティック）なトークンとして定義します。

`color/text/primary` （背景 `color/surface/default` に対して必ず 7:1 以上を担保するペア）
`color/text/muted` （背景 `color/surface/default` に対して必ず 4.5:1 以上を担保するペア）

デザイナーが勝手にコントラストの低い色を選択できない仕組みをFigmaの変数モード（Modes）で強制するのが、プロのデザインシステム設計です。

—

2. スクリーンリーダーとフォーカス順序の「視覚化」

視覚的なレイアウト（Z軸やX/Y座標）と、スクリーンリーダー（DOM）の読み上げ順序は必ずしも一致しません。特にCSS GridやFlexboxの `order` プロパティ、あるいは絶対配置を用いた瞬間、アクセシビリティ・ツリーは破壊されます。

Figma上であらかじめ「フォーカス順序と読み上げ構造」を可視化・定義する手法を導入しましょう。

開発スピードを劇的に高める隠れたキーボードショートカット

Figmaでのレイヤー構造の整理は、マウス操作では遅すぎます。以下のショートカットを指に叩き込んでください。

`Ctrl + [` / `Ctrl + ]` （Mac: `Cmd + [` / `Cmd + ]`）：レイヤーの上下移動（DOM順序の制御）
`Return`（レイヤーを選択した状態で）：子要素への移動
`Shift + Return`：親要素への移動
`Tab`：兄弟要素間の移動

レイヤーパネルの上から下へ流れる順序が、そのままセマンティックなHTML構造（またはスクリーンリーダーのフォーカス順序）になるよう、常にレイヤーを整理する習慣をチーム全体で徹底します。

神プラグイン：「A11y – Focus Order」

コンポーネントや画面全体のフォーカス順序（Tab移動のパス）を視覚的な矢印と番号でオーバーレイ表示してくれるプラグインです。
これを用いて、モダールが開いたときのフォーカストラップ（Focus Trap）の挙動や、キーボードナビゲーションの導線をFigmaのプロトタイプ上でエンジニアと事前に合意形成します。

—

3. チーム開発で役立つ設定の共有化ルール

アクセシビリティ対応を属人化させないためには、Figmaの「チームライブラリ」と「スタイルガイド」にルールを組み込む必要があります。

1. インタラクティブ要素の最小サイズ規定

WCAG 2.5.5（ターゲットのサイズ）に基づき、タッチターゲットは最低48x48px（または余白を含めて確保）とするルールをコンポーネントのバウンディングボックスに定めます。ボタンコンポーネント自体が小さくても、パディングで48pxを死守する設計にします。

2. フォーカスリングのコンポーネント化

キーボード操作時のフォーカスインジケーター（outline）を、デザインシステムの各インタラクティブ要素（Button, Input, Checkboxなど）の「Variant（バリアント）」として標準装備させます。

—

4. 実用的な設定ファイル（JSON/YAML）のベストプラクティス構成例

Figma上で定義されたデザイントークンやアクセシビリティ規則を、コードベース（React, Vue, iOS, Androidなど）へシームレスに同期するための設定ファイルの構成例です。

Figma Tokens（またはFigma Variables API）から書き出されたデータを、Style Dictionary等のビルドツールで処理するためのセマンティックなデザイントークン設定（JSON）のベストプラクティスを共有します。

{
“color”: {
“surface”: {
“default”: {
“value”: “#FFFFFF”,
“type”: “color”,
“comment”: “ベース背景色。WCAG 2.1 AA/AAA基準の起点となるサーフェス。”
},
“inverse”: {
“value”: “#121212”,
“type”: “color”,
“comment”: “ダークモード用サーフェス、または反転要素の背景。”
}
},
“text”: {
“primary”: {
“value”: “#1A1A1A”,
“type”: “color”,
“accessibility”: {
“contrastRatioAgainstSurfaceDefault”: 14.2,
“wcag21Level”: “AAA”,
“targetUsage”: “本文、見出しなどの主要テキスト”
}
},
“muted”: {
“value”: “#595959”,
“type”: “color”,
“accessibility”: {
“contrastRatioAgainstSurfaceDefault”: 4.6,
“wcag21Level”: “AA”,
“targetUsage”: “補足テキスト、プレースホルダー（要検証）”
}
}
},
“interactive”: {
“focusRing”: {
“value”: “#005FCC”,
“type”: “color”,
“accessibility”: {
“contrastRatioAgainstSurfaceDefault”: 4.8,
“wcag21Level”: “AA”,
“targetUsage”: “キーボードフォーカス時のアウトライン専用色。非フォーカス時は不可視”
}
}
}
},
“layout”: {
“touchTarget”: {
“minWidth”: {
“value”: “48px”,
“type”: “dimension”,
“accessibility”: {
“standard”: “WCAG 2.5.5 Target Size”,
“enforcement”: “strict”
}
},
“minHeight”: {
“value”: “48px”,
“type”: “dimension”,
“accessibility”: {
“standard”: “WCAG 2.5.5 Target Size”,
“enforcement”: “strict”
}
}
}
}
}

このJSONを基盤としてCI/CDパイプラインに組み込むことで、Figma上のアクセシビリティ定義とコードベースのCSS/Design Tokenが完全に同期し、手戻りのないインクルーシブ・デザイン体制が完成します。

—

結び：エンジニアとデザイナーの共通言語としてのa11y

アクセシビリティ対応は、慈善事業や「やらなければいけない法規対応」ではありません。プロダクトの品質、コードの美しさ、そしてUXの成熟度を測るリトマス試験紙です。

Figmaを単なる「絵を描くツール」として使うのはもう止めましょう。Figmaを「アクセシビリティと構造の仕様が最初に定義される最上流のIDE（統合開発環境）」として捉え直した瞬間から、あなたのチームの開発スピードとプロダクトの信頼性は劇的に跳ね上がります。

さあ、今日のスプリントから、レイヤー順序の整理とコントラスト変数の適用をチームに導入しましょう。プロの仕事を見せつける時です。