ECサイトで音を鳴らす — Tone.jsで作る「買い物が楽しい」

制作サンプル「MONSTER DENIM」（古着EC）の解説です。音が鳴るので、ぜひ実物で。

機能が同じなら、体験で差をつける

カートに入れる、合計を見る、レジに進む——ECの機能はどこも同じです。このデモのテーマは、その同じ機能を「楽しい」に変えること。手段はアメコミ風のアニメーションと、そして音です。

カートに入れると上昇アルペジオが鳴り、POW! が弾け、バッジがボヨンと跳ねる。3つ同時に起きると、買い物が小さなご褒美になります。

Tone.js の使いどころ

音声ファイルは使っていません。Web Audio をラップした Tone.js で、効果音を全部シンセで設計しています。ファイルの読み込みがないので軽く、音程やテンポをコードで調整できるのが利点です。

// カート追加: C-E-G-C の上昇アルペジオ
const n = Tone.now();
['C5','E5','G5','C6'].forEach((p, i) =>
  synth.triggerAttackRelease(p, 0.12, n + i * 0.07));

// キャラごとに声色を変える（もっさん＝低いドラム膜の音）
new Tone.MembraneSynth({ octaves: 4, pitchDecay: 0.12 })
  .triggerAttackRelease('C2', 0.4);

店番のモンスター3体（すべてCSS描画・画像ゼロ）には、それぞれ違うシンセを割り当てました。つつくと「GYU!」「BOMU…」「PEA!」と鳴き分けます。キャラクターは見た目より音で性格がつく、というのが作ってみての発見です。

音を出すサイトの作法

Webの音には守るべきルールがあります。破るとただの迷惑サイトです。

• 勝手に鳴らさない — AudioContext はブラウザの自動再生制限に従い、最初のユーザー操作で初期化する
• いつでも消せる — 画面の目立つ場所に ON/OFF トグルを常設
• 短く・小さく — 効果音は0.1〜0.5秒、マスター音量は控えめに（このデモは −14dB）

// 初回のクリックで初めて音の準備をする
async function ensureAudio() {
  if (audioReady) return true;
  await Tone.start();   // ← ユーザー操作の中でのみ呼ぶ
  ...
}

どんな案件に向くか

万能ではありません。業務システムには不要ですし、静かな業種にも合いません。効くのはブランドの世界観そのものが商品の一部である場合——アパレル、玩具、エンタメ、子ども向けサービスなど。「うちの店らしさを画面に出したい」に対する、選択肢のひとつです。