ゲームUIの色の選び方：見やすさと世界観を両立する

色の役割を「情報」と「装飾」に分けて考える

UIの色に困る原因の多くは、情報を伝える色と世界観を演出する色を同じ基準で選んでいることにあります。この二つは目的が違うため、選び方の基準も別に持つ必要があります。

情報を伝える色とは、体力ゲージ・残り時間・警告アイコン・押せるボタンと押せないボタンの区別など、プレイヤーが瞬時に判断するために使う色です。ここでは「コントラスト比」と「色だけに頼らない設計」が最優先になります。

装飾としての色とは、ウィンドウの背景・タイトルの飾り・アイコンの質感など、世界観やトーンを演出するための色です。こちらはゲームのムードに合わせて選んで構いませんが、情報を伝える色の視認性を下げないよう、「舞台」として引き算の役割を担わせます。

この区別を先に決めておくと、「ファンタジーらしい深紫の背景に、見やすいHPバーを置く」という矛盾に見える問題が、「背景は深紫のまま、HPバーには明るい緑と白のテキストを組み合わせる」という具体策に変わります。

コントラスト比：見やすさを数字で判断する

色の見やすさは感覚だけでなく、コントラスト比（contrast ratio）という数値で測れます。WCAG（Web Content Accessibility Guidelines）では、通常サイズのテキストに4.5:1以上、大きなテキストや太字には3:1以上を推奨しています。この基準はWebアクセシビリティのものですが、ゲームUIのテキスト判定にも実用的な目安として使えます。

コントラスト比は無料ツールで即座に確認できます。代表的なものは以下のとおりです。

• Colour Contrast Analyser（TPGi提供）：ローカルで動くデスクトップアプリ。スポイトでスクリーンから直接色を拾えるため、完成済みの画面を素早く検証できます。
• WebAIM Contrast Checker：ブラウザ上でHEX値を入力するだけで比率が出ます。
• Figmaのアクセシビリティプラグイン（Contrast、A11y Color Contrastなど）：デザインデータ上でそのまま確認できます。

スマートフォンでは画面の輝度設定や照明環境がPCより変動しやすいため、PCで4.5:1を超えていても屋外の明るい環境では見づらく感じることがあります。UIの文字や数値が重要であれば、5:1〜7:1を目安にしておくと余裕が生まれます。

世界観から色を選ぶ手順

世界観と見やすさを両立させるには、「先に世界観の色を決め、そこからUI色を派生させる」順番が有効です。逆に「先に見やすい色を決めて、後から世界観っぽく調整する」と、どちらも中途半端になりやすいです。

1. キーカラーを2〜3色に絞る

ゲームのコンセプトや世界観から、中心になる色（キーカラー）を決めます。この段階では「見やすさ」より「世界観としての正しさ」を優先して構いません。たとえば、海洋冒険ゲームなら深い青緑と白、ダークファンタジーなら深紫と金、レトロピクセルなら4〜8色のパレットです。

2. UIの「地」と「図」を割り振る

キーカラーのうち、暗い色または中間色をUIの背景（地）に、明るい色または高彩度の色をテキストやアイコン（図）に割り振ります。コントラスト比ツールで確認しながら、明度差が十分かどうかを確かめます。

この時点で比率が足りなければ、キーカラーの明度だけを調整します。色相（赤・青・緑などの種類）や彩度を変えると世界観が崩れやすいため、明度の調整を最初の手段にします。

3. アクションカラーを一色追加する

「ここを押してください」「これが重要です」を示すためのアクションカラーを、キーカラーとは異なる色相から一色だけ選びます。たとえば青系の世界観なら、オレンジや黄色がアクションカラーとして映えます。これを多用すると意味が薄れるため、「押せるボタン」「警告状態のゲージ」など使う場面を事前にリストアップして制限します。

4. 無効・完了・警告の状態を設計する

ゲームUIには「押せない状態のボタン」「クリア済みのステージ」「体力が少ない警告」など、状態による色の変化が必ず必要です。これをキーカラーとアクションカラーの組み合わせで作るか、グレースケールを使うかをここで決めます。

グレースケール（白〜黒の無彩色）は「無効・非アクティブ」を示すのに便利で、どんな世界観とも衝突しにくいです。警告には赤系が直感的に伝わりますが、世界観が和風・モノクロ・ホラーなどの場合はオレンジや点滅で代替する方が自然に見えることもあります。

色だけに頼らない設計：色覚多様性への配慮

赤と緑を同じ強度で区別のサインとして使うと、色覚の特性によって見分けが難しいプレイヤーが一定数います。「体力ゲージが緑なら安全、赤なら危険」という設計はよく使われますが、色だけに頼ると伝わらないケースがあります。

対策として有効なのは、形・アイコン・テキスト・位置を色と組み合わせることです。ゲージの残量が少なくなったとき、色の変化だけでなくゲージの数値表示を加える、アイコンに「!」マークを出す、といった補助情報を持たせると、色覚の違いに関係なく状態が伝わります。

Figmaには色覚シミュレーションプラグイン（Color Blind、Able など）があり、自分のデザインが異なる色覚でどう見えるかを確認できます。完成前に一度確認しておくだけで、改修コストを大きく減らせます。

よくある失敗と判断基準のまとめ

UIの色で詰まったときに確認するポイントを整理します。

• テキストが背景に溶け込む、確認すること：コントラスト比がテキストサイズに対して基準を満たしているか
• 大事なボタンが目立たない、確認すること：アクションカラーが他の色と近い色相・明度になっていないか
• 世界観と合わない色になった、確認すること：キーカラーの色相・彩度を変えず、明度だけで調整できないか
• 状態の違いが伝わらない、確認すること：色だけに頼らず、形・テキスト・アイコンで補えているか
• スマホで見ると色が違う、確認すること：実機で確認しているか、輝度の余裕を持ったコントラスト比か

「世界観のためにコントラストを妥協する」か「見やすさのために世界観を妥げる」かという二択は、多くの場合に発生しません。明度の調整だけで両立できることが多く、それでも解決しない場合はUIと背景の間に半透明のシャドウやアウトラインを挟む方法が有効です。ドロップシャドウや文字アウトラインは、派手な背景の上でもテキストの視認性を保つ古典的な手段です。

次の行動

今作っているゲームのUIスクリーンショットを撮り、Colour Contrast AnalyserやWebAIM Contrast Checkerでテキスト部分のコントラスト比を一箇所だけ確認してみてください。数値が基準に届いていなければ、色相と彩度を変えずに明度だけを調整して再測定するのが最初の一手です。整理した色のルールをそのままHTML/CSSのCSS変数にまとめておくと、アソバースへ投稿する際にも変更が一箇所で済み、メンテナンスがしやすくなります。

参考資料

• WCAG 2.1（W3C Web Content Accessibility Guidelines）
• Colour Contrast Analyser（TPGi）
• WebAIM Contrast Checker（WebAIM）
• Figmaプラグイン：Able、Color Blind