この配色、どっちが正解？誰でも見分けられるカラーユニバーサルデザインのセンスを磨こう

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

デザイナー・アートディレクターの黒葛原道です。

今回、私は「カラーユニバーサルデザイン」についてのクイズを出題します。

デザインの配色を決めるとき、つい「自分の目に見えている色」だけを基準にしてしまいがちですよね。

しかし、色の見え方は人によって異なります。

日本人では男性の約20人に1人、女性の約500人に1人が、特定の色の組み合わせを見分けにくいといわれています。

（参考：冊子「色覚異常を正しく理解するために」 | 色覚関連情報）

国内だけでも300万人以上ですから、決して「ごく一部の人」の話ではありません。

こうした色覚の多様性に配慮し、誰にでも情報が正しく伝わるように設計された配色の考え方を「カラーユニバーサルデザイン（CUD）」と呼びます。

おしゃれな配色と、伝わる配色は、じつは別のものです。

今回のクイズを通して、「誰が見ても伝わる配色」を見極める目を鍛えていきましょう。

それでは、さっそくカラーユニバーサルデザインを題材にした3問クイズを出します。

作例はいずれも、架空の資料や誌面をもとに制作しています。

以下の3つの作例を見て、AとB、あなたはどちらの「配色」がカラーユニバーサルデザインになっていると感じますか？

style

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

background

#fff

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は、「低い値は赤、高い値は緑」という、信号機のような配色で塗り分けています。

表計算ソフトでもよく使われる定番の配色なので、馴染みがある方も多いかもしれません。

そのため、一見わかりやすい配色のように見えますが、実はP型・D型と呼ばれる色覚（赤や緑の見分けがつきにくい特性）の方には、赤と緑がどちらも同じような茶色っぽく見えてしまいます。

つまりAの表は、見る人によっては「どのセルの数字が高くて、どのセルが低いのか」という肝心の情報がほとんど読み取れないのです。

実際に、作例をP型色覚のシミュレーション表示で見比べてみましょう。

作例Aは色の違いがほとんど消えてしまっているのに対し、作例Bは見た目の印象がほとんど変わりません。

作例Bでは、青1色の「濃淡（明度差）」だけで数値の大小を表現しています。

色の明るさの違いは、どのような色の見え方をする方にもそのまま伝わります。

さらに、モノクロ印刷やコピーをしても、数字の大小関係が崩れないというメリットもあります。

数値の大小や順序といった「段階」を色で表現したいときは、赤や緑など色数を増やすのではなく、「1色の濃淡（明度差）」で表現する。

これが誰にでも正しく伝わるカラーユニバーサルデザインの基本テクニックです。

以上の理由から、1問目は「B」を正解に選びました。

style

reading width, l spacing

Illustratorの「カラーガイド」パネルで濃淡のバリエーションを作る

「青1色の濃淡」といっても、セルの段階に合わせた色を目分量で作るのは意外と手間がかかります。

そんなときは、Illustratorの「カラーガイド」パネルを活用しましょう。

ベースとなる色を1つ決めるだけで、濃淡のバリエーションを自動で用意してくれます。

style

reading width, m spacing

【手順1】「カラーガイド」パネルで濃淡のバリエーションを表示する

まずは、「ウィンドウ」メニューから「カラーガイド」をクリックしてパネルを開きます。

次に、ツールバーや「スウォッチ」パネルでベースにしたい色（今回は青）を設定します。

すると、カラーガイドパネルにその青が自動的に反映され、ベースの色を暗くした「暗清色（濃い色）」と明るくした「明清色（薄い色）」のバリエーションが表示されます。

style

reading width, s spacing

【手順2】ベースの色を「グローバルスウォッチ」にして濃淡を一括登録する

作成した濃淡を「スウォッチ」パネルに登録しておくと、必要なタイミングでスムーズに色を選択できるようになり、作業効率がアップします。

このとき、ベースの色を「グローバルスウォッチ」として登録しておくのがオススメです。

グローバルスウォッチとは、スウォッチの色を変更すると、その色を使っているオブジェクトすべてに変更が自動反映される便利な機能です。

1．ベースカラーを「グローバルスウォッチ」として登録する

「カラー」パネルの右上にあるパネルメニュー（三本線アイコン）を開き、「新規スウォッチを作成」をクリックします。

開いた「新規スウォッチ」ダイアログで「グローバル」にチェックを入れて「OK」をクリックします。

すると、「スウォッチ」パネルにベースカラーが登録されます。

2．濃淡のバリエーションを作成する

ベースカラーをグローバルスウォッチに登録したら、濃淡のバリエーションを作成します。

登録したグローバルスウォッチを選択し、先ほどの「カラーガイド」パネルを開きます。

すると、「明清色」のバリエーションがすべてグローバルスウォッチとして並んでいるのがわかります。

※グローバルスウォッチは右下に白い三角のラベルが付きます。

「カラーガイド」パネルで使いたい濃淡を選択し、パネル下部の「スウォッチグループをスウォッチパネルに保存」をクリックすると、選んだ色がスウォッチパネルにまとめて登録されます。

「スウォッチ」パネルに登録後は、濃淡のバリエーションを使って、色の塗り分けを行いましょう。

Tips：グローバルスウォッチのメリット

グローバルスウォッチを使って濃淡グループを作っておくと、「やっぱり青ではなく緑系に変更したい」となった場合でも、「スウォッチ」パネルにあるベースカラーのスウォッチをダブルクリックして色を変えるだけで完了します。

さらに、グローバルスウォッチを元に、「カラーガイド」パネルで濃淡のバリエーションを作成しスウォッチグループとして保存した場合は、ベースカラーの色を変更するだけで、バリエーションのすべての色が変更されます。

つまり、オブジェクトに適用された色を一つずつ変更しなくても、1色だけ変更すればすべてのバリエーションが変更されます。

濃淡の関係はそのまま、色味だけを差し替えられるので、配色の試行錯誤が各段にラクになります。

style

reading width, s spacing

色覚の見え方をシミュレーションできる2つの機能

自分の配色が色覚の異なる方にどう見えるのか。

ここでは、画面上でそのままシミュレーションできる2つの機能をご紹介します。

style

reading width, m spacing

【機能1】Illustratorの「校正設定」

Illustratorの「表示」メニューから「校正設定」＞「P型色覚」（または「D型色覚」）を選ぶと、画面の表示が選んだ色覚での見え方に切り替わります。

確認を終えたら、「表示」メニューの「色の校正」をクリックしてチェックを外すと元の表示に戻ります。

データを作り替える必要も、書き出して外部ツールに通す必要もありません。

配色を決めたら、この表示でひと通りチェックしておくことで、気づかぬうちに「伝わらない配色」になってしまう事故を大きく減らせます。

style

reading width, s spacing

【機能2】Adobe Colorの「アクセシビリティツール」

配色パレット全体をまとめて検証したいときは、無料で使えるオンラインツール「Adobe Color」の「アクセシビリティツール」も便利です。

確認したい配色（最大5色）を入力すると、P型・D型・T型（※）それぞれの色覚での見え方がシミュレーション表示され、見分けにくい色の組み合わせがあると警告で知らせてくれます。

※T型は、Illustrator、Photoshopの基本機能では対応していません

Illustratorの「校正設定」は紙面全体の見え方の確認に、Adobe Colorの「アクセシビリティツール」はパレット単位の事前チェックに有用です。

これら2つの機能を使い分けると、「隣り合う2色が、実は見分けられない組み合わせだった」という問題をデザインの早い段階で発見できるので、ぜひ活用してみてください。

style

reading width, s spacing

2．グラフは色だけに頼らず、「ラベル」と「かたち」を工夫する

続いて、2問目の振り返りです。
私の考える正解は「A」でした。

※上記のグラフは、Illustratorの標準グラフ機能をベースに一部リデザインしています。

作例Bは、グラフの下にまとめた凡例の色チップと、線の色を照らし合わせて読む形式です。

この形式の場合、読み手は「この色はどちらの系列だったか」と何度も視線を往復させることになります。

さらに、2本の線の色が見分けにくい方にとっては、この照合作業自体が難しくなってしまいます。

一方の作例Aは、線のすぐそばに「自社」「競合」という系列名を直接ラベルで添えています。

そして、線の種類（実線と破線）やマーカーのかたち（丸と三角）でも系列を区別しています。

そのため、たとえ2本の線が同じような色に見えたとしても、どちらが何の線なのかを取り違えることがありません。

実際に、作例をP型色覚のシミュレーション表示で見比べてみましょう。

このように、「色だけ」で伝えていた情報に「ラベル（文字）」と「かたち」という手がかりを加えることで、線の色が同じような色に見えても区別が付くようになります。

色はあくまで手がかりのひとつと考えるのが、カラーユニバーサルデザインの基本の考え方です。

以上の理由から、2問目は「A」を正解に選びました。

style

reading width, l spacing

Illustratorのグラフのマーカーをオリジナルのデザインに置き換える

Illustratorのグラフ機能では、折れ線グラフのマーカーを自作のオブジェクトに置き換えられます。

グラフの系列ごとにマーカーのかたちを変えたいときに便利なので、操作の流れをご紹介します。

style

reading width, m spacing

【手順1】マーカーにしたい図形を「デザイン」として登録する

style

reading width, s spacing

1．マーカーの図形を用意する

はじめに、マーカーとして使用したい図形（円形や三角形など）をアートボード上に用意します。

このままグラフに登録することも可能ですが、マーカーのサイズが規定の大きさに固定されてしまいます。

デフォルトのサイズはかなり控えめなため、せっかく自作したデザインを適用しても、以下のように特徴が伝わりにくくなってしまいます。

そのため、今回の作例のように、視認性の高い大きめのサイズで表示させるには、ちょっとしたテクニックが必要です。

style

reading width, xs spacing

2．背面にサイズ基準となる「正方形」を配置する

続いて、マーカーの表示倍率をコントロールするための四角形を作成します。

正方形は塗り、線ともに「なし」に設定してください。

この正方形は適用したいマーカーよりも小さく描き、必ずマーカーオブジェクトの背面に重ねてください。

この背面にある正方形が「標準サイズ」として認識されるため、それに対してマーカー本体を大きく描くことで、グラフ上での存在感を際立たせることができるのです。

style

reading width, xs spacing

3．マーカーとして登録する

2つの図形を選択した状態で、「オブジェクト」メニューから「グラフ」＞「デザイン」を選び、ダイアログの「新規デザイン」をクリックして登録します。

「名前を変更」で「マーカー用（丸）」のようなわかりやすい名前を付けておくと、あとで迷いません。

style

reading width, xs spacing

【手順2】登録したデザインをグラフのマーカーに適用する

style

reading width, s spacing

1．対象のマーカーを選択する

グループ選択ツール（ツールバーの「ダイレクト選択ツール（白い矢印）」を長押しすると出てきます）を使い、凡例にある置き換えたい系列のマーカーをダブルクリックします。

すると、凡例とグラフ上にあるその系列のマーカーすべてが一括選択されます。

※上記のサンプルグラフは、視認性を高め直感的に理解しやすくするため、グラフ機能のデフォルトデザインを適用して制作しています。

style

reading width, xs spacing

2．デザインを適用する

マーカーを選択した状態で「オブジェクト」メニューから「グラフ」＞「マーカー」を選び、登録しておいたデザインを選んで「OK」をクリックすると、マーカーが一括で置き換わります。

ちなみに、線を破線にしたいときは、グループ選択ツールで系列の線を選択し、線パネルの「破線」にチェックを入れるだけです。

このように、マーカーのかたちと線種、この2つの手がかりを添えるだけで、グラフの伝わりやすさは大きく変わるので、ぜひ取り入れてみてください。

style

reading width, xs spacing

3．本文の色は「面積（文字の太さ・サイズ）」まで考えて決める

最後に、3問目の振り返りです。
私の考える正解は「B」でした。

実はこの2つ、見出しの色はまったく同じで、違いは本文の色だけです。

Aは本文が見出しとまったく同じ色、Bは本文だけを見出しよりわずかに濃い色にしています。

「同じ色でそろえたほうが、統一感が出てよいのでは？」と思った方も多いのではないでしょうか。

しかし、文字の色の見え方は、文字の「大きさ」や「太さ」によって変わります。

見出しのように大きくて太い文字は、塗りの面積が広いため色がしっかりと見えます。

一方、本文のように小さくて細い文字は、同じ色を使っても薄く感じてしまうのです。

そのため、見出しの色をそのまま本文に使うと、本文だけがコントラスト不足になり、文字色と背景色のコントラスト比が、アクセシビリティの基準に達しないことがあります。

そこでBでは、本文は見出しよりも少し濃く調整しています。

すると、見た目の統一感はそのままに、小さな文字の読みやすさを確保できます。

コントラストというと「色の組み合わせ」だけで考えてしまいがちですが、文字のサイズや太さ、つまり面積まで含めて考えることが重要です。

以上の理由から、3問目は「B」を正解に選びました。

style

reading width, l spacing

Adobe Colorの「カラーコントラストチェッカー」で文字色を確認しよう

文字色と背景色のコントラスト比は、目分量では判断しづらいものです。

そんなときも、1問目でご紹介した「Adobe Color」が役立ちます。

Adobe Colorの「カラーコントラストチェッカー（AA／AAA）」に文字色と背景色を入力すると、コントラスト比が数値で表示され、基準を満たしているかどうかを判定してくれます。

以下は、クイズで使用した見出しの文字色を入力した例です。

注目したいのは、判定の基準が「AA」と「AAA」で分かれていることです。

アクセシビリティの国際的な指標であるWCAG 2.1（※）では、文字の視認性を確保するために、背景色に対して以下のコントラスト比が基準として設定されています。

※WCAG 2.1は、Webサイトやアプリを、障害のある人を含めてできるだけ多くの人が利用できるようにするための国際的なアクセシビリティ指針です。

AA基準（一般的な目標）：通常のテキストは4.5:1以上、大きなテキストは3:1以上
AAA基準（より高いレベル）：通常のテキストは7:1以上、大きなテキストは4.5:1以上

「大きな文字」はWCAG 2.1では、18pt（約24px）以上、または太字なら14pt（約18.7px）以上が目安です。

同じ色の組み合わせでも、見出しのように「大きな文字」だとAA基準を満たしていても、本文のような「小さな文字」ではAA基準に届かず不合格になる、ということが実際に起こります。

まさに今回の作例Aで起きていたのはこの現象です。

色は背景とのコントラストだけでなく、大きさの比でも見え方が変わります。

このことを意識しておくだけで、配色に関するミスマッチや失敗を大幅に減らすことができます。

ちなみに、先に述べたとおり「WCAG 2.1」はWebサイトやアプリ向けの指針で印刷物向けではありません。

そのため、チラシ・ポスター・パンフレット・書籍などの紙媒体に対して「AAだから4.5:1以上必須」と直接適用するものではありません。

しかし、考え方は参考にできます。

例えば印刷物でも「文字と背景のコントラストを十分に取る」といった部分は配慮が必要です。

ただし、印刷物の場合は紙質やインク、照明によっても見え方が変わるため、画面上の数値だけでなく実際の印刷結果も確認するようにしましょう。

style

reading width, m spacing

配色に迷ったら「コントラストに関する提案」を活用しよう

「本文の色をどれくらい濃くすればいいか分からない…」という場合は、「カラーコントラストチェッカー（AA／AAA）」にある、「コントラストに関する提案」の項目をチェックしてみてください。

使いたい色をベースに、AA基準、AAA基準を満たせるオススメのカラーを自動で提案してくれるため、色の微調整がとてもスムーズになります。

このように、Adobe Colorの「カラーコントラストチェッカー」を活用し、文字のサイズに合わせた適切なコントラスト比を確認しながら配色を決めていきましょう。

style

reading width, s spacing

まとめ：カラーユニバーサルデザインのポイント

今回はカラーユニバーサルデザインに関するクイズと、デザインテクニックを取り上げました。

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

style

reading width, l spacing

1．数値の大小は「色相」ではなく「明度差」で伝えよう

赤と緑のように、色相だけの差は見分けられない人がいる
大小や順序といった「段階」は、1色の濃淡（明度差）で表現する
濃淡づくりは「カラーガイド」パネルとグローバルスウォッチが便利
見え方はIllustratorの「校正設定」と、Adobe Colorの「アクセシビリティツール」でチェックできる

style

reading width, m spacing

2．グラフは色だけに頼らず、「ラベル」と「かたち」も工夫しよう

離れた凡例と色の照合は、読み手への負担が大きい
ラベル、線種、マーカーのかたちなど、色以外の手がかりを重ねる

style

reading width, m spacing

3．本文の色は「面積（文字の太さ・サイズ）」まで考えて決めよう

小さくて細い文字は、同じ色でも見出しより薄く見える
見出しから色をそのまま拾わず、本文はわずかに濃く調整する
コントラスト比はAdobe Colorの「コントラストチェッカー」で確認できる

カラーユニバーサルデザインは、特別な誰かのための特別な対応ではありません。

「このデザインは、どんな人が、どんな環境で見るだろう」と受け手を具体的に想像するのは、デザイナーとして心がけておきたい、基本的なアプローチのひとつです。

配色に迷ったら、まずはIllustratorの「校正設定」で見え方を確認する。

この習慣を、普段のデザイン制作にぜひ取り入れてみてください。

なお、文字と背景のコントラスト比については、こちらの記事で詳しく学べます。
WCAGのコントラスト基準と、Adobe Colorでの確認方法を学べるので、あわせてチャレンジしてみてください。

このコントラスト、どっちが正解？文字と背景の配色のセンスを磨いておこう

お相手はデザイナー・アートディレクターの黒葛原道でした。

本コーナーでは、あなたのデザイン力のアップにつながる様々なクイズが用意されています。

ぜひほかのクイズにもチャレンジしてみてください。

※本コンテンツは、デザイナーがそれぞれの視点で理想とするデザインを語っています。
クイズの正解はひとつではなく、あくまで参考としてご活用ください。

執筆：黒葛原　道

1999年にデザイナーとして活動を開始し、広告代理店勤務を経て2003年に独立。翌年大阪から宮崎へ移住し、Webデザインを中心にサイト構築、ディレクション、撮影、コンテンツ企画まで幅広く手がける。ECサイト運営を通じて培った「売る」視点を活かし、成果につながる制作を信条とする。現在はAdobe Community Expertとしても活動。
著書に『ネットショップ初心者でも売れる商品写真の基礎知識とつくり方』（玄光社）。