もしあなたがグラフィックデザイン界にいるのに色覚異常になったとしたら、大抵の人はこんな感じのそっけないアドバイスをするでしょう。「違う仕事をしたほうがいいんじゃない?」と。

プロのデザイナーならば分かっていただけると思いますが、そんなに単純なものではないのです。もしデザイナーであるあなたが該当しなくとも、男性クライアントの8%以上は2色覚(特定の色の組み合わせが見分けにくい)である可能性があります。同じく、市場のターゲット層の8%の男性が2色覚である可能性があるということです(色覚異常は、女性では珍しい症状です。比率でいうと0.5%くらいです)。このグループ層にとって、あなたの制作したデザインが見にくく、読み取るのが困難になってしまうことがあれば、それは大きな間違いをしたということになるのです。

もしあなたがデザイナー志望なのに、色覚異常になってしまったら? 安心してください。いくつかのコツをつかめば、何の問題もありません。

このブログでは、色覚異常ではないデザイナーは色の判別が困難な客層にどう対処すればいいのか、さらに色覚異常のデザイナーはどのように色を的確に使えばいいのかの秘訣をお教えします。本題に入る前に、色覚の概要とちょっとしたテストをやってみましょう。

あなたは色の識別ができる?

colortest

上記の画像で74という数字が見えれば2色覚ではありません。もしも私のように、21という数字が見えるか、何の文字も見えない人には悪いお知らせです。あなたは2色覚です。もし納得できなければ、フルバージョンのテストをここからやってみてください。

重要なのは、2色覚の場合、すべて白黒に見えるわけではないということです。この場合は1色覚といい、極めてまれな症状です。一般的に、2色覚とは、ある特定の色相の見え方が多くの人と違っていることをいいます。最も多いのは赤色と緑色を区別しにくいという症状です。青色と黄色が区別しにくいという症状は、より少なくなります。

その特定の2色が互いに混ざり合ってしまう傾向になり、以下のような見え方をします。

google

上のバージョンのGoogleのロゴは通常の色、下のバージョンは2色覚の人の見え方を再現したもの。

warhol

左のバージョンが通常のアンディ・ウォーホルの「マリリン・モンロー」の色使い。右のバージョンが2色覚の人の見え方を再現したもの。

有名な指導者やクリエーターの中にも、色の見え方が異なる人はたくさんいます。マーク・トウェインや、ビル・クリントンや、マーク・ザッカーバーグ(Facebookが最初に青をメインの色にしたのは自分が見えやすい色だったから、という噂があります)もそうです。いまだに論争はありますが、ゴッホもそうだったといいます。

van gogh

マーク・ザッカ―バーグ(写真はjdlasicaより)と、フィンセント・ファン・ゴッホは、おそらく色覚異常

自分が色覚異常でなくても、色覚異常の客層のことを考えてデザインをするべきである

多くの人には、自分の作品が色覚異常の人にはどのように見えているのか想像するのは難しいでしょう。しかし、その無知さが大きな問題となる可能性も大いにあります。

特にウェブサイトは、すべてのユーザにとって判別可能で、容易に閲覧できるということが最重要ポイントとなります。下の画像は、色覚異常の人が判別しにくいHoverのボタンと判別しやすいボタンを比較したものです。

hover over

一番上の、Normalのボタンとトーンが似ているものは、色覚異常の利用者のことを考えたら一番悪い例。真ん中のものは、色の明度に変化があるので、まだマシ。一番下のものは明度の変化の他に、色の無いハイライトの線で囲われているため、一番配慮されたデザインと言えます。

あなたのデザインしたロゴが、色覚異常の人を困難な状況に陥れたり、彼らにとって区別しにくいものなってほしくないですよね? 色使いによっては、彼らにはまったく見えなくなる可能性だってあります。以下のロゴを見てみましょう。

colourblindlogos

これらのロゴはそれぞれ、1がBill Grander、2がDennis Murphy、3がRazoo、4がCrema Cafeのロゴ。どれも色覚異常の人のことを特に考えて作られたものではなく、2と3は判別するのが難しいかまったく読めない可能性もある。

他にも、色が重要となるのが以下のような領域です。

リンク:一般的に、文字のみで構成されたハイパーリンクが色だけで区別されている。

インフォグラフィック:インフォグラフィックでは、興味を引き、読みやすくするために、色は欠かせない要素。記号的な要素で情報を表現している場合が多い。

地図:地下鉄の路線や地域の境界などを区別するために、色がよく使われる。

ゲーム:チーム分けや、ゲームそのものが色で区別されていることが多い。

map1

色に頼りすぎた地図は色覚異常の人を混乱させる可能性がある。

色覚異常の人もしっかりと識別できるデザインを作るために、以下のようなちょっとしたルールや手法を考慮してみてください。

  • 色覚異常の人が特に判別しにくい以下の色の組み合わせを避ける:緑と赤、緑と茶、青と紫、緑と青、明るい緑と黄色、青と灰色、緑と灰色、緑と黒。
  • 色使いにする:様々な色を使うよりも、単色を様々な濃淡で表現するのが、一番分かりやすい方法です。今はミニマリズムがはやっているので、いいのではないでしょうか?
  • コントラストを駆使する:色覚異常の人は、色調、彩度、明度と同じように、コントラストを見分けることが可能です。これをメリットだと思って取り入れてみてください(ヒント: 暗い色同士のコントラストはぼやけて見えるため、明るい色同士コントラストのほうが区別しやすいと言う人がたくさんいます)。
  • 太い線を使う:症状が軽い人の中には、対象が大きければ色が分かるという人もいます。細すぎる線では、その通りの色には見えません。
  • 色で何かを伝えようとしない:赤を“危険”、“警告”、“注意”などの意味として使うとしても、色覚異常の人にも分かるように、色以外の他の記号的な要素を合わせて採用することを考えましょう。
  • 色ではなくテクスチャーを変える:地図やインフォグラフィックでは、対象物の区別をつけるため、色以外にテクスチャーにも変化をつけましょう。
infographic

インフォグラフィックなどの場合、トーンに加え、テクスチャーを変化させることで、色覚異常の人が読みやすいものになる。

また、あなたの色使いに関してフィードバックをしてくれるツールは山ほどあります。中には、あなたのデザインが2色覚の人にはどのように見えるか再現してくれるものもあります。以下、リストにしました。

  • Colorblind Web Page Filter:URLを入力し、色覚異常のタイプを選びます。そうすると、フィルターがかかり、あなたのウェブページがどのように見えるのかを表示してくれます。
  • Vischeck:ファイルかウェブページに適用すると、色覚異常の人の見え方を再現するか、色覚異常の人向けに色使いを修正してくれます。
  • Newman services:これも色覚異常の人の見え方を再現してくれるツールです。
  • Color Laboratory:選んだ色を様々な前景や背景と組み合わせた時に、隣り合った色が色覚異常の人にはどのように見えるのか確認することができます。
  • Color Oracle:WindowsにもMacにもLinuxにも対応しているシミュレータ。
  • Sim Daltonism:Macにのみ対応したシミュレータ。
  • Color contrast visualizer: 一般的な、相性のいい色の組み合わせを教えてくれます。

色覚異常のデザイナーの方へ

多くのデザイナーは自分が色覚異常であることを周囲に隠します。恥ずべきことだと思ってしまうようです。しかし、隠す必要はありません。少しの単純な技術と、他の人の目を時々借りられれば、全く問題なく過ごすことができるのですから。実際に色覚異常のデザイナーのコミュニティは広がりつつあります。以下を参考にしてください。

  • We Are Colorblind: 色覚異常のデザイナーたちによって作成されたウェブサイト。さまざまな制作物について(多くはアプリに関して)、色覚異常の人を配慮したデザインなのかどうかの批評を書いた記事が載っています。
  • jdotreach:色覚異常のデザイナーが、多くの人とは違う自分の視覚にどう対処しているかをブログ形式で書いています。
  • Yoav Brill:色覚異常のデザイナーでもあり映画制作者。先ほどのテストで登場したようなドット柄だけで全編を作った短編映画を作成した人物。

石原式色覚検査のドットを使って、Yoav Brill氏が制作した映画。“違い”をテーマにしたストーリーになっている。

色覚異常者向けのデザインに関する限り、デザイナーはそれぞれ独自の対処法を持っています。しかし、そのほとんどは、あなたが良いと思う色の組み合わせを採用し、それを16進数カラーコードやパントンのカラーコードなどを参照して確認していくだけのことです。PhotoshopのEyedropper(スポイト)ツールを使えば、必要不可欠なデータを収集することが可能です。色に著作権はないので、権利の心配をする必要もありません。

この他にも、以下のような便利な方法があります。

  • The ColourAdd system:ベースとなる色と記号を組み合わせるシステム。様々な組み合わせで二次的な色を指定することができます。これは、数ある手法の中の1つにすぎません。
colouradd

色と組み合わせた記号を使うことで、色覚異常の人を案内することができるColourAdd systemというシステム。

      • Visolve:日本発の色覚異常のユーザ向けに色を修正してくれるソフトウェア。
      • Vischeck:同じく、色覚異常のユーザ向けに色を修正してくれるソフトウェア。

あなたは色覚異常ですか?
もしくはデザインをする際に色覚異常の人のことを考慮に入れていますか?
その場合、どのような方法を取っていますか?

[ 翻訳:shunichi shiga ]