マガジン

効果音を自分で作る:ブラウザだけで完結する無料ツール

遊びをつくる

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

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

ゲームに効果音を付けたいとき、最初の壁は「どこで音を作るか」です。DAW(デジタル・オーディオ・ワークステーション)をインストールして設定するのは、ゲーム制作そのものより先に挫折する原因になりがちです。しかしブラウザだけで動く無料ツールが複数あり、インストールなしで今日から効果音を生成・編集・書き出しできます。 この記事では、ブラウザ完結のツールを目的別に整理し、それぞれで実際に音を作る手順と、失敗しやすいポイントを具体的に説明します。BGMの話は別の記事に譲り、ここでは「ジャンプ音」「コイン取得音」「爆発音」「UIクリック音」といった短い効果音の制作に絞ります。

この記事の目次
  1. 効果音ツールをどう選ぶか
  2. jsfxr で 8 ビット風効果音を作る手順
  3. ZzFX で軽量な音をコードに直接埋め込む
  4. ブラウザ録音+波形編集で「本物の質感」を加える
  5. 生成した効果音をゲームに組み込むときの注意点
  6. 次の行動
  7. 参考資料

効果音ツールをどう選ぶか

ブラウザで動く効果音ツールには大きく三つの方向性があります。

アルゴリズム生成型は、波形の種類・周波数・エンベロープ(音量の時間変化)などのパラメーターを数値で指定して音を合成します。ファイルを一切用意せず、ゼロから波形を作るため、レトロなビープ音・8ビット風サウンドに向いています。代表的なツールが jsfxr と ZzFX です。

録音・編集型は、マイクで録った音やアップロードした音声ファイルをブラウザ上でトリミング・加工します。現実の物音(手を叩く、紙を破くなど)をゲーム向けに整形したいときに使います。Audacity Online のようなブラウザ版波形エディターがこれにあたります。

AIテキスト→音型は、「laser shoot」「coin pickup」などのキーワードを入力すると音を生成してくれる新しい方式です。ElevenLabs Sound Effects(ウェブ版)や類似サービスがこの流れで登場しています。手軽な反面、生成結果にばらつきがあり、細部を追い込むには別途編集が必要です。

選ぶ基準は「どんな音が欲しいか」と「どこまで自分でコントロールしたいか」の二軸です。レトロ・ピクセル系ならアルゴリズム生成型が最速です。リアルな質感が欲しければ録音型か AI 型を起点にして、アルゴリズム型で仕上げる組み合わせが現実的です。

jsfxr で 8 ビット風効果音を作る手順

jsfxr はブラウザで開くだけで使えるアルゴリズム生成ツールです。上部のプリセットボタン(「PICKUP/COIN」「LASER/SHOOT」「EXPLOSION」など)をクリックするだけでランダムな効果音が生成され、そのままWAVまたはMP3でダウンロードできます。

プリセットから始める流れ

  1. ブラウザで jsfxr を開きます。
  2. 目的に近いプリセットボタン(例:JUMP)を数回クリックして、気に入った音が出るまでランダム生成を繰り返します。
  3. 波形グラフの下にある各スライダーで微調整します。主に触るのは次の三つです。
  • Sustain Time:音の伸び。短くするとキレよく、長くすると残響感が出ます。
  • Frequency(Start):音の高さ。数値を上げると高音になります。
  • Vibrato Depth:音の揺れ。0 に近いほどまっすぐな音になります。
  1. 画面右上の「Export WAV」ボタンでファイルを保存します。

失敗しやすい点:スライダーを動かすたびに自動再生される設計のため、音量に注意してください。ヘッドホンで大音量のまま作業すると耳に負担がかかります。また、エクスポートした WAV は 44100Hz・モノラルが標準です。ゲームエンジンによっては読み込み時に形式変換が必要な場合があるため、実際にゲームへ組み込んで再生テストを行ってください。

ZzFX で軽量な音をコードに直接埋め込む

ZzFX はもともと「コードサイズを極限まで小さくしたい」コンテスト向けゲーム(js13kGames など)のために作られたライブラリで、ブラウザ上のデザイナーツールも公開されています。

jsfxr との違いは二点です。一つ目は、生成した音を WAV ファイルではなく JavaScript の配列(数値の羅列) としてコピーできること。これをゲームコードに直接貼り付け、ZzFX の再生関数を呼ぶだけで鳴らせます。外部ファイルのロード処理が不要になるため、ファイル数を減らしたい HTML 単体ゲームに向いています。二つ目は、パラメーターの種類が多く、ビットクラッシュやノイズ量の調整など、jsfxr より細かい質感の制御ができます。

使い方の基本

  1. ZzFX の「ZzFX Designer」ページを開きます。
  2. 上部のカテゴリ(Coin、Hit、Explosion など)からプリセットを選びます。
  3. 各スライダーで音を調整し、「Copy ZzFX Code」ボタンを押します。
  4. コピーした配列(例:zzfx(...[1.5,,537,,.02,.22,1,2,...]))をゲームの JS ファイルに貼り付けます。
  5. ZzFX のランタイムファイル(1KB 程度)もゲームに追加して完了です。

WAV を書き出したい場合も「Export WAV」から可能です。jsfxr と ZzFX は似た音域をカバーするので、どちらか一方を使いこなせれば十分です。慣れるまでは UI がシンプルな jsfxr から始め、コード埋め込みが必要になったら ZzFX に切り替えるというルートが無駄がありません。

ブラウザ録音+波形編集で「本物の質感」を加える

8 ビット風では合わないゲームもあります。たとえば現代的なカードゲームや脱出ゲームでは、少しリアルな質感の音がゲームの雰囲気と合います。そういう場合はマイクで録った音を素材にします。

録音から編集までの手順

  1. ブラウザ上の波形エディター(Audacity Online、または Wavosaur Web 版など)を開き、マイク録音を許可します。
  2. 日用品を使って音を録ります。たとえばコイン音なら硬貨をガラスに当てる、ドア音なら実際にドアを軽く叩く、などです。余計なノイズが入らないよう、部屋を静かにした状態で短く録ります。
  3. 波形表示で必要な部分だけをトリミングします。録音の前後に入る息や部屋鳴りは削除します。
  4. 音量を正規化(ノーマライズ)して一定の大きさに揃えます。この操作はほぼすべての波形エディターに「Normalize」として用意されています。
  5. WAV または MP3 として書き出します。

失敗しやすい点:録音した音は「長すぎる」ことが多いです。ゲームの効果音は 0.1 秒〜1 秒程度が目安で、それを超えると操作感が重くなります。トリミングは思い切って短くするほうが実際のゲームでは馴染みやすいです。また、ブラウザ録音の品質はマイクとブラウザのバージョンに依存します。音が割れる・ノイズが多い場合は、スマートフォンのボイスメモで録音して WAV に変換してからアップロードするほうが安定します。

生成した効果音をゲームに組み込むときの注意点

ツールで音を作っても、ゲームで正しく鳴らなければ意味がありません。よくある問題と対処を整理します。

ファイル形式と互換性:WAV は非圧縮で高品質ですが、ファイルサイズが大きくなります。ブラウザゲームでは MP3 または OGG への変換が一般的です。変換は Convertio(ブラウザ完結の形式変換ツール)などで行えます。ただし圧縮形式に変換すると音質が若干変わるため、変換後に必ず再生テストをしてください。

音量のそろえ方:複数の効果音を使う場合、録音元やツールが違うと音量バランスがばらばらになります。各ファイルを波形エディターでノーマライズしたうえで、ゲームのコード側でも音量係数(volume パラメーター)を調整する二段構えが確実です。

ループと非ループ:効果音は基本的に「一度鳴って終わる」非ループです。BGM と混同して誤ってループ設定にすると、ジャンプ音が鳴り続けるバグになります。Web Audio API を直接使う場合は loop: false を明示する習慣をつけると防ぎやすいです。

著作権の扱い:jsfxr や ZzFX で自分が生成・調整した音は、一般的にはその作者が権利を持つ創作物と考えられますが、ツールの利用規約や生成物の扱いはサービスごとに異なります。商用利用や他プラットフォームへの公開を考える場合は、各ツールの利用規約を確認したうえで、不明点は専門家や公式情報に当たるのが確実です。

次の行動

まず jsfxr を開き、「JUMP」プリセットを数回クリックして気に入った音を WAV で保存してみてください。それをゲームに組み込み、実際に再生できたら次の音(コイン、ダメージなど)に進む流れが、ツールへの慣れとゲームの完成度を同時に高める最短ルートです。作った効果音を使ったゲームをアソバースに投稿する際は、ZIP にまとめてアップロードすることで複数の音声ファイルもそのまま使えます。

参考資料

  • jsfxr 公式サイト
  • ZzFX 公式サイト・ZzFX Designer
  • js13kGames 公式ドキュメント(ZzFX の活用事例)
  • Web Audio API — MDN Web Docs(Mozilla)