同じ形を10種類の色で塗る：ゲームの気分はどこまで変わるか

問いを三つに分けてから始める

「気分が変わるか」は大きすぎる問いです。次の三つに分けると、記録も読み取りも楽になります。

1. 季節（春・夏・秋・冬）は、色だけで伝わるか。
2. 時刻（朝・昼・夕・夜）は、色だけで伝わるか。
3. 気分（穏やか・楽しい・不安・寂しいなど）は、色だけで伝わるか。

実験の前に、各パレットで何を表したいか、自分の意図を一行ずつ書いておきます。あとで「意図と見る人の答えが合ったか」を照らすための基準になります。ここで「予想」も書いておくと、予想が外れた場所が学びになります。たとえば、季節は伝わりやすいが気分はばらつく、と予想するのか、その逆かを決めておきます。

意図を書く側と見る側は、必ず別の人にします。作った本人は意図を知っているので、見る人としては使えません。

準備するもの：固定した形と10のパレット

必要なのは、ブラウザで開けるHTMLファイル一つ、見てくれる人、記録用の紙か表計算です。人数は、まず3人、できれば5人以上を目安にしてください。人数が少ないと一人の癖が結果を左右するので、「傾向の目安」として読む前提で進めます。

形は、空・天体・遠くの丘・近くの丘・家の壁・屋根の6パーツに絞ります。パーツが多いほど、どの色が効いたのか分からなくなるためです。下のコードは、外部ライブラリなしで単独で動く最小構成です。色は設計の初期値なので、自分の意図に合わせて書き換えてください。

<!doctype html>
<meta charset="utf-8">
<title>パレット実験</title>
<style>svg{width:100%;max-width:480px;display:block}</style>
<svg viewBox="0 0 320 200">
<rect id="sky" width="320" height="200"/>
<circle id="sun" cx="240" cy="50" r="18"/>
<path id="far" d="M0 140Q80 90 160 130T320 120V200H0Z"/>
<path id="near" d="M0 170Q100 130 200 160T320 150V200H0Z"/>
<rect id="house" x="70" y="128" width="34" height="26"/>
<path id="roof" d="M64 128L87 108L110 128Z"/>
</svg>
<p><button id="b">次へ</button> <span id="n">0/10</span></p>
<script>
const P=[
["春の朝","#fde7ef","#fff3b0","#b9dfb0","#7fbf7a","#f4efe6","#c9737a"],
["夏の昼","#5ab8f0","#fff176","#3f9f5a","#2a7d3f","#fafafa","#d9432f"],
["夏の夕","#f59a5b","#ffd27a","#8a4f7d","#4a2f5e","#e8d0b8","#7a2f3a"],
["秋の夕","#e9a15a","#fbd27a","#a35a2c","#6b3a1f","#ecd9bc","#8a2d1f"],
["冬の朝","#dfe9f2","#fffaf0","#c4d3e0","#f5f8fb","#e8e4dc","#6b7a8c"],
["夜","#14183a","#e8ecff","#232a5c","#11142e","#3a3f6b","#1c1f45"],
["雨の日","#8d98a3","#c8ced4","#6f7c78","#55625e","#b9b4aa","#4a4f55"],
["穏やか","#cfe8e4","#fff6d6","#a8d5c2","#86bfa6","#f7f1e3","#8bb0c9"],
["不穏","#2a0d12","#d9a21b","#3d1a1f","#1a0a0d","#4a3a3a","#0d0507"],
["祝祭","#ffb3d9","#ffe14d","#7fd1ff","#ff7a59","#ffffff","#8a4fff"]];
const ids=["sky","sun","far","near","house","roof"];
const o=[...P.keys()];
for(let i=9;i>0;i--){const j=Math.random()*(i+1)|0;[o[i],o[j]]=[o[j],o[i]]}
let k=-1;
b.onclick=()=>{
k=(k+1)%10;
const p=P[o[k]];
ids.forEach((id,i)=>document.getElementById(id).setAttribute("fill",p[i+1]));
n.textContent=(k+1)+"/10";
console.log(k+1,p[0]);
};
</script>

このコードは、見る人に名前を見せないよう、画面には「何枚目か」だけを表示します。パレット名は開発者ツールのコンソールに出るので、記録者だけが見て提示順を控えます。ページを読み込み直すと順序が変わるため、見る人ごとに読み込み直してください。

10個のパレット名は、季節4・時刻3・天気1・気分2をまぜた構成です。季節と時刻が重なるもの（春の朝、夏の夕など）があるのは、軸が混ざったときにどちらが優先されて読まれるかも見たいからです。

手順：見る人に何を、どの順で尋ねるか

見る人一人につき、次の流れで進めます。

1. 「色について意見を聞きたい」とだけ伝えます。パレット名や意図は伝えません。
2. 1枚ずつ表示し、見せる時間は約5秒にします。長く見せると分析的になり、第一印象が消えます。
3. 先に、頭に浮かんだ言葉を自由記述で一語から二語答えてもらいます。
4. 次に、季節・時刻・気分の三問を選択肢で答えてもらいます。各問に「わからない」も用意します。

自由記述を先にするのは、選択肢を見ると答えがそちらに引きずられるためです。10枚が終わるまで、答え合わせはしません。

回数は、各見る人が10枚を1回ずつ見る形を基本にします。余裕があれば、別の日にもう一周してもらい、同じ人が同じ答えを返すかを確かめます。同じ人でも日によって答えが変わるなら、そのパレットの印象は不安定だと読めます。

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

記録表は、1行が「見る人1人×パレット1枚」です。

• A、提示順：1、パレット：夏の夕、自由記述：（一語）、季節：夏／秋／わからない、時刻：夕／夜、気分：寂しい

見る人が5人なら、全体で50行になります。パレットごとに集計し、季節・時刻・気分のそれぞれで、意図と一致した人数を数えます。

読み方の基準は、見せる前に自分で決めておきます。たとえば「見る人の過半数が意図と同じ選択肢を選んだら『伝わった』とみなす」と決めます。後から基準を動かすと、都合のよい結論になりやすいためです。

結果は、次のように読み分けます。

• 季節だけ一致が高く、気分がばらつく場合、色は季節の手がかりとして強く、気分は別の要素（形・動き・音）が必要だと読めます。
• 時刻の答えが「夕」と「秋」のように割れる場合、赤みのある配色が複数の意味を持っているので、明度を調整して分けられるか確かめます。
• 夜のパレットで、天体の円を「月」と答える人が多いか「太陽」のままかを自由記述で見ます。形は同じなので、差が出れば色だけで天体の意味が変わった証拠として読めます。
• 一致が高いパレットと低いパレットを並べ、どの色（空か、地面か、屋根か）を入れ替えると答えが動くかを、次の実験で絞り込みます。

意図と違う答えが多かったパレットは「失敗」ではなく、見る人が別の物語を読み取れる配色だったという情報です。ゲームで曖昧さを残したい場面なら、そのまま使えます。

起こりやすい誤りと、その避け方

何が効いたのか分からなくなる。 色相（赤・青などの色合い）、明度（明るさ）、彩度（鮮やかさ）を同時に動かすと、どれが効いたか分けられません。追加実験として、同じ10枚にfilter:grayscale(1)を当てて白黒で見せ、明度だけでどこまで伝わるかを見ると、色相の寄与を分けて考えられます。

色覚の違いを考慮していない。 色の見え方には個人差があり、赤と緑などが近く見える人もいます。色だけに頼る表現は、その人には伝わりにくくなります。白黒版でも伝わるパレットは、明度差で支えられているので頑健だと読めます。

画面差と環境。 スマートフォンとパソコン、明るい部屋と暗い部屋、ダークモードの有無で見え方が変わります。見る人全員に同じ端末・同じ明るさで見せるか、環境を記録欄に一行足してください。

少人数の偏りを断定に使う。 3〜5人の記録は、一人の好みや文化的な連想に左右されます。数字は「次の試作の方向を決める材料」として扱い、一般的な法則のようには書かないでください。

説明しすぎる。 「これは秋の夕方です」と先に言うと、答えは意図に寄ります。説明は、10枚が終わってからにします。

次の行動

まず自分の意図を10行書き、コードの色を直して、1人から試してください。1人分の記録表を埋めるだけでも、意図と読み取りの差が見えます。

パレットが固まったら、タイトル画面か背景に使い、HTML単体のゲームとしてアソバースに投稿してみてください。直下にindex.htmlを置いたHTMLやZIP（20MiB以内）をアップロードでき、公開にはメールアドレスの確認が必要です。比較の材料としては、四季と昼夜を切り替えられる「余白の庭」を開き、自分のパレットと見比べる方法もあります。どんな変化があるかは、作品を開いて確かめてください。