デザインレビューで配色を確認するときのチェックポイント

デザインレビューでは「この青が好き」「もう少し明るく」といった感想だけで配色を決めると、修正の理由が曖昧になりがちです。確認したいのは、伝える情報の優先順位、文字や操作部品の見分けやすさ、サイト全体のまとまりです。WEBページのデザイン案を関係者で確認するときに使える順序と、指摘を具体的な修正につなげる方法を紹介します。

まず色の役割と情報の優先順位を確認する

画面を確認する前に、そのページで最も伝えたい情報と、読者に取ってほしい操作を共有します。たとえば申込みページなら、日時・参加条件などの説明を読んだ後で、申込みボタンを見つけられるかが検討点です。

• 視線の流れ：見出し・本文・申込みボタンのうち、強調すべき部分に色の違いが使われているか。強調色が複数の装飾に散っていないか。
• 画面のまとまり：同じ役割のカードや見出しに別の色が使われていないか。セクションの切替は背景色だけでなく余白や線でも分かるか。
• 操作と状態：通常時、ホバー（ポインターを重ねた状態）、選択中、エラー時を比較できる資料があるか。色だけで意味を伝えず、文言や形も用意されているか。
• 背景との組み合わせ：小さな補足文字、ボタン内の文字、必要なアイコンや枠線が周囲の色に埋もれないか。

「派手すぎる」などの印象は修正案の出発点にはなりますが、どの要素が何を妨げているかまで特定してから判断すると、好みだけの議論を避けられます。

具体例：薄い補足文字と申込みボタンを見直す

架空のイベント申込みページで、淡い背景に小さな補足文字と青いボタンを配置した例を考えます。HEX（ヘックス）は、色を16進数のコードで表す方式です。レビュー前後の配色を次のように比較します。

WCAG（WEBコンテンツのアクセシビリティ指針）の計算方法によると、補足文字と説明エリアの背景のコントラスト比は修正前が約2.78:1、修正後が約5.75:1です。白いボタン文字とボタン背景は、修正前が約3.57:1、修正後が約7.22:1になります。いずれも修正後は通常サイズの文字に必要な4.5:1以上です。数値は指定した不透明な2色の組み合わせに対する計算結果です。

文字とは別に、操作部品やアイコンの識別に必要な視覚情報は、隣接色と原則3:1以上のコントラストが求められます。色だけで状態が伝わらない場合は、ラベル・下線・形の違いも確認します。

レビューの指摘は「場所・理由・再確認条件」で残す

修正コメントには、対象画面と要素、問題が起きる背景や状態、変更の目的、修正案を記録します。「薄い文字を濃くする」ではなく、「申込み案内の補足文字は、説明エリアの背景上で通常サイズの文字のコントラスト基準を満たすよう変更する」と書くと判断しやすくなります。

修正後は、同じ背景・文字サイズ・操作状態で比較し直します。パソコン用だけでなくスマートフォン用のデザインや、ボタンのホバー・フォーカス（キーボード操作などで対象になった状態）も確認します。色の変更が別の部品に影響していれば、そこも再レビューの対象です。

最後に「採用する配色」「保留した指摘」「次に確認する担当」を分けて記録します。配色レビューのゴールは全員の好みを一致させることではなく、画面の目的に照らして色の使い方を説明でき、修正結果を確かめられる状態にすることです。