Google Stitch でUIを作るとき、「見た目がきれい」「使いやすそう」には意識が向くが、「アクセシビリティ（誰でも使えるか）」を確認することは後回しになりやすい。私自身、Stitch で作ったUIをユーザーテストに持ち込んで、高齢者ユーザーが「文字が読めない」「ボタンが押せない」と言った経験がある。
この記事では、Google Stitch でUIを作る際にアクセシビリティ上の問題を防ぐための具体的な方法を整理する。Stitch のプロンプトでできることと、Stitch だけでは限界があって別途確認が必要なことを分けて説明する。
結論から言うと
Google Stitch は「アクセシビリティに配慮したUIを作って」とプロンプトに明記することで、ある程度アクセシビリティを意識した出力を得られる。ただし、カラーコントラスト比・タッチターゲットサイズ・スクリーンリーダー対応などの詳細な検証は、Stitch の出力を確認した後に別途ツールを使ってチェックする必要がある。Stitch はスタートラインを引き上げてくれるが、アクセシビリティの保証まではしてくれない。
アクセシビリティとは何か、なぜUIで重要か
アクセシビリティとは、「障害のある人・高齢者・特定の状況下にある人を含む、できるだけ多くの人が使えるUI設計」のことだ。視覚障害・色覚異常・運動障害・認知障害など、さまざまな特性を持つユーザーが存在する。
アクセシビリティを意識するべき理由は「道義的な正しさ」だけではない。日本でも障害者差別解消法の改正（2024年施行）により、合理的配慮の提供が法的に求められる場面が増えた。また、アクセシビリティの高いUIは「誰でも使いやすい」ため、高齢者・スマートフォン操作が苦手なユーザー・屋外での利用など、幅広いシナリオで使いやすさが上がる。SEOにも好影響があることが知られている。
Stitch がデフォルトで苦手なアクセシビリティ課題
実際に Stitch でUIを作って気づいたアクセシビリティ上の典型的な問題は3つある。①カラーコントラスト不足（背景色とテキスト色の差が小さく読みにくい）、②タッチターゲットの小ささ（ボタンやリンクの当たり判定が44px未満になりやすい）、③フォントサイズの小ささ（本文テキストが14px以下になることがある）。これらはプロンプトで意識的に指定しないと、見た目を優先した結果として生まれやすい。
WCAG（ウェブコンテンツアクセシビリティガイドライン）の基本
アクセシビリティの国際基準として、W3Cが定めるWCAG（Web Content Accessibility Guidelines）がある。2024年時点で最新はWCAG 2.2で、A・AA・AAAの3レベルがある。多くのWebサービスではWCAG 2.1 AAの基準を目標にすることが一般的だ。主な要件として、通常テキストのカラーコントラスト比が4.5:1以上、大きなテキストは3:1以上、タッチターゲットは44×44px以上などがある。Stitch で作ったUIがこれらの基準を満たすか確認することが、実務での最低限の品質チェックになる。
見落としやすい5つのポイントと対処法
Stitch でUIを作る際に、アクセシビリティ上で見落としやすいポイントを5つ整理する。それぞれプロンプトでどう対処するか、Stitch 外でどう確認するかをセットで説明する。
ポイント1：カラーコントラスト
最も見落とされやすい問題がカラーコントラストだ。グレーのテキストをグレーの背景に置く、薄い青のボタンテキストを白背景に置く——見た目はおしゃれでも、コントラスト比が4.5:1を下回ると多くのユーザーに読みにくい。
プロンプトでの対処：「WCAG AA基準のカラーコントラストを確保する」「テキストと背景の読みやすさを最優先にする」と明記する。例：「背景白・テキスト黒に近いダークグレー（#333333以上の暗さ）で、コントラスト比4.5:1以上を確保したレイアウト」のように具体的に書くと効果がある。
Stitch 外での確認：出力されたUIのカラーコードを確認し、WebAIM Contrast Checker（contrast-checker.app）などのツールで実際のコントラスト比を計算する。Figmaに移行後はFigmaのアクセシビリティプラグイン（Stark等）で一括チェックできる。
ポイント2：タッチターゲットのサイズ
スマートフォンでの操作を想定するとき、ボタンや選択肢の「当たり判定」が小さすぎると押し間違いが多発する。AppleのHuman Interface Guidelinesでは44×44pt以上、GoogleのMaterial Designでは48×48dp以上を推奨している。Stitch が生成したUIでは、視覚的なボタンサイズが小さくても当たり判定を広く取ることを意識する必要がある。
プロンプトでの対処：「モバイル向けUI、すべてのインタラクティブ要素（ボタン・リンク・チェックボックス）のタッチターゲットを44px以上に設定」と明記する。特に密集したリストやメニューアイテムを設計するときは「各アイテムの間に十分な余白を設けてタップミスを防ぐ」を追加すると効果的だ。
ポイント3：フォントサイズと可読性
デザインツールで見ると問題なく見えるフォントサイズが、実際のデバイスで見ると小さすぎるケースがある。本文テキストの推奨最小サイズはWebなら16px、モバイルアプリなら14〜16px。Stitch が生成したUIのフォントサイズが12〜13pxになっていることがあり、これは高齢者や視力が弱いユーザーには読みにくい。
プロンプトでの対処：「本文テキストは最小16px、補足テキストは最小14px」と数値で指定する。「読みやすさ最優先、フォントサイズを十分に大きく取る」という指示も有効だ。特に情報量が多いダッシュボードや管理画面では、「データ量より読みやすさを優先したレイアウト」と書くと情報密度が適切に調整される。
ポイント4：フォーカス状態の視認性
キーボードで操作するユーザーや、スクリーンリーダーを使うユーザーにとって、「今どこにフォーカスが当たっているか」が視覚的に分かることが重要だ。Stitch が生成する静的UIでは、このフォーカス状態が考慮されないことが多い。ボタンやリンクのフォーカスリングが適切にデザインされていないと、キーボードだけで操作するユーザーには使えないUIになる。
プロンプトでの対処：「キーボード操作を想定し、フォーカス状態を明確に表現する」と追記する。Figmaに移行した際に、各インタラクティブ要素のフォーカス状態のバリアントを必ず作成するようにする。
ポイント5：色だけに頼らない情報伝達
エラーを「赤色」だけで表現する、成功を「緑色」だけで表現する——色覚異常のユーザーにとって、色だけに頼った情報伝達は機能しない。日本人男性の約5%が何らかの色覚異常を持つとされており、無視できない割合だ。
プロンプトでの対処：「色だけでなくアイコンやテキストラベルでも状態を伝える」と明記する。「エラー状態は赤色＋エラーアイコン＋エラーテキストの3要素で表現」のように具体的に書くと効果がある。また「色覚異常（赤緑色覚異常）のユーザーでも区別できる配色」と指定することで、区別しやすいカラーパレットが選ばれやすくなる。
アクセシビリティを意識したプロンプトの例文
具体的に、アクセシビリティ要件を組み込んだプロンプトの例を示す。これをそのまま使えるようテンプレート化した。
基本テンプレート：「[ターゲットユーザー]向け、[サービス名/画面種別]。アクセシビリティ要件：①WCAG AA基準のカラーコントラスト確保（テキストと背景のコントラスト比4.5:1以上）、②タッチターゲット44px以上、③本文テキスト最小16px、④色だけでなくアイコン・テキストで状態を伝えるデザイン、⑤シンプルで直感的なレイアウト」
このテンプレートに画面固有の要件を加えることで、アクセシビリティを最初から組み込んだUIの初稿が得られる。
Stitch の後に確認すべきアクセシビリティチェックリスト
Stitch でUIの初稿ができた後、実装前に確認すべきポイントをチェックリスト形式でまとめる。
- カラーコントラスト比：WebAIM Contrast Checker でテキストと背景の比率を確認（4.5:1以上）
- タッチターゲットサイズ：すべてのボタン・リンク・フォーム要素が44×44px以上か確認
- フォントサイズ：本文16px以上、補助テキスト14px以上か確認
- エラー・警告の表現：色以外の要素（アイコン・テキスト）でも状態が伝わるか確認
- 画像の代替テキスト：実装時にalt属性を設定する箇所を洗い出す
- フォームのラベル：入力フィールドに対応するラベルが明確に配置されているか確認
よくある質問（FAQ）
Q1. Google Stitch のプロンプトにアクセシビリティと書くだけで対応できますか？
A. ある程度は効果がありますが、完全な対応は難しいです。プロンプトで大まかな方向性を指定し、出力後に専用ツール（Figmaのアクセシビリティプラグイン、WebAIM Contrast Checker等）で詳細確認をすることが現実的なアプローチです。
Q2. アクセシビリティを確保するとデザインがダサくなりませんか？
A. そんなことはありません。Apple・Google・Airbnbなど、デザインで高く評価されるサービスはすべてWCAG基準を満たしています。「アクセシブルなデザイン＝地味」という思い込みは誤りです。コントラストを確保しつつ美しいカラーパレットを選ぶことは十分に可能です。
Q3. 色覚異常に対応した配色を Stitch に指定する方法はありますか？
A. 「赤緑色覚異常のユーザーでも区別できる配色」と明記するか、具体的に「赤と緑を主要なステータスカラーとして使わない」と指定する方法があります。ブルー・オレンジ・パープルの組み合わせは色覚異常でも区別しやすいとされています。
Q4. 高齢者向けUIを作る際に Stitch のプロンプトで特に注意することは？
A. フォントサイズを大きく（本文18〜20px以上）、タッチターゲットを大きく（56px以上）、情報を詰め込まずシンプルに、という3点をプロンプトに明記することが効果的です。「60代以上の高齢者向け」とターゲットを書くだけでも、Stitch が適切なサイズ・余白のUIを出しやすくなります。
Q5. アクセシビリティを確認する無料ツールはありますか？
A. WebAIM Contrast Checker（コントラスト比確認）、axe DevTools（ブラウザ拡張機能・実装後の確認）、Figmaのアクセシビリティプラグイン「Stark」（デザイン段階での確認）が無料で使えるツールとして実用的です。
Q6. アクセシビリティ対応はリリース前でないと対応できませんか？
A. 設計段階（UIデザイン時）に対応するのが最もコストが低く、実装後の修正は大きな手戻りになります。Google Stitch でUIを作る段階からアクセシビリティを意識することで、後工程での修正コストを大幅に下げられます。
まとめ
Google Stitch でUIを作るとき、アクセシビリティは「後から対応するもの」ではなく「最初から設計に組み込むもの」だ。プロンプトの段階で5つのポイント（コントラスト・タッチターゲット・フォントサイズ・フォーカス状態・色以外の情報伝達）を意識することで、Stitch の出力が最初からアクセシビリティの基準に近いUIになる。
アクセシビリティ対応は「特別なユーザーのための特別な配慮」ではない。誰もがある状況下では「使いにくい」と感じる可能性がある。強い日光の下でスマートフォンを見るとき、片手が塞がっているとき、目が疲れているとき——アクセシビリティが高いUIは、こういった全ての状況で使いやすい。Stitch でのUI設計に、今日からこの視点を加えてほしい。
