初めまして。Yahoo! JAPANでAthenzというOSSセキュリティプラットフォームの運用・開発を行っている松本拓也です。
唐突ですが、私は色覚異常です。今回は私が見ている色について、どんなふうに見えているのか、少しでも理解していただけたらと思います。そして、それを踏まえてYahoo! JAPANのアクセシビリティーの取り組みを簡単に紹介します。
色覚異常ってどういうもの？
色覚異常という症状についてどれほどご存じでしょうか？ 色覚異常は色を見る能力に何かしら異常があることを示し、色が見えなかったり、わからないという症状があります。（今回は色覚異常に伴う視力異常については触れません）色覚異常は男性の5％程度に見られ（このあと紹介する1型や2型）、非常に人数が多いのです。
色覚異常とは色が見えない症状であると前述しました。そのため、「色覚異常の人はモノクロの世界が見えている」と思うかもしれません。しかし、一概にそういったことはありません。一言に色覚異常といっても種類があるのです。下記の画像をつかってどのような種類があるのか説明します。（お使いのデバイスによって違いがわかりにくい場合があります）
色が全くわからない人
全ての色が識別できません。モノクロの新聞のように外界が見えています。この症状である人は極めて少なく、数万人に1人といった割合です。 （1色覚・全色覚異常）
赤色が見えない人
赤色が見えない（見えにくい）症状です。通称、赤色覚異常と言われています。日本人は男性の20人に1人、女性の500人に1人の割合で存在します。 （1型2色覚）
緑色が見えない人
緑色が見えない（見えにくい）症状です。通称、緑色覚異常と言われています。こちらも日本人は男性の20人に1人、女性の500人に1人の割合で存在します。 （2型3色覚）
青色が見えない人
青色が見えない（見えにくい）症状です。通称、青色覚異常と言われています。数万人に1人という割合で存在します。 （3型2色覚）
私が見ている世界
冒頭でも言いましたが、私は色覚異常です。前記した色覚異常の種類で分類すると赤色が見えない状態（1型2色覚）です。これは病院で診断していただいたものです。1型2色覚に加えて、緑や青色も色覚能力が低いという診断もされました。そんな私が普段どんなふうに見えているかを紹介します。
この4枚の画像は、皆さんにはどのように見えているでしょうか？ 同じ構図で色が異なる写真だと思います。私にとっては左上（通常）・右上（1型）・左下（2型）は全く同じ画像に見えます。色の違いは一切感じられません。3型（右下）の画像はクマノミ自体の色に違いは感じず、背景にあるサンゴやイソギンチャクのみ色の違いを感じます。
また別の画像ですが、こちらも同様です。私には左上（通常）・右上（1型）・左下（2型）は全く同じ画像で、色に違いを全く感じません。色覚正常者であれば、紹介したこれらの画像は色が大きく異なる画像として見えていることでしょう。通常の画像であればおいしそうに見えている野菜の写真も、他の画像ではおいしそうと思えない色になっているかもしれません。
ここまで紹介した画像のようにシミュレーションで色を加工すれば、色覚正常者が色覚障がい者の見え方を理解はできます。しかし、普段の生活で見え方を完全に理解することは不可能です。逆もしかりで、色覚障がい者が色覚正常者の見え方を理解することも不可能です。
UNOができない！ 肉の焼け具合がわからない！
今まで生きてきて、色がわからずできなかったこと、不便だったことは多々あります。例えば、私はUNO（カードゲーム）ができません。今、場に出ているカードが何色かわからないです。学生時代はチョークの色で悩まされました。先生は「赤色の部分テストに出すよ！」と言いいますが、私は赤色がわかりません。友人と焼き肉に行って、私がお肉を食べようとすると「まだ生焼けだよ。赤いよ！」と言われたことがあります。私には焼き加減の区別がつきません。他にも、雨雲レーダー、ウェブページ、さまざまなところで異常を感じることはあります。
実例を挙げます。
2つの色付き円グラフです。まずは左のグラフを見てください。
Bad
左のグラフは色で項目種別を表しています。しかし、私はそれぞれの色が何に該当するのか一致させることができません。色だけに何かしらの意味をもたせてしまうと色覚障がい者にとっては理解ができないものになってしまいます。また、これらを用いて何かしら口頭で話す場合であっても、「赤色が...。黄色が...。」と言われても同様にわかりません。
Good
これを、右のグラフのように何色がどの項目にあたるのかを添えるだけで誰しもが十分に理解できるものに修正できます。口頭で話す場合も色だけで判別させず、指差しを併せて話したり、項目名を言うだけで色覚障がい者であっても理解ができます。
ここまで例を挙げたように、さまざまな状況で異常と直面することがあります。このような問題や異常を日本では男性20人に1人、女性500人に1人といった割合で抱えており、そこそこ多いのではないでしょうか。
Yahoo! JAPANの色覚配慮の取り組み
色覚異常の有無に関わらず、誰でも同じように利用できるサービス提供の目指し、ヤフーではガイドラインを設けて色覚に配慮したウェブ・アプリのUI設計が行われています。また、Yahoo!天気・災害では、ロービジョンの方による天気図の視認性確認も行われています。よろしければ、こちらの資料もご覧ください。
Yahoo!ファイナンスアプリのUI改善を例に紹介します。
Before（色の違いがよくわからない）
例えばこちらの例。上記の画像は 昔のYahoo!ファイナンスアプリのスクリーンショットで、一番左が元画像です。それぞれの型の色覚異常の見え方をシミュレートした画像を並べました。
恐らく、チャートの色が2色あり、株価の上昇や下降に応じてきれいに色分けされているのだと思います。しかし私の目には、色の違いがよくわからず、注意深く見ると少々違う気がする程度でしか感じられません。ひと目見ただけでは違いがわかりません。
After（色の違いがわかる）
これが、色覚を意識して改修され下記のようになりました。
いかがでしょうか。私が見てもチャートの色に明らかに違いがあり、株価上昇や下降がひと目見てわかるほどに改修されています。
色覚正常者であっても色覚障がい者の見え方をシミュレートされた画像をみて、改修前と改修後では改修後のほうがわかりやすくなっていませんか？
投資のような利用者が限定的な分野で色覚に配慮されることは珍しく、対応されているケースは少ないようです。その中、Yahoo!ファイナンスアプリは色覚の配慮が覗えました。
まだ至らぬものもありますが、Yahoo! JAPAN では色覚を意識してさまざまなものが設計され、利用者の障壁をなるべく少なくするよう配慮しています。 これらのチェックはシミュレーターソフトを利用することで簡単にチェックできます。スマートフォンでもシミュレーション可能なアプリケーションがあるので、UIの作成であったり、色付きの図を作成するときには利用してみるとよいかもしれません。
終わりに
色覚障がい者の見え方を例に挙げ、見え方の違いや配慮について述べました。この記事で私が伝えたかったことは、色覚異常という事象を覚えておいてほしいということです。 これまでにあげた例のように、色だけで何かを識別させる図やUIを作っているかもしれません。そのときに、色だけで識別させないような工夫をしたり、シミュレーターを用いて見分けやすい色遣いに変更してみる。そんなことをしていただけたら私はとてもうれしいです。
色覚異常である私にはとてもうれしいことですが、最近は色覚を意識してさまざまなものがデザインされているように感じます。デザイナーの皆さん、意識されたテンプレートやフレームワークを作ってくれて・使ってくれてありがとうございます。 色覚に配慮してUI設計することで、より多くの人が不自由なくサービス・アプリを使えるようになることを願っております。
こちらの記事のご感想を聞かせください。
- 学びがある
- わかりやすい
- 新しい視点
ご感想ありがとうございました
