UI/UX デザイナーの価値は、見栄えのよいビジュアルをつくることだけではありません。プロダクトのアクセシビリティ基準とデザインシステムの一貫性を守り、開発チームと明確なデザインガイドを共有しながら進めることにもあります。
読みやすさとコントラスト比
視力が弱い利用者や、屋外の強い光の下でスマートフォンを見る場面でも文字を読めるように、テキストと背景のコントラスト比を確保します。WCAG 2.x の達成基準 AA では、通常サイズのテキストに 4.5:1 以上（大きな文字は 3:1 以上）のコントラスト比が求められます。色の値を調整しながら、この基準を満たす練習をします。
デザイントークンとスタイルガイド
プロジェクトを一貫性を保ったまま拡張していくには、その都度任意のカラーコードや余白のピクセル値を足すのではなく、社内デザインシステムのカラーパレットや余白のトークン（デザイントークン）を使う必要があります。トークンに沿って判断し、一貫性を守る力を育てます。
CTAと視覚的な優先順位
画面の中で最も取ってほしい行動をはっきり示すために、CTA（Call to Action）ボタンの優先順位を整理します。プライマリボタンとセカンダリボタンの見え方をはっきり分け、モーダル内の「確認」と「キャンセル」の並び順のような細かな基準も学びます。並び順はプラットフォームや社内ガイドによって異なるため、まず自社のルールを確認する習慣をつけます。
コントラスト改善の例
架空のシナリオです。実装された画面で、本文と補足テキストの色がガイドと違い、補足テキストが読みにくくなっています。プレイヤーはコントラストのチェックツールで比率を測り、WCAG の AA 基準を満たす代わりの色トークンを選んで、UI とスタイルガイドを更新します。
デザイナー研修のチェック
- テキストのコントラスト比（通常のテキストで 4.5:1）を満たしているか
- デザイントークンとガイドラインを一貫して使っているか
- モバイルのタップ領域が十分な大きさ（目安として 44px 以上）になっているか
実務シナリオをクエストで体験してみませんか
開発、PMO、マークアップ、企画、デザインの職種別オンボーディングクエストは、First Run のデモで実際にプレイできます。