分デザインのコツデザインの基本ロゴ、ウェブなど多数のジャンル...ロゴ、ウェブ、書籍表紙デザインなど多数のジャンル...デザインを依頼するもしあなたがグラフィックデザイン界にいるのに色覚異常になったとしたら、大抵の人はこんな感じのそっけないアドバイスをするでしょう。「違う仕事をしたほうがいいんじゃない?」と。プロのデザイナーならば分かっていただけると思いますが、そんなに単純なものではないのです。デザイナーであるあなたが該当しなくとも、男性クライアントの8%以上は2色覚(特定の色の組み合わせが見分けにくい)である可能性があります。市場のターゲット層の8%の男性が2色覚である可能性があるということです(色覚異常は、女性では珍しい症状です。比率でいうと0.5%くらいです)。このグループ層にとって、あなたの制作したデザインが見にくく、読み取るのが困難になってしまうことがあれば、それは大きな間違いをしたということになるのです。いくつかのコツをつかめば、何の問題もありません。このブログでは、色覚異常ではないデザイナーは色の判別が困難な客層にどう対処すればいいのか、さらに色覚異常のデザイナーはどのように色を的確に使えばいいのかの秘訣をお教えします。本題に入る前に、色覚の概要とちょっとしたテストをやってみましょう。上記の画像で74という数字が見えれば2色覚ではありません。私のように、21という数字が見えるか、何の文字も見えない人には悪いお知らせです。納得できなければ、フルバージョンのテストをここからやってみてください。重要なのは、2色覚の場合、すべて白黒に見えるわけではないということです。この場合は1色覚といい、極めてまれな症状です。一般的に、2色覚とは、ある特定の色相の見え方が多くの人と違っていることをいいます。多いのは赤色と緑色を区別しにくいという症状です。青色と黄色が区別しにくいという症状は、より少なくなります。その特定の2色が互いに混ざり合ってしまう傾向になり、以下のような見え方をします。上のバージョンのGoogleのロゴは通常の色、下のバージョンは2色覚の人の見え方を再現したもの。左のバージョンが通常のアンディ・ウォーホルの「マリリン・モンロー」の色使い。右のバージョンが2色覚の人の見え方を再現したもの。有名な指導者やクリエーターの中にも、色の見え方が異なる人はたくさんいます。マーク・トウェインや、ビル・クリントンや、マーク・ザッカーバーグ(Facebookが最初に青をメインの色にしたのは自分が見えやすい色だったから、という噂があります)もそうです。論争はありますが、ゴッホもそうだったといいます。多くの人には、自分の作品が色覚異常の人にはどのように見えているのか想像するのは難しいでしょう。その無知さが大きな問題となる可能性も大いにあります。ウェブサイトは、すべてのユーザにとって判別可能で、容易に閲覧できるということが最重要ポイントとなります。下の画像は、色覚異常の人が判別しにくいHoverのボタンと判別しやすいボタンを比較したものです。上の、Normalのボタンとトーンが似ているものは、色覚異常の利用者のことを考えたら一番悪い例。真ん中のものは、色の明度に変化があるので、まだマシ。下のものは明度の変化の他に、色の無いハイライトの線で囲われているため、一番配慮されたデザインと言えます。色使いによっては、彼らにはまったく見えなくなる可能性だってあります。以下のロゴを見てみましょう。どれも色覚異常の人のことを特に考えて作られたものではなく、2と3は判別するのが難しいかまったく読めない可能性もある。他にも、色が重要となるのが以下のような領域です。リンク:一般的に、文字のみで構成されたハイパーリンクが色だけで区別されている。インフォグラフィック:インフォグラフィックでは、興味を引き、読みやすくするために、色は欠かせない要素。記号的な要素で情報を表現している場合が多い。地図:地下鉄の路線や地域の境界などを区別するために、色がよく使われる。ゲーム:チーム分けや、ゲームそのものが色で区別されていることが多い。色に頼りすぎた地図は色覚異常の人を混乱させる可能性がある。色覚異常の人もしっかりと識別できるデザインを作るために、以下のようなちょっとしたルールや手法を考慮してみてください。色覚異常の人が特に判別しにくい以下の色の組み合わせを避ける:緑と赤、緑と茶、青と紫、緑と青、明るい緑と黄色、青と灰色、緑と灰色、緑と黒。色使いにする:様々な色を使うよりも、単色を様々な濃淡で表現するのが、一番分かりやすい方法です。同じように、コントラストを見分けることが可能です。暗い色同士のコントラストはぼやけて見えるため、明るい色同士コントラストのほうが区別しやすいと言う人がたくさんいます)。太い線を使う:症状が軽い人の中には、対象が大きければ色が分かるという人もいます。細すぎる線では、その通りの色には見えません。色で何かを伝えようとしない:赤を“危険”、“警告”、“注意”などの意味として使うとしても、色覚異常の人にも分かるように、色以外の他の記号的な要素を合わせて採用することを考えましょう。色ではなくテクスチャーを変える:地図やインフォグラフィックでは、対象物の区別をつけるため、色以外にテクスチャーにも変化をつけましょう。インフォグラフィックなどの場合、トーンに加え、テクスチャーを変化させることで、色覚異常の人が読みやすいものになる。あなたの色使いに関してフィードバックをしてくれるツールは山ほどあります。中には、あなたのデザインが2色覚の人にはどのように見えるか再現してくれるものもあります。以下、リストにしました。Filter:URLを入力し、色覚異常のタイプを選びます。すると、フィルターがかかり、あなたのウェブページがどのように見えるのかを表示してくれます。Vischeck:ファイルかウェブページに適用すると、色覚異常の人の見え方を再現するか、色覚異常の人向けに色使いを修正してくれます。services:これも色覚異常の人の見え方を再現してくれるツールです。Laboratory:選んだ色を様々な前景や背景と組み合わせた時に、隣り合った色が色覚異常の人にはどのように見えるのか確認することができます。Oracle:WindowsにもMacにもLinuxにも対応しているシミュレータ。Daltonism:Macにのみ対応したシミュレータ。一般的な、相性のいい色の組み合わせを教えてくれます。多くのデザイナーは自分が色覚異常であることを周囲に隠します。恥ずべきことだと思ってしまうようです。隠す必要はありません。単純な技術と、他の人の目を時々借りられれば、全く問題なく過ごすことができるのですから。実際に色覚異常のデザイナーのコミュニティは広がりつつあります。以下を参考にしてください。色覚異常のデザイナーたちによって作成されたウェブサイト。さまざまな制作物について(多くはアプリに関して)、色覚異常の人を配慮したデザインなのかどうかの批評を書いた記事が載っています。jdotreach:色覚異常のデザイナーが、多くの人とは違う自分の視覚にどう対処しているかをブログ形式で書いています。Brill:色覚異常のデザイナーでもあり映画制作者。Brill氏が制作した映画。“違い”をテーマにしたストーリーになっている。色覚異常者向けのデザインに関する限り、デザイナーはそれぞれ独自の対処法を持っています。そのほとんどは、あなたが良いと思う色の組み合わせを採用し、それを16進数カラーコードやパントンのカラーコードなどを参照して確認していくだけのことです。PhotoshopのEyedropper(スポイト)ツールを使えば、必要不可欠なデータを収集することが可能です。色に著作権はないので、権利の心配をする必要もありません。この他にも、以下のような便利な方法があります。system:ベースとなる色と記号を組み合わせるシステム。様々な組み合わせで二次的な色を指定することができます。これは、数ある手法の中の1つにすぎません。systemというシステム。Visolve:日本発の色覚異常のユーザ向けに色を修正してくれるソフトウェア。Vischeck:同じく、色覚異常のユーザ向けに色を修正してくれるソフトウェア。inbox.デザイン・ビジネストレンドやキャンペーン情報などが満載のニュースレターに登録しませんか?ニュースレターに登録して最新情報を受け取りませんか?デザインやビジネス関連情報をお届けします。Milakovic最新のデザインコンペデザイナーとしてステップアップできるお仕事をご用意しています。Terbitbasukiデザイン・ビジネストレンドやキャンペーン情報などが満載のニュースレターに登録しませんか?ニュースレターに登録して最新情報を受け取りませんか?デザインやビジネス関連情報をお届けします。