お久しぶりです、デザイン部の守谷です。
ここしばらくクリエイターズブログでのアウトプットができていませんでした。その間、チャットワークと私の周りで何が起こっていたかというと、グローバル展開と合わせブランドカラー／ロゴの変更、それに合わせたチャットワークの各サイトのリニューアル、一番最近ではツールのカラーもブランド統一に合わせ変更になったのをご覧いただいていることと思います。
ちなみに、既にご利用の方はお気づきかと思いますが、今回のリニューアルではUI変更を行わずにテーマ（と一部アイコンの変更）のみの最小限での調整、という方針で進みました。利用者がたくさんいるチャットワークを大胆にいじって混乱を招くより、早々にカラーだけでも「チャットワークブランド」と合わせることが重要との判断からです。
色のみの変更、という場合、バランスだけ見ていればOK！簡単！速攻完了！そうは行きません。
もしもそれだけでOKという場合、似通った色をジェネレーターで作成してツール上でポチポチしていけば完成するでしょう。それこそ今巷で話題のデザイナー不要論です。
デザイナーが握るべき箇所
今回、ラッキーだった点は、なによりその「色」を自分の自由にできる、という点でした。型を変えない施策において、最新の注意を払うべき場所が色設計です。PC版のチャットワークでは（型を殆ど変えないという前提があったので）せめてカラーコントラストの評価基準をクリアするように設計しよう、と努めました。基準というのは、『WCAG 2.0』（及び、『JIS X 8341-3:2010』）、Webをデザイン・構築する際にアクセシビリティ施策の指針となる規格です。世界基準、日本基準の規格に沿う（※等級AA）には、4.5:1のコントラスト比を最低限確保すべきとされています。
詳細はWebから確認いただけます。『WCAG 2.0（日本語訳）』の「ガイドライン 1.4 識別可能」以下に記されています。『JIS X 8341-3:2010』も、カラーコントラストの項目は『WCAG 2.0』を元に策定されているので、WCAGの基準に見合っていれば問題ありません。
上記のリンク先をご覧いただくとわかりますが、たくさんの数値が出てきます。いちいち計算するのか……とうなだれることなかれ。デザイン作業の延長（カラーピッカー）で色を抽出すれば、コントラスト数値を計測してくれるアプリも複数提供されています。
など。それぞれのツールとも、カラーピッカーで文字色／背景色のカラーを拾うと、その比率を計算して数値を算出してくれる他、WCAG基準のAA／AAA等級をクリアしているかどうかをひと目で表示してくれます。
私は主に3つ目のColour Contrast Analyserを利用しています（Macを利用しているのもありますが、ColorTesterは複数画面で利用するのに少々面倒なため）。「カラー・コントラスト・アナライザー 2013J」も「Colour Contrast Analyser」も、Windows版にはコントラスト比測定だけでなく、ロービジョンでのシミュレーター（ウィンドウをかぶせることでシミュレーションできる）が付いているようです。
残念……Mac利用のデザイナーは諦めるしかないんでしょうか……？と言いたくなるところですが、実は多くのWebのデザイナーが利用しているだろうPhotoshopにも、デフォルトでロービジョンでのシミュレーター（校正設定）が元々付帯しています。メニューの「表示」＞「校正設定」＞「P型（1型）色覚」／「D型（2型）色覚」でご確認いただけます。詳細はAdobe Photoshop CS4 - Photoshop CS4 カラーユニバーサルデザインとその実践例などをご覧ください。記事はCS4を利用していますが、もちろん最新のCC 2014にもこの機能はついています。
これらの数値・シミュレーション結果を元に、デザイナーはカラーバランスを判断していくことになります。細かい「色同士のバランスを調整する」という話はまた別途にしようと思いますが、この調整はジェネレーターでは未だ不可能です。ここに人間のデザイナーが介在する意味があるように私は感じています。今回はたまたま色の話ですが、色だけでなく大きさや形の「バランスを取る」のも、まだまだ自動化ができないものです。
「使ってもらうデザイン」についてUIやUXの話題はわかりやすく伝わりやすいのですが、私はこういった基本的な点もデザイナーには大事だなと考えています。「Webのアクセシビリティ」というのは、コード側からやっていこうぜ！論に行きがちな面を感じるのですが、見た目でのアプローチでの権限を握ることができるのはデザイナーの感覚です。「なんとなく」でかっこいいのはアーティストの仕事なので、デザイナーならばそこに数値を反映すべきでしょう。
アクセシビリティの話はなかなか伝わらない、らしい
なぜこんな唐突にアクセシビリティ云々言っているかというと、実は先日、Yahoo!さんの秘密基地（と私が勝手に思っている）Yahoo! JAPAN BASE6にておこなわれた「アクセシビリティやるぞ！祭り by Yahoo! JAPAN・ミツエーリンクス・BA」に参加してきたところなのです。そこで改めて「アクセシビリティ」について考えさせられたのとともに、思う所があったので補足です。
余談ですが、非常に面白いなと思ったのが「グラフィックレコーディング」というのをされていたこと。登壇者たちが話すことを、すぐ横でリアルタイムにイラストにしていくというもの。これらの模様と共にTwitterのハッシュタグがTogetterにまとめられています。
すごくためになった内容がたくさん紹介される会だったのですが（スライドなど先述のTogetterから見られるので、資料をご確認ください）、その中で私が一番衝撃に感じた点が「アクセシビリティのイベントにいつも同じようなメンツしか居ない」ということでした。
この日も、今までアクセシビリティのイベントに1回も参加したことがないという人は1〜2割しか居ませんでした。しかもそこにいる誰も彼もが「なかなか（内外に必要性が）伝わらない」と言い、プロジェクトの話になるとどの段階でアクセシビリティの話をすれば漏れずに対応ができるのか、という話題にすらなっていると。
一番ショックを受けたのが、「デザイナーにアクセシビリティの重要性をどう伝えたらいいのか」という話が上がっていた点でした。もちろん、その場にエンジニアやディレクターが多かったのかもしれません。でもそれにしても、ユーザーが使う部分に一番近い所の決定権を持つのがデザイナーのはずなのにそんな意見が出てしまうこと自体に、一言残しておいた方がよいように感じました。
私が思うに、職域・職能関係なく皆が基本作業として丁寧にWebを作ること＝アクセシビリティを確保することなのではないかなと思います。なんだかアクセシビリティって難しそう……という人にこそ簡単な所から触れてほしいな、という願いを込めて今回この記事を書いています。
難しそうだから、もう少し勉強してからやってみようというものではなく、書かれていることは意外と簡単で、それさえクリアできればアクセシビリティが担保される！と思えば見てみようかな、という気持ちになりませんか？実際、『JIS X 8341-3:2010』は読んでみるとわかりますが、非常にわかりやすい言葉で書かれているので怖いことはありません（予定通りに行くと来年改訂されるそうなので、その時に買ってみるでもまだ遅くはないと私は思います）。
そういえばパネルディスカッションの際に、登壇の伊原さんが「デザイナーにわかりやすいアクセシビリティ施策の資料」として紹介されていた、株式会社コンセントの『The ustwo™ Pixel Perfect Precision Handbook 2 日本語版』ですが、私も大好き（というと語弊がありそうですが……）で常に開きながらデザイン作業をおこなっています。とても読みやすいので、ご覧でない方はぜひ。
ちなみに、アクセシビリティにまつわるAdvent Calendarもありますので、ちょっとでも気になったという方はこちらも要チェックです。