最近、AIを使って音楽を生成できるWebサービスを開発しました。
サービス名は CreateYourMusic AI で、ユーザーがテキストで「どんな音楽を作りたいか」を入力すると。
なぜAI音楽生成サービスを作ったのか!
画像生成や文章生成に比べると、音楽生成はまだユーザー体験の設計が難しい領域だと感じています。
文章生成であれば、結果はすぐ読めます。
画像生成であれば、数秒で良し悪しが判断できます。
しかし音楽の場合、ユーザーは生成された結果を「聴く」必要があります。
つまり、単に生成ボタンを置くだけでは不十分で、以下のような体験設計が重要になります。
- 生成前にユーザーが期待値を作れること
- 生成中に不安にならないこと
- 生成後にすぐ試聴できること
- 曲の用途が明確に分かること
- 失敗時のストレスを減らすこと
全体アーキテクチャの考え方
大きく分けると、構成は以下のような形にしています。
User
↓
Frontend
↓
Backend API
↓
Task Layer
↓
AI Generation Provider
↓
Storage / Database
↓
Frontend Playback
実際の構成はもう少し細かいですが、基本思想としては「生成処理をフロントエンドに直接持たせない」ことを重視しました。
AI生成は時間がかかることがあります。
そのため、フロントエンドはあくまで以下の役割に限定しました。
- 入力フォーム
- 状態表示
- 生成結果の表示
- 試聴・ダウンロード導線
- エラー時の案内
一方で、バックエンド側では以下を担当します。
-
リクエストのバリデーション
-
ユーザー状態の確認
-
生成タスクの作成
-
結果の保存
-
失敗時の処理
-
クレジットや利用制限の管理
生成系サービスでは、フロントエンドを軽くし、バックエンド側で状態管理する方が、長期的には安定しやすいと感じました。
一番難しかったのは「生成中の体験」
AI音楽生成では、ユーザーが待つ時間が発生します。
この待ち時間の設計を雑にすると、ユーザーはすぐ離脱します。
特に難しいのは、生成処理の進捗が必ずしも正確に取れるわけではないことです。
例えば、バックエンド側では「処理中」しか分からない場合でも、ユーザーには何らかの変化を見せる必要があります。
そのため、実装では以下のような考え方を取り入れました。
- 生成開始直後に即座に状態を変える
- 待機中も段階的に進んでいるように見せる
- 失敗時は曖昧なエラーではなく、次に何をすればよいか表示する
- 完了後はすぐに試聴できる導線を出す
AI生成はブラックボックスに見えやすいため、UI側で「今何が起きているのか」を丁寧に伝える必要があります。
プロンプト入力は自由すぎても難しい
最初は、ユーザーが自由にプロンプトを書ける形にすれば十分だと思っていました。
しかし実際には、自由入力だけだと多くのユーザーは何を書けばよいか分かりません。
特に音楽の場合、ユーザーは以下のような言葉をすぐに思いつかないことがあります。
- genre
- mood
- tempo
- vocal style
- instruments
- song structure
- use case
そのため、単純なテキストエリアだけではなく、用途別の導線が必要だと感じました。
例えば、以下のような入口です。
- birthday song
- background music
- podcast intro
- social media music
- game soundtrack
- romantic song
- funny song
ユーザーは「音楽理論」から入るよりも、「何に使いたいか」から入る方が自然です。
この考え方は、AI音楽サービスのSEOページ設計にもかなり影響しました。
音楽生成サービスでは「用途ページ」が重要
AI music generator という大きなキーワードだけを狙っても、競争はかなり激しいです。
そこで、プロダクト側でもSEO側でも、用途別ページを作る方が自然だと感じました。
例えば、birthday song generator のようなページです。
このようなページでは、単にキーワードを入れるだけではなく、ユーザーがそのページに来た理由を考える必要があります。
誕生日ソングを作りたい人は、技術的な説明よりも、次のようなことを知りたいはずです。
- 友達向けに作れるか
- 家族向けに作れるか
- 恋人向けに作れるか
- 子ども向けに作れるか
- どんなジャンルで作れるか
- 歌詞も作れるか
- どれくらい簡単に作れるか
つまり、AI機能の説明よりも、ユーザーの状況に合わせた説明が重要になります。
- 生成状態の管理
- タイムアウト処理
- 失敗時のリトライまたは返金ルール
- コスト計算
- ユーザーごとの利用履歴
- 不正利用の制限
- 結果ファイルの保存
特にコスト管理は重要です。
AI生成は1回あたりのコストが発生するため、無料ユーザーや失敗リクエストの扱いを曖昧にすると、すぐに赤字になります。
決済とクレジット設計
AI生成系サービスでは、サブスクリプションだけでなく、クレジット制も相性が良いと感じています。
理由は、ユーザーの利用頻度にかなり差があるからです。
毎日使うユーザーもいれば、誕生日やイベントのときだけ使うユーザーもいます。
そのため、クレジット制にすると以下のようなメリットがあります。
- 生成コストと売上を対応させやすい
- ユーザーに利用量を説明しやすい
- 失敗時の補填がしやすい
- 複数モデルを扱う場合も価格差を吸収しやすい
ただし、クレジット制にはUX上の注意点もあります。
ユーザーは「1クレジットが何を意味するのか」をすぐには理解できません。
そのため、価格ページや生成ボタン周辺で、どの操作にどれくらいのクレジットが必要なのかをできるだけ明確にする必要があります。
SEOとプロダクトは分けて考えない方がよい
このプロジェクトで強く感じたのは、SEOページとプロダクト体験を切り離すべきではないということです。
SEOだけを考えると、ページは説明文だらけになります。
一方で、プロダクトだけを考えると、検索流入を受け止めるページが不足します。
AI音楽生成のようなサービスでは、以下を自然につなげる必要があります。
検索キーワード
↓
用途別 landing page
↓
具体的なユースケース説明
↓
生成フォーム
↓
試聴
↓
登録・購入
この流れが弱いと、検索流入はあってもコンバージョンしません。
逆に、用途が明確なページは、ユーザーの意図と生成フォームがつながりやすくなります。
開発中に感じた落とし穴
実際に作ってみて、特に注意すべきだと思った点は以下です。
1. 生成品質だけで勝負しようとしない
もちろん品質は重要です。
ただ、ユーザーは生成前に品質を判断できません。
そのため、生成前の画面、サンプル、説明、デモ、UIの信頼感がかなり重要です。
2. 待ち時間を軽視しない
AI生成では、数十秒でも長く感じます。
待っている間に何も表示しないと、ユーザーは失敗したと思って離脱します。
3. エラー文言を雑にしない
「Error」だけでは不十分です。
何が起きたのか、ユーザーは次に何をすればよいのかを伝える必要があります。
4. SEOページを後回しにしすぎない
AI系サービスは競争が激しいため、早めに検索流入の入口を作っておく方がよいです。
5. コスト構造を甘く見ない
AI生成は、アクセスが増えるほど嬉しい一方で、無料利用が増えすぎるとコストも増えます。
そのため、無料枠、ログイン制限、クレジット消費、失敗時の処理は初期段階から設計しておくべきです。
まとめ
AI音楽生成サービスを作ってみて感じたのは、技術だけでなく、UX、コスト、SEO、決済、運用を同時に考える必要があるということです。
特に音楽生成は、画像生成やテキスト生成よりも「待つ」「聴く」「比較する」という体験が重要になります。
- ユーザーが迷わない入力導線
- 待ち時間を不安にさせないUI
- 失敗時の分かりやすい案内
- 用途別のページ設計
- クレジットとコスト管理
- 生成結果の保存と再利用
- 検索流入から生成までの自然な流れ
現在も CreateYourMusic AI は改善中ですが、AI音楽生成という領域はまだ発展途上で、プロダクト設計の余地がかなり大きいと感じています。
この記事が、これからAI生成系のWebサービスを作る人の参考になれば嬉しいです。