色の数を数える：公式13作品の画面は何色でできているか

「何色」を決める前に数え方を定義する

スクリーンショットの色数をそのまま数えると、数千色から数万色になります。文字や図形の縁のなめらか処理（アンチエイリアス）、グラデーション、半透明の重なりが、中間の色を大量に生むためです。人が「この画面は4色くらい」と感じる数とは別物になります。

そこで次の3つの指標を使い分けます。

• 全ビン数：各色を粗く丸めて（量子化して）数えた、画面に現れる色の種類の数です。丸め方は後述するビット数で決まります。
• 主要色数：画面全体に対する占有率が閾値（例：1%）以上のビンの数です。「画面を構成している色」の実質的な数にあたります。
• 累積被覆率：占有率の大きい順に足していき、上位何色で画面の何%を覆うかを見る値です。

3つを併記するのは、全ビン数が大きくても主要色数は小さい画面があるからです。階調やなめらか処理が多いだけで、設計上の色は少ない可能性があります。この差こそが、「少ない色で成立している」かどうかを見る手がかりになります。

なお、少ないはずという前提は置きません。主要色が多い作品が見つかっても、それは実験の結果です。

準備するもの：撮影の条件をそろえる

必要なものは、13作品を開けるブラウザ、OS標準のスクリーンショット機能、テキストエディタ、記録用の表計算ソフトです。

比較が成り立つよう、撮影の条件を先に決めます。

1. カバー画像は使いません。 公式作品のカバー画像は生成したアートワークで、ゲーム画面のスクリーンショットではありません。数えるのは、作品を起動して表示された実際の画面です。
2. 拡大率とウィンドウサイズを固定します。 プレイ画面は拡大しても進行が保たれる作品ですが、拡大で縁のなめらか処理の比率が変わります。全作品で同じ条件にします。
3. サイトの表示設定を固定します。 ライト／ダークの切り替えと「動きを抑える」設定は、アソバース側で用意されています。これらが作品内の画面の色に影響するかは、この記事では断定できません。作品を開いて確かめます。影響が見えたら、設定ごとに別の行として記録します。
4. 日本語表示で統一します。 言語切り替えで文字の長さが変わると、文字の占有率が変わるためです。
5. 場面を決めます。 各作品で次の3場面を撮ります。

• 開始直後（タイトルやメニュー）
• プレイ中の典型的な盤面
• 結果や終了の画面（なければ、最も要素の多い場面）

13作品×3場面で39枚です。作品のタイトル文字組みは作品ごとに異なる（縦組みの明朝、手描き文字、郵便ラベルなど）ため、タイトル画面の色数はプレイ画面と混ぜずに別の列で集計します。

状態が複数ある作品は、基準とする状態を先に決めてから撮ります。四季と昼夜がある「余白の庭」、潮を切り替える「潮だまり」、3つの星系がある「小さな軌道」、8ステージの「プリズムの道」、3つの夜の「月夜の配達」、3ルートの「紙ひこうき郵便」、6つのレシピの「時計じかけの台所」が該当します。まずは最初の状態で1回数え、余力があれば状態を変えて追加します。

数えるコード：画像から主要色を出す

次のHTMLを count.html として保存し、ブラウザで開きます。画像を選ぶと、量子化した色ごとの占有率を大きい順に表示します。外部ライブラリは使わず、画像はこのページの中だけで読み込まれます。

<input type="file" id="f" accept="image/*">
ビット数 <input type="number" id="b" value="4" min="2" max="6">
閾値(%) <input type="number" id="t" value="1" step="0.5">
<pre id="o"></pre>
<script>
let img=null;
const $=id=>document.getElementById(id);
$('f').onchange=e=>{
  const i=new Image();
  i.onload=()=>{img=i;run();};
  i.src=URL.createObjectURL(e.target.files[0]);
};
$('b').oninput=$('t').oninput=()=>img&&run();
function run(){
  const c=document.createElement('canvas');
  c.width=img.naturalWidth;c.height=img.naturalHeight;
  const g=c.getContext('2d');g.drawImage(img,0,0);
  const d=g.getImageData(0,0,c.width,c.height).data;
  const s=8-+$('b').value, m=new Map();
  for(let p=0;p<d.length;p+=4){
    const k=(d[p]>>s)+','+(d[p+1]>>s)+','+(d[p+2]>>s);
    m.set(k,(m.get(k)||0)+1);
  }
  const n=d.length/4, th=+$('t').value;
  const rgb=k=>k.split(',').map(x=>(x<<s)+(1<<(s-1))).join(',');
  const main=[...m].filter(([k,v])=>v/n*100>=th).sort((a,b)=>b[1]-a[1]);
  let acc=0;
  $('o').textContent='全ビン:'+m.size+'\n主要色:'+main.length+'\n'+
    main.map(([k,v])=>{acc+=v/n*100;
      return 'rgb('+rgb(k)+') '+(v/n*100).toFixed(1)+'% 累積'+acc.toFixed(1)+'%';
    }).join('\n');
}
</script>

「ビット数」は、各色成分（赤・緑・青）を上位何ビットで区別するかを表します。4なら各成分16段階で、全体は最大4,096ビンです。値を下げるほど近い色が同じビンにまとまります。表示されるrgbは、ビンの中心にあたる値であり、画面の正確な色ではありません。

記録の取り方と結果の読み方

何を、どの単位で、何回記録するか

記録の単位は「作品×場面」です。1枚の画像について、次の項目を表の1行にします。

• 作品・場面、内容：例：時計じかけの台所／プレイ中
• 全ビン数、内容：ビット数4・閾値1%での値
• 主要色数、内容：閾値0.5%、1%、2%の3通り
• 累積被覆率、内容：上位3色、上位5色の値
• 色の役割ラベル、内容：主要色ごとに「背景」「主役」「状態」「文字」「装飾」など

回数は次の方針にします。

• 閾値は0.5%、1%、2%の3段階で、同じ画像を数えます。
• ビット数は3、4、5の3段階を、全作品ではなく3作品だけで試します。感度の確認が目的です。
• 同じ場面をもう一度撮り直して数字が一致するかを、少なくとも3作品で確かめます。動きのある画面は、撮るタイミングで数字が変わります。

役割ラベルの付け方

この実験の中心は、色数ではなく役割ラベルです。主要色が出たら、画像の該当部分を見て「この色は何を伝えているか」を一言で書きます。

着眼点として、確認済みの作品設計から次のものを挙げられます。

• プリズムの道：鏡と色ガラスで、灯台へ同じ色の光を届けるパズルです。光の色がルールの一部なので、色が情報として働いているはずです。ステージごとに色の構成が変わるかは、実際に数えて確かめます。
• 時計じかけの台所：針が緑の範囲に来たら止めます。「緑の範囲」が合図の色として画面の中でどう扱われているかを見ます。
• 紙ひこうき郵便：最後の6秒で赤い郵便受けへ向かいます。赤が目標を示す色として、占有率の小さな面積でどう目立っているかを見ます。
• 余白の庭：四季と昼夜があります。状態が変わると主要色の構成がどう動くかを見ます。
• 潮だまり：8種の生きものと海藻・小石が現れます。要素の種類が多い画面で、主要色が増えるのか、まとまるのかを見ます。

これらは見る場所の指定であり、結果の予想ではありません。作品を開いて、実際に確かめます。

結果の読み方

数字と役割ラベルを組み合わせ、次のように判断します。

• 全ビン数は多いが主要色は少ない、考えられる読み方：なめらか処理や階調が多く、設計上の色は少ない、次に確かめること：閾値を0.5%に下げて、増えた色が何か
• 主要色が多く、すべてに役割がある、考えられる読み方：色で情報を分けている、次に確かめること：役割が重なる色（1色が複数の役割）はないか
• 主要色が多いが役割のない色が目立つ、考えられる読み方：雰囲気のための色が多い、次に確かめること：その色を消すと操作や判断に影響するか
• 主要色が少なく、役割が重なっている、考えられる読み方：1色が複数の意味を持つ、次に確かめること：状態の違いを色以外（形・位置）で補っているか
• 場面によって主要色数が大きく動く、考えられる読み方：場面ごとに色の使い方が違う、次に確かめること：タイトル画面とプレイ画面で、共通する色はあるか

比較は、同じビット数・閾値の列どうしで行います。作品の優劣をつける実験ではありません。色数と役割の対応を見て、自作のパレットを決めるときの判断材料にします。

自分で決めた目安を使う場合は、「自分の13作品の中では主要色が下位3分の1」のように、実験で得た分布を基準にします。他で見た数字を持ち込まないようにします。

起こりやすい誤り

• スクリーンショットを拡大縮小して撮る。 縮小で中間色が増え、全ビン数が膨らみます。撮影の拡大率は固定し、画像編集で縮小しません。
• ウィンドウの余白や枠を含める。 作品の外側の色が占有率に入ります。ゲーム画面の範囲だけを切り抜いて数えます。
• 閾値を1つだけで判断する。 1%ちょうどの色が閾値の上下で出入りします。3段階で見て、境界の色を別枠で記録します。
• ビンの色を実際の色と思い込む。 コードが出すrgbはビンの中心値です。実際の色を知りたいときは、画像編集ソフトのスポイトで該当部分を確かめます。
• 近い色を別の色として数える。 明るい緑と暗い緑は、役割が同じなら1色として扱ってよい場合があります。役割ラベルを見て統合し、統合した旨を記録します。
• 動く画面で撮影時刻を揃えない。 動きのある画面では、同じ場面でも数字が変わります。同じ操作の直後に撮るなど、タイミングを決めておきます。
• 作品を並べて順位をつける。 色数が少ないことは、良い設計の証明ではありません。役割との対応を見ることが目的です。

次の行動

まず1作品を選び、開始直後・プレイ中・結果の3場面を撮って、ビット数4・閾値1%で数えてみてください。出てきた主要色に役割ラベルを付けるところまでやると、色を足す・引くときの判断軸が見えてきます。そのあと残りの12作品へ広げ、最後に自分のゲームの画面を同じ手順で数えて並べると、パレットの見直し箇所が具体的になります。