UIに効果音をつけようとして、素材サイトを3時間見て回ったことがある。

「クリック音」で検索する。試聴する。ライセンスを見る。商用OKか、クレジットが必要か。音量がバラバラなので自分で揃える。「成功音」と「エラー音」の質感が合わない。

そして後から「もう少し可愛い感じに」と言われて、全部やり直しになる。

この工程を全部消した。

やり方は、「音のファイルを選ぶ」のをやめて「音の意味を選ぶ」に変える。

ui.play('success')

この1行は二度と変えない。変えるのは音の人格だけだ。

ui.setPack('minimal')   // 業務ツールらしい、乾いた控えめな音
ui.setPack('arcade')    // ゲームらしい、陽気でチャンキーな音
ui.setPack('zen')       // 和の静けさ。集中を邪魔しない音

78の意味 × 12の人格＝ 936音。全部あらかじめ音量が揃っている。「可愛い感じに」は、1行の書き換えで終わる。

そしてこれを、Claude Code に「効果音つけて」と言うだけで実装まで終わらせる。

これを作った

先に、何を作ったのかを見せておきます。

936音を、ブラウザで1つずつ鳴らして選べる画面です。78キューが13カテゴリに分かれていて、日本語の名前と「いつ鳴らす音か」が全部のキューに付いています。

Windows なら1コマンドで立ちます。

.\.claude\skills\uisfx\local\Start-UisfxPlayground.ps1

Node の確認 → npm install uisfx → 画面とサーバーの書き出し → 起動 → ブラウザを開く、まで全部やります。Mac / Linux 用には、生成後の中身をそのまま同梱してあるので node server.mjs で動きます。

検索は日本語で通ります。「カート」と打つと、add-to-cart / remove-from-cart / checkout の3件に絞れます。uisfx.com は英語だけなので、日本語で引けるのはここだけです。

この画面も、下の78キュー日本語対訳も、Windowsのコマンドラインツールも、全部この記事の中に入っています。

線引きを先に書いておく

効果音そのものは俺が作ったものじゃない。

オープンソースの uisfx（https://uisfx.com ／作者 romainsimon）が配っているもので、音声は CC0-1.0、コードは MIT。誰でも無料で使える。商用利用可・クレジット表記も不要。

だから「無料の素材を売っている」わけじゃない、という点を先に書く。判断はここを読んでからにしてほしい。

無料でできること / この記事で飛ばせること

uisfx.com に行けば、誰でも今すぐ936音を試聴して落とせる。そこは本当に無料だ。無料で足りない部分だけ書く。

英語しかない。 「カート」「読み込み中」「レベルアップ」では引けない。cue の名前を英語で当てにいく作業が毎回入る
936音のうちどれを使うかは書いてない。 「決済完了で何を鳴らすか」は自分で決める
実装は自分で書く。 unlock、ループ停止、ミュート保持、Next.js対応。全部自分で踏む
試聴すると音が小さい。 これは後述するけど、仕様どおりの挙動で、知らないと原因が分からない

この4つを消すのが、この記事の中身だ。

「音が小さい」の正体（有料部分の中身のひとつ）

936音をブラウザで鳴らす画面を自分で作った。動いた。でも実際に localhost で聴いたら、音が小さくて聴き比べにならなかった。

スピーカーを上げてもマスター音量を上げても変わらない。実装のバグじゃなかった。

uisfx は各キューに推奨音量を持っていて、その値が 0.065〜0.26 と意図的に小さい。これは「実装したアプリで鳴らすときの適正値」だ。正しい。ただし試聴には小さすぎる。マスターをいくら上げても、掛け算の相手が 0.065 なら聞こえない。

そこで、試聴のときだけ推奨音量に倍率を掛ける仕組みを入れた。2倍にしたら、ちょうどよかった。 だから既定を ×2.00 にしてある。

画面には毎回この式が出る。

推奨音量 0.23 × ブースト 2.00 = 0.460

数字が見えていると、試聴で気に入った音量をそのまま実装に持ち込むミスをしなくなる。これをやると必ず「うるさい」と言われる。

推奨音量が 0.065 だと知る前は、ただ「小さいな」で止まっていた。数字を見たら理由が分かった。

有料部分では、この画面をフォルダごと渡す。 係数の意味、再生中のループ音に倍率を反映させる方法、なぜマスター音量を触ってはいけないのかまで書いた。node server.mjs の1行で立つ。依存はサーバー1ファイルだけ。

有料部分に入っているもの

zip で18ファイル / 展開後 332,514 バイト。内訳はこう。

936音をブラウザで鳴らす試聴画面 ── 音量ブースト付き。上に書いたやつ。Windowsは1コマンドで立つ。Mac / Linux 用に生成済みの中身も同梱
Claude Code スキル本体 ── 「効果音つけて」の一言で、選定から実装まで終わる。unlock・ループ停止・ミュート保持を実装前に潰す
全78キューの日本語対訳 ── 意味・推奨音量・鳴らす瞬間つき。日本語で検索できるCLI同梱（依存ゼロ・オフライン）
シーン別プリセット15種 ── SaaS / LP / EC / フォーム / ドキュメント / モバイル / チャット / メディア / AIエージェント / エディタ / オンボーディング / カジュアルゲーム / RPG / パズル / 学習アプリ。「どこで何を鳴らすか」が実装コード付きで出る
12パックの30秒判断フロー ── 7問に答えると1つに絞れる。パックごとの落とし穴も
実装レシピ ── React / Vue / Svelte / Next.js / React Native / ゲームエンジン / テスト / アクセシビリティ
ターミナルだけで鳴らすツール ── ブラウザを開かず12パック比較。シーンの通し再生も（Windows専用）

1・3・4・7 は自分で書いた部分だ。2 の中身も自分で書いた。

買ったあと最初の10分

zip を展開して .claude/skills/ に置く（コマンド2行）
node server.mjs で試聴画面を立てる
audition success 相当を12パック聴いて、1つ選ぶ
Claude Code に「このアプリに効果音をつけて。パックは soft で」と言う

ここまでで音が鳴る。素材サイトは1回も開かない。

買わなくていい人

効果音を1個だけ探している人。それなら uisfx.com で試聴して落とせば終わる
Claude Code を使っていない人。試聴画面・CLI・リファレンスは使えるけど、一番効くところ（頼むだけで実装が終わる）が効かない
PowerShell 版だけを目当てにしている人。そこは Windows 専用（ブラウザの試聴画面は OS を問わない）

有料部分で潰す5つ

実装するとほぼ全員が踏む。順番も含めて全部書いた。

unlock() を忘れると一生鳴らない。 ブラウザの自動再生ポリシー。Safari は特に厳しい
ループ音6つは自動で止まらない。 止める場所を1行間違えると、例外が出たときだけ鳴り続ける
ミュート設定が無いと未完成。 リロード後も保持しないと、結局ユーザーはオフにできない
推奨音量 0.065〜0.26 の意味。 試聴と実装で扱いを分ける
Next.js で落ちる。 落ちる条件は1つだけ

1つでも踏んだ経験があるなら、たぶん元は取れる。