色のアクセシビリティはデザインの重要な要素!

by  更新

色彩計画

アプリやWebサイト、印刷物やドキュメントなどを制作する際に、デザインやUI、UXの検討が必要であることは言うまでもありません。さまざまな要素がありますが、アクセシビリティもデザインの重要なポイントのひとつです。今日は色のアクセシビリティの検討に役立つアプリを紹介します。

Webやアプリでは特に配慮が必要

一般的な色覚特性とは異なる特性を持つ人、つまり特定の色を見分けるのが難しい方がいます。遺伝的な要因が大きいため地域差があり、日本にももちろんいますが、ヨーロッパではさらに比率が高いそうです。
どんなデザインでも色に対する配慮が必要ですが、特にアプリやWebは海外の方が利用する可能性も高いため、さらに重要といえるでしょう。

アプリで見え方をシミュレーション

「色のシミュレータ」アプリを通して見たり撮影したりすると、それぞれの色覚特性の方にはどのように見えるかをシミュレーションできます。このアプリでは、一般的な見え方と、異なる色覚特性の3つのタイプの見え方をシミュレーションできます。もちろん個人差はありますが、典型的な見え方ということです。

色覚特性のタイプ別にシミュレーションできます

▲色覚特性のタイプ別にシミュレーションできます

左上が一般的な色覚の人の見え方、あとの3つが色覚特性の異なるタイプでの見え方です。この図では4つの見え方を並べていますが、並べる数は1〜4つまで自由に選択できます。
上の写真は曼珠沙華の赤い花と緑の葉を撮ったものです。左下のタイプの方は緑と赤を見分けるのが難しく、右上のタイプの方も特徴的な見え方であることがわかります。

歩行者用信号をこのアプリで撮ってみました

▲歩行者用信号をこのアプリで撮ってみました

右上と左下のタイプの方には、信号の緑と赤が似た色に見えているのだそうです。

デザインに置き換えると?

これをデザインに置き換えて考えてみてください。赤地の上に緑の字が重なるロゴマークなどは、一部の方には見えづらい、あるいは何が書いてあるのかを認識できないおそれがあるということです。
次の写真は、街でよく見るロゴマークです。

横書きの綴りの部分に注目してください

▲横書きの綴りの部分に注目してください

7の赤い部分(長い斜線)と、横書きで書かれた緑色の英語の綴りは、実は一部の方には似た色に見えています。しかし緑色の文字の背景を白く抜いているので、判読できるのですね。

アプリを作りたい、あるいはWordPressなどでサイトを構築したいという方は多いはず。ちょうどハッピーコム主催で「働く女子・ママのお役立ちアプリを作ろう!プロジェクト」も進行中です。
本稿で触れた緑と赤は一例で、ほかにも見分けづらい色はあります。さまざまなデザインをする際に、このようなツールを使ってシミュレーションをしてみることをおすすめします。

0916_koyama_154_eyec

色のシミュレータ

対応機種 iPhone/iPad/iPod touch対応 ※iOS 7.0以降/Android 2.1以上
料金 無料
販売元 Kazunori Asada © 2015 Kazunori Asada
言語 日本語、簡体字中国語、繁体字中国語、英語、韓国語

iOSアプリをダウンロード

Androidアプリをダンロードする

この記事を書いた人

小山香織
小山香織Kaori Koyama
ライター、翻訳者、トレーナー。『世界で闘うプロダクトマネジャーになるための本 トップIT企業のPMとして就職する方法』(訳)、『シンプルでよく効く資料作成の原則 コンテンツとデザインからプレゼンを変える』(訳)、『iPadマスターブック2016』(共著)、『macOS Sierraマスターブック』、『大きな字だからスグわかる!iPadかんたん入門』など、著書、訳書多数。

関連タグ

記事をシェアする