Google I/O 2014で発表された Google Design のガイドライン。
UI Color Palette も提案されていていいなーと思って見ていたら、ブコメで「（トップのメニューが）ピンクと青緑の縦並びは、色弱の人には判別困難かも。」とあって、ちょっとその視点で見てみよう、と試してみました。
色覚障がいとカラーユニバーサルデザインについて
「色覚障害」「色覚異常」「色盲」「色弱」など色んな言われ方がありますが、一般的な人と色の見え方が異なる障がいです。
赤色が黒っぽく見えたり、緑が黄色っぽく見えたり。
この障がいにも種類があって、３タイプあり、赤が分かりづらいP型、緑が分かりづらいD型、青が分かりづらいT型があります。
色覚障がいでもっとも割合が多いのがD型だそうです。
こういった色覚障がいの人達でも判別がしやすい色を使いましょう、というガイドラインが、カラーユニバーサルデザインになります。
残念ながらwebではあまり聞かないですね。プロダクトデザインの世界ではよく聞きます。
（昔、カメラとか機械端末とかを扱う会社さんと仕事をしてて、使う色はよく注意されました…）
東洋インキグループの「UDing®」で見てみよう！
印刷用インクなどを作っている東洋インキグループさんが素敵なカラーユニバーサルデザインを支援するツール「UDing®」を無償で提供してくれていますので、今回はこれの「UDing シュミレーター」を使って見てみました。
（iPhone版のUDing®もあるのすごいよね。今度使ってみたい）
Google Design のメニューを見てみる
まず、きっかけとなったGoogle Designのメニュー。
左上がオリジナルです。こうして見るとだいぶ違う世界ですね。
つぎに、レスポンシブなので画面をスマホサイズにしてみます。
ブコメで指摘されてたのは、コレのことかな？
確かに、似たような色が縦に並んでしまいますね。
ただ、アイコンのイメージがどれも違うお陰か、迷う事はなさそうです。
UI Color Paletteを見てみる
つぎに、提案されているUI Color PaletteをUDing®で見てみます。
サイトのキャプチャではちょっと見辛いので、こんな感じで作り直してみました。
以下はそれぞれのタイプでの見え方です。
■P型
■D型
■T型
特にLight BuleからYellowあたりは他と同等に見える色が多いですね。
アクセントカラーを選ぶ時にすこし注意したいです。
Google Design内のサンプルを見てみる
Style > Color 内に提示されていたサンプルです。
IndigoとPink、一番見辛いのはP型ですが、何となく色差が分かりますね。
UI Color Palette をつかったデザインについて
苦手ながら英語を読んでみたかぎり、
・ベースとなるカラーを含む３つの色相と、１つのアクセントカラーで構成すること
・テキストカラーはその役割に応じて明度で表現すること
ということかな、と。
そのうち日本語訳や、ざっくり説明してくれる記事が出てくると思うで、それに期待したいと思います( ˘ω˘)
テキストの役割を明度で表現するのいいなーと思いました。
提案されている明度差はUDing®を通しても分かるレベルですし、この指標はいいですね。
マテリアルデザインとかアニメーションとか、デザインの流行はまた少し変わってきてますね。
しっかりチェックしつつ、ユニバーサルな視点も忘れずにデザインしていきたいです。
色を選ぶとCUD的に選んでほしくない色をグレーアウトする、みたいなそういうツール誰か作りませんかね？作ろうかな…。
参考）
・| TOYO INK GROUP | カラーユニバーサルデザイン -誰にでも 優しく 理解しやすい 色の見え方-
・Color – Style – Google design guidelines
