Happy Elements 株式会社 カカリアスタジオ Advent Calendar 2016 20日目の記事です。
担当はチーフデザイナーの @sailtask です。
はじめに
ゲームのグラフィックやUI、ルックを作る上で、色彩設計や配色のバランスを考えるのは、見栄えだけでなくその操作性やゲームを通じた体験全てにおいて、非常に重要な意味を持ちます。
カカリアスタジオでは、1タイトルごとに専任のグラフィックデザイナーがUIからバナーなどのグラフィック素材制作を行う体制となっていますが、実制作に当たって意識してもらっている考えの一つに「カラーユニバーサルデザイン」があります。
色覚特性とカラーユニバーサルデザイン
色の見え方について
「色」とは、そもそも人によって見え方が異なります。その中でも、先天的にその錯体細胞（色を見分ける細胞）の数が少なかったり、または疾患などが原因で、特定の色域を見分けることができない方が存在します。
大多数の人の色の見え方を一般色覚と呼ぶのに対し、それらの見え方を色覚特性（色覚異常）と呼びます（色弱・色盲と呼ばれることもあります）
色覚特性の分類
色覚特性は、大きく分けて2つのグループ（P型、D型）に分けられます。いずれかを保有する人は、日本人男性の約5%（20人に1人）、女性の場合は約0.2%（500人に1人）という、わりとありふれた割合で存在していることが分かっています。全体では約320万人以上が保有者とされています。
この割合は欧米圏の場合、男性で約8%、女性で約0.5%と増加する傾向にあり、逆にアフリカ圏などでは減少する傾向にあるようです。
このことから、ゲームのように不特定多数のユーザーへ向けて発信する製品やサービスのデザインについては、それら色覚特性を持つユーザーを考慮したした色彩設計（= カラーユニバーサルデザイン）を取り入れる必要性があると考えられます。
特に、海外を意識した作品、男性向けジャンルなど、保有割合が大きいターゲット層に向けたゲーム、パズルゲームなどの属性の色分けがゲームプレイの鍵となっているタイトルについては、非常に重要な考え方と言えます。
参考：色覚型と特徴 - 特定非営利活動法人カラーユニバーサルデザイン機構CUDO
ツール
実際に、色覚特性に配慮したUIを作る際に利用しているツールや機能についての紹介です。
Photoshop
Photoshopには、標準機能でP型、D型の色域をシミュレートすることができます。
メニューの 表示 > 校正設定 より、P型（1型）色覚 または D型（2型）色覚 のいずれかにチェックを付けることで、それぞれの色覚フィルターを現在のドキュメントに適応させることが出来ます。（あくまで見え方を変えているだけなのでドキュメントの内容には影響しません）
戻す時は 表示 > 色の校正 のチェックを外すことで元に戻ります。
Skala View / Skala Preview
Skala View と Skala Preview は、紐付けられたデバイスにPSDファイルをリアルタイムで表示するアプリ（とソフトウェア）です。Photoshopと連携することでリアルタイムで実機でデザイン確認が出来るため、主にそういう使い方をしていますが、こちらもシミュレート機能があります。
| 通常の見え方 | シミュレーター呼び出し | 結果 |
|---|---|---|
 |
 |
 |
これはちなみに以前は有料でしたが、いつからか無償で公開されるようになりました。
色のシミュレータ（おまけ）
色のシミュレータ はデバイスのカメラを通じて、景色に色々な色覚特性のフィルタを掛けるアプリです。実用的なツールではありませんが、色覚特性を持つ人がどういう景色を見ているのかを体験できます。
おわりに
ゲームのUIやグラフィックは基本的にシュッとしたものやイケイケなものを求められることが多いですが、そういうアウトプットにたどり着くまで、実はこういうことを考えてデザインをしているということが伝わると嬉しいです :)
ちなみにサンプルのイラストは当社マスコットキャラクターのハピエレちゃんです。かわいい。
カカリアスタジオで一緒に働く仲間を募集してます！
Happy Elements株式会社 カカリアスタジオ ではエンジニアだけでなく、クリエイティブ職（グラフィックデザイナー、イラストレーター、アニメーションデザイナー）も社員、アルバイト問わず積極的に募集しています。ご応募は こちら から。