執筆日：2025年06月022日　提供元：株式会社Engineerforce

「色覚多様性」という言葉を知っていますか？

100人いれば見え方も100通り。色の見え方はひとりひとり異なります。

色覚多様性とは、人が色を認識する能力に個人差があることです。

現代社会ではWebサイトやアプリ、公共の案内表示など、あらゆる場面で色を用いた情報伝達が行われています。しかし、すべての人が同じように色を識別できるわけではありません。

こうした「見え方の違い」に配慮することは、インクルーシブでユニバーサルな社会づくりにもつながります。特に、Webやシステムデザインでは、ユーザビリティ（使いやすさ）とアクセシビリティ（誰でも使える）に配慮した設計を行う必要があります。

そこで本記事では、エンジニアさんやデザイン初心者に向けて「色覚多様性（色盲）に配慮したデザインの方法」を解説していきます。

また、実務に応用できるよう【LP（ランディングページ）におけるユニバーサルカラーデザインの活用例】をFigmaテンプレートとして配布しておりますので、ぜひご活用ください。

※ 無料、個人情報入力不要、商業利用可能。

1. 色覚多様性（色盲）とは？

色覚多様性（しきかくたようせい）とは、人によって色の感じ方が異なることを指します。

日本では男性の約20人に1人、女性の約500人に1人が色覚多様性を持つといわれています。

| 1-1. 色覚多様性の原理

人が色を見分けるには、「錐体(すいたい)細胞」という光の波長を感知する細胞が必要です。

通常、L錐体（長波長＝赤の光を受け取る）、M錐体（中波長＝緑の光を受け取る）、S（短波長＝青の光を受け取る）の3種類がバランスよく働くことで、さまざまな色を感じ取ることができます。

ところが、このどれか1つの働きが弱かったり、欠如していたりすると、特定の色の判別が難しくなります。

これが色覚多様性の仕組みです。

| 1-2. 色覚多様性の5タイプ

色覚多様性とは、従来「色覚正常」「色盲・色弱」「色覚異常」「色覚障害」「全色盲」と呼ばれてきました。

しかし、その単語のネガティブイメージから差別的な感覚を持つ人も少なくありません。

そこで現在カラーユニバーサルデザイン機構（CUDO）では、全ての人が対等に感じられるよう大きく5つのタイプに分類した色覚の呼称を提唱しています。

本記事でもその５タイプに従ってデザインの解説を行なっていきます。

色覚の呼称 5タイプ（CUDO提唱）

5タイプ別　色の感じ方のイメージ

ここでは、カラーユニバーサルデザイン機構（CUDO）が提唱する5つの色覚タイプ（C型・P型・D型・T型・A型）ごとに、一般的に見え方に現れる傾向をイメージとしてご紹介します。

※ 以下は色の感じ方の理解を深めていただくための参考イメージです。
実際の見え方には個人差があり、すべての方に当てはまるものではありません。あくまで目安としてご覧ください。

C型（一般型）は、L・M・Sの3種類の錐体細胞が揃っており、色を鮮やかに識別できます。

一方、P型やD型では赤や緑の識別が難しく、特に赤・緑・茶色の違いが曖昧になりやすい傾向があります。

T型は青色の波長を感じるS錐体の働きが弱いため、赤と緑を主に手がかりとして色を判別します。

A型はすべての錐体の働きが乏しく、色（彩度）をほとんど認識できません。そのため、色ではなく明暗（明度）の違いを頼りに視覚情報を判断しています。

2. デザインにおける重要性

| 2-2. カラーユニバーサルデザイン（CUD）とは？

ユニバーサルデザインとは、「すべての人にとって使いやすい設計」を意味します。

その中でもカラーユニバーサルデザイン（CUD）は、色覚に多様性があることを前提に、「誰もがわかりやすく情報を受け取れる配色や表現方法に特化した設計」です。色の違いが見えにくい人でも情報を正しく理解できるように工夫されているため、アクセシビリティ向上の重要な手法として注目されています。

| 2-2. カラーユニバーサルデザインの実例

ここでは、身近な3つの実例をご紹介します。

事例01：地方公共団体情報システム機構　「マイナンバーカード」

マイナンバーカードの券面デザインには、カラーユニバーサルデザインの考え方が取り入れられています。

性別や生年月日などの重要情報は、色だけでなく文字や記号でも明確に区別され、誰でも誤読しにくいよう工夫されています。

また、背景の模様や文字のコントラストも十分に確保されており、色覚に多様性がある方でも視認性が高く、正確に情報を読み取ることができます。公的書類におけるCUD導入の代表的な事例です。

事例02：徳島県鳴門市　「津波・洪水ハザードマップ」

日本では、徳島県鳴門市が全国初のCUD認証を取得した「津波・洪水ハザードマップ」をPDFなどで全戸配布しています。

このマップでは、水害の危険度を示す際に、水色とピンク、黄緑と橙色といった識別しにくい色の組み合わせを避けています。代わりに、明度や彩度の差による階調で「浅い・深い」浸水レベルを示し、誰もが直感的にリスクを把握できる工夫がなされています。

防災という命に関わる分野においても、CUDの重要性が強調される好例といえるでしょう。

また、教育現場でも小中学校の教科書や学習プリントに色覚配慮された図表が採用されるなど、カラーユニバーサルデザインは幅広い場面で実践されています。

3. 実務におけるカラーユニバーサルデザインの導入【Figmaテンプレ付き】

WebやUIデザインの現場では、色の組み合わせが視認性やユーザビリティに大きな影響を与えるため、設計段階で色覚多様性に配慮できているかどうかを確認するプロセスが非常に重要です。

| 3-1. 押さえておくべきポイント

カラーユニバーサルデザインを取り入れる際は、以下の４つのポイントを意識することで、より多くの人に伝わるデザインになります。

III.寒色系を活用しているか？
赤や緑の組み合わせは識別が難しいことが多いため、青などの寒色系や高コントラストの配色が有効です。

IV. 代替手段を用意しているか？
色の違いを補完するために、線の太さ、形状、パターン、文字、アイコンなどの視覚的な違いを組み合わせて伝える工夫が大切です。

| 3-2. カラーユニバーサルデザインのチェックの方法

実際のデザイン業務にカラーユニバーサルデザインを取り入れるには、視覚的なシミュレーションと配色の最適化が欠かせません。

以下に、便利なチェックツールをいくつか紹介します。

■ 色覚シミュレーションツール

色の見え方をタイプ別に擬似体験できるツールです。実際に色がどのように見えるかを再現できるため、特に配色や情報設計の確認に役立ちます。

・Coblis（Color Blindness Simulator）
Webブラウザ上で画像をアップロードすると、色覚タイプごとの見え方をシミュレーション可能。

■ コントラストチェックツール

色の組み合わせがアクセシビリティ基準（WCAG）に準拠しているかをチェックします。

・WebAIM Contrast Checker
テキストと背景のコントラスト比を数値で表示し、合格・不合格を即座に判定。

コントラスト比「4.5：1」以上でWCAG AA基準を合格、コントラスト比「7.0：1」以上でWCAG AAA基準を合格となります。

・Accessible Colors
配色に応じた改善案も自動提案してくれる、実用性の高いツール。

■ Figmaで使えるプラグイン

Figmaには、リアルタイムに色覚シミュレーションができるプラグインがあります。デザインの早期段階からチェックできるため、実務での導入がスムーズです。

・Able – Accessibility Tools
テキストサイズ、コントラスト比、色覚の課題まで総合的にチェック可能。

引用：Able – Accessibility Tools

・Color Blind
複数の色覚タイプでの見え方をワンクリックで確認できる便利なプラグイン。

| 3-3. Webデザインでのケーススタディ

ここでは、カラーユニバーサルデザイン（CUD）に配慮したWebデザインをすぐに実践できるよう、「CUD対応カラーパレット」と「LP（ランディングページ）の実例」を含んだFigmaテンプレートを配布しています。

1. CUD対応カラーパレット

明度差・寒色系を活かした視認性の高い配色を採用。赤や緑に頼らない設計で、どの色覚タイプのユーザーにも情報が届くよう工夫しています。

2. LP（ランディングページ）の実例

本記事で配布しているテンプレートには、以下のような工夫が施されています。

また、リアルタイムに色覚シミュレーションを行えるFigmaプラグインを活用し、チームで共有しながらCUDのチェックが可能です。

デザイン初心者でも取り入れやすく、実務ですぐに活用できるCUD対応の土台として、Figmaテンプレを活用することで、すべての人に優しいインターフェースを実現しましょう。

ダウンロード・利用について

• 無料・商用利用可・クレジット不要
• 個人情報の入力なしで即使用OK
• 配布テンプレはFigmaファイル形式です

※ テンプレ利用時は、CUDの基本知識をふまえた上で、実際の使用環境に応じた確認（シミュレーションやコントラストチェック）を推奨します。

STEP1. 上記サンプルファイルを参照
STEP2. ファイル右クリック「コピー」(Ctrl+C)、もしくは、「ドラフトに複製を作成」
　※「コピー/貼り付けオプション」にて画像など、任意の形式でコピーすることも可能
STEP3. 「⁨⁩00（コピー）」複製版を自身のファイルに貼り付けまたは、移動
STEP4. 自身のファイル上で編集、調整

4. まとめ

色覚多様性に配慮することは、すべての人に情報を届ける第一歩です。

具体的には、C型（一般型）のほか、P型（赤の識別が困難）、D型（緑の識別が困難）、T型（青の識別が困難）、A型（色をほとんど識別できず明度で判断）の５タイプに分類できます。

WebやUIデザインにおいては

を意識することで、アクセシビリティに配慮した情報設計が実現できます。
Figmaテンプレを活用すれば、実務でもすぐにCUD対応が可能です。
視認性とアクセシビリティを高めるデザインで、ユーザー体験を向上させましょう！
ぜひ配布中のテンプレートを活用し、誰にでもやさしいデザインを広めてください。

5. デザイン研修会でデザイン思考を学びませんか？

UIUXデザイン会社「Engineerforce」では企業向けデザイン研修会を行っています。

~社内にデザイン思考を浸透させる~　ダイジェストver

この研修では、UIUXデザインの専門家から直接学ぶことで、デザインの基礎知識から最新のトレンドを理解し、デザイン思考を体系的に身につけることができます。

実践的にすぐ応用できるよう詳しく研修しておりますので、興味のある方はぜひ下のリンクから詳細をご覧ください。

6. 関連記事

以下の記事では、UIコンポーネントの基礎知識やおすすめサイトを紹介し、
すぐに活用できる2025年最新版【UI コンポーネントライブラリ（Figma）】を無料で配布しております。

パンくずリストやボタン、モーダルといった基本的なUIコンポーネント11種類を取り揃えておりますので、ぜひご活用ください。

記事：2025年最新！UIコンポーネントによるデザインの効率化【Figmaテンプレ付】