« ブログのトップページに戻る

色弱者に優しいWebサイトをデザインしよう

   投稿者 : 2016年2月24日 By

イメージ画像

Webデザインにおいては、色は重要なデザイン要素でありメッセージ要素である。しかし、この色を認識するのが苦手という人、一般の人と色の認識が異なる人がいることをご存じだろうか?いわゆる色弱者と呼ばれる人である。色弱者は日本人では男性では20人に1人、女性では50人に1人いると呼ばれ、日本全体では320万人以上存在するとされている。40人に1人、1クラスに1人以上いるとされているのだ。
そのような色弱者に対しても一般の人と同じように情報を伝達することを意図したデザインをカラーユニバーサルデザインと言う。
今回はこのカラーユニバーサルデザイン、つまりすべての人にやさしいデザインをするには、どのようなところに配慮し、デザインを行えば良いのかを考えてみよう。

 

1.カラーユニバーサルデザインって何?

カラーユニバーサルデザインはユニバーサルデザインの一つだ。
「ユニバーサルデザイン」は1990年代にロナルド・メイス氏が提唱したもので年齢、性別、身体的状況、国籍、言語、知識、経験などの違いに関係なく、できる限り多くの人が利用可能であるようなデザインをいう 。現代では数多くのユニバーサルデザインの発想でデザインされたものがあるが、ユニバーサルデザインは、7つの原則から構成され、その中のカラーユニバーサルデザインは4番目の”明確さ ”=知りたい情報がすぐに理解できる。を前提としている。
カラーユニバーサルデザインは色弱者に配慮したデザインをすることで、一般の方、色弱者、白内症などすべての人に平等に情報を伝えるデザインを行うことを目指したデザインである。

ユニバーサルデザインについてはこちら

 

2.色弱者は、どのような色覚で色を認識しているのか?

色弱者は3つの症状にわかれる。赤の視細胞に障害があるP型と緑の視細胞に障害があるD型、青の視細胞に障害があるT型に症状である。色弱者の90%以上がP型またはD型であると言われている。

人の目の構造
図01:人の目の構造と視細胞

 

下にLive Commerceのトップページを色弱者が見るとどのように見えるのかシミュレーションして見た。色弱者の中のP型あるいはD型の人は、一般の人と比較すると色相として青や黄色の色覚範囲は広いが、赤系、緑系の色は認識できないことが分かる。
このような色弱者に対しては、色で何かを説明したり、たくさんの色を使うということはユニバーサルデザインと呼べないのである。デザインする時に、色弱者がいることを想像し、そのような人にも配慮したデザインを行うことがカラーユニバーサルデザインなのである。

色弱シミュレーション
図02:一般の方と色弱者の見え方の比較

 

3.色弱者に配慮するって、どうすればいいの?

色が重要な伝達手段となっている現代では、多色印刷は当たり前、電子機器や電光掲示板など、色彩のないものはないと言ってよい。
現代のように色が氾濫する中で、もう一度、色についてしっかり取り組んでゆくことがカラーユニバーサルデザインの基本である。つまり、色の必要性を整理する、見直すことが大切である。色を使うとき、その色は本当に必要な色なのか?色弱者にも認識できる色なのか?色弱者の特性を知り、色をむやみに増やさず、情報をまず整理することである。そして、さらに色に頼らないデザインを行ってみることである。色彩を排除した状態で情報が伝わるかどうかを検証することである。
そうすることで、色弱者にも一般の方と同じように情報を伝えることができる。
では、具体的にはどうするのか?以下に整理してみた。

色弱シミュレーション

図03:一般の人(上)と色弱者の見え方(下)の比較
上が一般の方の見え方。下がD型の色弱者が見た場合のシミュレーション。
色弱者は色を青色と黄色の認識範囲に広いのがわかる。サインや図解、掲示板など、色に頼ったデザインは色弱者には部分的にわかりにくいもの、情報が伝わらないところがあることが分かる。

 

4.どのようなところに注意してデザインすべきか

カラーユニバーサルデザインには大きく分けて2つの方法がある。ひとつは「色弱者の配慮した配色をする」と「色だけに頼らないデザインをする」である。
では具体的に見ていこう。

 

4-1.モノクロにして見てみる

明度差を確保することが第一である。モノクロコピーし、カラーの場合と同様に情報が伝わっているかを確認するとよい。
明度差がないと読みづらい、見にくい、分かりにくいなど、となってしまう。
図と地の関係では明度差を5以上つけることでメリハリがつき、分かりやすいデザインとなる。

グレースケール
図04:10段階のグレースケール

 

4-2.色の組み合わせに配慮する

配色する時は青から緑の寒色系からと緑から赤の暖色系からそれぞれ交互に選び配色するようにする。下段のカラーチャートを見ても分かるように赤と青の組み合わせる。緑と黄色の組み合わせなどを選ぶようにする。

カラースケール
図05:青、緑、黄緑、黄色、オレンジ、赤のカラースケール

 

4-3.色弱者の判別しにくい配色は避ける

色弱者の見分けにくい配色を避けることも重要だ。青と紫、水色とピンク、グレーと明るいブルー、濃い赤と黒、オレンジと緑など、あらかじめどんな色の組み合わせが見分けにくい配色なのかを知ることである。そしてそのような配色は使わないことだ。

判別しにくい配色
図06:色弱者に判別しにくい配色、色の組み合わせ。

 

4-4.色弱者の判別しやすい色を使う

色弱者が認識しやすい色をセットにしたカラーユニバーサル推奨配色セットなどを参考に色を選択するのも一つの方法だ。また、デザインしたあとに、Illustrator、Photoshopには色を検証するフィルタがあるのでそれらを使用し、確認することも重要である。

判別しやすい色

図07:色弱者にも認識しやすい配色を基本に色彩計画をおこなった例

photoshopの校正設定
図08:photoshopの色弱者シミュレーションフィルタ。
Potoshopの表示メニュー→校正設定→P型色覚またはD型色覚を選ぶことで、色弱者がどのように見えるか確認することができる。

 

4-5.色には模様を入れて判別できるようにする

色だけに頼らないデザインを行うことも手法の一つである。東京の地下鉄の路線図は以前は色のみの表示だった。複雑な路線を色だけで情報を伝達するには限界がある。
色以外に色にパターン、ハッチを入れたり、色に頼らないデザインを心がけることだ。そのプラスアルファの工夫は、一般の人にとっても分かりやすい情報伝達の手段となる。

地下鉄マップ

図09:東京の地下鉄マップの一部。
色だけではなく地下鉄ラインにパターンを付加している。その他に地下鉄路線に番号を付け色以外でも認識できるように工夫されている。

色弱者にも分かるグラフデザイン
図10:色弱者にも分かるグラフの作成例

 

4-6.色以外に文字情報やアイコンなどを加える

色以外の情報に文字情報、アイコンやピクトグラム等の情報が付加されていると情報が識別しやすくなる。一般的には歩行者用信号や、ボタンにつけたアイコン、カラーボールペンなどの色名表示は義務づけられている。

色に頼らないデザイン例
図11:色だけに頼らないデザインの例

 

4-7.色に境界線をつける

境界線をつける方法は色を判別しやすくする手段として、よく用いられる手法だ。色の境界線を1本加えるだけで、図と地の関係が明確になる。Webデザインではボタン回りに濃いラインを入れることで視認性が良くなるのである。

アマゾンのボタンデザイン
図12:amazonのボタンデザイン

 

国立科学博物館日本館のグラフィックデザイン
図13:上野国立科学博物館日本館の分布図
色の境界にラインを入れることで色領域が明確になる。

 

まとめ

私はミュージアムのグラフィックデザインを仕事として従事した頃、多くのカラーユニバーサルデザインを実践してきた経験から、カラーユニバーサルデザインは決して、「色弱者だけの特別なデザインではない。」ということを身をもって経験してきた。
つまり、カラーユニバーサルデザインを行うということは「一般の人にとっても見やすく、分かりやすいデザインになる。」ということだ。
カラーユニバーサルデザインを行うことは、色彩計画を基本から見直し、伝えたい情報を整理し、情報を受け取る人がどのように情報を受け取るかを検証することで、ユーザー視点に立った分かりやすい、使いやすいデザインとなるのである。
カラーユニバーサルデザインは色弱者のためだけではない、すべての人に価値のあるユニバーサルなデザインなのである。特にターゲット層の広いサイト、医療系、サービス系のサイトデザインには実践していってほしい。

 

参考:カラーユニバーサルデザイン機構

関連する記事

加速する越境EC! 今、越境EC市場を捉える... 日本の総人口は、出生率の低下から、大きく減少することは明らかである。(図-1)を参考いただきたい。2010年に1億2806万人だった人口は徐々に減少し、50年後の2060年には8674万人とも予測されている。 さらに総人口の39.9%が65歳の高齢者となる。超少子高齢化社会となるのは周知の事...
ショッピングモールサイトではなく、自社ECサイトで売上げをアップするには?... 独自ドメインで自社ECサイトを運営しているが一向に売上げが上がらない、しかし、ショッピングモールサイトでは売上げが上がり、ますます、Amazonや楽天などのモールサイトの依存度は高まり、どうしたら、自社ECサイトでしっかりした売上げ基盤をつくり、モールでの売上げではなく、自社ECサイトで売上げを...
2016年、日本のEC市場はどうだった? 今回も前回に引き続き経済産業省から2016年の「我が国におけるデータ駆動型社会に係る基盤整備」報告書に基づき、国内のEC市場を中心にまとめてみた。 報告によると、日本国内のBtoC-EC市場規模は、15兆1,358億円。前年より9.9%増加したとしている。 各分野では物販系分野で8兆43...
売れるスマホECサイトを作る10の法則 Googleは今年2015年4月21日から、Webサイトが「モバイル・フレンドリー」の状態であるかどうかを検索結果に反映させると発表した。これはスマホ対応されていないサイトやページは今後、検索上位になることは難しいことを意味する。 さらに、今後は自宅のパソコン利用より、スマホからのECサイト...
押さえておきたい!スマホサイトのフォーム最適化のポイント... パソコンECサイトではコンバージョン率があるのに、スマホECサイトでは成約に至らないケースが多いのはフォームに問題があるケースが多い。せっかくスマホECサイトを作ったのに売上が伸びない、効果が発揮されないなど悩みがある方も多い。パソコンに比べ、入力にストレスを感じることの多い、スマホサイトのフォ...
今、アメリカでトレンドのサブスクリプションボックスとは?... アメリカでは近年、「サブスクリプションビジネス」と呼ばれる定期購入型ビジネスに参入する事業者が増えている。 ギャップなどアパレル系企業やポルシェなど自動車メーカーなど自社の車両を定期レンタルできるサービスを開始したり、新しいビジネスモデルに注目が集まっている。 「サブスクリプションビジネ...

タグ:

このエントリーをはてなブックマークに追加
 

今なら海外展開の為の成功BOOKを無料ダウンロードできます。是非この機会にお読みください。