「IT起業伝」のBGM20曲は、PCエンジン風の音色を、ブラウザの中でその場で鳴らしている

こんにちは、北海道のWEB屋です。

ドット絵の経営シミュレーション「IT起業伝」では、年代と季節が変わるとBGMも変わります。全部で20曲。ところが、ゲームのフォルダの中には音のファイルが1つもありません。

BGMも効果音も、楽譜のようなデータから、ブラウザの音の機能（Web Audio）でその場で音を作って鳴らしています。音色は、PCエンジン風です。今日はそのしくみの話です。

年代と季節で20曲

5つの年代それぞれに、春・夏・秋・冬の4曲があります。季節は札幌に合わせていて、春は4〜5月、夏は6〜8月、秋は9〜10月、冬は11月〜3月です。冬が長いのは、札幌なので。

曲の雰囲気は、80年代は8ビットのパソコンとシティポップ、90年代はJ-POPやユーロビート、2000年代はトランスと着メロ、2010年代はEDM、2020年代はローファイとシティポップのリバイバル、というふうに年代ごとに分けています。

曲は「楽譜のようなデータ」

1曲は4小節のくり返しで、1小節は16分音符16個ぶん。メロディ、和音の伴奏、ベース、ドラム、それに冬の曲だけの鈴、という5つのパートでできています。たとえば1980年代の春の曲は、こんなデータです（一部）。

'1980s_spring': {
  title: '8ビットの朝', bpm: 150,
  lead: 'square', arpWave: 'square', bass: 'square',
  chords: [ch(0, 'maj'), ch(-3, 'min'), ch(-7, 'maj'), ch(-5, 'maj')],
  melody: [12, _, 16, 19, 16, _, 12, _, ...],
  bassPat: 'x.o.x.o.x.o.x.o.',
  kick:    'x.......x.......',
}

メロディは「ド」を0として半音ずつ数えた数字で、_は休み。ベースやドラムは16文字の並びで、xのところで鳴らします。

音色は、PCエンジン風

データの中のsquare（矩形波）などの指定は、鳴らすときに、パートの役目ごとにPCエンジン風の音色へ置きかえています。

PCエンジンの音は、1周期が32段、高さが0〜31の32段階（5ビット）の、とても小さな波形をくり返して鳴らす方式です。ゲームでも、この形の波形を何種類か作り、くり返して鳴らしています。

32段しかない波形なので、なめらかな波ではなく、小さな階段のような段差が残ります。この段差が、あの時代のゲームらしいざらっとした音になります。

作りながら直したことが2つあります。1つは、いくつもの音が重なったときに音が割れたこと。波形が上下どちらかにかたよっていたので、かたよりを取ってから鳴らすようにしました。もう1つは、音の鳴りはじめに「プチッ」というノイズが入ったこと。最初の一瞬だけ音量が大きいまま出ていたので、音量を0から始めるようにして直しました。

ドラムは、ザーッというノイズを、帯域ごとのフィルターで削って作っています。バスドラムは低い音を一気に下げて「ドン」、スネアはノイズに短い「タン」という音を重ねています。

なぜPCエンジン風にしたのか

最初は、ブラウザが持っている基本の4種類の波（矩形波、のこぎり波、三角波、正弦波）だけで鳴らしていました。そのあと、メガドライブのようなFM音源風の音色も作って試しています。

最後にPCエンジン風に決めたのは、このゲームの舞台が札幌だからです。PCエンジンの開発には、札幌で生まれたゲーム会社のハドソンが関わっていました。札幌のIT業界の歩みを描くゲームなので、その音へのリスペクトをこめています。札幌のITの歴史については、札幌のITの歴史を、ゲームにしましたに書いています。

FM音源風の音色や、曲を派手に盛り上げる編曲も作ってはみましたが、それぞれの曲のメロディを生かしたかったので、いまは使っていません。

音のファイルがないと、何がいいか

• 軽い：音を鳴らすプログラムと20曲ぶんのデータを合わせても、約40KB。音のファイルなら、1曲だけでもこの何十倍にもなります
• すぐ鳴る：読み込みを待たずに、画面を開いたらすぐ音が出せます
• 音色を丸ごと変えられる：今回のように音色をPCエンジン風に変えても、20曲の楽譜のデータには手を入れていません。音色の割り当てを変えるだけで、全曲の音が変わります

紹介動画の音と、公式サイトの音

紹介動画にも、ゲームと同じ音を使っています。ブラウザの中で、画面に出さずに音だけを作る機能（OfflineAudioContext）で曲を鳴らし、WAVのファイルに書き出しました。音色を変えたときも、書き出し直すだけで動画の音がそろいます。

公式サイトでも、同じプログラムで音楽が流れます。「音を出す」を押すと、ページを下にたどるにつれて、各年代の紹介のところでその年代の曲に切り替わります。

つまずいたこと：アプリを閉じても鳴りっぱなし

スマホのアプリ版で、ホーム画面に戻ってもBGMが鳴り続ける不具合がありました。画面が見えるようになったときに音を再開する処理はあったのに、見えなくなったときに止める処理がなかったんです。画面が隠れたら音の処理を一時停止し、戻ったら再開するようにして直しました。

まとめ

• IT起業伝のBGMは、年代×季節の20曲。音のファイルではなく、ブラウザの中でその場で作っている
• 音色はPCエンジン風。1周期32段・5ビットの小さな波形をくり返して鳴らす
• 札幌が舞台なので、札幌生まれのハドソンが開発に関わったPCエンジンの音へのリスペクトをこめた
• 音のデータは全部で約40KB。音色の割り当てを変えるだけで、20曲すべての音が変わる

音を出して遊べる無料の体験版は、公式サイトから。発売は2026年12月の予定です。

出典とリンク

• IT起業伝 公式サイト・体験版：itkigyoden.com
• MDN Web Docs「Web Audio API」：developer.mozilla.org
• 開発：北海道のWEB屋

この記事は2026年11月8日に、音色をPCエンジン風に変えたことに合わせて書き直しました。