コントラストとは?デザインでの意味と効果・使い方をわかりやすく解説

デザインにおけるコントラストの基本

まずは、コントラストという言葉の意味と、デザインで差をつけると何が変わるのかを押さえましょう。

コントラストとは

コントラストとは、英語の「contrast」をそのままカタカナにした言葉で、日本語では「対比」や「対照」と訳されます。

デザインでいうコントラストは、要素同士の見た目に差をつけて、違いをはっきりさせることを指します。

たとえば、見出しを本文より大きく太くする、一番押してほしいボタンだけ色を変える、といった工夫はどれもコントラストです。

なお、テレビや写真の世界では「画面の明るい部分と暗い部分の差」のこともコントラストと呼びますが、この記事では写真の明暗の調整は扱わず、デザインの中で要素に差をつける考え方に絞って解説します。

コントラストは、アメリカのデザイナー、ロビン・ウィリアムズの著書『ノンデザイナーズ・デザインブック』で紹介されている、デザインの4つの基本原則(近接・整列・反復・コントラスト)の1つでもあります(書籍はこの記事の最後で紹介しています)。

同書では、コントラストの原則を「要素同士が同じでないなら、はっきりと違うものにする」という趣旨で説明しています。

つまりコントラストとは、役割の違う要素を、見た目でもはっきり違うものとして見せることだと考えるとわかりやすいでしょう。

コントラストの3つの効果

デザインにコントラストをつけると、主に「目立たせる」「順番を伝える」「メリハリが出る」という3つの効果があります。

• 目立たせたいものが目立つ
  周りと違う見た目の要素は、自然と目に入ります。
  ページの中で一番伝えたい情報を、ひと目で見つけてもらえます。
• 情報の優先順位が伝わる
  大きいもの・濃いものから順に目に入りやすいため、差の大きさで「どれが大事で、どの順番で読めばいいか」を伝えられます。
  文字の大きさの差で優先順位を伝える考え方は、情報の階層の記事でも解説しています。
• デザインにメリハリが出る
  すべてが同じ調子だと、デザインは単調で退屈に見えます。
  強い部分と弱い部分があると、画面にリズムが生まれ、最後まで見てもらいやすくなります。

同じ内容のイベント告知を、コントラストのある・なしで比べてみましょう。

NGの見本では、タイトル・日時・補足・申し込みの案内がすべて同じ見た目で並んでいるため、どれが一番大事なのかを読み比べないと判断できません。

OKの見本では、タイトルを大きく太くし、補足は小さく淡い色に、申し込みは塗りのあるボタンにしたことで、「何の告知か」「どこを押すか」がひと目で伝わります。

中途半端な差は「ずれ」に見える

コントラストをつけるときは、差を思い切って大きくするのがコツです。

差が小さいと、見る人には「わざと変えた」のではなく「うっかりずれた」ように見えてしまうためです。

前に紹介した『ノンデザイナーズ・デザインブック』でも、少しだけ違う要素同士はコントラストにならず、ちぐはぐな印象を生むと説明されています。

見出しと本文の大きさの差を変えて比べてみましょう。

NGの見本は、見出しの文字が本文よりほんの少し大きいだけなので、見出しとしての役割が伝わらず、文字の大きさを揃え損ねたようにも見えます。

OKの見本は、大きさと太さの両方ではっきり差をつけたことで、迷わず「ここからこの話が始まる」と分かります。

見出しと本文の文字サイズの比率(ジャンプ率)の決め方は、ジャンプ率で変わるメッセージの伝わり方で詳しく解説しています。

コントラストの使い方

ここからは、デザインの中で実際にどんな要素で差をつけられるのか、そして差をつけるときのコツを見ていきます。

差をつけられる要素の一覧

コントラストは、文字の大きさだけでなく、太さ・色・明暗・形・余白など、見た目を作るあらゆる要素でつけられます。

どの要素で差をつけるかによって印象が変わるので、まずは選択肢を知っておきましょう。

差をつける要素	差のつけ方の例	詳しく解説している記事
大きさ	見出しを本文よりはっきり大きくする	ジャンプ率
太さ	強調したい言葉だけ太字にする	文字のサイズ・太さ・間隔とは?
色	一番目立たせたい部分にだけ強調色を使う	強調色の使い方とは?
明暗	濃い背景に明るい文字を置く、文字と背景の明るさに差をつける	コントラスト比とは?
形	四角が並ぶ中に1つだけ丸を置く	ー
余白・密度	情報を詰めた部分と、広く空けた部分を作る	余白のコントラストとは?

それぞれの要素で差をつけた例を、小さな見本で見てみましょう。

見本Aは文字の大きさ、見本Bは文字の太さ、見本Cは色、見本Dは形だけを変えていますが、どれも差をつけた部分に自然と目が行きます。

色の差は、黄色と薄いベージュのように色みが違うだけでなく、明るさにも差があると、よりはっきり目立ちます。

同じ色でも、周りの色との組み合わせによって明るく見えたり暗く見えたりすることがあり、この見え方の性質は背景色による色の見え方とは?で解説しています。

一番目立たせたいものを1つ決める

コントラストをつける前に、まず「この画面で一番目立たせたいものは何か」を1つに決めましょう。

コントラストは「周りと違う」ことで目立つ仕組みなので、あれもこれも強調すると、強調同士がぶつかって結局どれも目立たなくなるためです。

主役を1つに決める手順と、脇役との差のつけ方は主役と脇役とは?で解説しています。

同じ商品カードで、強調する場所の数を変えて比べてみます。

NGの見本では、「残りわずか」「商品名」「送料無料」「価格」がそれぞれ大きさ・太さ・色で強調されているため、目が行き場を失ってしまいます。

OKの見本では、価格だけを大きく太くしたことで、強調が1か所に集まり、ひと目で値段が分かります。

控えめにした補足情報も読めなくなるわけではなく、「主役のあとに読む情報」として自然に後ろへ下がっています。

色を使って情報に強弱をつける考え方は、情報の優先順位と色とは?も参考にしてください。

差は2つ以上の要素を組み合わせる

差をつけるときは、「大きさと太さ」「色と太さ」のように、2つ以上の要素を組み合わせると、より確実に伝わります。

1つの要素だけの差は、見る環境や見る人によって気づかれにくいことがあるためです。

特に色だけの差は注意が必要で、色の見え方には個人差があり、赤と緑のように見分けにくい組み合わせがある人もいるため、色だけで区別させると、違いに気づけない人が出てきます。

Webのアクセシビリティ(障害の有無や年齢にかかわらず使いやすくすること)の国際的なガイドラインWCAG 2.2でも、色だけで情報を伝えないことを求めています(WCAG 2.2 達成基準1.4.1 色の使用・WAIC日本語訳)。

WCAGは、目の見え方や年齢、使う場所にかかわらず、だれでも情報を受け取れるWebにするための、世界共通のルールブックのようなものです。

色の見分けにくい人、小さな文字が読みにくい高齢の人、日差しの強い屋外でスマートフォンを見ている人など、さまざまな人や場面を想定して作られています(アクセシビリティの基本はアクセシビリティとは?で解説しています)。

たとえば強調したい言葉を赤くするなら、太字も組み合わせ、注意書きなら「重要」のような言葉も添えておくと、色の違いが分かりにくい人にも強調が伝わります(色の見え方の違いへの配慮は色のアクセシビリティとは?で解説しています)。

文字と背景の明るさの差には基準がある

文字と背景の明るさの差(明暗のコントラスト)は、目立たせるためだけでなく、文字を読めるようにするためにも欠かせません。

明るさの差が小さいと、薄いグレーの背景に白い文字を置いたときのように、文字そのものが読みにくくなるためです。

この明るさの差は「コントラスト比」という数値で測ることができ、WCAG 2.2では、通常の文字は背景とのコントラスト比を4.5:1以上、大きな文字は3:1以上にすることを求めています(WCAG 2.2 達成基準1.4.3 コントラスト(最低限)・WAIC日本語訳)。

数値の感覚をつかむために、白い背景に灰色の文字を置いた場合で比べてみましょう。

• 黒(#000000):21:1(いちばん差が大きい)
• 濃いグレー(#595959):約7:1(十分に読みやすい)
• 中くらいのグレー(#767676):約4.5:1(通常の文字の基準をぎりぎり満たす)
• 薄いグレー(#999999):約2.8:1(通常の文字の基準に届かない)

コントラスト比の意味や測り方は、コントラスト比とは?WCAGの基準をやさしく解説で詳しく解説しています。

強調のために「控えめ」にする文字も、この基準を下回るほど薄くしないように気をつけましょう。

実践のポイント

コントラストをつけるときに陥りやすい失敗と、よくある疑問をまとめます。

注意点・よくある間違い

• 見出しを本文より少しだけ大きくするなど、差が小さすぎることがあります。
  差が小さいと、意図した強調ではなく「ずれ」に見えるので、ひと目で分かるくらい思い切って差をつけましょう。
• 伝えたいことが多くて、ほぼすべての要素を強調してしまうことがあります。
  強調が多いほど1つずつの効果は弱まるので、一番目立たせたいものを1つ決め、ほかは控えめにしましょう。
• 赤い文字だけ、緑のアイコンだけのように、色の違いだけで区別させてしまうことがあります。
  色の見え方には個人差があるので、太さや形、ラベルの言葉なども組み合わせましょう。
• 補足情報を控えめにしようとして、背景との明るさの差が足りないほど文字を薄くしてしまうことがあります。
  控えめにしても読める必要があるので、文字と背景のコントラスト比を確認しましょう。
• 強い色を何色も使って、それぞれを目立たせようとすることがあります。
  派手な色同士が並ぶと互いに打ち消し合うので、強調に使う色は絞り、地の部分は落ち着いた色にしておきましょう。

よくある質問

• Q. コントラストとコントラスト比は同じもの?
  A. 関係はありますが、指す範囲が違います。
  デザインのコントラストは、大きさ・太さ・色・形など、要素同士のあらゆる差のことです。
  コントラスト比は、そのうち「2つの色の明るさの差」を数値にしたもので、主に文字の読みやすさを確かめるために使います。
• Q. 「コントラストが強い」「コントラストが弱い」とは?
  A. 要素同士の差が大きいことを「コントラストが強い」、差が小さいことを「コントラストが弱い」と表現します。
  強いコントラストははっきりした力強い印象に、弱いコントラストは穏やかで落ち着いた印象になりやすく、どちらが正解というわけではありません。
  ただし、どこが大事かが伝わらないほど差が小さい場合は、見直しが必要です。
• Q. 写真のコントラストとは違う?
  A. 言葉は同じですが、扱う対象が違います。
  写真のコントラストは、1枚の写真の中の明るい部分と暗い部分の差のことで、画像編集ソフトで調整します。
  この記事で扱ったデザインのコントラストは、画面の中の文字・ボタン・図形などの要素同士の差のことです。
• Q. 余白でもコントラストはつけられる?
  A. つけられます。
  情報を詰めた部分と広く空けた部分を作ると、空いている部分が目立ち、画面にメリハリが生まれます。
  たとえば、文字や写真をぎっしり並べたチラシはにぎやかでお得な印象になり、広い余白の真ん中に商品写真と短い一文だけを置いた広告は、落ち着いた高級な印象になって、商品に目が集まります。
  詳しくは余白のコントラストとは?で解説しています。

まとめ

デザインにおけるコントラストとは、要素同士の見た目に差をつけて違いをはっきりさせることで、目立たせたいものを目立たせ、情報の優先順位を伝え、デザインにメリハリを出す効果があります。

差は大きさ・太さ・色・明暗・形・余白でつけられ、中途半端にせず思い切ってつけること、強調するものを1つに絞ること、色だけに頼らないことがポイントです。

まずは自分が作ったバナーやページを1つ開き、「一番目立たせたいもの」が本当に一番目立っているかを、少し離れた位置から眺めて確かめてみてください。

あわせて読みたい書籍

コントラストをはじめとするデザインの4原則を、たくさんの作例と一緒に学びたい方は、こちらの書籍もあわせてチェックしてみてください。