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

図形の「動き」で感情を作る：揺れ・跳ね・沈む

遊びをつくる

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

丸や四角の色紙と色見本を使ってゲームの画面を検討する机。
記事のテーマをもとに制作したAI生成イメージ。実際のゲーム画面ではありません。

同じ黄色い丸が、左右にゆらゆら揺れているとき、床で弾んでいるとき、ゆっくり下へ沈んでいくとき。形も色も大きさも同じなのに、見る側には別の「気分」が伝わるのではないか、というのがこの記事の問いです。動きだけで感情の手がかりが作れるなら、キャラクターの絵がなくても、図形だけのゲームで気持ちを伝えられます。 ここで確かめたいのは「揺れは不安」のような決まった対応表ではありません。同じ図形に違う動きをつけたとき、見た人がどんな言葉を口にするのか。その言葉が人によってそろうのか、ばらけるのか。周期や振幅を変えると言葉はどう動くのか。それを自分で観察して言葉にし、記録する流れです。 この記事は実験の設計書です。結果は書いていません。準備するもの、手順、記録の取り方、結果の読み方、つまずきやすい点を順に示すので、手元で動かして答えを出してください。

この記事の目次
  1. 問いを絞る：変えるものと変えないもの
  2. 準備するもの
  3. 手順
  4. 記録の取り方
  5. 結果の読み方
  6. 起こりやすい誤り
  7. 次の行動

問いを絞る：変えるものと変えないもの

実験の最初の仕事は、変える要素を一つに絞ることです。今回変えるのは「動きの種類」だけにします。形、色、大きさ、背景、動きの周期は、最初はすべてそろえます。

比べる動きは次の3つです。

  • 揺れ：同じ高さのまま、左右に往復します。
  • 跳ね：床から上がって落ち、地面で折り返します。落ちた瞬間に向きが急に変わります。
  • 沈む：下へ向かい、だんだん減速して止まり、短い時間で元の位置に戻ります。下降が長く、戻りが短い、非対称な動きです。

「沈む」を非対称にしたのは、左右対称にすると揺れの縦版と区別しにくくなるためです。この非対称が効くかどうかも、後で確かめる対象になります。

問いは次の3つに分けておくと、読み取りやすくなります。

  1. 動きだけで、見た人から感情に関する言葉が出るか。
  2. 出た言葉は、人や回数をまたいでそろうか。
  3. 周期や振幅を変えると、言葉はどちらへ動くか。

準備するもの

必要なのはブラウザ、紙かスプレッドシート、スマートフォンのタイマー、そして見てくれる人です。人数は自分を含めて3人もいれば形になります。一人でもできますが、先入観が混ざりやすいので、後日あらためて見直す手順を入れます。

下のコードを motion.html として保存し、ブラウザで開いてください。丸が3つ並び、左から順にA（揺れ）、B（跳ね）、C（沈む）の動きをします。スライダーで周期を変えられ、ボタンで一時停止できます。OSの「動きを減らす」設定が有効な環境では、最初は停止した状態で始まります。

html
<!doctype html>
<meta charset="utf-8">
<canvas id="c" width="480" height="200" style="background:#1e2230"></canvas>
<p>周期(秒) <input id="p" type="range" min="0.5" max="4" step="0.1" value="2">
<output id="v">2.0</output> <button id="b">一時停止/再開</button></p>
<script>
const g = document.getElementById('c').getContext('2d');
const p = document.getElementById('p'), v = document.getElementById('v');
let run = !matchMedia('(prefers-reduced-motion: reduce)').matches;
let ph = 0, last = performance.now();
const ease = s => 1 - (1 - s) * (1 - s);
const motions = [
  u => [Math.sin(u * 2 * Math.PI) * 24, 0],
  u => [0, -Math.abs(Math.sin(u * Math.PI)) * 60],
  u => [0, 50 * (u < 0.8 ? ease(u / 0.8) : 1 - (u - 0.8) / 0.2)]
];
p.oninput = () => v.textContent = (+p.value).toFixed(1);
document.getElementById('b').onclick = () => run = !run;
function loop(now) {
  const dt = (now - last) / 1000; last = now;
  if (run) ph = (ph + dt / p.value) % 1;
  g.clearRect(0, 0, 480, 200);
  motions.forEach((m, i) => {
    const [dx, dy] = m(ph);
    g.fillStyle = '#f2c94c';
    g.beginPath();
    g.arc(80 + 160 * i + dx, 100 + dy, 26, 0, 7);
    g.fill();
    g.fillStyle = '#ccc';
    g.fillText('ABC'[i], 76 + 160 * i, 190);
  });
  requestAnimationFrame(loop);
}
requestAnimationFrame(loop);
</script>

motions の3行が動きの定義です。配列の順番を入れ替えると、どの動きがA・B・Cに割り当たるかが変わります。見る人ごと、回ごとに入れ替えれば、「左にある図形ほど印象が強い」といった位置の影響を切り分けられます。

手順

感情の言葉を先に渡すと、見た人はそれに引きずられます。そこで、自由に言葉を出してもらう回を先に、選択肢から選んでもらう回を後に置きます。

ラウンド1：自由に言葉を出す

  1. 周期を2.0秒にそろえます。
  2. 画面の一部を紙で隠し、見てもらう図形を一つだけにします。動きの名前は伝えません。
  3. 15秒間見てもらい、頭に浮かんだ言葉を最大3つまで話してもらいます。感情でも、状況でも、天気でも構いません。
  4. 話された言葉はそのまま書き取り、言い換えません。
  5. 残り2つの図形でも同じことを繰り返します。見せる順番は人ごとに変えます。

ラウンド2：用意した語で選ぶ

自由記述が終わってから、次のような語のリストを見せます。各図形に当てはまる語を、いくつでも選んでもらいます。

  • 穏やか、のんき、眠い
  • 元気、うれしい、軽い
  • 重い、さみしい、あきらめ
  • 不安、落ち着かない、ためらい

リストはあくまで一例です。自分の作りたいゲームの雰囲気に合わせて、語を足し引きしてください。

ラウンド3：パラメータを一つずつ動かす

ここからは観察する人が自分で行います。スライダーの周期を0.5秒、1.0秒、2.0秒、4.0秒に変え、それぞれ印象の変化を書きます。

  • 同じ動きで周期だけを変える（一度に変えるのは周期だけです）。
  • 次に、コードの数値（揺れの 24、跳ねの 60、沈みの 50）を一つだけ変えて、振幅の影響を見る。
  • 最後に、沈むの 0.8（下降の長さの割合）を 0.5 に近づけて、非対称が弱くなると印象がどうなるかを見る。

変更のたびに、何をいくつからいくつに変えたかを必ず記録してください。複数の数値を同時に変えると、どれが効いたのか分からなくなります。

記録の取り方

記録は「誰が、どの動きを、どの条件で見て、何と言ったか」を1行1回で残します。次のような表を用意してください。

  • 1、見た人：自分、動き：揺れ、周期：2.0、振幅など：初期値、自由記述の語：（そのまま記入）、選んだ語：（記入）、強さ(1〜5)：（記入）、見た環境：PC・昼

強さは「その印象がどれくらいはっきり感じられたか」を5段階で聞きます。感情の種類とは別に、印象の濃さを残しておくためです。

回数の目安は、1条件につき3回以上です。同じ人にも、日や時間帯を変えてもう一度見てもらいます。1回目と2回目で言葉が変わるなら、その人にとってその動きの印象はまだ安定していないと読めます。

見た環境（PCかスマートフォンか、画面の大きさ、部屋の明るさ）も必ず残してください。後で結果がばらけたとき、原因を探す手がかりになります。

結果の読み方

データがそろったら、動きごとに言葉を集計します。「ほぼ同じ意味の語」は、どうまとめたかを記録したうえで同じ仲間に入れて構いません。たとえば「眠い」と「だるい」を同じ仲間とするなら、その判断も表に書いておきます。判断の目安は次のとおりです。

  • 一つの動きに対して、複数の人から似た語が出た：その動きは、少なくとも今回の条件では感情の手がかりとして働いている可能性があります。ゲームに使う候補にして、別の人にも見てもらってください。
  • 同じ動きに対して、言葉がばらばらだった：動きだけでは意味が決まらないと考えられます。色、音、場面などの文脈を足すと収まるかどうかを、次の実験にします。
  • 周期を変えると語が大きく動いた：その動きの印象は、種類よりも速さに左右されている可能性があります。種類ごとに比べるときは、周期をそろえた条件を基準にしてください。
  • 自由記述では出なかった語が、リストで多く選ばれた：その語は、見た人が自然に思いついたものではなく、リストが誘導した可能性があります。自由記述の結果を優先して読んでください。
  • 非対称を弱めたら、語がそろわなくなった：沈む動きの印象は、下降と戻りの時間差に支えられていたと考えられます。

どの結果になっても、「この動きはこの感情」という結論にはしないでください。分かるのは、今回の図形、周期、人たちの範囲でどうだったか、までです。

起こりやすい誤り

  • 名前が先入観になります。 「揺れ」「沈む」と伝えると、その言葉から連想した感情が返ってきます。A・B・Cのラベルだけで見てもらってください。
  • 3つ同時に見せると、比べ合ってしまいます。 隣の図形との対比で印象が決まり、単独で見たときの印象が分からなくなります。最初は一つずつ見せるのが安全です。コードでは3つの動きが同じ位相で進むため、同時に見せるなら、この同期の影響も頭に入れて読んでください。
  • 見る順番の影響が出ます。 最初に見た動きが基準になります。順番は人ごとに変えてください。
  • 画面や端末で動きが変わります。 画面が小さいと振幅が小さく見えますし、端末の負荷が高いとなめらかさが落ちます。環境を記録し、同じ人は同じ端末で見てもらうのが確実です。
  • 色の影響が混ざります。 今回は丸の色を黄色に固定していますが、色を変える実験を同時にすると、動きの効果と分離できません。色は別の回で扱ってください。
  • 人数が少ないことを忘れやすいです。 数人の結果は傾向のヒントであり、一般的な法則ではありません。
  • 動きが苦手な人への配慮が必要です。 揺れや跳ねの繰り返しを見続けると、不快に感じる人もいます。見てもらう前に、いつでも止めてよいと伝え、一時停止ボタンを手元に置いてください。作品に取り入れる場合も、「動きを抑える」設定のときに別の表現へ切り替える設計を最初から考えておくと安全です。

次の行動

まず motion.html を開き、A・B・Cをそれぞれ15秒ずつ見て、浮かんだ言葉を紙に書いてください。次に、その言葉を持ったまま、アソバースの「紙ひこうき郵便」や「余白の庭」など、図形や物が動く作品を開き、動きが何を伝えているように見えるかを同じ形式で書き留めてみてください。作品の細かい仕組みは、実際に遊んで確かめるのが確実です。自分の実験用のHTMLを一つ作ったら、HTMLファイルのまま投稿できるので、数字を変えた版をいくつか並べて、遊ぶ人の反応を見てみるのも手です。

マガジン一覧に戻る