TRACK / STUDIOYOUR SOUND. YOUR SPACE.
MUSIC WEBSITE MAKER

その音楽に、
居場所をつくろう。

音源、歌詞、アートワーク。あなたの世界をひとつのサイトに。
いつでも同じ美しいデザインで、自分のアカウントから公開。

01 楽曲をセットアップ

ブラウザ内で生成
READY TO RELEASE?

完成サイトと音源を、ひとつのZIPに。

音源と画像を追加するとダウンロードできます。

02 ライブプレビュー

● ● ●your-music.vercel.app↗
FIXED DESIGN / RESPONSIVE / NO BUILD

公開サイトでも音源を再生できます。再生は訪問者の操作で開始します。

01 / CREATE

音楽を入れる

MP3と画像を選び、歌詞を入力。

02 / GITHUB

自分のリポジトリへ

ZIPを解凍し、ファイルをアップロード。

03 / VERCEL

世界に公開する

自分のVercelでリポジトリをImport。

ANOTHER WAY TO RELEASE

GitHub Pagesで公開する方法

Vercelを使わず、GitHubだけでも音楽サイトを公開できます。パソコンのChrome・Edgeなどで操作してください。GitHub Freeで使う場合は、リポジトリ（ファイルの置き場所）をPublic（公開）にします。

  1. ZIPを解凍する

    「サイトをダウンロード」で取得したmusic-site.zipを解凍します。Windowsは右クリック→「すべて展開」、Macはダブルクリック。解凍フォルダを開き、index.htmlとassetsフォルダがあるか確認してください。ZIPをそのままアップロードしてもサイトにはなりません。

  2. GitHubでリポジトリを作る

    GitHubの作成画面 ↗でログインし、Repository nameに半角英数字で名前を入力（例：my-music-site）。「Public」を選び、「Add a README」はオフのまま「Create repository」を押します。

    すでにPrivateで作成した場合

    リポジトリの「Settings」→「General」→最下部の「Danger Zone」→「Change repository visibility」の「Change visibility」→「Change to public」へ進み、画面の確認手順に従います。変更すると、リポジトリ内のファイルや過去の変更履歴も誰でも見られるようになります。公開できない情報がある場合は変更せず、今回のサイト専用のPublicリポジトリを新しく作成してください。有料プランではPrivateリポジトリからのPages公開にも対応しています。

  3. ファイルとフォルダをまとめてドロップする

    作成直後の「Quick setup」内にある「uploading an existing file」をクリック。すでにファイルがある場合は「Add file」→「Upload files」を選びます。

    解凍したフォルダを開き、中身すべてを選択（Windows：Ctrl+A／Mac：Command+A）。GitHubのアップロード画面へドラッグ＆ドロップします。assetsはフォルダごとドロップし、中の階層を保ってください。外側のmusic-siteフォルダやZIP自体を入れないようにします。

    一覧にindex.html、vercel.json、README.md、使い方.txt、assets/track.mp3、assets/artworkの画像が並んだら、画面下部の「Commit changes」（保存）を押します。メッセージは「音楽サイトを追加」で構いません。vercel.jsonはVercel用ですが、そのまま含めても問題ありません。

    保存後は「Code」タブの一番上にindex.htmlとassetsフォルダが並んでいる状態を確認してください。

  4. GitHub Pagesを有効にする

    リポジトリ上部の「Settings」→左側の「Pages」を開きます。「Build and deployment」で、次のように設定して「Save」を押してください。

    SourceDeploy from a branch
    Branchmain（実際にファイルを保存したブランチ。masterの場合もあります）
    フォルダ/(root)

    BranchがNoneのままでは公開されません。mainが選べない場合は、ファイルのアップロードとCommitが完了したか確認してください。

  5. 公開URLを開いて確認する

    公開処理には数分、状況によっては最大10分ほどかかります。「source saved」と出ただけでは、公開完了とは限りません。少し待って「Settings」→「Pages」を再読み込みしてください。

    「Your site is live at …」が表示されたら、そのURLまたは「Visit site」をクリック。通常のURLは https://ユーザー名.github.io/リポジトリ名/ です（例：ユーザー名がyour-name、リポジトリ名がmy-music-siteなら、https://your-name.github.io/my-music-site/）。実際に表示されたURLをコピーして共有してください。

    公開サイトで画像・歌詞と、再生ボタンで音楽が流れることを確認します。ブラウザの制限があるため、音楽は自動ではなく再生ボタンで開始します。

公開が終わらない・404が出るとき

「Actions」タブでPagesの公開処理（pages build and deploymentなど）を確認します。黄色は実行中・待機中、緑のチェックは成功、赤い×は失敗です。失敗した処理を開くと理由を確認できます。

404の場合は、①公開処理が完了しているか、②Codeの一番上に小文字のindex.htmlがあるか、③PagesのBranchと/(root)が正しいか、④リポジトリ名まで含んだURLを開いているかを確認してください。Index.htmlなどの大文字は使わないでください。

画像や音楽だけが出ない場合は、assetsフォルダ内にtrack.mp3とartworkの画像があるか確認。ダウンロードしたファイル名とフォルダの配置を変えずにアップロードし直してください。

ブラウザからGitHubへのアップロードは1ファイル25MiBまでです（100MBではありません）。このアプリのサイズ制限内で選択してください。Publicリポジトリのファイルと公開した音源・画像・歌詞は誰でも取得できます。公開できる素材を使ってください。

公式手順：Pagesの作成 ／ 公開元の設定 ／ ファイルのアップロード

RELEASE YOUR MUSIC

はじめての音楽サイト公開ガイド

パソコンでの操作がおすすめです。プログラミングやコマンド入力は必要ありません。GitHubは「サイトのファイルを置く場所」、Vercelは「そのファイルをWebサイトとして公開するサービス」です。どちらも自分のアカウントを使います。

準備するもの

MP3音源（25MB以下）、画像（JPG・PNG・WebP、10MB以下）、曲名・アーティスト名。歌詞と紹介文は任意です。GitHubとVercelのアカウントがない場合は、それぞれの公式サイトで作成してください。

  1. このアプリで音楽サイトを作る

    曲名・アーティスト名を入力し、MP3と画像を選択します。歌詞と紹介文を入力したら、プレビューで内容を確認。「LISTEN NOW」で試聴できます。「サイトをダウンロード」を押すと、music-site.zipが保存されます。通常はパソコンの「ダウンロード」フォルダに入ります。

  2. ZIPを解凍する（中のファイルを取り出す）

    Windows：music-site.zipを右クリック →「すべて展開」→「展開」。Mac：music-site.zipをダブルクリック。解凍後のフォルダを開き、下のファイルがあることを確認してください。

    music-site（解凍したフォルダ）
├ index.html         ← サイト本体
├ vercel.json        ← 公開設定
├ README.md          ← 説明書
├ 使い方.txt         ← この手順
└ assets             ← このフォルダも必要
   ├ track.mp3       ← 音源
   └ artwork.jpg     ← 画像（png / webpの場合もあります）

    GitHubにはZIPそのものではなく、解凍した中身をアップロードします。ファイル名は変更しないでください。

  3. GitHubで「置き場所」を作る

    下の「GitHubで作成」を開き、自分のアカウントでログインします。「Repository name」に半角英数字で名前を入力（例：my-music-site）。リポジトリとはファイルをまとめて置く場所です。

    Vercelで公開する場合、公開範囲は「Private」（非公開）を選べます。GitHub Pagesを無料で使う場合は「Public」（公開）を選んでください。Vercelから公開するWebサイトは誰でも見られます。「Add a README」はオフのままにして、「Create repository」（作成）を押します。

    GitHubで作成 ↗
  4. 解凍した中身をGitHubへアップロードする

    作成直後の画面にある「uploading an existing file」（既存ファイルをアップロード）をクリックします。ファイル一覧がすでにある場合は「Add file」→「Upload files」を選びます。

    パソコンで解凍したフォルダを開き、その中のindex.html、vercel.json、README.md、使い方.txt、assetsフォルダをまとめて選択します。WindowsはCtrl+A、MacはCommand+Aで全部選択できます。

    選択した中身を、GitHubの「Drag files here…」と表示される場所へドラッグ＆ドロップします。assetsはフォルダごとドラッグしてください。「choose your files」で中の音源だけを選ぶと、フォルダの位置が変わることがあります。

    アップロードが終わったら、一覧に「index.html」「vercel.json」「assets/track.mp3」「assets/artwork…」があることを確認。画面下の「Commit changes」（変更を保存）を押してください。入力欄には「音楽サイトを追加」と書いて構いません。

    保存後、GitHubの最初のファイル一覧にindex.htmlとassetsフォルダが並べば成功です。my-music-siteなどの外側のフォルダしか表示されない場合は、フォルダを丸ごと入れてしまっています。新しい空のリポジトリを作り、解凍フォルダの中身をアップロードし直すと簡単です。

  5. 自分のVercelにGitHubを連携する

    下の「Vercelで公開」を開き、ログインします。初めての場合は「Continue with GitHub」を選ぶと連携しやすくなります。ダッシュボードから進む場合は「Add New」→「Project」を押します。

    GitHubの許可画面が出たら、先ほど作ったリポジトリを選んでVercelにアクセスを許可します。一覧にリポジトリが出ない場合は「Adjust GitHub App Permissions」や「Install」から、そのリポジトリへのアクセスを追加します。

    Vercelで公開 ↗
  6. リポジトリを選んで公開する

    先ほどのmy-music-siteの横にある「Import」を押します。「Project Name」はそのままで構いません。「Root Directory」は変更しません（index.htmlが一番上にある状態）。

    このZIPにはvercel.jsonという設定ファイルが入っています。設定を確認する場合は以下のとおりです。

    Framework PresetOther
    Build Command空欄（必要ならOverrideをオンにして空欄）
    Output Directory.（半角のドット1文字）

    「Deploy」（公開）を押して待ちます。完了画面の「Visit」や、末尾が.vercel.appのURLを開くと音楽サイトが表示されます。実際に再生ボタンを押し、音楽・画像・歌詞を確認してください。

  7. URLを共有する・内容を更新する

    公開された https://〇〇.vercel.app のURLをコピーして、SNSや友人に共有できます。内容を変えるときは、このアプリで再度ZIPを作り、同じGitHubリポジトリへ同じ配置でアップロードして「Commit changes」。GitHubとVercelが連携されていれば、更新が自動で公開されます。画像形式を変えた場合は新しい画像もassetsフォルダごとアップロードしてください。

うまくいかないとき

ZIPをアップロードしてしまった
ZIPだけではサイトになりません。解凍して、中身をアップロードしてください。
画像が出ない・音楽が流れない
GitHubのassetsフォルダを開き、track.mp3とartworkの画像があるか確認。名前と配置を変えずにアップロードしてください。音楽は再生ボタンを押すと開始します。
404という画面が出る
GitHubの一番上にindex.htmlがあるか、VercelのOutput Directoryが「.」になっているか確認してください。
ファイルが大きいと言われる
GitHubのブラウザアップロードは1ファイル25MiBまでです。このアプリのサイズ制限内のファイルを使ってください。
リポジトリがVercelに出ない
GitHubとVercelで同じアカウントを使っているか、Vercelにそのリポジトリへのアクセスを許可したか確認してください。

PrivateはGitHubのファイル一覧の非公開設定です。Vercelで公開した音源・画像・歌詞は訪問者が取得できる状態になります。公開できる素材を使用してください。画面の英語表記はサービス側の更新で変わる場合があります。

公式案内：GitHubのアップロード手順 / VercelのGit連携