ピヨピヨエディット2.0

富士通より「ColorSelector 5.0」なるツールが提供されていましたので試してみました。

Webデザイナー向けのソフトで、背景色と文字色の組み合わせが色弱者の方に見やすいかどうかチェックするためのソフトです。

富士通がこんなソフトを無償で提供していたなんて、意外でした。
サイトを見てると、ユニバーサルデザインの一つのツールとして提供されてるようです。
【リンク】富士通のユニバーサルデザイン［富士通］

今回試してみたColorSelectorは、３つのツール群のうちの一つです。
【リンク】富士通アクセシビリティ・アシスタンス［富士通］
３つとも無償！　太っ腹だなぁ。

ColorSelectorは、こちらのページよりダウンロードします。
【リンク】ColorSelector［富士通］

こんな感じのページにアクセスします。ページ中ほどにダウンロードページへのリンクがあります。Win版、Mac版あります。

ダウンロードしたらディスクイメージ内にできた「Fujitsu ColorSelector」というフォルダを、アプリケーションフォルダに入れればインストールは完了です。

起動してみます。

ウインドウ上部にプレビューがあります。
その下に文字色と背景色を指定するところがあり、その指定した色が色弱者の方に見えやすいかどうか判定する結果を表示します。
判定は「一般」「白内障」「第一色覚（赤）」「第二色覚（緑）」「第三色覚（青）」に分かれています。３本のアンテナがあって、わかりやすさのレベルを示してくれます。３本あるのが一番理想で、２本アンテナになると「○」が「×」になります。
一番下にはカラーパレットが用意され、文字色、背景色の指定をここから行うこともできます。カラーパレット内に「×」の表示があるのは、理想でない組み合わせの色を示しています。

試しに、文字色と背景色を変更してみました。

この組み合わせだと「白内障」と「第一色覚（赤）」に「×」マークがでました。
ユニバーサルデザイン的には変更した方がいいよ、ってことです。こんな感じで、リアルタイムで判定してくれるので、色の選択はやりやすいと思います。

下のカラーパレットの「×」マークは、単に「×」マークなので、どれでダメなのか分かりにくい…と思いましたが、ちゃんと考えられてました。

カーソルをカラーの上に持って行くと、ちゃんと教えてくれました。気が利いてます。

このカラーパレットもちゃんとリアルタイムに反応してくれます。

とある背景色の時の「×」マーク。

背景色を変更します。

と、カラーパレットの「×」マークもちゃんと変化します。


色の選択は、カラーパレットによる選択の他にも、数値入力による指定方法もあります。
それがあるのはアプリウインドウを見れば分かるので説明不要…かな。
ただ、「スポイト」というボタンはおもしろい挙動をしたのでご紹介。
スポイトボタンを押すと、スクリーンキャプチャを撮ります。撮ったスクリーンキャプチャをアプリ本体のウインドウの左隣に、別ウインドウを開いてその中に表示します。

左側のウィンドウがスクリーンキャプチャされた画面です。
そのウィンドウ内のみでスポイトツールは動作します。スポイトツールが指している場所の色が適しているかの判定も、これまたリアルタイムで反応してくれます。

文字と背景という２色の組み合わせが、どれだけ不自由なく認識してもらえるか。
携帯サイト作成なんかに使ってほしいソフトだと思いました。普通に見にくいところ多いしなぁ。

カラーユニバーサルデザイン（CUD）というデザイン方法があります。色弱者の方にも情報が正確に伝わるように配色も工夫しようというもの。
過去に記事も書きましたので、よかったら参考までに。

【過去記事】カラーユニバーサルデザイン

これに適してるかどうかチェックする方法として、モニタによるシミュレート、Webサイトを使用してのチェック方法もご紹介しました。

【過去記事】CUDに適してるかどうかチェックする方法
【過去記事】CUDをモニタがシミュレート

今回紹介するのはアプリケーションを使用してチェックする方法です。
Sim Daltonism（Donationウェア）というアプリケーションがあります。

【リンク】Sim Daltonism

上記サイトよりダウンロードします。「Sim Daltonism.app」というアプリケーションがダウンロード先にできますので、ダブルクリックして起動。
起動するとウィンドウが開きます。マウスポインタを中心として、シミュレート結果がそのウィンドウ内に表示されます。ウィンドウはサイズを自由に変更できます。

試しに、このブログがどう見えるかをやってみます。

右側が普通に表示したとき。左側がSim Daltonismによるシミュレート結果です。

シミュレートする内容も選択できます。

Normal trichromatic color vision

Dichromacy
Protanopia (no red cones; red-green blindness)
Deuteranopia (no green cones; red-green blindness)
Tritanopia (no blue cones; blue-yellow blindness)

Anomolous Trichomacy
Protanomaly (anomalous red cones)
Deuteranomaly (anomalous green cones)
Tritanomaly (anomalous blue cones)

Monochromacy
Typical achromatopsia (no cones; rod monochromat)
Atypical achromatopsia (low cones; cone monochromat)

の中から任意に選択可能です。それぞれにショートカットも割り当てられてるので、変更も簡単に行えます。用意されているプリセットも豊富です。

このアプリの一番のメリットは、同時に複数のウィンドウをひらくことができるということ。

しかも、それぞれに異なるシミュレートを表示させることが可能です。
上のキャプチャは左上は「Normal trichromatic color vision」。
右上は「Protanopia (no red cones; red-green blindness)」。
左下は「Deuteranopia (no green cones; red-green blindness)」。
右下は「Tritanopia (no blue cones; blue-yellow blindness)」。
と、４つのウィンドウに別々に割り当ててます。色の見え方が違ってるのが分かります。

せっかくなので、他にも試してみました。
まずは、カラーホイール。



RGBスライダー。



スペクトラム。



最後にクレヨン。



CUDを意識しながら作成する際には、かなり頼りになるソフトだと思います。
別ウィンドウが開く都合上、全体を一望できるわけではないのがマイナスになるかもしれないけど、複数のウィンドウが開けると考えれば、そのことが逆にメリットになります。色弱者の方の見え方にも幾通りかあるため、すべての場合において見やすいようにするために、それらを同時に確認できることはかなりの効率アップになるかと思います。

Illustratorで作業しながら必要に応じてアプリケーションを起動して確認。もしくはマルチモニタという恵まれた環境なら、別のモニタに表示させておけば確認しながらの作業も可能になります。

カラーユニバーサルデザインに関する記事をいくつか書きました。
【過去記事】カラーユニバーサルデザイン
【過去記事】CUDに適してるかどうかチェックする方法

高品質なモニタで有名なナナオが、モニタそのものに色弱者の見え方をシミュレートする製品を作ってます。
【参考記事】“色による情報格差”のない社会のために――CUDO／ナナオインタビュー［ITmedia］
ITmediaの記事で、開発者へのインタビューが掲載されています。記事途中にある「一般色覚／D型色覚比較サンプル動画」はカラーユニバーサルデザインの必要性を感じるのに十分です。おいしそうなハンバーガーもピザもあんな風に見えてるんですねぇ。
製品を作ったナナオのサイトにも開設ページがありましたので参考までにご紹介。
【参考記事】カラーユニバーサルデザインとは［ナナオ］
【参考記事】カラーユニバーサルデザインを実践するには［ナナオ］
カラーユニバーサルデザインが有効な事例というのもあって、幅広い分野で必要とされてるんだなって思いました。

ナナオが出してる製品は「FlexScan S2411W-U」と「FlexScan L797-U」の２つ。
色覚シミュレーションモニター　FlexScan S2411W-U（24.1型）
色覚シミュレーションモニター　FlexScan L797-U（19.0型）
色覚シミュレーションソフトウェアの「UniColor Pro」というアプリケーションをインストールして、変換ボタンを押すことによって表示を切り替える方式みたいです。アプリケーションがソフトウェアシミュレーションを行うのではなく、モニターに切り替え命令を送って、モニター自体が表示を変換するようです。アプリケーションはあくまでモニタに指令を送るためのもので、表示の変換はモニタが担当するというハードウェアシミュレート方式です。
ハードウェアシミュレートならどのOSでも大丈夫かと思ったんですが、アプリケーションの制約から、対応OSはWindows Vista/XP/2000、Mac OS v10.3.9以降とのこと。モニタに切り替えスイッチつけるとかじゃダメだったのかな？
あと、シミュレーション表示は「オリジナルモード」、「P型モード」、「D型モード」の３つです。

実作業をしているモニタで、すぐに切り替えが可能というのは計り知れないメリットだと感じます。
変換結果を見ながら区別しやすい色にすぐに修正できる。Illustratorとかだと、簡単に色変更ができるから、ダイレクトに試行錯誤可能です。
そして、前回紹介したVischeckでは不可能だった、映像のチェックもできちゃいます。

以前、カラーユニバーサルデザイン（CUD）についてご紹介しました。
【過去記事】カラーユニバーサルデザイン

色の見え方が違う色弱者にもわかりやすいデザインをしましょう、というのがカラーユニバーサルの考え方です。でも、実際どういう風に見えるのかは分からないものです。どういう風に見えるのか分かったらいいのになと思ってたら、シミュレートしてくれるサイトを見つけました。

Vischeckというサイトがあります。
Vischeck
英語なので一瞬ひるみましたが、分かる範囲で試したことを書いてみます。

サイト左側に「Vischeck」というリンクがあり、クリックすると「Run Images」と「Run Webpages」という新たなリンク先が現れます。何となく目的が分かる、この２つのリンク先を試してみました。

まずは「Run Images」の方から。
Vischeck: VischeckImage

このページでは、アップした画像がどう見えるかというのをシミュレートしてくれます。変換結果は色弱者のタイプであるD型、P型、T型の３つの選択肢があります。この分類についてはこちらのサイトを参考にしてください。
【参考サイト】色覚の仕組みと色弱者の呼称［カラーユニバーサルデザイン機構］
Vischeckのサイトでの表記は、
D型…Deuteranope (a form of red/green color deficit)
P型…Protanope (another form of red/green color deficit)
T型…Tritanope (a blue/yellow deficit- very rare)
となっています。

サンプルとしてこのブログをキャプチャしてみました。

この画像をサンプルとしてアップロードします。
Vischeckサイト内の「ファイルを選択」ボタンを押して、画像を選択します。「Run Vischeck!」というボタンを押せば、変換結果を比較表示してくれます。

まずはD型から。

左側が元画像。右側が変換結果です。

次にP型。



最後にT型。

と、こんな感じで比較表示してくれるのでわかりやすいです。

次に「Run Webpage」を試します。
Vischeck: VischeckURL
こちらはアップロードした画像ではなくて、サイトそのものを変換してくれます。


ここでもD型、P型、T型の３つの選択肢があります。タイプを選択して、チェックしたいサイトのアドレスを入力します。サンプルとしてこのブログのアドレスを入力してみました。「Run Vischeck!」ボタンを押せば変換が始まります。


変換が終了すると、「Deuteranope simulation of http://blog93.fc2.com/piyopiyoedit/」と表示されます。「Deuteranope simulation」の文字にリンクが張ってあり、クリックすると色変換されたサイトが表示されます。
DTPな方たちは「Run Images」。WEBな方たちは「Run Webpage」が便利かな。

試して不便に感じたのは、「Run Images」だと画像が縮小されてしまうこと。「Run Webpage」は一部の画像が色変換されないことがあること。
ただ、画像に関しては別の方法でも変換可能です。Vischeckのサイトに補助ツールがありました。
ImageJというソフトのプラグインが提供されています。Vischeckの「Download」リンクからダウンロードできます。
Vischeck: Download
ページ内の必要事項に入力して（「Last Name」「Email Address」への入力は必須になってます）、使用環境に合わせてダウンロードボタンを押せばＯＫです。
ImageJはJavaで作られた画像処理ソフトみたいで、ダウンロードしたファイルをプラグインフォルダに入れれば使えるようです。
詳細説明が日本語でありました。
VischeckJ version 1.0 のインストール
これで変換すれば、画像が縮小されることなく変換されるんじゃないかと思ったり思わなかったり…というか未検証でごめんなさい。今現在、ImageJがダウンロードできなかったので、気が向いたら後日やってみるかもしれません。

前回、カラーユニバーサルデザインに関する記事を書きました。
【過去記事】カラーユニバーサルデザイン

さらに調べてたら、懐かしいもの発見しました。

Ishihara Test for Color Blindness

小学校の時、身体測定の１つとして、このテストを受けた記憶があります。これって「石原式色覚異常検査表」っていうんですね。初めて知りました。
【参考リンク】石原式色覚異常検査表［ウィキペディア］
現在は色々な問題から小学校での強制検査は廃止されているようです。

あの頃はあれが何なのかも知らずに検査受けてましたけど、数十年の時を経てようやく知ることができました。

以前、DTPオペレータという仕事をしていたときに、時々感じていたことがありました。
「自分が見ている色は、他の人と一緒なのだろうか？」
そんな疑問を時々抱きながら、毎日のように色とりどりの印刷物を作ってました。

自覚していた見え方の違いが１つだけありまして、その原因はメガネ。メガネをかけたときと、外したときに色が違って見えるんです。印刷物で言うとY2%ぐらい色かぶりで見えます。メガネ外して青空見ると、その青さにびっくりしたりします。色の見え方に関して、正常だろうといわれる私ですら、メガネをかけると他人とは違って見えるんです。

ところが、世の中にはもっと違う見え方をしてる人がいます。色弱者と呼ばれる方たち。詳細はこちらに詳しく解説されてます。
色覚の仕組みと色弱者の呼称［カラーユニバーサルデザイン機構］
学術的な解説までついてて、ちょっと難しいかもしれませんが理屈が分かると見え方が異なる理由がよく理解できるようになります。

また、参考記事としてはITmediaで取り上げられていたこの記事。
「カラーユニバーサルデザイン」って知ってますか？［ITmedia News］

いやぁ、もうびっくりするぐらい違って見えるんですね。印刷物も多くのものがカラーになり、内容の重要性を色で区別するものが多い中、色弱者の方にとっては区別がつかないこともあるという認識を持つことは、色を扱う全ての人が知っておく必要があるのかもしれません。