Webデザインにおいては、色は重要なデザイン要素でありメッセージ要素である。しかし、この色を認識するのが苦手という人、一般の人と色の認識が異なる人がいることをご存じだろうか？いわゆる色弱者と呼ばれる人である。色弱者は日本人では男性では20人に1人、女性では50人に1人いると呼ばれ、日本全体では320万人以上存在するとされている。40人に1人、1クラスに1人以上いるとされているのだ。
そのような色弱者に対しても一般の人と同じように情報を伝達することを意図したデザインをカラーユニバーサルデザインと言う。
今回はこのカラーユニバーサルデザイン、つまりすべての人にやさしいデザインをするには、どのようなところに配慮し、デザインを行えば良いのかを考えてみよう。
カラーユニバーサルデザインはユニバーサルデザインの一つだ。
「ユニバーサルデザイン」は1990年代にロナルド・メイス氏が提唱したもので年齢、性別、身体的状況、国籍、言語、知識、経験などの違いに関係なく、できる限り多くの人が利用可能であるようなデザインをいう 。現代では数多くのユニバーサルデザインの発想でデザインされたものがあるが、ユニバーサルデザインは、7つの原則から構成され、その中のカラーユニバーサルデザインは４番目の”明確さ ”＝知りたい情報がすぐに理解できる。を前提としている。
カラーユニバーサルデザインは色弱者に配慮したデザインをすることで、一般の方、色弱者、白内症などすべての人に平等に情報を伝えるデザインを行うことを目指したデザインである。
ユニバーサルデザインについてはこちら
色弱者は３つの症状にわかれる。赤の視細胞に障害があるP型と緑の視細胞に障害があるD型、青の視細胞に障害があるT型に症状である。色弱者の90％以上がP型またはD型であると言われている。
図01：人の目の構造と視細胞
下にLive Commerceのトップページを色弱者が見るとどのように見えるのかシミュレーションして見た。色弱者の中のP型あるいはD型の人は、一般の人と比較すると色相として青や黄色の色覚範囲は広いが、赤系、緑系の色は認識できないことが分かる。
このような色弱者に対しては、色で何かを説明したり、たくさんの色を使うということはユニバーサルデザインと呼べないのである。デザインする時に、色弱者がいることを想像し、そのような人にも配慮したデザインを行うことがカラーユニバーサルデザインなのである。
図02：一般の方と色弱者の見え方の比較
色が重要な伝達手段となっている現代では、多色印刷は当たり前、電子機器や電光掲示板など、色彩のないものはないと言ってよい。
現代のように色が氾濫する中で、もう一度、色についてしっかり取り組んでゆくことがカラーユニバーサルデザインの基本である。つまり、色の必要性を整理する、見直すことが大切である。色を使うとき、その色は本当に必要な色なのか？色弱者にも認識できる色なのか？色弱者の特性を知り、色をむやみに増やさず、情報をまず整理することである。そして、さらに色に頼らないデザインを行ってみることである。色彩を排除した状態で情報が伝わるかどうかを検証することである。
そうすることで、色弱者にも一般の方と同じように情報を伝えることができる。
では、具体的にはどうするのか？以下に整理してみた。
図03：一般の人（上）と色弱者の見え方（下）の比較
上が一般の方の見え方。下がＤ型の色弱者が見た場合のシミュレーション。
色弱者は色を青色と黄色の認識範囲に広いのがわかる。サインや図解、掲示板など、色に頼ったデザインは色弱者には部分的にわかりにくいもの、情報が伝わらないところがあることが分かる。
カラーユニバーサルデザインには大きく分けて２つの方法がある。ひとつは「色弱者の配慮した配色をする」と「色だけに頼らないデザインをする」である。
では具体的に見ていこう。
明度差を確保することが第一である。モノクロコピーし、カラーの場合と同様に情報が伝わっているかを確認するとよい。
明度差がないと読みづらい、見にくい、分かりにくいなど、となってしまう。
図と地の関係では明度差を５以上つけることでメリハリがつき、分かりやすいデザインとなる。
図04：10段階のグレースケール
配色する時は青から緑の寒色系からと緑から赤の暖色系からそれぞれ交互に選び配色するようにする。下段のカラーチャートを見ても分かるように赤と青の組み合わせる。緑と黄色の組み合わせなどを選ぶようにする。
図05：青、緑、黄緑、黄色、オレンジ、赤のカラースケール
色弱者の見分けにくい配色を避けることも重要だ。青と紫、水色とピンク、グレーと明るいブルー、濃い赤と黒、オレンジと緑など、あらかじめどんな色の組み合わせが見分けにくい配色なのかを知ることである。そしてそのような配色は使わないことだ。
図06：色弱者に判別しにくい配色、色の組み合わせ。
色弱者が認識しやすい色をセットにしたカラーユニバーサル推奨配色セットなどを参考に色を選択するのも一つの方法だ。また、デザインしたあとに、Illustrator、Photoshopには色を検証するフィルタがあるのでそれらを使用し、確認することも重要である。
図07：色弱者にも認識しやすい配色を基本に色彩計画をおこなった例
図08：photoshopの色弱者シミュレーションフィルタ。
Potoshopの表示メニュー→校正設定→Ｐ型色覚またはＤ型色覚を選ぶことで、色弱者がどのように見えるか確認することができる。
色だけに頼らないデザインを行うことも手法の一つである。東京の地下鉄の路線図は以前は色のみの表示だった。複雑な路線を色だけで情報を伝達するには限界がある。
色以外に色にパターン、ハッチを入れたり、色に頼らないデザインを心がけることだ。そのプラスアルファの工夫は、一般の人にとっても分かりやすい情報伝達の手段となる。
図09：東京の地下鉄マップの一部。
色だけではなく地下鉄ラインにパターンを付加している。その他に地下鉄路線に番号を付け色以外でも認識できるように工夫されている。
図10：色弱者にも分かるグラフの作成例
色以外の情報に文字情報、アイコンやピクトグラム等の情報が付加されていると情報が識別しやすくなる。一般的には歩行者用信号や、ボタンにつけたアイコン、カラーボールペンなどの色名表示は義務づけられている。
図11：色だけに頼らないデザインの例
境界線をつける方法は色を判別しやすくする手段として、よく用いられる手法だ。色の境界線を１本加えるだけで、図と地の関係が明確になる。Webデザインではボタン回りに濃いラインを入れることで視認性が良くなるのである。
図12：amazonのボタンデザイン
図13：上野国立科学博物館日本館の分布図
色の境界にラインを入れることで色領域が明確になる。
私はミュージアムのグラフィックデザインを仕事として従事した頃、多くのカラーユニバーサルデザインを実践してきた経験から、カラーユニバーサルデザインは決して、「色弱者だけの特別なデザインではない。」ということを身をもって経験してきた。
つまり、カラーユニバーサルデザインを行うということは「一般の人にとっても見やすく、分かりやすいデザインになる。」ということだ。
カラーユニバーサルデザインを行うことは、色彩計画を基本から見直し、伝えたい情報を整理し、情報を受け取る人がどのように情報を受け取るかを検証することで、ユーザー視点に立った分かりやすい、使いやすいデザインとなるのである。
カラーユニバーサルデザインは色弱者のためだけではない、すべての人に価値のあるユニバーサルなデザインなのである。特にターゲット層の広いサイト、医療系、サービス系のサイトデザインには実践していってほしい。
タグ: ECサイト
初めまして、
このサイトの「人の目の構造と視細胞」の図を引用させて頂いていいでしょうか？
はい、引用元を明示いただける限り、ご利用いただいても大丈夫です。