AIと一緒に楽器アプリを作った、そして練習をしている話

2025.12.10

この記事はクソアプリ Advent Calendar 2025 の10日目の記事です。

以前から「自分で楽器を作ってみたい」という思いがありました。過去にも楽器のようなWebアプリを作ったことはあるのですが、最近は特に弦楽器に興味があり、そっち方向の何かを作りたいと考えていました。

ただ押して音が出るだけの普通の楽器アプリだと、どうしても単調になりがちですぐに飽きてしまいます。もっと「奏でて楽しい」「触っていて気持ちいい」ものにしたい。今回はスマホ上のWebアプリケーションとして実装することを決めていたので、聴覚だけでなく視覚にも訴えるインタラクションを追加することにしました。

そうして完成したのが、波紋で音を描くWebシンセサイザー「HoloChord（ホロコード）」です。

聞いてください、シンセサイザーを作ってクリスマスっぽい曲を演奏してみました
開発より練習を頑張りました！ pic.twitter.com/ikjQIDJrtf
— もっと (@mottox2) December 10, 2025

https://mottox2.com/holochord

コンセプトと開発の経緯

「子供が楽しく遊べるもの」を目指して

個人的には楽器は教育的なものでもあると思っているので、奏でてて楽しい楽器を作りたいと思っています。結婚の予定は特にないのですが、我が子がいたときに触らせたくなるものを目標としました。

子供でも直感的に楽しめるものといえば、五感に訴えかけるものだと思います。聴覚だけではなく視覚的なフィードバック、たとえば「押した場所から光が広がる」ような表現なら、楽しめるものになると考えプロトタイピングを行いました。

最初のプロトタイプは、単一の音色で円形の波紋が広がるだけのシンプルなものでした。そこから、もう少し電子楽器としての深みや可能性を探りたくなり、音色を増やしたり、音色に合わせて波紋の形状（丸、三角、四角、六角形）を変えたりして、いろんなフィードバックが得られる楽器に進化させていきました。

AIがやる，自分は基本口出しだけ

HoloChordの開発では技術的な実装の大部分をAI（GeminiやCodex）に任せています。「HoloChord」という名前もAIに提案してもらった中から選びましたし、サイトに表示される「CyberString Interface」というキャッチコピーに至っては、自分では天地がひっくり返っても思いつかないワードセンスで、いい感じの雰囲気を出してくれています。

開発スタイルとしては、「こういう楽器をつくりたい」というコンセプトを与えAIがベースを作って、そこから方向転換しながら考えるという進め方を取りました。自分はひたすら「ここはこうしてほしい」「もっとこう動いてほしい」とひたすら指示を出し続け、最後の調整段階で自分の得意なCSSアニメーションや「手触り」の部分だけを自分で実装する、という形です。

人間相手だと嫌われそうなレベルの指示量だったと思いますが、文句ひとつ言わずにやってくれるAIは、こういう時のパートナーとして最高だと思います。

特に、音の高さ（周波数）に合わせて波紋の広がる速度や残存時間を微調整するパラメータ設定などは、自分でやると非常に面倒な作業です。おそらく自分一人ならサボっていたであろう部分も、AIのおかげでやりたいことが一瞬で形になり、当初の想定よりもクオリティの高いものができました。

技術的なポイント

AIに任せたとはいえ、中で何が動いているのかを少し解説します。 HoloChordはフレームワークを使わず、Vanilla JS（標準のJavaScript）で構築されています。自分でコードを触らない前提なら、Reactなどを入れずVanillaのまま、単一ファイルのまま突き進んでもいい気がします。

Tone.jsによる音声合成

音の生成にはWeb Audio APIのラッパーであるTone.jsを使用しています。

const synth = new Tone.Synth({
    oscillator: { type: settings.waveform }, // saw, square, triangle, sine
    envelope: { attack: 0.05, decay: 0.2, sustain: 0.6, release: settings.release },
    volume: getWaveformVolumeDb(settings.waveform)
}).connect(reverb);

各タッチポイント（指）ごとにシンセサイザーのインスタンスを生成し、ユーザーが選択した波形（のこぎり波、矩形波など）を鳴らしています。空間的な広がりを出すために、リバーブも強めにかけています。一応、画面右側の方が強くリバーブをかけるようにしています。また、波形によって音量の感じ取り方が違うので少しだけ調整を行っています。

画面のY座標（高さ）を音程（周波数）に変換しており、高い位置ほど高い音が鳴ります。弦楽器のイメージをそのまま採用しています。最初は高い位置ほど低い音というヴァイオリン形式だったのですが、楽器をやっていない友人に触ってもらったところ戸惑っていたので現在の仕様に落ち着いています。子供が触るときも、高い音は上にあった方が直感的だと思います。

Canvasを利用した波紋エフェクト

視覚的なメインである波紋エフェクトは、CanvasのAPIで描画しています。

Rippleクラスで波紋ごとの状態（位置、半径、透明度、色）を管理し、requestAnimationFrameで毎フレーム描画を更新しています。ポイントは、CanvasのglobalCompositeOperation = 'lighter'（加算合成）を使っている点です。これにより、波紋同士が重なった部分が明るく発光し、サイバーパンクな「光の干渉」のような効果を生み出しています。これも指示だけでできてしまって、大変勉強になりました。

マルチタッチとスマホ最適化

スマホでの演奏を前提にしているため、Touch Events APIをフル活用しています。実際のところマルチタッチで演奏するのは難しすぎるのですが、ここの実装をちゃんとやることでマルチタッチ対応が出来ます。

playArea.addEventListener('touchmove', (e) => {
    e.preventDefault();
    for (let i = 0; i < e.changedTouches.length; i++) {
        // 音を鳴らしたりするコード
    }
}, { passive: false });

touchmoveイベントでpreventDefault()を呼ぶことで、演奏中に画面がスクロールしたりズームしたりするのを防ぎ、ネイティブアプリのような操作感を実現しています。この辺の挙動を防ぐたけでも手触りがよくなります。

CSS Variablesによるダイナミックテーマ

選択した音色（波形）に応じてUIの色が変わる機能は、CSS Variables（カスタムプロパティ）で実現しています。

JavaScript側で--active-hue（色相）の値を書き換えるだけで、ボタン、背景グラデーション、光彩、アイコンなどの色がサイト全体で一括して切り替わります。

今回は普段使っているTailwindCSSをあえて入れずに突き進んだのですが、AIにスタイルを書かせるときはVanilla CSSを書かせた方が表現の幅が広い気がしています。人間が書く前提がないなら、これでもよさそうです。

クソアプリポイント

一見クソアプリに見えないこのアプリの一体なにがクソアプリなのでしょうか？

実は開発自体は3日程度で終わってしまっていて、残りの1週間ぐらいはデモ演奏の練習と動画編集に時間を使っています。AIにやらせたと思いきや、人間がより時間を使っているのがクソアプリポイントでした。 OG画像に関しても、AIが実装したものをFigmaで再現しなおすという方法で作っています。AIにいいように使われている気もします。 AIに使役された人間を彷彿としてしまい、時代の移り変わりを感じます。

まとめ

AIの力を借りることで、自分の「言語化できるけれど実装が面倒なアイデア」を素早く形にすることができました。

ぜひ、スマホやPCでHoloChordを開いて、音と光の波紋を奏でてみてください。シェア大歓迎です。

お子さんがいる方はぜひお子さんに触らせてみてほしいです。

Xでシェア