カラーユニバーサルデザイン（CUD）とは？色の見え方の違いと広告やWebサイトで配慮すべきポイントを解説

デザインにおいて「色」は全体のイメージを決めたり、一部を目立たせて情報を伝えやすくするなどの重要な役割があります。

しかし配色を考えるときに「色の見え方は誰もが同じだ」という前提で考えてしまっていませんか？

実は色の見え方には多様性があり、日本では男性の20人に1人、女性の500人に1人が一般的な色覚以外を持っていると言われ、およそ320万人が該当します。

参考：東京都カラーユニバーサルデザインガイドライン

このような色の見え方の違いに配慮して、情報がなるべくすべての人に正確に伝わるようにデザインすることを「カラーユニバーサルデザイン」と言います。

本記事では、カラーユニバーサルデザインの概要と配色を考える際に意識すべきポイントについて解説します。

色覚多様性とは

人は錐体細胞（すいたいさいぼう）で色を判断していますが、錐体細胞の機能には個人差があるため、色の見え方が異なることがあります。これを「色覚多様性」と呼びます。

色覚には主にC型、P型、D型、T型、A型などがあります。最も割合の多いC型以外のことを以前は「色盲」、「色弱」と呼んでいましたが、日本遺伝子学会は「色覚多様性」という呼び方を2017年9月から提唱するようになりました。

色の見え方の違い

それぞれの色覚で、どんな色の見え方の違いがあるのでしょうか。シミュレーションを元に、以下にまとめました。

※こちらのシミュレーションはあくまでC型色覚の方が他の色覚の方の色の見え方を判断するものであり、各色覚がこのように見えていると断定するものではありません

C型色覚

D型色覚

P型色覚

T型色覚

A型色覚

このように色の見え方には多様性があるため、広告クリエイティブを制作する際もできるだけ多くの人に見やすい色でデザインをするよう配慮が必要です。

では、多くの人が見やすい色でデザインするためにはどうしたら良いでしょうか。その問題を解決すべく生まれた考え方が、カラーユニバーサルデザインです。

カラーユニバーサルデザインとは

カラーユニバーサルデザインとは、多様な色覚に配慮して、情報がなるべくすべての人に正確に伝わるように、利用者の視点に立ってデザインすることを言います。

引用元：東京都カラーユニバーサルデザインガイドライン

どのようなデザインにも、この「カラーユニバーサルデザイン」の視点が必要ですが、特にオンライン広告は、パっと見てなにを伝えたいのかわからなければ、一瞬でスルーされてしまいます。

「どこに注目すればいいのかわからない」「比較画像の違いがわかりづらい」といった見づらさを避けて、なるべくすべての人に正確に情報を伝えるためにも、カラーユニバーサルデザインの知識を身に付けておくと良いでしょう。

デザインが見やすくなるポイント

カラーユニバーサルデザインを踏まえて、具体的にすべての人が見やすくなるデザインのポイントを紹介します。

色を暖色、寒色から交互に選ぶ

P型、D型は、色相が近い色を区別することが苦手です。暖色同士、寒色同士の組み合わせは避けましょう。緑、紫は中性色といって、寒色・暖色どちらの要素も併せ持つ色になります。

色を濃い、薄いで選ぶ

C型以外の方は色相の見分けが苦手な分、明度や彩度の差には敏感です。見た目の明るさを大きく変化させると区別がしやすくなります。

縁取りや光彩を加える

デザインの都合上、やむを得ず区別しづらい色を重ねる場合は、縁取りや光彩などのエフェクトを追加してみましょう。縁取りや光彩があることで文字やオブジェクトが強調され、認識しやすくなります。

文字の下に色のついた帯を入れる

背景に柄や写真、または背景色と同系色の文字を使用したい場合は、文字の下に色のついた帯を入れてみましょう。文字が強調され、読みやすくなりました。

色以外の要素を加える

色だけの情報に頼らず、図形や模様を組み合わせて視認性をアップしてみましょう。

バナーや画像制作だけでなく資料のグラフ作成でも応用できるテクニックですので、デザイン以外の業務でもぜひ参考にしてみてください。

要注意な配色と改善策

よく使う配色、ありがちな配色でも、C型以外の方には区別がつきづらいものがあります。目立たせたいと思った配色が、見る人によっては全く目立たない配色だったということも……。よくある組み合わせの中で、要注意な配色の一部を紹介します。

要注意な配色①：赤×緑

クリスマスにありがちな配色ですが、実はP型、D型の方には判別しづらい配色です。

背景は赤、緑などで文字は白、明るいゴールドなどを採用すると視認しやすくなります。

要注意な配色②：黄色×黄緑

元気で健康的な配色である黄色×黄緑ですが、P型、D型の方には同じ色に見えてしまうことがあります。

黄色の背景色に黄緑色の文字はできるだけ避けるようにしましょう。やむを得ない場合は、黄緑を青みの強い緑に変更すると見やすくなります。

要注意な配色③：明るいオレンジ×明るい緑

農業や野菜などをモチーフにしたときに多く採用される配色です。一見、暖色×寒色に見えるかも知れませんが緑は中性色になります。P型、D型の方には判別しづらい配色です。

文字を重ねる場合は白い縁取りなどを加えるとぐっと読みやすくなります。

要注意な配色④：赤×黒

ホラーな表現であったり、刺激的でインパクトのある表現をする際に使用されることの多い配色です。D型色覚の方はとくに赤が暗く沈んで見えるため、黒と赤が同化して見えてしまいます。

黒い背景色に赤いCTAボタンは目立たない可能性があるため避けるようにし、黒い背景色には黄色や明るいオレンジ色のCTAボタンのほうが見やすくなります。

要注意な配色⑤：パステルカラー同士　

パステルカラー同士の配色は混同しやすく、判別が難しい場合があります。

ピンクを彩度の高いオレンジ色に、水色は彩度の高い水色、青色にすると誰もが判別しやすくなります。

配色チェックツールや参考資料

「さまざまな色覚に配慮してデザインをしたいけど、具体的にどうチェックしたらいいの？」と思うかも知れません。そんなときは配色チェックツールを使用してみましょう。

Adobeの色校正機能

PhotoshopやIllustratorの「色校正」という機能を利用して、P型やD型の方が見やすいデザインかどうかををシミュレートすることができます。

※こちらの機能はあくまでC型色覚の方が他の色覚の方の色の見え方を判断するものであり、各色覚がこのように見えていると断定するものではありません。

＜Photoshopの場合＞

①Photoshopでシミュレートしたい画像を開く

②表示＞構成設定＞「Ｐ型（1型）色覚」、「Ｄ型（2型）色覚」のいずれかを選択

※表示＞色の校正のオンオフをすることで切り替えが可能です。

＜Illustratorの場合＞

①Illustratorでシミュレートしたい画像を開く

②表示＞構成設定＞「Ｐ型（1型）色覚」、「Ｄ型（2型）色覚」のいずれかを選択

※表示＞色の校正のオンオフをすることで切り替えが可能です。

行政のガイドラインを参考にする

カラーユニバーサルデザインのガイドラインを出している行政は多数ありますが、個人的に一番まとまっていると感じたのが東京都です。カラーユニバーサルデザインの導入事例も多くあります。

参考：東京都カラーユニバーサルデザインガイドライン

カラーユニバーサルデザイン推奨配色セットを活用する

NPO法人のカラーユニバーサルデザイン機構（略称：CUDO）が作成した推奨配色セットです。

RGB指定値、CMYK指定値なども記載されており、実際にデザインする際にとても参考になります。

参考：カラーユニバーサルデザイン推奨配色セットについて

デザインを作成する上で重要なチェックリスト

「自分の見えている色が、人と違うかもしれない」と、はじめはなかなか想像しづらいですよね。デザインを作成したら一度立ち止まって、「このデザインはすべての人に見やすいだろうか？」と考えるきっかけになれば幸いです。

見直しに使える、カラーユニバーサルデザインのチェックリストがこちらです。

広告やWebサイトはユーザーに理解されてこそ価値があります。色覚多様性を知ることで今よりもっと多くの人に情報を届けられるとしたら、とてもワクワクしませんか？

カラーユニバーサルデザインを意識して、すべての人に見やすい、伝わりやすい広告やWebサイトを作成していきましょう。