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

色弱者に優しい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サイトの売り上げを倍増させる“心理学テク15選”... ECサイトの最終の目標はコンバージョンを発生し、売上を上げることだ。売上を上げるには、お客様の購買心理を読み解く必要がある。この購買心理を読み解く一つの方法として行動心理学が応用されている。そして、この行動心理はECサイト構築のカート機能や商品のキャッチコピー、商品説明などに活用されている。 ...
3C分析で自社WEBサイトを強化するには 3C分析という言葉はマーケティングの世界では良く使われるキーワードではあるが、意外とその意味や実際に3C分析をどう行えば良いのかわからない方も多い。 今回は、3C分析を使って自社WEBサイトを改善またはリニューアルするときの留意点などをまとめてみた。   ●そもそも3C分析とは...
越境ECで売り上げ好調なサイト -NO.2 –... 日本では国内向けEC市場は成長を続けるものの、少子高齢化問題など、一部市場では伸び率に翳りが見られる分野もある。そのような中、早い時期に国内から海外に視点を変えることで、成功している企業も多い。12月20日のジェトロの報告書にもあるように海外販売で日本の商材を販売するという市場は魅力的な分野...
ECの巨人AmazonとZOZOTOWN 2018年も後半に入った。国内では、西日本を襲った記録的な豪雨による災害が相次いでいる。被害に遭われた方、避難を余儀なくされている方に心より、お見舞い申しあげる。 今回は昨年2017年のEコマースについてランキング資料をベースに振り返りつつ、昨年も他を大きく引き離し成長したECモール、「Am...
あなたはいくつ知っている? EC業界キーワード... EC業界では専門用語やさまざまな独自のIT用語が日々飛び交っている。IoT、オムニチャンネル、O2O、など。今回はそんなEC業界で仕事をするうえでの、最近のトレンドとも言うべき、代表的なキーワードについて説明する。皆さんも一つでも聞いたことない用語などあったら、チェックし、詳しく調べてみると良い...
新しく立ち上げたEコマースサイトに人を集めるには?その1... 新しくEコマースサイトを立ち上げる場合、できることなら初めからたくさんの人を集めて、手ごたえのあるオープンにしたいものです。そこで、2回にわたって、さまざまなメディアを使ってトラフィックを増やす方法をいくつかご紹介したいと思います。 ユーザーへのアクセスを増やそう トラフィックを増やすには、...

タグ:

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

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