光の演出を一つだけ足す：どこに光らせると効果が大きいか

何を「効果が大きい」と呼ぶかを先に決める

実験を始める前に、効果の物差しを2本決めておきます。

• 見つけやすさ：5枚のうち光っている1枚を選ぶまでの時間（ミリ秒）と、正しく選べたかどうか。選択中のカードを知らせる用途では、こちらが重要です。
• 浮き上がりの印象：静止画を見て「カードが背景から浮いて見える」と感じる度合いを、1〜5点で答えてもらったもの。カードの存在感や雰囲気づくりでは、こちらが重要です。

どちらを重く見るかは、自分のゲームの目的で決まります。先に決めておくと、結果を見てから都合のよい物差しを選ぶ誤りを避けられます。

準備するもの

• カード5枚の画面：同じ大きさ、同じ色のカードを横一列に並べます。後ろの記事末尾のコードをそのまま使えます。
• 光の条件4つ：下の表のとおりです。光の色と強さの上限は全条件で共通にします。
• 評価してくれる人：自分を含め、できれば3人以上。人数が少なくても手順は同じですが、読み方で慎重さが必要になります。
• 記録用の表：スプレッドシートで十分です。列は「評価者・条件・正誤・ミリ秒」と「評価者・条件・印象点」の2種類を用意します。
• 環境の固定：同じ端末、同じ画面の明るさ、同じ部屋の明るさ。ダークモードとライトモードのように背景が変わる場合は、別の実験として分けます。

4つの光の置き場所

• 背後（back）、光の位置：カードの輪郭の外へにじむ光、確かめたい点：周囲の背景との境目がどれだけ際立つか
• 縁（edge）、光の位置：カードの内側の輪郭に沿う細い光、確かめたい点：面積が小さくても気づけるか
• 表面（face）、光の位置：カードの絵柄の上を斜めに横切る光の帯、確かめたい点：絵柄の視認を邪魔しないか
• 足元（floor）、光の位置：カードの下に落ちる光だまり、確かめたい点：カードそのものが浮いて見えるか、床だけが光って見えるか

対照として「光なし」も用意します。ただし見つけるタスクでは、光がなければ当てずっぽうになってしまうため使いません。印象の評価でだけ、比較の基準点として加えます。

手順

手順1：光の強さを揃える

まず全条件で同じ不透明度の光を使います。サンプルでは、CSSの変数 --k が不透明度です。値を大きくすると全員が簡単に見つけられてしまい、条件間の差が出ません。逆に小さすぎると全員が外れます。最初に自分で数回試し、ときどき間違えるくらいの値を探してください。この調整は実験の前に行い、本番の途中では動かしません。

ここで一つ判断が必要です。同じ不透明度でも、光る面積は条件ごとに違います。背後のにじみは広く、縁は細いのです。この差を「場所の違いの一部」とみなすなら、そのまま比べます。「同じ光量で比べたい」と考えるなら、面積に応じて不透明度を調整します。どちらにするかを先に決め、記録の冒頭にメモしておきます。

手順2：見つけるタスク

1. サンプルを開き、スペースキーを押します。
2. 約0.6〜1.2秒のランダムな待ちのあと、5枚のうち1枚がランダムに光ります。
3. 光っていると思うカードを、マウスかタップでクリックします。スペースキーは試行中に押さないでください。ボタンが反応してしまいます。
4. 条件は4つ、各5回で計20試行。順番はプログラムがシャッフルします。
5. 終了すると、「条件,正解,ミリ秒」の形式で記録が表示されます。コピーして表に貼ります。

評価者ごとに一人ずつ行ってもらい、他の人の画面を見せないようにします。最初の数試行は慣れの影響が大きいので、練習として別に数回行ってから本番に入ります。

手順3：浮き上がりの印象を答えてもらう

見つけるタスクとは別の時間に行います。光る位置だけを変えた静止画（または画面）を、光なしを含む5条件ぶん用意します。同じ1枚を光らせた状態で並べ、次の質問に1〜5点で答えてもらいます。

• 「このカードは、背景から浮き上がって見えますか」（1：全く見えない、5：はっきり浮いている）

条件の提示順は人ごとに変えます。条件名は伏せ、A〜Eの記号で見せると、ラベルの印象に引きずられません。点数の理由を一言ずつメモしてもらうと、後で解釈の手がかりになります。

記録の取り方と回数

• 見つけるタスク、単位：1試行ごとに「条件・正誤・ミリ秒」、回数の目安：1人あたり各条件5回（慣れてきたら10回）
• 印象評価、単位：1条件につき1点（1〜5）、回数の目安：1人あたり全条件を1周、可能なら2周

集計は、条件ごとに次の3つを出します。

• 正答率（正解の数÷試行数）
• ミリ秒の中央値（平均より、極端に遅い一回の影響を受けにくい値です）
• 評価者ごとの順位と、全員の点数の中央値

反応時間は、誤答の試行を除いて計算するか、含めて計算するかを先に決めておきます。迷ったら、両方で順位が変わらないかを見ます。

結果の読み方

読み方は、数字を見る前に基準を書き出してから当てはめます。

• 差がばらつきの範囲内なら「差なし」と判断する：同じ人が同じ条件を繰り返したときの反応時間は、毎回少しずつ違います。条件間の差が、その繰り返しのばらつきと同じくらいなら、その差は「場所の違い」と言えません。5回で判断がつかなければ、10回に増やします。
• 順位が評価者の過半数で一致したら採用する：1人の結果だけで決めず、複数の人で同じ並びが出たものを手がかりにします。人によって割れたなら、「人による」が答えです。
• 二つの物差しが割れたとき：見つけやすさで上位の条件と、印象で上位の条件が違うことは十分あり得ます。最初に決めた目的に合わせて選びます。選択中の合図なら見つけやすさを、雰囲気づくりなら印象を優先します。両方欲しいなら、二つの条件を足す次の実験に進みます。
• 正答率が全条件で高すぎる、または低すぎるとき：物差しが働いていません。手順1に戻って強さを調整し、やり直します。

どの結果になっても、「この背景、このカード、この強さの場合」と条件を添えて記録してください。背景色やカードの色を変えると、順位が入れ替わる可能性があります。

起こりやすい誤り

• 強さの不揃い：条件ごとに不透明度や色を少しずつ変えてしまうと、場所の差なのか強さの差なのか分からなくなります。変更は一度に一つだけです。
• 光る位置の偏り：ターゲットが特定のカードに偏ると、位置を予想して当てられてしまいます。サンプルは毎回ランダムですが、自作に移すときも同じ作りにします。
• 慣れと疲れ：同じ条件を続けて行うと、後半ほど速くなりがちです。条件は混ぜ、最初の数回は捨てます。
• 端末と部屋の違い：画面の明るさや周囲の光で、にじみ系の光は見え方が大きく変わります。評価者ごとに環境がばらばらになるときは、その点を記録に残します。
• 光の色だけに頼る：色の見え方には個人差があります。光の色の違いではなく、明るさの差で見つけやすいかどうかも意識して確認します。
• 動きの混入：光を点滅させたり揺らしたりすると、位置の効果と動きの効果が混ざります。この実験では静止した光だけを比べます。動きを足す場合は別の実験にし、OSやブラウザの「動きを抑える」設定を使う人にも伝わるかを確かめます。
• 実画面での再確認不足：このサンプルは単純なカードです。自分のゲームの絵柄や背景に移したとき、結果が変わる可能性があります。最後は実際の画面で、短くてもよいので同じ手順を一度行ってください。

実験用の最小コード

単独で動くHTMLです。外部ライブラリは使いません。--k が光の不透明度で、手順1で調整します。

<!doctype html>
<meta charset="utf-8">
<title>光の場所比べ</title>
<style>
body{background:#1c2430;color:#eee;font:16px sans-serif;text-align:center;--k:.35}
#row{display:flex;gap:28px;justify-content:center;margin:56px 0}
.card{width:90px;height:130px;border:0;border-radius:10px;background:#e9e2d0;position:relative}
.on{--c:rgba(255,214,120,var(--k))}
.back .on{box-shadow:0 0 26px 8px var(--c)}
.edge .on{box-shadow:inset 0 0 0 4px var(--c)}
.face .on::after{content:"";position:absolute;inset:0;border-radius:10px;
 background:linear-gradient(135deg,transparent 25%,var(--c) 50%,transparent 75%)}
.floor .on::before{content:"";position:absolute;left:-8px;right:-8px;bottom:-26px;height:18px;
 background:radial-gradient(ellipse at center,var(--c),transparent 70%)}
</style>
<div id="row"></div><p id="msg">スペースキーで開始</p><pre id="log"></pre>
<script>
const modes=["back","edge","face","floor"],N=5,rows=[],row=document.getElementById("row");
let queue=[],cur,t0=0,target,running=false;
for(let i=0;i<5;i++){const b=document.createElement("button");b.className="card";
 b.onclick=()=>{if(!t0)return;rows.push([cur,i===target?1:0,Math.round(performance.now()-t0)]);t0=0;next();};
 row.append(b);}
const shuffle=a=>{for(let i=a.length-1;i>0;i--){const j=Math.floor(Math.random()*(i+1));[a[i],a[j]]=[a[j],a[i]];}return a;};
function next(){
 document.body.className="";[...row.children].forEach(c=>c.classList.remove("on"));
 if(!queue.length){running=false;msg.textContent="終了。下の記録をコピーしてください";
  log.textContent="条件,正解,ミリ秒\n"+rows.join("\n");return;}
 cur=queue.pop();msg.textContent="残り "+(queue.length+1)+" 回";
 setTimeout(()=>{target=Math.floor(Math.random()*5);row.children[target].classList.add("on");
  document.body.className=cur;t0=performance.now();},600+Math.random()*600);
}
addEventListener("keydown",e=>{if(e.code!=="Space"||running)return;
 running=true;rows.length=0;queue=shuffle(modes.flatMap(m=>Array(N).fill(m)));next();});
</script>

次の行動

まず --k を調整し、自分と身近な数人で見つけるタスクを一周してみてください。そのあと印象評価をつけて、二つの物差しで順位が揃うかを確かめます。答えが出たら、その位置の光を自分のゲームに一つだけ足します。アソバースにはHTMLを直接アップロードして投稿でき、公開前に表示を確認できます。公式作品を開いて、光がカードや盤のどこに置かれているかを観察してみるのも、比べる視点を増やす手になります。