色だけで伝わってる？色の見え方の違いをハッシー先生に聞いてみた

色の見え方の違いってなぜ大事？

色の感じ方は、人によって少しずつ違います。日本眼科学会の資料では、日本人男性の約20人に1人、女性の約500人に1人が、赤や緑を感じにくいタイプ（1型・2型）の色覚だとされています。

僕が幼稚園の先生をしていたころを思い返すと、ひとクラスの中に、色の見え方が違う子がいても不思議ではない、ということになります。園だよりのクラス分けを色だけで示したり、地図の区域を色だけで塗り分けたりすると、その子や保護者の方には情報が届かないかもしれません。

難しいのは、作っている側が気づきにくいことです。自分の目ではちゃんと区別できているので、問題があるとは思いません。だからこそ、別の見え方で一度確かめてみる道具があると心強いんです。

見え方の違いには程度の差があって、多くの方は「似た色が見分けにくい」くらいだといわれています。だからこそ、本人もまわりも気づかないまま、チラシの大事な情報を見落としてしまうことがあります。「売り切れ」と「販売中」を赤と緑だけで分けていたら、買いに来てから分かる、ということも起こりえます。

ツールの使い方

色の見え方シミュレーターは、チラシやサイトの画像が、色の見え方が違う人にどう見えるかを並べて確かめられるツールです。

1. 画像を入れる
   チラシやポスター、サイトのスクリーンショットなどを、ドラッグ＆ドロップか「画像を選ぶ」で読み込みます。スクリーンショットは貼り付けでも入れられます。手元に画像がなければ、見本の画像で試せます。
2. 5つの見え方を見比べる
   元の画像に加えて、1型（P型）・2型（D型）・3型（T型）色覚と、1色覚の見え方が並んで表示されます。「重ねて見比べる」では、境目を左右に動かして、元の画像と選んだ見え方を1枚の上で比べられます。
3. 気になる所を直して、もう一度確かめる
   変換した画像はPNGで保存できるので、制作メンバーとの共有にも使えます。ページの下には、区別しにくい色の組み合わせの例と、見分けやすくする直し方もまとまっています。

画像の読み込みや変換は、すべてお使いのブラウザの中で行われ、外部には送信されません。お客様に見せる前のデザインでも、安心して試せます。長辺が2000pxを超える大きな画像は、2000pxに縮小してから変換されます。表示は見え方の目安で、実際の見え方は人によって違う点も覚えておいてください。

おすすめなのは、完成間近のチラシやサイトのスクリーンショットをそのまま貼り付ける使い方です。作っている途中のデザインでも、気になったときにすぐ確かめられます。ページの説明には、それぞれの見え方で「どの色とどの色が似て見えやすいか」も書かれているので、色を決める前の下調べとして読んでおくのもおすすめです。

ここがポイント

• 色だけで区別しない
  グラフは実線・点線・模様で分け、凡例は離れた場所ではなく、線や棒のすぐ横に名前を書きます。それだけで、色が分からなくても読み取れるようになります。
• 文字や記号を添える
  「売り切れ」「販売中」「必須」などを色だけで示さず、文字や「○・×」の記号を一緒に入れましょう。
• 明るさの差をつける
  明るい色と暗い色を組み合わせると、どの見え方でも区別しやすくなります。赤と緑を使うなら、片方を明るく、片方を暗くするだけでも変わります。
• 白黒でも伝わるか見る
  1色覚の画像は明るさだけで表しているので、白黒コピーで配るチラシの確認にもなります。

まとめ

色の見え方の違いは、目に見えない分、作り手が気づきにくいものです。でも、確かめる方法さえ知っていれば、直し方はそれほど難しくありません。色に頼りすぎない工夫は、だれにとっても分かりやすいデザインにつながります。

線の種類を変える、文字を添える、明るさに差をつける。どれも、色の見え方に関係なく、急いでいる人や遠くから見る人にもやさしい工夫です。ひとりのための配慮が、結果としてみんなのためになる。デザインの仕事をしていて、僕がいちばんうれしく感じる瞬間です。

色の見え方シミュレーターを使ってみる

自分のチラシやサイトに当てはめるとどうなるか迷ったら、気軽にお問い合わせください。グラフや地図の見せ方を、一緒に見直すこともできます。