見出し画像

デザトレ!-カラーユニバーサルデザイン

こんにちは。デザイナーのasatoです。

弊社のデザイン部で毎週行われているデザトレ(勉強会)。
私の担当回では、カラーユニバーサルデザインについてやりました。

カラーユニバーサルデザインとは、色を見分けることが難しい方=色弱の方にも見分けやすい配色でデザインすることです。

色の見え方

色の見え方の例を挙げます。

画像1

一般色覚と呼ばれるのが左上にあるC型で、世の中の人々の多くはこちらに当てはまります。
P,D,T,A型が色弱と呼ばれる見え方です。日本では男性が20人に1人、女性が500人に1人の割合で当てはまると言われています。
世界で見ると、2億人を超える方が色弱であるといいます。
(P型などの同じ型の中でも見え方が2種類に分かれていたりしますが、今回は一例として1型1つずつ載せています)

今回のデザトレではこのような色弱の方でも見えやすい配色でデザインしよう!というものです。

見分けやすい配色

では、どうしたら見分けやすくなるのか。ポイントを紹介します。

画像2

今回は例として一般色覚の場合とP型の色覚の場合の配色の画像を作成しました。(色の見え方は異なりますが、他の型にもこのポイントは当てはまります)

同系色同士だと色の差があまりなく、見えづらいことが分かりますね。
なので暖色と寒色に分けてみたり、同系色でも明度差をつけてみたりすると色が見分けやすくなります。

実践

以上のポイントに気をつけてデザイン部のメンバーで実際に円グラフの配色に挑戦してみました。

画像3

資料のサンプルを元にして作成しています。
配色にも気をつけている他に、そもそも色に頼らない表現方法をしている方も居ますね。

では、上の画像を色弱の方が見た場合、どのように見えるのでしょうか?
ツールを使用して確認してみました。

P型

スクリーンショット 2021-12-23 16.35.21

D型

スクリーンショット 2021-12-23 16.36.02

T型

スクリーンショット 2021-12-23 16.36.11

A型

スクリーンショット 2021-12-23 16.36.22

きちんと見分けられやすい配色になっていますね!

以上がデザトレで行ったことの記録でした。
特に資料などではこのように配色に気をつけたり、そもそも色に頼らない表現をすることが大事ですね。

他の方々が担当された回のデザトレも以下のリンクから見れますので、興味がある方は見てみて下さい!


この記事が気に入ったらサポートをしてみませんか?