あなたもカラーユニバーサルデザイン

みなさま、お仕事おつかれさまです！2019年になりました。今年も張り切っていきましょう！
と、言いながら。年末にインフルエンザAに罹患！年始から致し方なし寝正月を過ごしたUXデザインセンター所属のカツメです。

昨年は体の調子を崩すことが多く、節目の年齢だからか・・・と、今年は猛進ではなく無理せず一歩一歩進んでいきたいと思います。健康第一。

さて、今回は「色」にしぼったデザインの話をしたいと思います。タイトルにもあります「カラーユニバーサルデザイン」。

「カラーユニバーサルデザイン」とは、NPO法人カラーユニバーサルデザイン機構 (CUDO〈クドー〉)が作った名称であり、一部を引用しますと、

人間の生まれつきの色の感じ方（色覚）は、大きく５つの型（タイプ）に分けることができそれぞれの色覚型には色の感じ方に異なる特徴があります。また色覚は病気や老いによって変わることもあります。
こうした人間の色覚の多様性に配慮し、より多くの人に利用しやすい配色を行った製品や施設・建築物、環境、サービス、情報を提供するという考え方を「カラーユニバーサルデザイン（略称ＣＵＤ）」と呼びます。

ということだそうです。色の世界にもバリアフリーを！

• • 先天的な色覚の違い

「色覚」とは色の波長（可視光線）をとらえた時の感覚のこと。人には色を検知する細胞というものがあり、赤系、緑系、青系と、それぞれ得意な波長がある3種類の視細胞からなります。その3種類の視細胞のどれかが機能しないと、すべてが機能した場合とは異なる色の見え方になります。

• • 白内障

目の水晶体が白く濁って光が網膜まで達しにくくなります。波長の短い青色が到達しにくくなるため黄味がかった色合いになります。薄い色と白色の区別がしにくくなったりします。

ちなみに・・・黄味がかった色合いとは、どんな風に見えていたのか？私は、フランスの画家クロード・モネの作品がとても印象的でした。印象派だけに？　モネはが白内障の時期は、黄色から赤味を帯びた色の作品が多くなっています。（調べて見てね！）

• • 緑内障

眼圧上昇などにより、視野がぼやけたり欠けたりする病気で、明暗や濃淡がわかりにくくなることも。40歳以上では20人に1人の割合で患者さんがいるという報告もあります。

先天的に変異がある日本人は男性の約5%、女性の約0.2%と言われており、5%とは血液型がAB型の男性の割合と同じなのです。結構な人数がいると思いませんか。
また、高齢化が進んでいる日本。65歳以上の人口は約27.7%となっており、日本で最も多い年代は、40代と60代。そして年齢の中央値は45〜46歳付近。（本記事執筆時点）

80代以上になるとほとんどの方が加齢性白内障の症状が見られるという調査結果があるため、これから白内障の方も増えて行くのではないでしょうか。いうまでもなく？小さい文字が読みにくくなったりの「老眼」も・・・

私たちは、エンドユーザーが誰なのか？ターゲットユーザーを明確にした上でデザインを行なっていますが、例えばそれが高齢者向けのアプリだった場合は、標準の文字を大きくしたり、はっきりとした色合いで文字を読みやすくしたりと、アクセシビリティに配慮した設計を行います。

※アクセシビリティとは、「年齢や身体障害の有無に関係なく、誰でも必要とする情報に簡単にたどり着け、利用できること」です。ユーザビリティと混同しそうですね！ユーザービリティについてはUXデザインセンターのりんりん先輩が、こちらの記事「ユーザビリティは、単なる「使いやすさ」ではない！」で説明しています。

もちろん、エモーショナルな表現をしたい時や、ブランドイメージを確立するためであったりすれば、重視するべき箇所は変わってきます。そして、色覚多様性を意識するあまり一般の人が見にくい成果物になることは避けたいとところです。

ですので、まずは「何を伝えるか」を明確にして、何のためにその成果物があるのかの目的を持って、初めにアクセシビリティの基準を設定することが重要だと思います。

私たちデザイナーに限らず、エンジニアの皆様も、プロジェクトマネージャーの皆様も、配慮できる場所は存在します。プレゼン資料、提案書、仕様書、作りますよね。文章が読みやすい、わかりやすいという点は意識されていると思いますが、「見やすい」という視点を加えると資料のレベルがアップするのではないでしょうか。

それを見るユーザーは誰でしょうか・・・？

社内の上長、取引先のお客様・・・。エンドユーザーだけではなく、社内も顧客も高齢化しているよ！

小さな文字や、背景とのコントラストの低い文字色、使っていませんか。読み手を意識しない資料は、「大事なところが読めない」「みる気が失せる」「なにがUXだ！」と、なりかねません。

提案内容や記載されている情報が伝わるより以前のところで「問題」があって、読んでももらえない・・・なんてことになると、もったいないですよね。

色使いだけではなく、文字情報を添えることで色に依存しないデザインにしたりと対応方法はいくつかありますが、そもそもどんなことに配慮すればいいのか参考になるガイドラインや、お助けツールについて紹介して、本記事は終わりたいと思います。

■Colour Contrast Analyser
https://developer.paciellogroup.com/resources/contrastanalyser/
背景色と文字色のコントラスト比をチェックできるツール。
アクセシビリティの品質基準、適合レベルをチェックできます。

ウェブアクセシビリティの規格「JIS X 8341-3:2016」とは。
「JIS X 8341-3:2016」は国際規格「ISO/IEC 40500:2012」（W3C勧告「WCAG 2.0」）と一致規格であり、高齢者や障害のある人を含む全ての利用者が、使用している端末、ウェブブラウザ、支援技術などに関係なく、ウェブコンテンツを利用することができるようにすることを目的としている。
（ウェブアクセシビリティ基盤委員会より　）

ちなみに「JIS X 8341-3:2016」の「8341」は「やさしい」です。優しさをもっていきましょう！

■Adobe Photoshop、Illustrator
https://www.adobe.com/jp/
ビジュアルデザインを行なったあと、[メニュー]　→　[表示]　→　[校正設定]　→　[P型（1型）色覚]　と選択すると、P型（1型）色覚の人がどう見えるかのビジュアルで見せてくれます。
アプリでデザインしたものでなくても、JPGファイルやPNGファイルを読み込んで表示させても確認できます。
こちらは、デザイナーでないとインストールしていないですかね・・・。

■色のシミュレータ
https://asada.website/cvsimulator/j/
スマートフォンアプリ（Android / iOS）。それぞれの色覚の型でどう見えるかカメラ機能を通して体験できるツール。画像ファイルを読み込んで確認することもできる。
ぱっと立ち上げて簡易にチェックするには便利です。社内システムのデザイン確認で、りんりん先輩が使用していました。

■カラーユニバーサルデザイン推奨配色セット ガイドブック　第２版
http://www2.cudo.jp/wp/?page_id=1565
見分けやすい色の組み合わせ、見分けにくい色の組み合わせ例や、デザインのポイントも記載されています。
具体的に何色にしたらいいんだろう？と思ったら、参考になります。

■東京都カラーユニバーサルデザインガイドライン
http://www.fukushihoken.metro.tokyo.jp/kiban/machizukuri/kanren/color.html
カラーユニバーサルデザイン推奨配色セット ガイドブックを参考に作成されたガイドラインのようです。
ですので、読みやすい方を参考にされると良いかと思います。