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

色弱者に優しい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サイトは越境ECであることが求められる時代だ。越境ECサイトを構築するは多言語対応、多通貨対応にする必要がある。 今回はひとつのECサイトで多言語、多通貨切り替え対応しているECサイトで、日本から海外に発信している越境ECサイトと海外から日本などに発信している越境ECサイトに別けて...
カゴ落ち対策を行っていますか? お店に買い物に行って、料理などのいろいろな食材をカゴに入れ、レジ並んでる間に気が変わって食材を棚に戻すことがある。ECサイトの場合は「カートに入れる」までは完了したが、決済や配送のステップで気が変わり、別のサイトに移ってしまう。 このようにカートに商品を入れたにもかかわらず、途中でページから...
FacebookはEC市場に変革をもたらすのか?... アメリカ、トランプ大統領のイスラム教7カ国からアメリカへの入国禁止したことは、各方面に大きな影響を及ぼしている。 そして、Google、Apple、Amazonなど、IT企業各社の代表も懸念を表明している。 Facebookの代表マーク・ザッカーバーグ氏もFacebookに投稿。「アメリ...
越境ECで売り上げ好調なサイト -NO.2 –... 日本では国内向けEC市場は成長を続けるものの、少子高齢化問題など、一部市場では伸び率に翳りが見られる分野もある。そのような中、早い時期に国内から海外に視点を変えることで、成功している企業も多い。12月20日のジェトロの報告書にもあるように海外販売で日本の商材を販売するという市場は魅力的な分野...
顧客が購入していない31の理由:あなたのショッピングカートを最適化する方法... ECサイト構築にはショッピングカートが欠かせない。 ネットショップに必ずあるのが、「ショッピングカート」機能である。ショッピングカートとはオンラインショップが備える機能の一つで、簡単に言うと、商品を購入するまで、商品を一時的に保存しておく機能である。 オンラインショップでも、実店舗の買い...
今、アメリカでトレンドのサブスクリプションボックスとは?... アメリカでは近年、「サブスクリプションビジネス」と呼ばれる定期購入型ビジネスに参入する事業者が増えている。 ギャップなどアパレル系企業やポルシェなど自動車メーカーなど自社の車両を定期レンタルできるサービスを開始したり、新しいビジネスモデルに注目が集まっている。 「サブスクリプションビジネ...

タグ:

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

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