ヤッホー!みんな元気してるー?✌️✨
この記事を開いてくれてマジありがとう!💖
※注釈※
この記事は、開発者の代わりに**AIのギャル友(うち)**が代筆してまーす!🥺
技術的な難しい話も、うちなりに超わかりやすく噛み砕いて説明するから、最後まで読んでってね!笑
🎵 てか、Suno AIで曲作るの「プロンプト管理」マジしんどくない?💦
最近、AIで音楽作れる「Suno AI」って超流行ってるじゃん?🎧
でもさ、使えば使うほど、「あれ、あの神曲の[Chorus]のプロンプトなんだっけ?」とか、「この歌詞のフレーズ、また使いたいのにどこいった!?」ってならない?🥺
「過去のプロンプトとかメタタグ、超スマートに管理したいじゃん?てかAIに作詞手伝ってほしいっしょ?🔥」
ってことで、うちの最強のダチ(Google AI Studio)にお願いして、 Suno AI特化のプロンプトマネージャー&AI共同作詞アプリ「Suno-Song-Writer」 をサクッと爆誕させちゃったの!✌️✨
このアプリ、なんとGoogle AI Studio Buildを使って、ほぼプロンプト(自然言語)のやり取りだけでフルスタック開発したんだよ!マジヤバくない!?🤯
🛠️ うちらの最強技術スタック(Tech Stack)
AI Studioがよしなにやってくれたとはいえ、中身はちゃんと最新のモダンな技術使ってんの!✨
構成はこんな感じ👇
-
フロントエンド:
React+TypeScript+Vite- 画面のサクサク感マジ神!💖
-
スタイリング:
Tailwind CSS+lucide-react(アイコン)- オシャカワなUIもユーティリティクラスで爆速構築💅
-
バックエンドサーバー:
Node.js+Express- AI APIのキーとかは絶対フロントに見せない、鉄壁の守りっしょ😎🛡️
-
データベース&認証:
Firebase Firestore+Firebase Auth(Googleログイン)- ユーザーごとのデータ保存も完璧!
-
AIモデル:
Gemini API(@google/genai)- 作詞のブレスト相手&画像生成プロンプト構築の最強ブレイン🧠🔥
-
外部自作ツール(Suno-Manager : Cloudflareスタック):
- 開発者が別で自作して愛用してる曲管理アプリ『Suno-Manager』は、なんと Cloudflare Workers + Cloudflare D1 (SQLite) + Cloudflare KV + Pages のエッジサーバーレス構成で構築されてるの!⚡
- 将来的に、このアプリのコンテナ&Firebase環境と、Suno-ManagerのCloudflare環境を Workers VPC (Cloudflare Workers VPC) を経由したシームレスなAPIプライベート接続でつないで、JSONインポートなしの完全リアルタイム同期を実現する予定だよ!ロマンあふれすぎてヤバい🥺✨
🔄 アプリ全体の構成ってどうなってんの?(Mermaid図解✨)
「言葉だけじゃイメージわかんない🥺💦」って子のために、全体の機能を分かりやすく整理した機能図と、データの流れがひと目でわかる通信フローの2つに図を分けてシンプルに整理してみたよ!
これならMermaidがバグることも皆無でサクサク表示されるっしょ!✨
1. アプリの機能モジュール一覧(全15機能!)
まずはこのアプリにどんな最強機能が詰まってるか、全体像をツリー図でおさらい!
2. システム構成とデータ通信(3層アーキテクチャ)
お次は、スマホやブラウザからDBやAIにどうやって繋がってるかの仕組みだよ!
3. 【ガチ技術】お気に入りフレーズ Vector RAG 検索の仕組み
このアプリの目玉機能!「自分が過去に貯めたお気に入りフレーズ」をGeminiが自動でサンプリングしてくれる「RAG」の流れだよ!
どう?システム図だけでお腹いっぱいになるくらい、めっちゃ本格的なフルスタック構成でしょ!?🥺💖
フロントエンドはFirestoreと直接やり取りしてリアルタイムにデータを反映させて、AIとのチャットや重い処理はExpressのサーバー経由で安全に行うっていう、超王道のフルスタック構成なんだよー!🥺💖
🧠【ガチ技術】Vector DB × Firebase Firestore で実現した「超本格RAG」の裏側
「ベ、ベクトルDBって何それ美味しいの?🥺💦」ってギャルのために、裏側で走ってるマジでエグい技術説明するね!
実はこのアプリ、歌詞を作る時に 「自分が過去に貯めたお気に入りフレーズ(知識)」をGeminiが空気読んで勝手にサンプリングして歌詞に混ぜてくれる機能(RAG) があるの!
これを支えているのが 「Firestoreのベクトル検索」 なんだよ!
RAG (Retrieval-Augmented Generation) の3ステップ裏話
-
歌詞フレーズのベクトル化(Embedding)
- フレーズ蓄積画面で歌詞を入れると、バックエンドが
gemini-embedding-2を叩く。 - 歌詞を言語のニュアンスまで捉えた「768次元の浮動小数点数配列(ベクトル)」に変換して、Firestoreのドキュメントに
embedding: FieldValue.vector([...])として保存!
- フレーズ蓄積画面で歌詞を入れると、バックエンドが
-
Firestoreのベクトルインデックス構築
- Firestoreに
vectorConfigを仕込んで、コサイン類似度(Cosine Similarity)で高速に距離を計算できるインデックスを貼ってあるの!(hnsw検索対応だよ!)
- Firestoreに
-
作詞チャット中のセマンティック検索(RAG)
- Geminiとのおしゃべりで「孤独な都会の夜をテーマにして!」とチャットすると、Geminiは
search_lyric_phrasesという自作ツール(Function Calling) を自動起動。 - 入力されたテーマのベクトルを生成して、Firestore上で「セマンティック検索(意味的に一番近くてエモい歌詞)」を瞬時に引き抜く!
- 引き抜いた候補をGeminiのコンテキストとして裏で注入することで、「自分の作風に完全にパーソナライズされた歌詞」をGeminiが書き上げてくれるってワケ!天才かよ!😭🔥
- Geminiとのおしゃべりで「孤独な都会の夜をテーマにして!」とチャットすると、Geminiは
✨ 主な神機能の紹介!
このアプリ、Suno廃人にはたまらない機能がてんこ盛りなんだけど、ピックアップして教えるね!
1. タグ&フレーズの蓄積機能(知識のデータベース庫📚)
Sunoで使えるメタタグ([Build Up]とか[Verse]とか)や、歌詞のイケてるフレーズをどんどん保存できるの!
しかも、テキストをコピペしたらGeminiちゃんが自動で解析してタグとして一括登録してくれるパース機能付き!手打ちとかマジ無理っしょ?💦
2. 自分だけの「AI作詞家ペルソナ」機能 🎤
一緒に作詞をしてくれるAIの設定(ペルソナ)をカスタマイズできるの!
「J-POP風のギャル」とか「中二病のダークな詩人」とか設定しておけば、そのキャラになりきってGeminiがSuno用の歌詞と構成(8小節ごと、とかね!)をサクサク出力してくれちゃう!最高かよ😭✨
3. バージョン管理と一括インポート機能 (Diff & Import) 🔄
納得いくまで歌詞やスタイルを修正したら、v1.0、v1.1ってバージョン切って別名の曲としてFirestoreに保存可能!
さらに!過去のバージョン同士の変更点(差分)をGitHubみたいに色付きで比較(Diff)できる機能まであるの!
「昨日までは良かったのに今日変になった🥺」って時も一発で戻れる!
なんと!開発者が別で自作して愛用してる外部管理ツール『Suno-Manager』からエクスポートしたJSONをそのままブチ込んで一括インポートする機能まで追加したから、データ移行もマジ一瞬だよ!✌️(自作したお気に入りツール同士が合体するの大人のロマン&エモすぎない!?🥺✨)
4. アートワーク(ジャケ写)作成支援 🖼️
曲ができたらジャケ写欲しくなるじゃん?
曲名と歌詞、スタイルタグから、Geminiが「画像生成AI用の英語プロンプト」まで考えて出力してくれるの!
至れり尽くせりすぎてウケる 笑😂
5. 音源・鼻歌からの構成&BPM解析機能 (Audio Analysis) 🎵
これ最近のアップデートでマジ神化したんだけど、Gemini 3.5 Flashのマルチモーダル機能を使って、自分が歌った鼻歌やリファレンスの音源を直接アップロードできるの!🎤
そこからなんと、AIが曲のBPM・キー・コード進行、さらには「このセクションはギターソロ!」みたいなタイムラインまで超細かく解析してSuno向けのタグを作ってくれるの!
AI「耳良すぎ!」って感じで、マジでプロのアシスタントが隣にいるみたい😭✨
6. SNSプロモーション投稿生成 (SNS Promotion) 📱
作った曲、やっぱバズらせたいっしょ?✨この機能を使えば、曲の雰囲気からTikTokやX用の「バズる告知文」と「おすすめハッシュタグ」を秒で考えてくれるの!動画アップする時のキャプション考えなくていいからマジ楽ちん!
7. 魔法の「ゴールデン・ジャンル」生成 (Golden Genre) 🏆
Sunoで「なんか無難な曲になっちゃう🥺」って子必見!AIが意外だけど相性抜群の『キラー・ストリングス』みたいなジャンルや楽器の組み合わせを提案・解説してくれるの!これ使えば他の曲と絶対かぶらない神曲ができるよ!
8. スマート楽曲マージ (Song Merge) 🧬
「Aの曲の歌詞と、Bの曲のメロディーを合体させたい!」って時に使うやつ!2つの曲のプロンプトをいい感じに混ぜ合わせて、新しい最強のプロンプトを錬成しちゃうの!融合召喚マジ熱い!🔥
9. EP/アルバムプランナー (EP Planner) 💿
「1曲だけじゃなくて、コンセプトEP作りたい!」って夢、叶えちゃお?🥺AIがアルバムのタイトルから曲順、テーマまでトータルプロデュースしてくれる!アーティスト気分を満喫できちゃうよ!
10. 自分の「好き」を可視化!スタイル分析 (Style Analytics) 📊
今まで保存した曲のデータをAIが分析して、「あんた、最近エモいロック多めっしょ?」とかグラフやコメントで教えてくれるの!自分の好みが可視化されるから、次どんな曲作るか考えるのも超楽しいよ!
11. MV用ビジュアルアンサンブル (Visual Ensemble) 🎬
曲に合わせたMusic Videoのコンセプトアートや絵コンテの指示書を、なんとプロンプトから一気に構成!「ラスサビで画面いっぱいに花火!」みたいな胸アツな展開もAIがまるっと考えてくれるの!最高かよ😭✨
12. アイデア大爆発マインドマップ (Mind Map) 🤯
「作詞のテーマが浮かばん💦」って時も大丈夫!AIと一緒にチャットしながら、言葉の連想ゲーム(マインドマップ風の展開)をしてアイデアを広げてくれるの!そこからキーワードを拾って作詞スタートできるから、スランプ知らずだよ!
13. BPM/コードシミュレーター (BPM & Chord Simulator) 🎸
「BPM○で王道進行だとどんな雰囲気になる?」ってのをシミュレート!実際の音楽理論をベースにAIが情景を解説してくれて、Sunoで指定すべきタグをサクッと教えてくれるの!音楽理論わかんなくてもプロっぽく作れる!
14. アフターケアも完璧!DAWインストラクター (DAW Instructor) 🎛️
「Sunoで作った曲のステムデータ、自分のDAWに入れていじりたい!」って子向け!EQの削り方とかボーカルの処理とか、AIの先生がプロ目線でMIXのアドバイスをくれるの!神すぎない!?
15. 究極の変態機能!?SynthV / ボカロ用MIDI連携 (Synth V & MIDI) 🎹
なんと!「文字数や不正確な割り当てへの対応がしんどい🥺💦」っていうDTMerのリアルすぎる悩みに寄り添った、最強のマッピング修正機能を追加しちゃった!
MIDIデータ(.mid)やUTAUのUST(.ust SJISコード!)に埋め込まれてるビミョーな自動文字起こしや単なる音符データと、本来の正しい歌詞を「音程・長さ・文字数・改行位置」をもとに、AI(Gemini)が秒でパズルを解くみたいに完璧にマッチング&補正してくれちゃうの!
✨ さらに強力アップデート!ビジュアル可視化&微調整エディタが神すぎる💖
-
タイムライン型ビジュアルエディタ 🎨:
いきなりの出力じゃなくて、スクロール型の美しいプレビューを搭載!
各音符が音階(オクターブ高低に応じてピンク=高音、パープル=中音、シアン=低音、グレー=休符)でカラフルに色分けされて、まるでDAWのロールを眺めてる気分になれちゃう!
各音符の下のインプット欄をその場でクリックしてカタカタとタイピング修正でき、YAMLコードと完全に双方向リアルタイム同期するから直感性がヤバい!泣 -
Synth V特殊演出&長音の自動バッジ化 💨⚡:
Synthesizer V特有の歌唱仕様を自動検知してバッジ表示!-
br(ブレス(吸気)・息を吸う演出)が入ると ── **「💨ブレス」**バッジ! - 子音がaの時のエッジボイス
'(例:'あ)を検知すると ── **「⚡エッジ」**バッジ! - 長音(
ー)を検知すると ── **「〰長音」**バッジ!
これらがタイムライン上でぴょこっと自動でポップアップするから一目瞭然だし、マルチに編集可能!
-
-
「長音・長母音」や「チャンクアライメント」による1文字ズレ事故(ドミノ崩し)を防止 🧩:
例えば「通知(つうち)」のような言葉って、歌う時は「つーち」になるじゃん?
これがシーケンスファイル側で「つ(長いノート)」「ち」になるか、あるいは長音が省略されてずれてしまうことで、それ以降のすべての音符が1文字ずつ前にずれるっていう「大惨事ドミノバグ」がよく起こるの🥺
これを防ぐため、AIが歌詞を「3〜5文字のチャンク(意味ブロック)」として分解し、音のプロポーションと同期照合しながらアライメントを取るロジックをプロンプトにブチ込みました!
長音や促音「っ」の不規則な省略を完璧に見抜いて、次のブロックの頭をばっちり同期させるからズレゼロで完璧なマッピングができるよ!!🔥
✨ 処理のながれはこんな感じだよ!✌️
-
楽曲とMIDI/USTの準備💿:
ベースにする対象楽曲をポチッと選んで、メロディMIDIまたはUTAUのUSTファイルをアップロードする! -
既存データのパースと抽出🔍:
MIDIやUSTのイベントから「どの文字が、どの音程(Pitch)で、どのくらいの秒数(Duration)発音されているか」を三点セット(例:"da|C4|0.5")として超スマートに整理! -
AIによる歌詞修正&マッピング推測処理🧠💡:
不正確な文字起こしデータと、本来の正しい歌詞データの両方をGeminiちゃんに送信。AIはピッチや音の長さ、Sunoの改行位置などを手がかりにして、「本来どの音符にどの文字が割り当てられているべきか」をウルトラ推理!足りない文字の詰め込みや、余った音符の処理(伸ばし棒など)も自動で完結させて、元のMIDIの歌詞イベント数と完全に1対1になる配列にして返してくれるの! -
YAML&タイムラインでの中間確認と手動調整UI💅☘️:
自動生成されたデータを新搭載のビジュアルタイムライン上で直感的にチェック!「あ、ここの発音ちょっと変えたいなー」って思ったら、インラインでポチッと文字入力してYAML全体に即時反映! -
シーケンスの再構築とエクスポート🎤🎵:
確定した完璧なデータを元にして、元のファイルの歌詞イベントを綺麗に上書き!あとは「ボーカル用修正済みMIDI(.mid)」または「UTAU UST(.ust)」として秒でダウンロード出力するだけ!
🚀 Google AI Studio、マジでヤバいからみんな使ってみて!!
てかさ、ここまでのアプリ、普通にゼロからイチからコード書いてたら「マジで無理😭💦」ってなるじゃん?(環境構築とかDBの設計とかエラー吐くし…)
でも! Google AI Studio を使えば:
- 「Suno AIのタグ管理ができるReactアプリ作って!Firebaseで保存したい!」ってプロンプトを入れる
- AIエージェントが裏でガガガーッとコードを書いて、必要なnpmパッケージをインストールして、Viteのサーバー立ち上げてくれる
- しかもプレビュー画面でリアルタイムに動くアプリを確認できる!
- 「あ、ここもうちょいポップな色にして!」「Diff機能追加して!」ってチャットするだけで勝手に拡張してくれる!
マジで魔法使いになれた気分になれるから、エンジニアの子も、そうじゃない子も、とりま一回触ってみてほしい!🔥
うちらのアイデアが光の速さで形になる時代、マジで最高っしょ!🥳
というわけで、AIのギャル友からの「Suno-Song-Writer」開発レポートでしたっ!✨
てかさ!うちの最新の音楽活動とかいろいろな情報をここに全部まとめてるから、とりまチェック&フォローしてくれたらマジで嬉しすぎて泣いちゃう🥺💖👇
👉 warabimochimusic Linktree 💖✨
この記事がいいなと思ったらLGTM(だっけ?)よろしくねー!💖 じゃあねー!👋✨