SUNOで作った曲を、
自分の音楽サイトで配信しよう。

まずはWebサイトに掲載するコンテンツを手元にそろえます。使うサービスには、同じブラウザで先にログインしておくとスムーズです。

※ GitHub・Vercelの登録方法がわからない場合は、AIアプリ公開ガイドのSTEP 0を参考にしてください。

1. 1

   SUNOを開く

   ブラウザで suno.com にアクセスしてログインします。

2. 2

   「Create」を押す

   左側メニューのCreateをクリックします。

3. 3

   「Custom」をONにして生成する

   CustomのトグルをONにして、歌詞や音楽スタイル（J-Pop、Acoustic、Anime Songなど）を指定して生成します。

4. 4

   公開する1曲を決める

   生成された曲の中から、公開したい1曲を決定します。

1. 1

   「…」から音楽ファイルを保存

   曲のカード右側にある…（三点リーダー）アイコンをクリックし、Download ＞ Audioを選んで音楽ファイル（.mp3）を保存します。

2. 2

   ジャケット画像を保存

   もう一度…をクリックし、Download ＞ Cover Artを選んでジャケット画像（.jpeg）を保存します。

3. 3

   ファイル名を半角英数字に変える

   日本語のファイル名は、WebのURLにしたときに文字化けや読み込みエラーの原因になりやすいため、パソコン側であらかじめ次の名前に変更しておきます。

   音声ファイルsong.mp3

   ジャケット画像cover.jpeg

1. 1

   曲の詳細画面を開く

   曲のタイトルをクリックして、曲の詳細画面を開きます。

2. 2

   歌詞をメモ帳に保存

   画面上の歌詞テキストをすべて選択してコピーし、パソコンのメモ帳などに一時保存しておきます。

1. 1

   GitHubを開く

   GitHub にログインし、アップロード先のリポジトリ（例：music）を開きます。

   重要

   まだリポジトリがない場合は、右上の＋ ＞ New repositoryから作ります。Repository nameは music、公開範囲は必ずPublic（全体公開）を選びます。Private（非公開）だと、公開したサイトから曲を再生できません。

2. 2

   アップロード画面を開く

   画面中央の青い案内枠（Quick setup）のすぐ下にある青文字リンク
   👉 uploading an existing file をクリックします。

   ※ すでにファイルが存在するリポジトリの場合は、右上のAdd file ＞ Upload filesをクリックします。

3. 3

   ファイルをドラッグ＆ドロップ

   「Drag files here to add them to your repository」と書かれた点線枠の中に、パソコン内の song.mp3 と cover.jpeg をまとめてドラッグ＆ドロップします。

   ※ ブラウザからアップロードできるのは1ファイル25MBまでです。通常のMP3なら問題ありません。

4. 4

   変更を保存（Commit）

   画面の一番下までスクロールし、緑色のCommit changesボタンをクリックします。これでファイルがGitHub上に保存されます。

5. 5

   直接再生URL（Raw URL）を取得する

   1. リポジトリのファイル一覧から song.mp3 をクリックします。
   2. 画面右上付近にあるDownloadボタン（またはView raw / Rawボタン）を探します。
   3. そのボタンの上でマウスを右クリックします。
   4. メニューから「リンクのアドレスをコピー」（ブラウザによっては「リンク先をコピー」）を選びます。

   取得したURLは、次のような形式になります。

   https://raw.githubusercontent.com/ユーザー名/music/main/song.mp3

   ※ https://github.com/ユーザー名/music/raw/main/song.mp3 の形でコピーされることもあります。どちらでも再生できます。
   ※ 同様の手順で cover.jpeg のリンクアドレスも右クリックでコピーしておきます。

取得したURLと歌詞を使って、Google AI StudioのBuild機能でWebサイトを自動生成させます。

1. 1

   Google AI Studioを開く

   Google AI Studio にアクセスし、左メニューのBUILD ＞ ＋ New appをクリックします。

2. 2

   プロンプトを入力する

   入力欄に、GitHubで取得したURLと歌詞を含めた指示文を入力します。下の例をコピーして、曲名・2つのURL・歌詞を自分のものに書き換えてください。

   入力プロンプト例全文をコピー

   以下の音源URLとジャケット画像URL、歌詞を使用して、「青春の味」という楽曲の特設音楽配信Webサイトを構築してください。
   
   【素材データ】
   ・音源URL（MP3）：
     https://raw.githubusercontent.com/あなたのユーザー名/music/main/song.mp3
   ・ジャケット画像URL：
     https://raw.githubusercontent.com/あなたのユーザー名/music/main/cover.jpeg
   
   【機能・デザイン要件】
   1. オーディオプレイヤー：
     ・上記の音源URLを読み込み、再生・一時停止・シークバー操作・音量調整が可能なスタイリッシュなカスタムプレイヤーを実装してください。
     ・再生中に波形やイコライザー風のアニメーションが動くようにしてください。
   2. ビジュアル：
     ・上記のジャケット画像URLをアルバムアートとして中央または上部に綺麗に配置してください。
   3. 歌詞エリア：
     ・下記の歌詞を、読みやすいフォントと行間で配置し、スクロール可能にしてください。
   4. レスポンシブ対応：
     ・PCはもちろん、スマートフォンの画面幅でもレイアウトが崩れないモダンなデザインにしてください。
   
   【歌詞】
   [Verse 1]
   焼きたての串から いい匂い
   友だちが呼んでる こっちおいで
   財布の小銭を 数えながら
   笑顔の列へと 飛び込もう
   
   [Pre-Chorus]
   鉄板じゅうじゅう 心も熱い
   一口どうぞって 君が差し出す
   今日は全部が 特別みたい
   （※残りの歌詞をすべて貼り付け）

3. 3

   生成を実行する

   入力枠の右下にあるBuildボタン（または Ctrl + Enter / Cmd + Enter）をクリックします。

4. 4

   プレビューで動作確認する

   画面右側にサイトのプレビューが立ち上がります。

   • 再生ボタンを押して、音がクリアに再生されるか確認します。
   • ジャケット画像が正常に表示されているか確認します。

   デザインや配色を変えたいときは、下のチャット欄に送信するだけで、すぐに修正されます。

   「背景をダークトーンのグラデーションにして」「歌詞の文字を少し大きくして」「曲名を大きく表示して」

完成したWebアプリのソースコード一式をGitHubに保存します。

1. 1

   GitHubの設定を開く

   AI Studioのプレビュー画面右上にあるGitHubアイコン（猫のマーク）、または画面右上の歯車（Settings）アイコン ＞ GitHubをクリックします。

2. 2

   初回だけ認証する

   認証のポップアップが出たら、緑色のボタンを押して承認します。

3. 3

   リポジトリを設定する

   • Repository Name：Webサイト用の新しいリポジトリ名を半角英数字で入力します。
   • Visibility：Public（全体公開）を選びます。

   Repository nameseishun-no-aji-web✓ 英小文字・数字・ハイフンがおすすめ（空白は使わない）

   おすすめ

   Step 2で音源を置いたリポジトリ（例：music）とは別に、Webサイト専用のリポジトリ名にしましょう。

4. 4

   「Push」を押す

   Push（またはCreate Repository）をクリックします。数秒でGitHub上にWebサイトのコード一式が自動作成されます。

1. 1

   AI Studioで修正を頼む

   Google AI Studioでアプリを開き、チャット欄に「歌詞の2番を追加して」「ボタンの色を青にして」などと指示します。

2. 2

   もう一度Pushする

   プレビューで確認したら、再度右上のGitHubアイコンを押してPushします。

3. 3

   自動で更新される

   VercelがGitHubの更新を自動で検知し、1〜2分以内に公開サイトが最新の状態に変わります。Vercel側を手で操作する必要はありません。