WEB業界で働く人や興味がある人に役立つ情報サイト“qam（カム）”

投稿者： もの
カテゴリー： デザイン >WEBデザイン

カラーユニバーサルデザインという言葉を聞いたことがありますか？色の見え方が一般の方とは異なる方、つまり色覚異常のある方にも見やすいデザインのことです。
医療系や公共施設などの生活に関わるwebデザインを作る際には、特に注意すべきこととして挙げられます。
今回は、色覚に配慮したデザインについていろいろと調べて分かったことを手短に説明した上で、チェックの仕方や対処方法をご紹介したいと思います！

色覚異常の方の見え方とは

「色覚異常」といっても、すべての色の区別がつかないとは限りません。種類はさまざまですが、特に多いのが「1型色覚（P型）」「2型色覚（D型）」と呼ばれる型です。
いずれも、赤と緑の区別がつきにくいそうです。
日本では男性の20人に1人、女性で200人に1人いらっしゃるとのことなので、決して少なくはないのですね。

↑の図は、「正常」「1型色覚」「2型色覚」それぞれの見え方を再現したものです。
何となくの濃淡の差はあるものの、赤と緑はほとんど同じ色に見えてしまいます。
一方、青は正常の方と同じように見えていることも分かります。
このように、正しく判別できる色と、苦手な色があるのですね。

そこで、赤と緑で区別することを避ける、青や黄色など、誰にでも判別しやすい色を使う、という対策が考えられます。

自分のカラーリングは伝わっている？をチェック

調べてみると、色覚異常のある方に画面がどう見えているかをweb上でチェックできるものはいくつかあるようです。
しかし、制作しながらチェックするのは少し時間がかかってしまいますよね。
そこで、Photoshop上でデザインを制作しながらチェックもできる方法をご紹介します！

やり方はとても簡単です。
まず、Photoshopのヘッダーメニュー「表示」＞「校正設定」に触れます。

一番下のほうに「P型（1型）色覚」「D型（2型）色覚」という項目がありますので、どちらかを選択してください。

すると、画面が下のように切り替わります。

このように、Photoshopで今開いている画面を、色覚異常の方の見え方に切り替えることができるのです。
さらに、一度設定してしまえば【Ctrl＋Y】ですぐに切り替えられるので、細かくチェックしながら色の調整ができますね。

私も、この機能を知ってからはチラチラと画面を切り替え、「1型色覚」「2型色覚」の方でも色の違いが分かるように調整しながら、色を決めています。

色に頼らない、区別の仕方を取り入れる

色を調整することによって、見える色の数が少なくても色の違いが分かるようにデザインすることは可能です。しかし、もっと分かりやすく差をつける方法も取り入れてみましょう。

柄を使ってみる

色だけで区別がつきにくい場合、柄で差をつけるのも手です。
色覚異常のある方は色の見分けがつきにくいだけで、柄の違いは問題なく見分けることができます。

棒グラフなどを色で区分けしたい場合に使えますね。
これが線なら、点線を入れたり太線・細線で使い分けることも考えられます。

色相ではなく明度差、彩度差で区分ける

明度や彩度の差によって違いをつけることもできます。

区別のつきにくい赤と緑ですが、赤の彩度を落として明るくしてみたところ、見分けやすくなりました。
色合いによる区別がしづらくても、明度や彩度に差をつけることによってきちんと見分けられることも多いので、必ずしも赤系と緑系を隣り合わせてはいけないというわけでもなくなってきます。

誰にでも見やすいサイトをデザインするということ

先日、医療系デザインを作っているときに【Ctrl＋Y】で調整しながら色分けをしていて気づいたことですが、別々のものを見分けやすいデザインを作るということは、色覚異常のあるなしに関わらず、誰にでも見やすく分かりやすいデザインにつながります。
明度・彩度に差をつけたほうが見やすいのは、誰でも同じですよね。

そもそも、「ユニバーサルデザイン」とは「見づらい人に合わせたデザイン」ではなく、「見づらい人も見える人も、誰にでも見やすいデザイン」という意味だそうです。「カラーユニバーサルデザイン」を意識したサイトは、皆に優しいサイトということですね。

せっかくPhotoshopの設定で簡単に行えるので、皆さんもぜひやってみてくださいね！