ゲームの配色の決め方：3色で整える

なぜ3色なのか

色数を絞る理由は「選択肢を減らすと判断が速くなる」というシンプルな原則にあります。画面の要素ごとに「この色でいいか」を毎回迷っていると、作業が止まるうえに結果もばらつきます。3色に役割を決めておけば、新しいUI部品を作るたびに「この部品は背景色か、主役色か、アクセント色か」を問うだけで済みます。

また、プレイヤーの視線誘導という観点でも3色は機能します。背景色は目に入り続ける広い面積、主役色はキャラクターやボタンなど注目させたい要素、アクセント色は「今すぐ押す」「残り時間わずか」など瞬時に気づかせたい箇所に使います。この役割分担が崩れると、何を見ればいいか分からない画面になりやすいです。

3色の役割を決める

まず3色に名前と役割を割り当てます。

• ベースカラー：画面の大半を占める背景や地の色。視覚的な疲れを左右するので、彩度を低めに抑えるのが基本です。
• メインカラー：キャラクター・プレイヤーが操作するオブジェクト・主要なボタンに使う色。ゲームの「顔」になります。
• アクセントカラー：警告・強調・スコア更新など、一瞬で気づかせたい要素に使う色。画面全体の5〜10%程度の面積に収めると効果が出やすいです。

この3役を決める前に「ゲームの体験として何を感じさせたいか」を言葉にしておくと、色選びの判断軸ができます。たとえば「静かで集中できるパズル」なら低彩度の寒色系のベースカラーが合いますし、「速くて熱い対戦ゲーム」なら彩度の高い暖色系のメインカラーが機能します。

色の選び方：手順と判断基準

ステップ1：ベースカラーから決める

ベースカラーは「何もない状態」の色なので、プレイヤーが長時間見続けても疲れにくい色を選びます。純白（#FFFFFF）や純黒（#000000）は実は扱いが難しく、コントラストが強すぎて目が疲れやすいです。白に近いなら少しグレーや黄みを混ぜた色、黒に近いなら完全な黒よりわずかに彩度を乗せた深い色にすると馴染みやすくなります。

ゲームのムードが決まっていない段階では、HSL（色相・彩度・明度）で彩度を10〜20%程度、明度を85〜95%（明るい背景の場合）または10〜20%（暗い背景の場合）の範囲で試すのが出発点になります。

ステップ2：メインカラーをベースと対比させる

メインカラーはベースカラーと明確に区別できる必要があります。判断の目安は「コントラスト比4.5:1以上」です。これはWebアクセシビリティの基準（WCAG 2.1のAAレベル）として広く使われており、テキストが乗る要素にはとくに意識する価値があります。無料のコントラストチェッカーツールをブラウザで検索して確認できます。

メインカラーの色相は、ゲームのムードに合わせて選びます。同時に「ベースカラーの補色（色相環で正反対）」か「類似色（色相環で隣接）」かという軸で考えると選びやすいです。補色関係にすると活発でメリハリが出やすく、類似色にするとトーンが揃って落ち着いた雰囲気になります。

ステップ3：アクセントカラーをメインカラーと差別化する

アクセントカラーの条件は一つです。「他の2色と並べたとき、即座に目立つこと」。そのため、ベースカラーやメインカラーと色相を大きくずらした色を選びます。メインカラーが青系なら、アクセントカラーはオレンジや黄色が機能しやすいです。

アクセントカラーは使う面積が少ないので、彩度を思い切って上げても画面全体がうるさくなりにくいという特性があります。ここだけは少し派手な色を試してみる余地があります。

失敗しやすいパターンと対処法

同じ彩度・明度の3色を並べてしまう

色相だけ変えて彩度と明度がほぼ同じ3色を並べると、それぞれの「役割の差」が伝わりにくくなります。ベースカラーは彩度低め・明度を端に寄せる、メインカラーは中程度の彩度、アクセントカラーは高彩度、というように明度・彩度で差をつけると役割が視覚的に伝わりやすくなります。

アクセントカラーを使いすぎる

「目立つ色だから重要な要素に多く使いたい」と思うと、アクセントカラーが画面の30〜40%を占めてしまうことがあります。この状態ではアクセントカラーが「普通の色」に見えてしまい、本当に気づかせたい要素が埋もれます。アクセントカラーはUIの中で最も少ない面積に留めることが、その効果を維持する条件です。

3色を決めた後に「もう一色だけ」を追加する

3色ルールは「決める段階で4色目の誘惑と戦う」ことが運用の本質です。ゲームを作り進めると「この状態表示には別の色が必要」と感じる場面が出てきます。そのとき、既存の3色の明度や彩度を調整して対応できないかを先に試します。どうしても必要な場合は「既存3色のうち1色を入れ替える」という選択肢も考えられます。色を追加するより、既存の色を調整する方向を優先することで、ルールの意味が保たれます。

実際の確認手順

配色を決めたら、以下の順で確認します。

1. グレースケールで確認する：画面をグレースケール表示にして、3つの役割の要素が明度の差だけで区別できるかを見ます。色覚の違いに左右されにくい画面かどうかの目安になります。
2. 小さい画面サイズで確認する：スマートフォンサイズに縮小したとき、アクセントカラーの要素が見えるかを確認します。面積が小さすぎて消えてしまう場合は、要素のサイズを見直します。
3. 実際にプレイしながら確認する：静止画では気にならなかった色の組み合わせが、動きのある状態で気になることがあります。10〜15分ほど自分でプレイしてみて、目の疲れや見づらさを感じないかを確認します。

次の行動

手元に作りかけのゲームがあれば、今使っている色をベースカラー・メインカラー・アクセントカラーの3役に分類してみてください。3役に収まらない色がある場合、それが「本当に必要か」を問い直す出発点になります。配色が整ったゲームはアソバースに投稿してプレイヤーに届けられるので、ひと通り動く状態になったら公開を視野に入れてみてください。

参考資料

• WCAG 2.1（Web Content Accessibility Guidelines）—W3C
• Color Contrast Checker — WebAIM