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