ビジュアルデザイン原則

ビジュアルデザイン原則とは、情報を視覚的に整理し、ユーザーが直感的に理解・操作できるインターフェースを作るための基本的な指針を指す。デザインの4原則として知られる「コントラスト（Contrast）」「繰り返し（Repetition）」「整列（Alignment）」「近接（Proximity）」は、タイポグラフィ・カラー・余白・グリッドすべてに横断的に適用される考え方であり、これらを意識するだけでUI品質は大きく向上する。

カラー設計ではアクセシビリティの観点が欠かせない。WCAG（Web Content Accessibility Guidelines）では、通常テキストと背景のコントラスト比として4.5:1以上を要求しており、視覚障害やディスプレイ環境の違いに対応するための最低基準となる。カラーだけで情報を伝える設計（「赤いボタンが削除です」など）は色覚多様性のあるユーザーを排除するため、形・テキスト・アイコンを組み合わせた多重の情報伝達が必要である。

デザイントークンは色・タイポグラフィ・スペーシング・角丸などのデザイン上の決定事項を変数として定義する仕組みである。color-primaryやspacing-mdのような意味論的な名前でトークンを定義することで、デザインの一貫性を保ちながらテーマ変更や多ブランド対応を容易にする。デザイントークンはデザインツール（Figma）とコード実装の間の契約としても機能し、デザインと実装の乖離を防ぐ。

コードレビューで着目するポイント

テキストと背景のコントラスト比が4.5:1（大きなテキストは3:1）以上を満たしているか
スペーシングやサイズがデザイントークンやデザインシステムの変数で定義されており、マジックナンバーが散在していないか
フォントサイズ・行間・フォントウェイトが情報の階層（見出し・本文・補足）を明確に反映しているか
コントラスト・テキスト・アイコンを組み合わせた多重の情報伝達になっているか（カラーのみに依存していないか）
グリッドシステムが統一されており、要素の配置に一貫性があるか
レスポンシブデザインでブレイクポイントが適切に設定されているか
ダークモード対応が必要な場合、CSS Custom Propertiesによるトークン切り替えが実装されているか

典型的なアンチパターン

マジックナンバーによるスペーシング: margin: 13px や padding: 7px のような任意の数値が散在すると、画面全体での余白の一貫性が失われ、視覚的なリズムが崩れる。4の倍数や8の倍数をベースにしたスペーシングスケールをデザイントークンとして定義し統一すべきである。

カラーのみによる状態の伝達: エラー状態を赤色のみで示すデザインは、色覚多様性（約5%の男性に存在する）のあるユーザーには伝わらない。赤色に加えてエラーアイコン・エラーテキストを組み合わせて情報を多重化する必要がある。

コントラスト比の軽視: ブランドカラーのライトグレーを小さい本文テキストに使うと、コントラスト比が不足して読みにくくなる。デザインツールで実装前にコントラスト比を確認し、AAレベル（4.5:1）以上を担保することが必須である。

参考リソース

標準: WCAG 2.1 - Webコンテンツのアクセシビリティガイドライン（コントラスト比の基準を含む）
書籍: 「The Non-Designer’s Design Book」（Robin Williams） - 4原則をわかりやすく解説したデザイン入門書
ツール: Figma Contrast Plugin - Figma上でコントラスト比をチェックするプラグイン
ツール: Coolors - アクセシブルなカラーパレット生成ツール
標準: Material Design / Apple HIG - タイポグラフィ・スペーシング・カラーの設計事例として参照価値が高い