TH01-10
「パッと見て、どこを一番に読めばいいかわからない」
そんなデザインに欠けているのが、4原則の最後の一つ、「対比（Contrast）」です。
対比とは、要素同士に目に見える「差」をつけることで、情報の優先順位（ヒエラルキー）を明確にする技術です。
これが機能して初めて、ユーザーの視線はあなたの意図通りに動き出します。
目次
対比の目的：ユーザーの「迷い」をゼロにする
Webサイトを訪れたユーザーは、一言一句すべてを読むわけではありません。
無意識に「自分に関係のある情報」を探してスキャンしています。
対比が弱いと、すべての情報が同じ強さで主張し合い、結果として「何も印象に残らない」ということになってしまいます。
対比を強くつけることは、ユーザーに対して「まずここを見て、次にここを見てください」というガイドを引くことなのです。
対比を生む「ロジカルな手法」
「センス」ではなく、以下の具体的な数値を操作することで、誰でも明確な対比を作ることができます。
- サイズ（大小）：重要な見出しは大きく、補足情報は小さく。
- 太さ（ウェイト）：キャッチコピーは極太に、本文は標準的に。
- 色（カラー）：重要なボタンにはアクセントカラーを、背景にはベースカラーを。
- 空間（余白）：目立たせたい要素の周りには、あえて広大な余白を取る。
「中途半端な差」はただのミスに見える
対比をつける際の鉄則は、「やるなら大胆にやる」ことです。
- NGな例：フォントサイズを16pxと14pxにする（「ズレているだけ？」と誤解される）。
- OKな例：フォントサイズを32pxと14pxにする（「明らかに役割が違う」と伝わる）。
ロジックの視点では、対比とは「役割の違いを視覚的な距離感として翻訳する作業」です。
中途半端な差は、ロジックの曖昧さを露呈させてしまいます。
視線の流れ（Zパターン・Fパターン）との連動
対比によって作られた「情報の山」を、ユーザーの視線移動の癖に合わせて配置します。
- 最も強い対比（特大の見出し）で視線をキャッチする。
- 次に強い対比（画像やリード文）へ視線を流す。
- 最終的にコンバージョン（お問い合わせボタンなど）へ誘導する。
このように、対比は単なる装飾ではなく、「視線の滑り台」を作るための設計図となります。
対比は「親切心」
情報の優先順位をはっきりさせることは、ユーザーに「探す手間」をかけさせないこと（= 親切に接すること）でもあります。
「全部大事」は「全部大事ではない」と同じ。
勇気を持って要素に強弱をつけ、情報の主役を際立たせましょう。