このカラー、どっちが正解？見やすさと世界観を両立する配色のセンスを磨こう

現場で使えるデザインセンスを、2択クイズで身に付ける「デザインクイズチャレンジ」。

ウェブデザイナーのマスベサチです。

今回、わたしはデザインの見やすさと世界観の観点から「配色」についてのクイズを出題します。

普段、学校やスクールでデザイン初心者の方のデザインを拝見する中で「これはよくある」という事例を元にクイズを作成しましたので、デザインを学び始めた方のヒントになれば幸いです。

それでは早速、3問クイズを出します。

以下の3つの作例を見て、AとB、あなたはどちらの「配色」がよいと感じますか？

style

seodoc-block-introduction, grid width 8, m spacing

background

#fff

style

reading width, s spacing

1問目「内容がパッと目に入る配色はどっち？」（難易度★）

style

reading width, l spacing

2問目「世界観とマッチしている配色はどっち？」（難易度★★）

style

reading width, l spacing

3問目「文章が読みやすい配色はどっち？」（難易度★★★）

いかがでしたか？

わたしが考える答えは……

style

reading width, l spacing

1問目の答え：B

style

reading width, l spacing

2問目の答え：A

style

reading width, l spacing

3問目の答え：B

以上がわたしなりの解答です。

あなたがよいと感じた配色は、AとBどちらでしたか？

ではここからは、それぞれの作例のAとBで、何が異なっていたのか？を説明し、作例で用いられていたデザインテクニックについて紹介していきます。

※本コーナーの作例は、Adobe Illustratorを使って作られています。

Illustratorは、ロゴやイラストをはじめ、ポスターや名刺といった紙媒体のデザイン、さらにwebやアプリのUI設計まで対応できるデザインツール。

多くのプロが使っており、最新のAI機能も搭載しています。

ワンランク上のデザインを実現したい方や、プロフェッショナルなデザイナーを目指したい方は、ぜひAdobe Illustratorを使ってみてください。

すべてのデザインクイズを見る

style

reading width, l spacing

1．色の「コントラスト比」を意識して、情報を読みやすくする

まず、1問目を振り返ってみましょう。

この問題は、「内容がパッと目に入る配色はどっち？」というものでした。

わたしが選んだ答えは「B」でした。

作例AとBの違いは、背景色の「濃さ」です。

AよりもBのほうが背景色が薄くなっています。

今回のバナーでは「母の日のお花のギフト」を訴求しているため、A・Bどちらも全体をカーネーションを想起させる赤やピンク系の色でまとめています。

さらに、背景にピンク色を用いるのも、雰囲気にマッチしています。

ただ、Aは背景色と文字色との色の差が少なく、読みにくさにつながってしまっています。

Bの方が色の差が大きく、文字が背景に埋もれずパッと目が留まります。

こうした色と色の差のことを「色のコントラスト」と言い、その差を数値で表したものを「色のコントラスト比」と言います。

今回の作例のように、AとBを並べて見比べれば「Bの方が見やすい」とすぐに判断できると思います。

ですが、いざ自分がデザインしている最中に、つい色のコントラストが弱くなってしまっていることに気づけないというのは、実はよくあることです。

なぜなら、「この色を使いたい」という自分自身のデザインへのこだわりによって、可読性が下がっていることを無意識にスルーしてしまっているからです。

style

reading width, l spacing

色のコントラスト比をチェックする方法

ここでは、デザインの「見やすさ」を感覚だけに頼らず、数値でチェックできる方法をご紹介します。

今回は、アドビが無料で提供しているwebツール「カラーコントラストチェッカー」を使った手順を解説します。

style

reading width, m spacing

【手順1】Illustratorで文字のカラーコードを取得する

まず、「選択ツール」で文字を選択し、ツールパネルの「塗り」をダブルクリックしてカラーピッカーを開きます。

そして、カラーコード（#から始まる6桁の英数字）をコピーしましょう。

style

reading width, s spacing

【手順2】カラーコントラストチェッカーにカラーコードを貼り付ける

次に「カラーコントラストチェッカー」を開き、「Foreground color」の欄にコピーしておいた文字色のカラーコードを貼り付けます。

Illustratorに戻り、同様の手順で次は背景色のカラーコードをコピーし、「Background color」の欄に貼り付けます。

style

reading width, s spacing

【手順3】コントラスト比を確認する

文字色と背景色のカラーコードを入力し終わると、選択した色の組み合わせのコントラスト比が自動で計算され、視認性の判定結果が画面上に表示されます。

見やすさの基準を満たしているとコントラスト比を示す部分が緑色の表示になり、満たしていないと赤色になります。

この判定を基準に色を微調整していけば、主観に頼ることなく、客観的に見やすい配色をスムーズに作ることができます。

style

reading width, s spacing

色のコントラスト比の基準はどのように定められているのか？

これまでお話ししてきた色のコントラスト比は、WCAG（Web Content Accessibility Guidelines）というwebアクセシビリティの国際的なガイドラインで基準が定められています。
WCAGでは、達成レベルとして「A」「AA」「AAA」の3段階があり、一般的なデザイン現場で目標とすべき水準は「AA」と言われています。

具体的に、背景色と文字色のコントラスト比は以下のように定められています。

AA
- 通常文字サイズ・・・4.5：1以上
- 大きな文字サイズ・・・3：1以上

AAA
- 通常文字サイズ・・・7：1以上
- 大きな文字サイズ・・・4.5：1以上

前述したとおり、デザインしているときについつい色のコントラスト比が弱くなってしまうことは、意外によくあることです。

ですが、こういった基準とそのチェック方法を知っていれば、適切な配色を守りやすくなります。

デザインの品質を上げるためにも、ぜひ活用してみてください。

style

reading width, m spacing

2．背景色はテーマに沿った色味を選び、統一された世界観を表現する

続いて、2問目を振り返ってみましょう。

この問題は、「世界観とマッチしている配色はどっち？」というものでした。

わたしが選んだ答えは「A」でした。

作例AとBの違いは、背景色の「色味」です。

Bでは、背景に薄いグレー（#f4f4f4）が使われています。

このグレーは、黄色みや青みが混ざっていない、完全な無彩色のグレーです。

一方Aは、淡いベージュのような色味になっていて、Bと比べると少し温度感が感じられると思います。

白い背景だけでは少し寂しく感じるときや、コンテンツのまとまりを見せたいときに、薄いグレーを背景色として使うことはよくあります。

ただし、今回の作例は「お花屋さんのwebサイト」です。

ナチュラルでやさしい雰囲気を伝えたいときに、完全な無彩色のグレーでは少し無機質で冷たい印象を与えてしまいます。

そこで、薄いベージュや淡いピンクなど、お店のテーマカラーやサイトの雰囲気になじむ色を背景に選ぶことで、文字の読みやすさを保ちながら、まとまり感のある素敵な世界観を表現できます。

style

reading width, l spacing

Illustratorでテーマカラーに合う淡い背景色を作る方法

テーマカラーと馴染む背景色を作りたいときは、Illustratorのカラーピッカーで「HSB」というモードを使うと非常に便利です。

HSBとは、色を「色相」「彩度」「明度」の3つの要素で考える方法です。

H（Hue）：色相
S（Saturation）：彩度
B（Brightness）：明度

それでは、HSBを使ってテーマカラーから最適な背景色を作る手順を解説します。

style

reading width, m spacing

【手順1】「スポイトツール」で基準の色を取得する

まず、「選択ツール」で色を付けたいオブジェクト（今回の場合は文字の背景にあるオブジェクト）を選択します。

その状態で「スポイトツール」を選択し、テーマカラーなどの基準にしたい色をクリックします。

すると、選択していたオブジェクトに「スポイトツール」でクリックした色が反映されます。

style

reading width, s spacing

【手順2】カラーピッカー画面を開く

次に、「塗り」をダブルクリックしてカラーピッカーを開きます。

style

reading width, s spacing

【手順3】「HSB」欄で色を調整する

最後に、HSB欄の数値を変更して色を調整します。

そのとき、以下のことを意識してみてください。

H（色相）は大きく変えない（ベースの色味をキープするため）
S（彩度）は下げる（色をくすませて淡くするため）
B（明度）を上げる（色を明るくして薄くするため）

背景色として使いやすい目安としては、「Sを0〜10%」「Bを95〜100%」の範囲に設定すると、文字の読みやすさをキープできる淡さに調整しやすくなります。

この目安の数値を元に、デザインを見ながらしっくりくる色を探してみてください。

色を感覚だけで選んでしまうと、少しずつ異なる色味になってしまうことがあります。

しかし、HSBで調整することで「色の統一感は保ったまま、背景として適切な淡さ」を作ることができます。

背景色に迷ったときは、ぜひ今回ご紹介した方法を試してみてくださいね。

style

reading width, s spacing

3．文字色を「濃いグレー」にして、長い文章をストレスなく読めるようにする

最後に、3問目を振り返ってみましょう。

この問題は、「文章が読みやすい配色はどっち？」というものでした。

わたしが選んだ答えは「B」でした。

AとBの違いは、背景色と文字色のコントラストの強さです。

Aでは、真っ白（#ffffff）の背景に、真っ黒（#000000）の文字が使われており、コントラストが最大の状態です。

一方Bでは、文字色が濃いグレー（#404040）にして、コントラストをあえて少し抑えています。

白背景に黒文字は、読みやすい配色の代表的な組み合わせです。

前述したWCAGの基準で見ても、真っ白（#ffffff）と真っ黒（#000000）の組み合わせは、十分なコントラスト比を満たしています。

しかしデザインの現場において、場合によってコントラストは高ければ高いほどよい、というわけではありません。

例えば、パソコンやスマホなどのモニター上で見る場合、真っ白（#ffffff）と真っ黒（#000000）の組み合わせはコントラストが強すぎるため、画面がチカチカしているように感じられ、目への負担になってしまうことがあります。

特に、今回の作例のような商品説明など、ある程度まとまった文章を読んでもらいたい場面では、文字が真っ黒だと以下のような影響が出やすくなります。

読んでいて目が疲れやすくなる
デザイン全体の印象が硬く見えてしまう

そのためBのように、文字色を真っ黒（#000000）から少しだけグレー（#404040）に薄くすることで、画面の眩しさが和らぎ、長い文章でもストレスなく読める「目に優しいデザイン」に仕上がります。

もちろん、デザイン上あえてハイコントラストの配色にして、インパクトを強めたりスタイリッシュに見せたり、ということはあります。

大切なのは、その配色の「よい効果」と「注意すべき効果」のどちらも理解した上で、場合によって使い分けられるようになることです。

style

reading width, l spacing

Illustratorで白や黒に近い色を微調整する

今回の作例では、黒文字をグレー文字に調整することで色のコントラストを調整しました。
その他の調整方法として、テーマカラーをもとに文字色を作る方法もあります。

style

reading width, m spacing

【手順1】「スポイトツール」でテーマカラーを取得する

まず、「選択ツール」で文字を選択します。

その状態で「スポイトツール」を選択し、テーマカラーなどの基準にしたい色をクリックします。

※ショートカットキー「I」（アイ）でも「スポイトツール」に切り替えられます。

すると、文字に「スポイトツール」でクリックした色が反映されます。

style

reading width, s spacing

【手順2】カラーピッカー画面を開く

次に、「塗り」をダブルクリックしてカラーピッカーを開きます。

style

reading width, s spacing

【手順3】目的に合わせて文字色を微調整する

続いて、表示されたカラーピッカーの左側の正方形のエリアで文字色を選びます。

なお、カラーピッカーの四角いエリアでは、左にいくほど無彩色に近づき、下にいくほど「暗く」なります。

これを利用して、以下の3つを使い分けてみましょう。

A．テーマカラーそのものを文字色にする：部分的に使用するとインパクトが増す場合もある

B．「下段 × 左側」に近い色を選択：可読性が担保された上で、落ち着いた印象になりやすい

C．「下段 × 右側」に近い色を選択：可読性も担保された上で、テーマカラーになじみやすい

調整時の注意点
コントラストを弱めすぎると、今度は文字が読みにくくなってしまいます。
見た目の印象だけで判断せず、前述したコントラスト比も確認しながら調整すると安心です。

最後に、文字色の違いを見比べてみましょう。

文字色は、背景色や周辺の要素との組み合わせで、最適な色が異なります。

そのため、いろんなパターンを知っておくことが、デザインする際の選択肢を増やすことにつながります。

ここでご紹介したやり方も、ぜひ日々の制作で活用してみてください。

style

reading width, s spacing

まとめ：見やすさと世界観を両立する配色のポイント

今回は見やすさと世界観の観点から、配色に関するクイズと、デザインテクニックを取り上げました。

最後に今回のノウハウのまとめです。

style

reading width, l spacing

1．色のコントラスト比を意識する

雰囲気に合う色を使っていても、文字色と背景色の差が弱いと、読みづらさにつながります。

伝えたい・読ませたい情報の場合は、WCAGの基準に沿ったコントラスト比を意識して配色してみましょう。

色のコントラスト比をチェックできる「カラーコントラストチェッカー」をぜひ活用してみてください。

style

reading width, m spacing

2．背景色はグレーだけに頼らない

背景色は、読みやすさとともにテーマカラーの色味に合った配色を心がけることで、デザイン全体の世界観がより表現されます。

テーマカラーを基準に背景色を選ぶときには、カラーピッカーの「HSB」を使用すると便利です。

style

reading width, m spacing

3．目が疲れない配色を心がける

読みやすさを意識してコントラストをあげるのは良いのですが、真っ白（#ffffff）と真っ黒（#000000）はコントラストの強さで目の疲労につながることがあります。

必要に応じて、少し明度を追加して濃い目のグレーにしたり、テーマカラーに馴染む色を使ったりしてみましょう。

以上、お相手はウェブデザイナーのマスベサチでした。
本コーナーでは、あなたのデザイン力のアップにつながる様々なクイズが用意されています。
ぜひほかのクイズにもチャレンジしてみてください。

※本コンテンツは、それぞれのデザイナーが自身の感性で理想とするデザインを語っています。
クイズの答えはひとつの参考としてください。

執筆：マスベサチ

広島のフリーランスWebデザイナー。制作・講師業をメインに活動。講師業の経験を経て、クリエイターの学び・スキルアップ・交流をサポートしたいという思いから、参加者800人を超える「ひろしまクリエイターズギルド」を主宰。
著書に『Webサイトのデザイン見本帳』（共著／MdN）他。
Adobe Community Expert。