投稿する
マガジン
著者：アソバース編集部公開：更新：約10分で読めます

影を付けるだけで奥行きは生まれるか：影の有無で比べる

遊びをつくる

執筆にClaudeを使用しています。

明暗の異なる色見本と拡大鏡で、ゲーム画面のコントラストを表すイラスト。
記事のテーマをもとに制作したAI生成イラスト。

赤い丸が一つ、地面の上に置かれている画面を考えてみます。丸は塗りつぶしの単色で、ハイライトも陰影もありません。この丸に、足元の影を足したとき、見る人の印象はどこまで変わるでしょうか。立体的な球に見えるのか、地面に置かれた重いものに見えるのか、それとも「影があるな」と気づく程度で終わるのかを確かめます。 ゲームの画面は平面です。奥行きを出す手がかりには、大きさの違い、重なり、画面の上下位置、ぼかし、影などがあります。影は足すのが簡単な手がかりですが、その効果を他の手がかりと切り分けて眺める機会は多くありません。見栄えを整えるうちに、複数の手がかりが同時に変わってしまうからです。 この記事は、影だけを変えて比べる実験の設計書です。結果は載せていません。準備、手順、記録、読み方、誤りやすい点を順に示すので、自分の画面と周りの人で答えを出してください。

この記事の目次
  1. 準備するもの
  2. 手順
  3. 記録の取り方
  4. 結果の読み方
  5. 起こりやすい誤り
  6. 次の行動

準備するもの

用意するのは、ブラウザ、紙かスプレッドシート、評価に協力してくれる人（3人以上、できれば5〜8人）です。ゲームを作る友人でも、普段あまり遊ばない人でも構いません。ただし、普段の経験の違いが結果に影響するため、どちらの立場の人かをメモしておきます。

比べる条件は次の4つです。

  • none：影なし
  • under：丸の真下に小さな楕円の影（接地している）
  • offset：真下から右へずらした影（光が左から当たっている印象）
  • far：丸から画面手前方向へ大きく離れた影（高く浮いている印象）

丸の位置、大きさ、色、背景、地面の色は4条件で完全に同じにします。変えるのは影の有無と位置だけです。

次のコードを index.html として保存し、ブラウザで開きます。外部ライブラリは不要で、単独で動きます。条件の順番は開くたびにランダムに変わり、Enterキーで次の条件へ進みます。協力者には条件名を見せず、条件名と順番は開発者ツールのコンソールにだけ出ます。

html
<canvas id="c" width="320" height="200"></canvas>
<p id="n"></p>
<script>
const kinds=["none","under","offset","far"];
const order=kinds.sort(()=>Math.random()-0.5);
let i=0;
const ctx=document.getElementById("c").getContext("2d");
function draw(k){
  ctx.fillStyle="#d9e4ea";ctx.fillRect(0,0,320,100);
  ctx.fillStyle="#c9bfa8";ctx.fillRect(0,100,320,100);
  const sh={under:[160,135],offset:[185,135],far:[160,175]}[k];
  if(sh){
    ctx.fillStyle="rgba(0,0,0,0.35)";
    ctx.beginPath();ctx.ellipse(sh[0],sh[1],30,8,0,0,7);ctx.fill();
  }
  ctx.fillStyle="#d9534f";
  ctx.beginPath();ctx.arc(160,105,28,0,7);ctx.fill();
}
function show(){
  draw(order[i]);
  document.getElementById("n").textContent=(i+1)+" / 4（Enterで次へ）";
  console.log(i+1,order[i]);
}
addEventListener("keydown",e=>{
  if(e.key==="Enter"){i=(i+1)%4;show();}
});
show();
</script>

地面の色の境目は画面の中ほどにあります。この境目は奥行きの手がかりの一つなので、4条件すべてで同じものが入ります。これは意図的な統制です。

手順

一人の協力者あたりの流れを決めておきます。条件ごとに流れを変えると、比較の意味がなくなります。

  1. 協力者に画面から同じ距離で座ってもらいます。使う端末も全員で揃えます。スマートフォンとパソコンが混ざる場合は、端末名を記録します。
  2. 説明は「これから4枚の画像を順に見ます。見た印象を答えてください」とだけ伝えます。「影の効果を見ます」とは言いません。
  3. 各条件を一定の時間（例：5秒）表示します。時間は全員で同じにします。
  4. 表示のたびに、次の4つの質問を同じ順で聞きます。
  • 立体感：平らな円盤に見えるか、丸い球に見えるか（1＝円盤、5＝球）
  • 奥行き：丸は画面の奥にあるように見えるか（1＝手前の平面、5＝奥にある）
  • 重さ：重そうに見えるか、軽そうに見えるか（1＝軽い、5＝重い）
  • 接地：地面に置かれているか、浮いているか（1＝浮いている、5＝置かれている）
  1. 4条件が終わったら、画面を開き直して順序を変え、もう一度同じ手順を行います。できれば一人あたり2〜3周します。

条件の順序がランダムなのは、最初に見た条件が基準になって後の評価を引っ張る「順序効果」を減らすためです。協力者が複数いる場合は、全員が同じ順序にならないよう、画面を開き直すたびに新しい順序で進めます。

記録の取り方

記録の単位は「協力者 × 周回 × 条件」の1行です。次の列を持つ表を用意します。

  • A、周回：1、条件：none、立体感：、奥行き：、重さ：、接地：、ひとこと：
  • A、周回：1、条件：under、立体感：、奥行き：、重さ：、接地：、ひとこと：

条件名は、協力者への提示中は伏せたまま、コンソールの表示を見て実施者が記入します。5段階の数値に加えて、「ひとこと」欄に協力者の言葉をそのまま書きます。評価を数値化する前の言葉には、数値が拾えない違いが残っていることがあります。たとえば、数値は同じでも「浮いている」と「小さい」を取り違えている場合などです。

人数が少ないときは、平均値を出す前に、条件ごとの数値を並べて眺めます。3人の平均値の差は、一人の極端な回答で動きます。

結果の読み方

まず、noneとunderの差を見ます。この二つが、影の有無という題名の問いに直接対応します。

  • 立体感と接地の数値がunderで上がる人が多い場合：影が接地感の手がかりとして働いている可能性があります。この場合、重さの数値も一緒に上がっているかを見ます。重さが同時に動くなら、接地感と重さの印象がつながっていると読めます。
  • noneとunderに差が出ない場合：丸が単色で、影以外の手がかりが少なすぎることが考えられます。影を足すだけでは足りず、丸に陰影を付けるなどの別の変更が要る場合があります。影そのものに効果がないと決めつけず、丸の描き方を変えて同じ実験を繰り返します。
  • offsetで立体感が上がる人が多い場合：光の向きが伝わると、立体の印象が強まる可能性があります。ただしunderとの差が小さいなら、影の位置より「影があること」が効いているのかもしれません。
  • farで接地の数値が下がる場合：影が離れると浮いている印象が出る、という一般に知られた見え方と整合します。このとき奥行きの数値がどう動くかも確認します。浮いて見えることと奥にあると見えることは、別の印象です。

目安として、協力者の過半数で同じ向きの差が出れば「傾向がある」と書けます。人数が少ない実験なので、統計的な結論とは考えません。次の実験に進むための仮説として扱います。

起こりやすい誤り

実験を台無しにしやすい点を挙げます。

  • 影以外の条件が変わってしまう：影を足すついでに丸の色を濃くした、などの修正が混ざると、何が効いたのか分かりません。変更は影の有無と位置だけにします。
  • 質問が誘導的になる：「影があると立体的ですよね」のような聞き方は避けます。4つの質問を毎回同じ文面で聞きます。
  • 丸が球として描かれていない：塗りつぶしの円は、そもそも円盤とも球とも読めます。この曖昧さは実験の前提です。丸にグラデーションを足す場合は、別の実験として分けて行います。
  • 画面サイズや明るさが違う：端末や環境が変わると、影の見え方が変わります。同じ画面で比べます。
  • 見る時間が長すぎる：長く見るほど、協力者は理屈で答えを組み立てるようになります。最初の印象を取りたいなら、5秒前後で区切ります。
  • 影の濃さと大きさを同時に変える：この実験では影の濃さと大きさは固定しています。濃さや大きさの影響を調べたいときは、別の周回として、影の透明度（コードの 0.35）や楕円の半径（30,8）を一つずつ変えて行います。

次の行動

まず上のコードを保存し、自分で4条件を見比べてから、一人でも協力者を見つけて手順どおりに記録してください。結果が出たら、影の濃さと大きさを一つずつ変える周回に進み、手応えがあった設定を自分のゲームの画面に移します。公式作品の「余白の庭」は木・石・草・花・池・灯りを置く庭づくりなので、置いたものの足元がどう見えるかを、作品を開いて確かめてみてください。完成したゲームは、アソバースの投稿画面から入力→表示の確認→公開の流れで公開できます。

マガジン一覧に戻る