コントラスト ― 差をはっきりつける

「コントラスト」とは何か

コントラストとは、異なる要素にはっきりとした差をつける原則です。大きいと小さい、太いと細い、明るいと暗い。こうした差をはっきりつけることで、デザインにメリハリが生まれ、何が重要かが一目でわかるようになります。

コントラストの鉄則は「やるなら大胆に」。中途半端な差は、差ではなく「ミス」に見えます。

なぜコントラストが必要なのか

すべての要素が同じ大きさ、同じ色、同じ太さのデザインは、「のっぺり」して見えます。読み手はどこから読めばいいかわからず、結局何も伝わりません。

コントラストをつけることで、「最初にここを見てほしい」「次にここを見てほしい」という視覚的な優先順位（ヒエラルキー）が生まれます。

コントラストの種類

弱いコントラスト

見出しテキスト

本文テキストが入ります。サイズの差がほとんどなく、どちらが見出しかわかりにくい。

強いコントラスト

見出しテキスト

本文テキストが入ります。サイズに大きな差があるので、一目で見出しだとわかります。

コントラストの実践テクニック

1. 見出しと本文の差を大胆につける

見出しを本文より少し大きくする程度では不十分です。見出しは本文の1.5〜2倍以上のサイズにしましょう。太さも変えると、さらにメリハリが出ます。

2. 色のコントラストで「目立たせる」

全部同じ色 アクセントで目立たせる CTA 目立たせたいのは1〜2箇所だけ。全部目立たせると何も目立たない

最も伝えたい情報（CTA、価格、キャッチコピーなど）にはアクセントカラーを使います。ただし、目立たせたい要素は画面の中で1〜2箇所に限定するのがコツ。全部目立たせると、何も目立ちません。

3. 余白のコントラストでリズムを作る

セクション間は大きな余白、段落間は小さな余白。この差をはっきりつけることで、デザインにリズムが生まれ、長い文章でも読みやすくなります。

「視覚的ヒエラルキー」の考え方

コントラストの目的は、情報に優先順位をつけることです。この優先順位を「視覚的ヒエラルキー」と呼びます。

• 第1レベル：最初に目に入るもの（大きな見出し、メイン画像）
• 第2レベル：次に読まれるもの（小見出し、重要なポイント）
• 第3レベル：詳細情報（本文、補足テキスト）

この3段階を意識してコントラストをつけると、読み手は自然に「重要な情報 → 詳細」の順に読んでくれます。

キャッチコピー

第1レベル ― 最初に目に入る

サブ見出しテキスト

第2レベル ― 次に読まれる

ここに本文が入ります。補足的な情報や詳細を記載するエリアです。読み手は自然と最後に目を通します。

第3レベル ― 詳細情報

よくある失敗

• 差が中途半端：16pxと18pxの差は、コントラストではなく「揃え忘れ」に見えます。差をつけるなら大胆に。
• 全部を目立たせようとする：太字だらけ、色だらけのデザインは、結局何も目立ちません。強調は「引き算」で考えましょう。
• コントラストだけに頼る：近接・整列・反復ができていない状態でコントラストだけ強くしても、ただうるさいデザインになります。4原則はセットで効果を発揮します。

4原則の振り返り

まとめ

4つの基本原則は、デザインの「型」です。まずは型を守る。型を守るだけで、デザインの質は劇的に変わります。

この章で学んだ4原則は、今後のすべてのデザインで使い続ける土台です。次の章では「色と配色」について学んでいきましょう。