UXにも関わる「カラーユニバーサルデザイン」のポイントと事例を解説！

この記事は、2017年2月28日に公開された記事を再編集しています。

ホームページのデザインを考える時、配色はどのように決めていますか？
利用するユーザーのために*「誰にとっても見やすい色がいい」*と考えている企業も多いでしょう。
そのような企業にとって意識したいものの1つにカラーユニバーサルデザインという考え方があります。

今回はカラーユニバーサルデザインについて、導入するポイントと実際の事例を紹介します。
日本人男性の場合、5％もの人が通常とは見え方が異なる色覚異常を抱えています。カラーユニバーサルデザインとは、このような色覚異常を抱えている人を含め誰にとっても見えやすいデザインを目指すあり方です。

ホームページはユーザーとのコミュニケーションをとる大切なチャネルの1つです。
「誰にとっても見やすく・操作しやすい」デザインを目指すようにしましょう。

参考：
先天色覚異常｜日本眼科学会

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

「カラーユニバーサルデザイン（略称ＣＵＤ）」とは、より多くの人が利用しやすい配色を行った製品や施設・建築物・環境・サービス・を提供しようとする考え方です。

多くの行政が市役所や公民館のような公共施設に取り入れているだけでなく、民間企業でもも薬品のパッケージや銀行の各種書類などの商品・サービスに反映させています。

参考：
カラーユニバーサルデザインとは|東京都保健福祉局

色におけるユニバーサルデザインはなぜ必要か

では、なぜカラーユニバーサルデザインが必要とされるのでしょうか。

まず、前提として考えておきたいのが「人によって見え方は様々である」ということです。
視力が弱い人もいますし、目の色が違えば色の感じ方は違います。老いによって視力が落ちて以前とは見え方が異なっている人もいるはずです。。

なかでも先天色覚異常と呼ばれる通常の見え方とは異なる色の感じ方をしている人は、日本人の場合男性で約5％、女性で0.2％いるとされています。
つまり、日本全体でいえば、320万人以上もの人がいる計算になります。

また、白内障や緑内障といった加齢により発症の可能性が高くなる目の病気の発症している人も増加傾向にあります。

このような通常の見え方とは異なる人は、人数から見ても決して無視できる存在ではありません。ユーザーにとって見えづらい状態があるのは、ホームページ運営における大切な視点の1つであるUX（ユーザーエクスペリエンス）にも影響します。

例えば、ボタンの文字が見えなくて問い合わせフォームの先にたどり着けない場合や、ショッピングカードのロゴが見つからずにそのまま離脱してしまうなど、色が識別できないことでコンバーションに関わる可能性もあるあります。
そのようなロスを防ぐためにも、色への配慮は大切です。

より多くの人にとってわかりやすく操作しやすいホームページにすることは、ホームページ自体の質とユーザーの利用満足度を高めるためにも必要です。

参考：
先天色覚異常｜日本眼科学会
人口推計（平成28年(2016年)9月確定値，平成29年2月概算値）
カラーユニバーサルデザインとは|東京都保健福祉局
UIとは？UXとは？違いを理解しよう！

カラーユニバーサルデザインのポイント

カラーユニバーサルデザインのポイントについて、NPO法人カラーユニバーサルデザイン機構では以下の3点を挙げています。

・出来るだけ多くの人に見分けやすい配色を選ぶ。
・色を見分けにくい人にも情報が伝わるようにする。
・色の名前を用いたコミュニケーションを可能にする。
引用：CUDのポイント｜CUDO

それぞれのポイントを詳しく解説します。

1.出来るだけ多くの人に見分けやすい配色を選ぶ。

例えば、この画像では(1)と(2)のどちらが字を読み取りやすいでしょうか？

多くの人は(2)のクリーム色の背景に赤色の字を重ねたものだと答えるかもしれません。。

このように、 色の組み合わせには見分けやすいものと見分けにくいものがあります。
ホームページを作成する際には、ボタンや説明文に用いる色は配慮してみましょう。。

見分けやすい色がわからない場合は『カラーユニバーサルデザイン推奨配色セット ガイドブック』を参照にしてみてください。

東京大学分子細胞生物学研究所やNPO法人カラーユニバーサルデザイン機構（CUDO）など複数の機関が合同で作成したもので、ネット上で無料で提供されています。

参考：
色覚の多様性に配慮した案内・サイン・図表等用のカラーユニバーサルデザイン推奨配色セット

2.色を見分けにくい人にも情報が伝わるようにする。

配色の工夫だけでなく、色に依存しない表現の工夫も重要です。
例えば、以下のグラフを見てください。

(1)は色で円グラフの構成比を表現しています。
それに対して、(2)は色だけでなく模様を変えることで見分けられるようになっています。

このように、色を見分けにくい人であっても情報が伝わる工夫を行ってみてください。

3.色の名前を用いたコミュニケーションを可能にする。

色を利用してユーザーに指示を行う場合、色の名前を併記するようにしましょう。

例えば、上記の画像の場合、右側に表示されたボックスの色に合わせて景品のコースを選ぶようになっています。

この時、色が見分けられない人にとってはどれが「赤コース」なのかわかりません。
景品のボックスに【赤コース】のような表記を加えて、誰でもわかるような工夫を行いましょう。

カラーユニバーサルデザイン推奨配色セット

カラーユニバーサルデザイン推奨配色セットとは東京大学分子細胞生物学研究所などが共同作成した、どのような人にも見分けやすい実用的な配色セットのことです。
特徴は大きく4つあります。

・色名を想起しやすいこと
・塗料、印刷、画面で再現可能な色の範囲に収まっていること
・塗料用、印刷用、画面用で共通した色名で呼べること
・実用的で分かりやすい方法で色を指定できること

引用：「カラーユニバーサルデザイン推奨配色セット」

この特徴に沿って、「見分けやすい色の組み合わせ」と「見分けにくい色の組み合わせ」について、カラフルな図と写真を用いながら説明されています。

参考：
「カラーユニバーサルデザイン推奨配色セット」

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

NPO法人カラーユニバーサルデザイン機構が設ける基準を満たすことで得られる認証のことです。

認証を受けた場合はマーク表示ができます。

この認証を得た施設や製品は、カラーユニバーサルデザインに配慮した施設や製品としてブランド認知を高める効果があります。

カラーユニバーサルデザインのチェックができるツール

色のシミュレータ

http://asada.tukusi.ne.jp/cvsimulator/j/

様々な色覚特性を持つ人の色の見え方を体験するための色覚シミュレーションツールです。
スマホで撮影した画像を変換して、それぞれの色覚タイプ（2色覚）での色の見え方をシミュレーションしてくれます。

Lioatlas® Simulator

https://www.lioatlas.com/

作成したデザインについて、色覚タイプ別にどう見えているかを確認できるツールです。
ファイルを読み込むことで、画面左側にオリジナルの画像、画面右側で色覚を切り替えながら比較して見ることができます。

Lioatlas® CFUD

https://www.lioatlas.com/

画面上から使用したい色を選択すると、その色の色覚タイプ別の見え方を表示してくれます。

選択した色とは見分けにくい色なども分かりやすく画面に表示してくれます。

カラーユニバーサルデザインの事例

カラーユニバーサルデザインをホームページに取り入れている企業もあります。
3つの事例を通して、どのような工夫を行っているか紹介します。

1.千寿製薬株式会社

http://www.senju.co.jp/

眼科で用いる医薬品を中心に開発・販売している千寿製薬株式会社ではホームページにカラーユニバーサルデザインを取り入れています。

リンクボタンをマウスオーバーした際に文字色のコントラストを大きく変化させたり、写真や図には文章を加えて色に依存しない表現をしたりといった工夫を行っています。

参考
アクセシビリティ対応について｜千寿製薬株式会社

2.細田工務店

http://www.hosoda.co.jp/hosoda/company/information/

一般家庭向けの住宅建築を主に行っている細田工務店でも、カラーユニバーサルデザインを取り入れています。

文字の間隔を適切に空けたり、背景色と文字の配色を見えやすいものする工夫を行っています。

その際にはUDingシミュレーター（※2023年現在はLioatlas® Simulatorという有料サービスに移行）という無償のツールを利用して、色覚タイプ別の色合いを確認するチェックツールを活用しました。

このようなツールを用いて、まずは自社のホームページがどのような見え方をしているのかを確認してみるのもいいでしょう。

参考
UDingシミュレーター※このWebページは現在公開されていません
カラーユニバーサルデザイン(CUDO)への取り組みについて｜細田工務店
※このWebページは現在公開されていません

3.札幌市立宮の丘中学校

http://www.miyanooka-j.sapporo-c.ed.jp/index.html

札幌市にある札幌市立宮の丘中学校では、カラーユニバーサルデザインに基づいた配色でホームページを作成しています。

教育現場においても黒板の記述や教科書において、色覚異常の生徒でも見やすいような配色を行うよう配慮されてきました。

そのような姿勢がホームページにも現れています。

参考：
カラーユニバーサルデザイン｜札幌市立宮の丘中学校*（2020年8月19日時点でページが存在しないためリンクを削除しました）*

まとめ

色の見え方は人によって異なることに注目し、多くの人にとって利用しやすい配色を実現しようという考え方をカラーユニバーサルデザインと言います。

日本人は男性では5％、女性は0.2％もの人が通常とは見え方の異なる色覚異常を抱えており、数から見てもユーザーとして決して無視できない存在です。

カラーユニバーサルデザインを考慮したホームページを作成する際には、以下のポイントを参考にするようにしましょう。

・出来るだけ多くの人に見分けやすい配色を選ぶ。
・色を見分けにくい人にも情報が伝わるようにする。
・色の名前を用いたコミュニケーションを可能にする。

各自治体からカラーユニバーサルデザインについて取り組み方のポイントを詳しく解説したガイドブックが発行されています。

ぜひ、そちらも合わせて参考にしてみてください。