ブログ - Morisawa DTP Lab.

カラーユニバーサルデザインを実践してみよう

カテゴリ:ユニバーサルデザイン

この記事は「モリサワ note」にてリニューアル公開されています。

カラーユニバーサルデザインを実践してみよう!

春が近づいてきました!

こんにちは。お久しぶりのヌッティです。
季節は変わり大分暖かくなってきましたね。春が来るのが待ち遠しいです。
さて、昨年MUDディレクター検定(旧:MUD教育検定2級)を受けたレポートをブログで紹介した事を覚えていますでしょうか?

※詳しくは「MUD教育検定2級を受けてきました!」をご覧ください。

ブログでは実際に受けた様子などをレポートしましたが、合否の結果についてはお伝えしていませんでした。合否については…

無事『合格』をいただきました!!

という事で今回はそのMUDディレクター検定の試験内容にもあるカラーユニバーサルデザインについてお話しします。

改めましてカラーユニバーサルデザインについてはご存知でしょうか?ご存知でない方にまずは簡単に説明しますね。

カラーユニバーサルデザインとは?

 

♪…チューリップの花が、ならんだ、ならんだ、赤、白、黄色…♪

 

春になるとこんな歌を私は思い出します。歌にもあるように世の中は色にあふれています。しかし、色は誰にでも同じように見えているわけではありません。 ある人にとって区別しやすい配色が、 別の人には区別しにくい事があります。例えば緑を認識しにくい方は緑から赤に関して、くすんだ黄色のような色に置き換わって見えるそうです。
高齢者の方も若い人達と同じように色が認識できているか、と言われるとそうではないようです。人は年齢を重ねると全体的に黄色がかって見え、茶色や黒や紫など濃い色は全て黒っぽく見えてしまうようです。

実際に色の認識がしづらい人はどのように見えているのでしょうか?緑色を認識しづらい人の見え方の例を紹介します。

区別がつきにくい色の組み合わせ(2型2色覚(D型)の見え方)
矢印から下が緑色を認識しづらい人の見え方になります。緑から赤に関して、くすんだ黄色のような色に置き換わって見えるため、色の組み合わせによって区別がつきにくくなります。

色の見え方は上の例のように人によっては認識しにくい場合もあるので、配色に気をつけないと伝えたい事が伝わらない可能性があります。
そこでカラーユニバーサルデザインという言葉が生まれました。カラーユニバーサルデザインは、色の見え方が一般と異なる人達にも情報がきちんと伝わるよう、色使いに配慮したユニバーサルデザインの事をいいます。

どんな配慮をすればいいのか?

初めて聞いた方はどのように配慮すれば良いのかわからないですね。なので具体的に例を出して方法をお話しします。今回はこんな地図を用意してみました♪

色以外にも分かりにくい点がいくつかありそうですが、とりあえずこの地図を色を認識しづらい人達の見え方でシミュレーションしてみます。

※シミュレーションの方法はIllustratorやPhotoshopの表示設定、専用アプリなど様々あります。

※シミュレーションでは赤が認識しづらい場合をP型(1型2色覚)、緑が認識しづらい場合をD型(2型2色覚)、青が認識しづらい場合をT型(3型2色覚)と表記しています。

色を認識しづらい人達の見え方

気になる点はいくつかあると思いますが、特に公園や神社にある建物の色の区別がつきにくい印象ですね。他にも駐車場の色が認識しにくい事も気になります。

1.配色に気を付ける

そこで先ほどの例のように区別がつきにくい組み合わせの配色は使わない、隣合わないように注意してみました。

橙と黄緑は色を認識しづらい配色なので、公園内の建物を別の色に、ピンクと灰色も区別がつきにくいので駐車場を別の色にしました。その他、全体の配色を見直してみました。

シミュレーションでは以下のように見えます。

 

色を認識しづらい人達の見え方

どうでしょうか?変更前より敷地内の建物、駐車場などが大分、色が認識しやすくなりましたね。明度差・コントラストのある色使いや寒色と暖色の組み合わせなどは比較的区別がつきやすい配色になりますので、意識してみてください。

しかしこれだけだと文字がいまいち読みにくいですね。そこで次は文字について工夫してみました。

2.文字の工夫

文字について調整してみました。

変更した点は以下になります。

・UDフォントに変更(UD新丸ゴを使いました。)

・文字のサイズ、ウエイト、位置を調整

・文字の色を変更

・文字に縁取りをつける

文字サイズは内容や位置によって見直しし、全体的にウエイトをあげてはっきりとさせました。背景色によっては文字が認識しづらい配色になってしまう場合もあるので文字位置の調整や白文字にする、または縁取りをつけて認識しやすいように工夫しました。

シミュレーションでは以下のように見えます。

色を認識しづらい人達の見え方

3.模様や凡例を入れてわかりやすく

先ほどの例のように文字に対して工夫をする事で、見やすくなったと思いますが、ここでさらに一工夫です。地図に模様や凡例などを入れてみました。

川や池に模様を入れ、より区別をつきやすくしました。そして、記号や凡例を入れると情報を伝えやすくする事ができます。

シミュレーションでは以下のように見えます。

色を認識しづらい人達の見え方

最初の段階に比べて格段に情報が伝わりやすくなったと思います。上の例には使っていませんが、線種を変えたり、凡例をより区別させるために色名や数字を追加したりなど工夫できる点は他にもあります。全体のバランスを見つつ調整してみてください。

今回はカラーユニバーサルデザインについて取り上げてみましたが、いかがでしたか?

色の見え方が一般と異なる人達にも情報がきちんと伝わるよう、制作物の色使いへの配慮をしていただけると幸いです!

モリサワのUDフォント製品についてはこちら

≪前の記事          次の記事≫