こんにちは！楽じい（「@ rakujii7 」）です。
今日は、色弱者でもわかるカラーユニバーサルデザイン(CUD)について・・・
近年、私たちの身の回りの物のほとんどがカラー化して、色による情報が溢れています。
色覚異常に限らず、老化にともなう眼の疾患(緑内障・白内障)によって色の見え方が一般色覚者と異なる人は全国に大勢います。
その色の見え方が異なる人にも「わかりやすく整理されたデザイン」を追求しているのがカラーユニバーサルデザイン(CUD)です。
皆さんが、「えッ！これがCUDなんだ！」って気づかれてない物がたくさんあると思うんで、いくつか紹介したいと思います。
スポンサーリンク
CUD化するための3っのポイント
カラーユニバーサルデザイン(CUD)化するためには、ポイントが3っあります。
- 色名を使ったコミュニケーションを可能にする。
- 色を見分けにくい人にも情報が伝わるようにする。
- できるだけ多くの人に見分けやすい配色を選ぶ。
それぞれ身近な物から具体的に紹介します。
色名を使ったコミュニケーションを可能にする。
「色名を使ったコミュニケーションを可能にする」というほんの1例ですが・・・
あるテレビ番組で、視聴者とのこんなやりとりがあります。
- 「この意見が正しい」と思う人は、青のボタン
- 「いや、まちがっている」と思う人は、赤のボタン
- 「どちらでもない」と言う人は、緑のボタン
- 「そんな話はどうでもええワ！」という人は、黄色のボタン
ハイ！スタート！
本格的にテレビが地デジ対応してから盛んになった視聴者参加型のテレビ番組です。
こちらはアンケート調査ですね！もう全国の視聴者が色名がわかっていて当然って感じのやりとりです。
しかしリモコンのボタンは、微妙に色の違うボタンが4っ並んでいるだけ・・・
色名を言われてもボタンがわからない！って人は大勢いました。
そこで即対応したのが家電メーカー
ボタンの上に色名を書くことで、色弱者にも色名を使ったコミュニケーションが可能になりました。
この対応は早かったです。いっきに普及しました。
デザイン的にダサ～い！と感じた人がいれば、これはCUDなんだとご理解ください。
次に、わたしが使っているWordPressのカラーパレットもCUDです。
マウスポインタを色の上に重ねると色名が表示されます。
カラーパレットというのは、リモコンのボタンと同じで、ただ微妙に違う色が並んでいるだけ・・・何色なのかわかりません。
色名が表示されないカラーパレットは、ほとんど使い物になりません。
なのでこれも色名を使ったコミュニケーションを可能にしてくれるCUDです。
他にも・・・
今では、ほとんどの通販サイトに導入されているCUDです。
商品の横に色名と購入手続きにも色名が表示されていますね。「何色が欲しいのか？」一目でわかります。
これ以前は、なかったんですよ！・・・でどうしてたかと思います？
当然、欲しいけど買いませんでした。てか買えませんでした。
これも通販サイトと消費者との間で色名を使ったコミュニケーションが可能になった例です。
色を見分けにくい人にも情報が伝わるようにする。
2つ目のポイントは「色を見分けにくい人にも情報が伝わるようにする」です。
先ほどは、色名を表示することで色弱者にもわかるデザインでした。
色と色名が表示されているので、一目でわかります。
ですが、何でもかんでも色名を表示するわけにはいきません。
そもそもデザインが崩れて逆に一般色覚の人にわかりにくいデザインになってしまいます。
そこで色名以外の
- 形を変える
- 模様をつける
- 塗り分けパターンを変える
- 文字情報を加える・・・など
これらを併用することでわかりやすいデザインにする表現方法です。
参考サイトはこちらのGoogle AdSense
わたし個人の見え方は「CPM」と「エンゲージメント単価」の色が微妙に似ていてわかりずらいのですが・・・
↓↓↓ マウスオーバーすると・・・
文字情報がちゃんと出てきます。素晴らしい(笑)
これは色以外の文字情報を加えたCUDです。
次のGoogle Analyticsは、色以外の文字情報と形や模様を変えたデザインです。
非常に目立ってわかりやすい。
一般色覚の人にも見やすく、デザインが崩れていません。
まさに「すべての人にわかりやすく整理されたデザイン」ですね。
Googleサイトは完璧なカラーユニバーサルデザイン(CUD)だ！
できるだけ多くの人に見分けやすい配色を選ぶ。
最後のポイント3っ目は、「できるだけ多くの人に見分けやすい配色を選ぶ」です。
色弱者には 間違える色の組合せ (配色)というのがあって、それを改善してくれるのが、次にあげる配色セットです。
普段使っている色をこちらに変えてもらうことで、わたし達にわかりやすい配色となるわけです。
カラーユニバーサルデザイン推奨配色セット(20色)
| 色名 | R | G | B | |||
| アクセントカラー | 赤色 | #ff2800 | 255 | 40 | 0 | |
| 黄色 | #faf500 | 250 | 245 | 0 | ||
| 緑 | #35a16b | 53 | 161 | 107 | ||
| 青 | #0041ff | 0 | 65 | 255 | ||
| 空色 | #66ccff | 102 | 204 | 255 | ||
| ピンク | #ff99a0 | 255 | 153 | 160 | ||
| オレンジ | #ff9900 | 255 | 153 | 0 | ||
| 紫 | #9a0079 | 154 | 0 | 121 | ||
| 茶 | #663300 | 102 | 51 | 0 | ||
| ベースカラー | 明るいピンク | #ffd1d1 | 255 | 209 | 209 | |
| クリーム | #ffff99 | 255 | 255 | 153 | ||
| 明るい黄緑 | #cbf266 | 203 | 242 | 102 | ||
| 明るい空色 | #b4ebfa | 180 | 235 | 250 | ||
| ベージュ | #edc58f | 237 | 197 | 143 | ||
| 明るい緑 | #87e7b0 | 135 | 231 | 176 | ||
| 明るい紫 | #c7b2de | 199 | 178 | 222 | ||
| 無彩色 | 白 | #ffffff | 255 | 255 | 255 | |
| 明るいグレー | #c8c8cb | 200 | 200 | 203 | ||
| グレー | #7f878f | 127 | 135 | 143 | ||
| 黒 | #000000 | 0 | 0 | 0 |
カラーユニバーサルデザイン推奨配色セットを使った例はこちら・・・
複雑な大阪地下鉄の路線図も一目でわかります。
次はこちらのCUD
見分けやすい配色に加え、2ポイント目の「形・模様を変える」「文字情報を加える」がすべて揃ったCUDです。
まとめ
CUDとは、少数の色弱者だけではなく、一般にもわかりやすい色デザインのこと。
つまり「すべての人にわかりやすく整理されたデザイン」のことです。
公共施設などで「あれ！看板が新しくなってるぞ！」って気づいたら、上にあげた3っのポイント確認してみてください。
きっとCUDになっているはず・・・!?
2020年オリンピックに向け、カラーユニバーサルデザイン(CUD)の建設や改修が盛んに行われています。未来のビックキーワードかもしれない・・・(笑)
