目立たせるために色を増やしたら、余計に見づらくなりました。メリハリってどう作るんですか？
PORT編集部目立たせたい気持ちで足しすぎることはあります。色を増やさなくても差を作れます。文字の大きさ・太さ・明暗を比べて整理しましょう。
デザインのコントラストは、大きさ・太さ・明るさなどの差で読む順番を作ることです。主役を強くするだけでなく、周囲の強調を減らす方法もあります。
コントラストとは？
コントラストとは、大きさ・太さ・明るさなどの差を付けることです。例えば、割引率を大きな太字にし、説明を標準の文字にします。
コントラスト比とは？
コントラスト比とは、文字色と背景色の明るさの差を表す数値のことです。例えば、文字が読める組み合わせか、チェックツールで確認します。
50%OFF
対象商品をご確認ください
全てが競い、主役が弱い。
割引率を先に読める。
違いを使って主役を見せる
例えばセール告知なら「参加無料」を主役にするのか、「開催日時」を主役にするのかで、見る順番が変わります。全部を同じ大きさにすると選べません。主役を一つ決め、補足との違いをはっきり見せます。
| 差をつけるもの | 主役 | 補足 |
|---|---|---|
| 文字サイズ | 大きい見出し | 小さめの説明 |
| 太さ | 太字 | 標準の太さ |
| 明るさ | 濃い文字 | 淡い背景 |
強調が多いと主役が消える
割引率だけを大きく、濃く見せています。ほかの情報を弱めることで読む順番が生まれます。
文字の大きさ・太さ・色を変える
見出しと本文の文字サイズ、太さ、明度、色、形、余白の広さで差をつけられます。色だけに頼らず、白黒にしても主役が分かるか確認すると、強弱の設計を見直せます。
薄い文字は背景から見えにくい
最初に伝える一言を決める。
説明を標準の太さへ戻す。
主役が目立っていても、背景に埋もれていないか読む。
淡いグレーの文字を白背景に載せると、おしゃれでも読みにくい場合があります。長い本文は十分に濃い色を使い、写真の上に文字を載せるなら背景の明るさを調整します。小さい文字ほど読みやすさを優先しましょう。
太さと大きさで主役を作る
週末限定セール
50％OFF
対象商品をチェック
週末限定セール
50％OFF対象商品をチェック
全部が太字なら強調を減らす
すべての文字が太字、複数の強い色、目立つ装飾が三つも四つもあると、主役が消えます。一番見せたい要素を残し、それ以外の強調を一段落としてください。コントラストは「強くする」と「弱める」の両方で作れます。
小さくして主役が見えるか確認
大きさだけでは読みやすさを確保できない。
同じサイズでも背景との差が見える。
画像を小さく表示し、最初に目が行った場所を確認します。想定した主役と違うなら、色を足す前に大きさや余白を調整します。家族や友人に数秒だけ見せ、「何の案内か」を聞くのも有効です。
実例｜セール告知の主役を見せる
「50％OFF」「期間限定」「商品名」「送料無料」が全部赤い太字。大事な割引率も埋もれている。
割引率だけ大きく、濃い色で見せる。期間と送料は通常の太さに戻し、商品名を次に読む位置へ置く。
直す手順
- 最初の3秒で伝える一語を選ぶ。
- 主役と補足の大きさ・太さに差をつける。
- 画像を縮小して、想定した一語が先に見えるか確かめる。
よくある疑問
まとめ
メリハリとは派手な装飾の数ではありません。最初に伝える一つを選び、ほかの情報との違いをつけることです。
