色覚特性を考慮したUIを作るために
はじめに
色覚特性やカラーユニバーサルデザイン（色覚特性に配慮した色使い）の基本的な考え方については以前公開したこちらの記事を見ていただくのがいいと思います
記事内でも紹介していますがとてもわかりやすいサイトはこちら
目的
以上のサイトや公式テキスト[1]では色覚特性を考慮したデザインを実現するためにおおまかに以下のようなステップが挙げられています
- 想定ユーザーや利用シーンを想定する
- 推奨配色などを参照し、見やすいデザインをする
- 想定ユーザーにとって見やすいデザインになったかチェックする
- 当事者に確認してもらう
- シミュレーションツールを利用する
- チェックの結果をうけ修正する
ここで問題となるのはステップ3ではないかと思います
身近に協力してもらえる当事者がいるとは限りませんし、時間的経済的制約から依頼ができるとも限りません
したがって、多くの場合ではツールを利用する方法を採用することになると思います
シミュレーションツールとしては色覚模擬メガネやAdobe Photoshopなど多くのツールが紹介されており、高価なもの、無料のもの、高機能なもの、使いやすいもの様々あるので選ぶのが大変
これらを整理して紹介したいと思います
色覚特性シミュレーター
ハード
-
色覚模擬メガネ[2]
メガネ型でかけると色覚特性を体験できる
先天的な色覚特性のほかに高齢者の見え方を再現したものもある
約3.5万円と高価、デザインを専門にする人や部門は持っていても良いかもしれないが、個人のレベルで所有するのはハードルが高そう -
FlexScan U[3][4]
ナナオ（現EIZO）製のモニター、モード切替で色覚をシミュレートした画面表示が可能
EIZO製なだけあって非常にお高い
ソフト
-
Adobe Photoshop, Illustrator
言わずと知れたお絵かきソフト
色校正の機能の一つとして色弱擬似変換機能が提供されている[5]
プロ向けなだけあり、2~3千円/月と高価 -
miChecker[6]
総務省が提供しているアクセシビリティ評価ツール
Javaがないと動かないので色々めんどくさい -
aDesigner[7]
現在はJavaでおなじみEclipseが提供しているアクセシビリティ評価ツール
これもJavaがないと動かないので色々めんどくさい -
Chromatic Vision Simulator[8]
Web版、スマホ版（iOS, Android）に対応しており、いずれも無料
画像の変換だけでなく、カメラ映像の入力にも対応している点も便利
紹介されているものは以上です
手ごろにまともに使えるのはChromatic Vision Simulatorぐらいかと思います
おすすめ
これだけじゃほぼ一択でおもしろくないので、私が使っているおすすめも紹介します
- DevToys[9]
DevToysはエンコーダーやJsonフォーマッターなどをまとめたツールセットです
とても便利なのでソフトエンジニアはみんな入れればいいんじゃないかと思っています
このツールの中には画像変換ツールなどがあり、その中に色覚異常シミュレーターもあります
画像を読み込むとそれぞれの色覚特性をシミュレートした画像が表示されます
なんか不自然なポリゴンになってしまっていますがスクショの都合で、アプリの表示はきれいです
カメラ入力には対応していないのでその点はChromatic Vision Simulatorに劣りますが、そのほかのツールも便利でソフト開発者にとっては有用なので、まとめてできるDevToysもおすすめです
さいごに
せっかく良いサイトやアプリを作っても、一部に人にとっては見づらい使いづらいというのはもったいないので、ぜひこれらのツールを活用して全ての人にとって見やすい、使いやすいプロダクトを作っていけると良いですね
Discussion