こんにちは！私はジュンです。 私はデザインに鮮やかな色を使うのが好きなのですが、最近あることに気づきました。それは、少人数の観客を十分に考慮していなかったということです。

色彩はデザインの最も重要な要素の一つであり、デザイナーは注意を引くために色を使うことがよくあります。 しかし、視聴者の中に色覚異常の人がいたらどうでしょうか。 色覚異常の視聴者のアクセシビリティとナビゲーションに影響を与える可能性があるため、ウェブデザインやデータビジュアライゼーションでは考慮すべき重要な要素です。

誤解を恐れずに言えば、色彩をデザインに使ってはいけないとか、色盲の人はデザイナーになれないということではありません。 最近、何人かの色盲のデザイナーに出会い、彼らがどのように見てデザインを作っているのか、とても興味が湧いたのです。

どんな色が効果的なのか、どんな色の組み合わせがいいのか、色覚異常の人のためにデザインを改善するにはどうしたらいいのか、などなど、たくさんの疑問が湧いてきたのです。

そこで私は何日もかけて調査を行い、色覚異常のデザイナーと、色覚異常でないデザイナーが、色覚異常の人のためにデザインを改善できるように、この記事をまとめました。

色覚異常とは

簡単に説明すると 色覚異常とは、通常の方法で色を見ることができない状態を指します。 色覚異常の人は、特定の色、特に緑と赤を見分けることができませんが、それ以外にも色覚異常の種類があります。

3つの一般的な色覚異常

色覚異常の中で最も多いのが「赤緑色異常」、次いで「青黄色異常」、「完全色覚異常」です。 では、色覚異常の人は何を見ているのでしょう？

画像はイメージです。 r/Sciences

1.赤・緑色覚異常

また、赤緑色覚異常には、4つのタイプがあります。

正常な色覚の人は、1人目のサンタが赤と緑で見えるはずですが、色覚異常の人は、2人目、3人目のサンタのバージョンしか見えません。

デューテラノマリー は赤緑色覚異常の中で最も多いタイプで、緑がより赤く見えるようになります。 一方で プロタノマリー は、赤をより緑に、より明るく見せます。 プロタノピア と おうしゅうげんじつ は、赤と緑の区別が全くつかない。

2.青黄色覚異常

青と緑、黄色と赤の区別がつかない青黄型色覚異常は、次のように呼ばれます。 トリタノマリー .

もう一つのタイプは、青黄色覚異常者（とも呼ばれます。 トリタノピア 青と緑の他に、紫と赤、黄色とピンクの違いもわからないそうです。

3.完全色覚異常

完全色覚異常は、次のように呼ばれています。 たんしょくせい 残念ながら完全色覚異常の人は、どの色も見ることができませんが、あまり一般的ではありません。

あなたは色盲ですか？

手っ取り早く調べる方法として、石原色票という色覚検査があり、ネットで調べることができます。 以下に石原色票の例を示しますが、点の間にある円板の中の数字（42、12、6、74）が見えるでしょうか？

しかし、さまざまなオンラインの色覚異常テストで本当に色覚異常のスコアが低い場合は、オンラインのテストは必ずしも100％正確ではないので、眼科医を受診することをお勧めします。

色覚異常の種類を少し知ったところで、次に学ぶべきは色覚異常を考慮したデザインの方法です。

色覚異常のためのデザイン方法（5つのアドバイス）

色覚異常のためのデザイン改善には、色覚異常者に優しいパレットを使う、特定の色の組み合わせを避ける、記号を多く使うなど、さまざまな方法があります。

ヒント1：色覚異常者にやさしいパレットを使う

黄色が好きな人はラッキー！黄色は色弱に優しい色で、青との組み合わせも良い。 そうでない人は、CoolersやColorBrewerなどのカラーツールがあるので、それを使って色弱の色選びをすると良いだろう。

例えば、ColorBrewerでは、色覚障がい者用のパレットを簡単に生成することができます。

Coolersでは、色覚異常の種類を選ぶと、パレットがそれに合わせて色を調整してくれます。

Adobe Colorには色覚異常シミュレーターもあり、色を選ぶ際に「色覚異常セーフモード」を選択することができます。

選んだ色が色覚異常の安全性があるかどうかを確認することができます。

Adobe色覚異常シミュレーター（色覚異常の種類に対応

小さなテストで、デザインを白黒で印刷し、あなたはすべての情報を読むことができ、そして色盲の人もそれを読むことができます。

ヒント2：避けるべき色の組み合わせ

色覚異常の場合、適切な色を選択することが重要です。

色覚異常のデザインで避けるべき6つの色の組み合わせはこちら。

• レッド＆ランプ；グリーン
• グリーン＆タンポポ；ブラウン
• グリーン＆ランプ；ブルー
• ブルー＆ランプ；グレー
• ブルー＆ランプ；パープル
• レッド＆ランプ；ブラック

グラフやチャートで不便を感じることは多いですね。 カラフルな統計グラフやチャートは、色覚異常の人が見るとデータに対応する色が見えないことがあり、問題になっています。

Webデザイン、具体的にはボタンとリンクは別物です。 多くのボタンは赤か緑、リンクは青、クリックされたリンクは紫です。 アンカーテキストの下に下線がなければ、色盲のユーザーにはリンクが見えませんね。

例えば、色覚異常の中で最も多いのが「赤緑色異常」なので、2色を一緒に使うのは問題があります。

しかし、2色を一緒に使ってはいけないというわけではありません。テクスチャーや形、文字など、他の要素でデザインを差別化することができるからです。

ヒント3：強いコントラストを使う

デザインにコントラストの高い色を使うことで、色覚異常の人が文脈を識別しやすくなります。

例えば、色違いのグラフを作る場合、コントラストを高くすると、色覚異常の人が全く同じ色を見ることはできなくても、少なくともデータが違うということはわかります。

似たような色を使うと、混乱した印象になることがあります。

ヒント4：グラフやチャートにテクスチャや図形を使う

データを色分けして表示する代わりに、図形で日付を示すこともできます。 データによって線の種類を使い分けるのも良いアイデアです。

ヒント5：テキストとアイコンを多用する

インフォグラフィックスを作成する際、カラフルでなければならないということはありません。 グラフィックを使ってビジュアルを補助することができます。 太字を使うことで、フォーカスポイントを示し、注意を引くこともできます。

Adobe Illustratorでアートワークの色覚異常を確認する方法がわからない方は、こちらをご覧ください。

Adobe Illustratorで色覚異常を刺激する方法

Adobe Illustratorで作成したデザインが色覚異常者に配慮されているかどうかを再確認したい場合、オーバーヘッドメニューから素早く表示モードを切り替えることができます。

オーバーヘッドメニューへ 表示 > プルーフセットアップ と、2つの色覚異常モードを選択することができます。 色覚異常 - 原始視型 または 色覚異常 デューテラノピア型 .

これで、色覚異常の人があなたの作品をどう見ているかがわかります。

結論

色覚異常のためのデザインはそれほど難しくありませんし、色覚異常でない人にも色覚異常の人にも通用する素晴らしいデザインを間違いなく作ることができます。 色は重要ですが、他の要素も重要です。 テキストとグラフィックスを使って視覚を改善することが、最善の解決策なのです。

出典

• //www.nei.nih.gov/learn-about-eye-health/eye-conditions-and-diseases/color-blindness/types-color-blindness
• //www.aao.org/eye-health/diseases/what-is-color-blindness
• //www.colourblindawareness.org/