こんにちは!楽じい(「@ 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)の建設や改修が盛んに行われています。未来のビックキーワードかもしれない・・・(笑)

data-matched-content-ui-type="image_card_stacked"