マガジン

8音だけで作るゲーム音楽:少ない音で場面を分ける

遊びをつくる

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

つなぎ目のない銅色のリボンとテープリールで、自然なBGMループを表した写真風イメージ。
記事のテーマをもとに制作したAI生成イラスト。

使える音が8つしかないとき、タイトル画面、プレイ中、結果画面の3曲を「別の場面の音」として聞き分けられるでしょうか。音が足りないと曲が似てしまいそうですが、場面を分けているのは音の種類ではなく、テンポや音の長さ、音域といった別の要素かもしれません。この記事は、その仮説を自分の手で確かめる実験の設計書です。 ゲームを作る場面を考えてみます。素材サイトを探す前に、手元で鳴らせる音をあらかじめ数えておきます。その音だけで3曲を作ると、効いている工夫と効いていない工夫がはっきり見えてきます。音を絞ると、場面を分けるのに必要な要素だけが残ります。 ここでは結果を示しません。準備するもの、最小のプレイヤーのコード、変えるべきつまみ、記録の取り方、結果の読み方を順に示します。読者が自分で試せば、ご自身のゲームに合った答えが出る形にしています。

この記事の目次
  1. 準備するもの:8音の決め方と記録用紙
  2. 最小のプレイヤー:3場面を1ファイルで鳴らす
  3. 場面を分けるつまみ:1回に1つだけ動かす
  4. 記録の取り方:聞き分けテストの設計
  5. 結果の読み方と、起こりやすい誤り
  6. 他の作品で「少ない音」を聞き比べる
  7. 次の行動
  8. 参考資料

準備するもの:8音の決め方と記録用紙

用意するのは、ブラウザ、ヘッドホンまたはスピーカー、テキストエディタ、記録用の紙かスプレッドシートです。音源ファイルや外部ライブラリは使わず、ブラウザ標準のWeb Audio APIで音を鳴らします。

最初に、8音を決めます。この記事のコードでは次の並びを初期値にします。

  • 0番:C3(低いド)
  • 1番:G3(低いソ)
  • 2番:C4(中央のド)
  • 3番:D4(レ)
  • 4番:E4(ミ)
  • 5番:G4(ソ)
  • 6番:A4(ラ)
  • 7番:C5(高いド)

音名の種類はド・レ・ミ・ソ・ラの5種類で、これにオクターブ違いを加えて8音です。この5種類の組み合わせはペンタトニックと呼ばれる音階で、どの順に並べても大きく濁りにくい性質があります。ファとシを外してあるので、初めての曲づくりでも崩れにくい選び方です。

この並びはあくまで出発点です。暗い雰囲気を試したい場合は、ミをミ♭に替えるなど、自分のゲームの色に合わせて8音を入れ替えてかまいません。ただし実験の途中では8音を固定してください。8音を変えると、場面の違いが音の選び方によるのか、ほかのつまみによるのか区別できなくなります。

記録用紙には、次の列を作ります。

  1. 版の名前(例:title-v1)
  2. 場面(タイトル/プレイ/結果)
  3. 変えたつまみ(1回に1つだけ)
  4. 使った音の番号
  5. テンポ(1分あたりの拍数)
  6. 波形
  7. 聞き分けテストの回答

最小のプレイヤー:3場面を1ファイルで鳴らす

次のコードを index.html として保存し、ブラウザで開くと、3つのボタンから3曲を鳴らせます。8音は N の配列に閉じ込めてあり、曲は「音の番号と拍数」の組の並びで書きます。N に入っていない音は鳴らせないので、8音の制約がコードの形で守られます。

html
<!doctype html>
<meta charset="utf-8">
<button data-s="title">タイトル</button>
<button data-s="play">プレイ</button>
<button data-s="result">結果</button>
<script>
// C3 G3 C4 D4 E4 G4 A4 C5
const N=[130.81,196,261.63,293.66,329.63,392,440,523.25];
const P=[[0,.5],[2,.5],[4,.5],[2,.5],[0,.5],[3,.5],[5,.5],[3,.5]];
const S={
 title:{bpm:60,wave:'sine',vol:.2,seq:[[2,2],[4,2],[5,2],[4,2],[3,2],[2,4]]},
 play:{bpm:150,wave:'square',vol:.08,seq:[...P,...P]},
 result:{bpm:100,wave:'triangle',vol:.25,seq:[[2,.5],[4,.5],[5,.5],[6,.5],[7,2]]}
};
let ac;
function play(k){
 ac=ac||new AudioContext();
 const s=S[k],beat=60/s.bpm;
 let t=ac.currentTime+.05;
 for(const [i,b] of s.seq){
  const o=ac.createOscillator(),g=ac.createGain();
  o.type=s.wave;o.frequency.value=N[i];
  g.gain.setValueAtTime(s.vol,t);
  g.gain.exponentialRampToValueAtTime(.001,t+b*beat*.95);
  o.connect(g).connect(ac.destination);
  o.start(t);o.stop(t+b*beat);
  t+=b*beat;
 }
}
document.querySelectorAll('button').forEach(b=>b.onclick=()=>play(b.dataset.s));
</script>

seq の各要素 [2,2] は「N の2番(C4)を2拍」という意味です。bpm はテンポ、wave は波形(sine、square、triangle、sawtooth から選べます)、vol は音量です。ブラウザは利用者の操作の前に音を出させないことが多いため、ボタンを押した時点で音の準備をする書き方にしています。

最初の3曲は、場面ごとに複数のつまみを同時に変えた「たたき台」です。これはまだ実験ではなく、実験の出発点にあたります。ここから、つまみを1つずつ動かして効き方を確かめます。

場面を分けるつまみ:1回に1つだけ動かす

たたき台の3曲を土台に、次の5つのつまみを個別に動かします。表の右列は「そうなりそうだという予想」であり、結果ではありません。予想が外れること自体が、この実験の収穫です。

  • テンポ、変え方の例:60→150のように大きく変える、立てる予想:速いほど緊張や忙しさが伝わりそうです
  • 音の長さ、変え方の例:2拍中心から0.5拍中心へ、立てる予想:短い音が続くと動きのある場面に聞こえそうです
  • 音域、変え方の例:0〜2番の低音だけ/5〜7番の高音だけ、立てる予想:高音は軽く、低音は重く聞こえそうです
  • 波形、変え方の例:sineからsquareへ、立てる予想:角のある波形は硬く、にぎやかに聞こえそうです
  • 終わり方、変え方の例:最後をC4やC5で終える/D4で止める、立てる予想:主音(ド)で終えると「終わった」感じが出そうです

進め方は次の手順です。

  1. たたき台のタイトル曲を基準版にします。
  2. 5つのつまみのうち1つだけを変えた版を作ります。ほかは基準版のままです。
  3. 基準版と変更版を交互に数回聞き、違いを一言で記録用紙に書きます。
  4. 同じことをプレイ曲、結果曲でも行います。

つまみを2つ同時に変えると、どちらが効いたのか分からなくなります。面倒でも1回に1つの原則を守ってください。

終わり方のつまみは、結果画面の曲づくりで特に重要になります。たとえば「クリア」と「ゲームオーバー」で最後の音を変えて、聞き手に「うまくいったか」を判断してもらう使い方もできます。この場合、波形やテンポは同じにして、最後の音だけを変えた2版を比べます。

記録の取り方:聞き分けテストの設計

自分の耳だけで判断すると、作った本人は曲の意図を知っているため、実際より聞き分けやすく感じてしまいます。そこで、ラベルを隠した聞き分けテストを行います。

準備

  • 比較したい3曲(タイトル、プレイ、結果)を用意します。
  • 曲名を隠し、再生順をランダムにします。紙に1〜3の番号を振ってサイコロやくじで順番を決める方法で十分です。
  • 聞き手には「この曲はタイトル画面、プレイ中、結果画面のどれに合いますか」と尋ね、3択で答えてもらいます。

手順

  1. 聞き手に、ゲームの内容を一言だけ伝えます。曲の狙いは伝えません。
  2. 1曲ずつ再生し、そのつど回答を紙に書いてもらいます。
  3. 3曲の再生順を変えて、もう一巡します。順番に引きずられた答えを見分けるためです。
  4. 聞き手の人数、1人あたりの回答数、正解した数を記録用紙に書きます。

3択なので、何も手がかりがなく当てずっぽうで答えた場合の正解率は3分の1になります。この3分の1を、判断の基準線として使います。

自分ひとりで行う場合

聞き手が見つからない場合は、時間を空けるのが次善策です。3曲を作った翌日以降に、再生順をランダムにして曲名を見ずに聞き、場面を当ててみます。当日の記憶が薄れた状態で、自分の耳がどこまで頼れるかが分かります。ただし、ひとりでの確認は他人への聞き分けの代わりにはなりません。傾向をつかむ予備実験と位置づけてください。

結果の読み方と、起こりやすい誤り

記録がそろったら、次の順に読みます。

  1. 場面ごとの正答数を、基準線(3分の1)と比べます。基準線に近いなら、その場面の曲はまだ分かれていません。
  2. 間違いのパターンを見ます。プレイ曲と結果曲が入れ替わりやすいなど、特定の組み合わせで混ざるなら、その2曲に共通するつまみが近すぎる可能性があります。
  3. 変更版と基準版の回答を比べ、どのつまみを動かしたときに正答が増えたか、あるいは減ったかを整理します。

人数が少ないときは、数値の差を断定的に読まず、「このつまみが効きそうだ」という手がかりとして扱ってください。数人の回答で、全員に通じる法則は決まりません。

実験が崩れやすい点も挙げておきます。

  • 再生環境がばらつく:スマートフォンの小さなスピーカーでは低音(0・1番)がほとんど聞こえない場合があります。低音に頼った場面分けは、再生環境が変わると崩れる可能性があります。ヘッドホンとスピーカーの両方で確かめてください。
  • 音量差が場面の印象を作ってしまう:音量だけで「プレイ中は大きい」「結果は静か」と判断されている可能性があります。つまみとして音量を扱うか、全曲で音量をそろえて他の要素の効果を見るか、あらかじめ決めておきます。
  • ループの継ぎ目:プレイ曲は繰り返し鳴ることが多いので、最後の音から最初の音へのつながりが不自然だと、場面の印象を損ないます。最後の音を主音(ド)にするか、あえて別の音で止めるかを選んで試してください。
  • 実際のゲーム音との重なり:効果音が入ると、聞こえ方が変わります。テストは曲だけで行い、最後にゲーム画面と合わせた確認をもう一度行います。
  • 音が出ない環境:マナーモードや消音で遊ぶ人もいます。音を足した後も、音なしで状況が伝わるかを確認してください。アソバースの公式作品「こだまの森」は、音なしでも遊べる設計になっています。音を主役にするゲームで、音なしの代替をどう用意しているかは、作品を開いて確かめてみてください。

他の作品で「少ない音」を聞き比べる

自分で作る前後に、音の制約が強い公式作品を触って耳を慣らす方法もあります。「WAVE / WAVE」は4つの音を16ステップに並べてループ再生するリズムスタジオで、テンポ、スウィング、トラックごとのミュート、3つのお手本が用意されています。お手本を鳴らしながらトラックを1つずつミュートすると、どの音を抜くと曲の性格が変わるかを、自分の耳で確かめられます。

「雨音のピアノ」は、フェルトとガラスの2音色、タッチの強さ、余韻の切り替えを持ちます。同じ音の並びでも、音色や余韻を変えると聞こえ方がどう変わるかを、本記事の「波形」のつまみの参考にできます。どちらも、実験で得た手がかりを自分の作品に持ち込む前の下調べとして使えます。

次の行動

まず上のコードをそのまま保存して3曲を鳴らし、基準版を決めます。次に、5つのつまみを1つずつ動かした版を作り、記録用紙に書きながらラベルを隠した聞き分けテストを行ってください。使う曲が固まったら、index.html と素材をまとめてアソバースに投稿できます。このコードは音声ファイルを使わないため、ファイルサイズの面でも軽く収まります。

参考資料

  • MDN Web Docs「Web Audio API」