完全初心者がV0×VercelでWeb公開してみた日記
⇧タイムリーに投稿された.Ai社長木下さんのこの記事。後日この記事を取り上げます！
こんにちは、naoです！
本日4投稿目のこちらの記事は、AI UIビルダー「V0」と、Web公開ツール「Vercel」、ソースコード管理の「GitHub」を使って、 超初心者が1からホームページを公開するまでの過程を記録した体験記事です。
私が「まったく分からない状態」から始めて、 少しずつ言葉や仕組みに慣れていきながら、 最終的に V0で作ったデザインをWebで公開する という目標を達成した記録です。（忘れる前にすぐに記事に！）
「これからやってみたいけど不安…」という方の後押しになればうれしいです。
なぜやろうと思ったのか？
ある日、とてもすごいAI活用をされている方から、 「GitHubとVercelでWebUIを作るとこから始めてみたら？」と言われました。
そして、彼はClaude CodeにMCPを読み込ませて開発していると知り、
「私もそんなふうにAIと一緒にUIを作ってみたい！」
と思ったのがきっかけでした。
でも正直、何も分からない。特に、
GitHubって一体何？？どうやって使うの？
Vercelって？それも何？？無料？
V0のコードってどう扱うの？聞いたことはある。
という感じで、最初は全体像も見えていませんでした。
だから、まずは「V0で作ったページを、Web上に表示させる」ところから始めることにしました。
今回のゴール
🔽 V0で作ったデザインを 🔽 GitHubにアップロードして 🔽 VercelでWeb公開する
この3ステップが一人でできるようになることを目標に設定しました。
さらに言えば、「意味もわかりながら自分で進められる」状態を目指しました。（今、記事を書きながら復習しています。）
実践したステップ一覧（10ステップ）
よくわからなかったけど、
改めて見ると、色々やってたんだなぁ。
実際にやってみて気づいた「初心者のつまづきポイント」
① V0のコードをどこでExportするの？
「Export」ボタンが見つからず迷いました。V0で画面を生成したあと、右上 の"Export code"ボタンを押します。
② GitHubのどこにアップすればいいの？
GitHubではリポジトリのトップページに戻ってから、"Upload files" を選びます。ディレクトリを丸ごとドラッグできます。
③ index.tsxやapp/page.tsxがどこにあるか不安
Next.jsの構成が2パターンあることを知りました（pages/ or app/）。両方あったらエラーになるという落とし穴も発見。
④ Vercelに連携しても表示されない
Vercelでビルド成功しても「ページが404」になるときは、indexファイルの配置ミスが多い。mainブランチの内容をチェックすることが大事。
⑤ ファイル数が多くて迷子になる
V0で生成されるコードは60〜70ファイルあることも。構成を把握しやすくするためにも、まずは小さなUIから始めるのが◎。
⑥ コピペだけではうまくいかないことがある
最初、私はV0で生成されたコードを手動でコピペしてGitHubに貼り付けていました。 すると、必要なフォルダ構成（例：app/ フォルダや public/ ディレクトリ）がうまく再現されず、Vercelでのビルド時にエラーが出てしまいました。
✅ 解決策：コード一式をzipでダウンロード → GitHubでまとめてアップロードすることが確実です。
構造が崩れないようにするためにも、Export zip → Upload files の流れはとても大事です。
何回やりとりしたことか。。
20回くらいしたかな。
最後に：今後の自分＆誰かのために
「わからないことが多いのは、わるいことじゃない」
私は、つまづくたびに「なんでこんなに分からないの？」と不安になりました。 でも今は、そのつまづきすら全部が学びだったと思えます。
この記録が、未来の自分や、これから始める誰かの道しるべになりますように。
本当に大事な時間です。