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

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

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

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

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

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

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

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

参考：
CUDとは｜CUDO

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

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

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

なかでも先天色覚異常と呼ばれる通常の見え方とは異なる色の感じ方をしている人は、日本人の場合男性で約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.色の名前を用いたコミュニケーションを可能にする。

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

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

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

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

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

1.千寿製薬株式会社

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

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

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

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

2.細田工務店

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

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

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

その際にはUDingシミュレーターという無償のツールを利用して、色覚タイプ別の色合いを確認するチェックツールを活用しました。
このようなツールを用いて、まずは自社のホームページがどのような見え方をしているのかを確認してみるのもいいでしょう。

参考
UDingシミュレーター
カラーユニバーサルデザイン(CUDO)への取り組みについて｜細田工務店

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

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

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

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

そのような姿勢がホームページにも現れているでしょう。

参考：
カラーユニバーサルデザイン｜札幌市立宮の丘中学校

まとめ

色の見え方は人によって異なることに注目し、多くの人にとって利用しやすい配色を実現しようという考え方をカラーユニバーサルデザインと言います。
日本人は男性では5％、女性は0.2％もの人が通常とは見え方の異なる色覚異常を抱えており、数から見てもユーザーとして決して無視できない存在でしょう

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

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

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

参考：
CUDガイドライン｜CUDO