Claude Codeでバイブコーディング｜作ったWebアプリの公開まで任せる

Claude Codeでバイブコーディングを始めると、最初のWebアプリは驚くほどあっさり形になります。作りたいものを言葉で伝えるとコードができあがり、手元のパソコンでちゃんと動く。ところが、そこで手が止まりませんか。動いているのは自分のパソコンの中だけなので、友人にURLを送ることも、ポートフォリオに載せることもできず、作れたのに見せられない状態のまま止まります。この記事では、Claude CodeでWebアプリを作る5つのステップと、できあがったものをインターネットへ公開するまでの手順をまとめました。

Claude CodeにはPro・Max・Team・Enterprise・Consoleのいずれかの契約が必要で、無料のClaude.aiプランでは使えません
作る流れは、導入とログイン、CLAUDE.mdで前提を渡す、設計させる、頼む範囲を絞る、動かして直す、の5ステップです
公開の方法は2つあり、自分でコマンドを打つほかに、Claude Code自身に「デプロイして」と頼むこともできます

Claude CodeでWebアプリを作るのに必要なもの

Claude CodeでWebアプリを作るのに必要な3つのもの（パソコン・有料契約・作りたいものの案）

最初につまずくのは、技術ではなくお金の話です。Claude Codeの公式ドキュメントには「Claude Code requires a Pro, Max, Team, Enterprise, or Console account. The free Claude.ai plan does not include Claude Code access.」と書かれています（Claude Codeの公式ドキュメント）。無料のClaude.aiプランのままでは起動できないので、触ってみる前にここだけは確認しておくと空振りせずに済みます。

パソコンの条件は、macOS 13.0以上、Windows 10 1809以上、Ubuntu 20.04以上のいずれかで、メモリは4GB以上です。自分のパソコンが条件を満たしているかは、システム情報の画面でOSのバージョンとメモリの数字を見れば確かめられます。

残るひとつは作りたいものの案ですが、企画書のかたちにまとめておく必要はありません。筆者が初日に打ったのは「今日の日付と天気を表示するシンプルなHTMLページを作って」の一行だけで、そのくらいの粗さで足ります。

【手順】Claude CodeでWebアプリを作る

ここからが本題です。5つのステップに分けますが、順番どおりに一度きり進めるというより、ステップ4と5のあいだを何度も往復することになります。ツールを問わない全体の流れから知りたい場合は、バイブコーディングの始め方を先に読んでも構いません。

ステップ1：インストールしてログインする

Claude Codeはターミナルで動くツールです。ターミナルと聞くと開発者だけの道具に見えるかもしれませんが、文字で頼んで文字で返事を受け取る流れそのものは、ふだんのチャットとほとんど変わりません。公式のデスクトップアプリもあり、こちらならターミナルを使わずにClaude Codeを動かせます（Claude Codeの公式ドキュメント）。

導入方法はいくつかありますが、公式が推奨しているのはインストーラーを使う方法です。macOS・Linux・WSLでは、ターミナルを開いて次の1行を実行します。実行するとClaude Code本体がダウンロードされ、claudeというコマンドが使えるようになります。

curl -fsSL https://claude.ai/install.sh | bash

WindowsのPowerShellでは次のコマンドです。

irm https://claude.ai/install.ps1 | iex

「Node.jsを先に入れないといけない」と書かれた解説を見かけますが、公式が挙げているシステム要件はOS・メモリ・シェルなどで、Node.jsは含まれていません。Node.jsのバージョンが指定されるのはnpm経由で入れる場合で、そのときはNode.js 22以降が必要になります。

入ったかどうかはclaude --versionで確かめられ、バージョン番号が返ってくれば成功です。あとはターミナルでclaudeと打てば対話が始まります。作業するフォルダをあらかじめ用意しておく必要はありません。起動したあとに「デスクトップに新しいフォルダを作って、そこで作業して」と伝えれば、置き場所ごと作ってもらえます。初回はブラウザが立ち上がってログインを求められるので、契約しているアカウントでそのまま進めます。

筆者が初めて起動した日に打ったのは「あなたはなにができる？」でした。返事を読んで、次に「今日の日付と天気を表示するシンプルなHTMLページを作って」と頼み、できたものを眺めて3分で閉じています。最初の一言はこの程度で構いません。

Claude Codeを起動した直後のターミナル画面

ステップ2：CLAUDE.mdに前提を書く

CLAUDE.mdは、プロジェクトの前提をあらかじめ書いておくファイルです。使う言語、フォルダの構成、守ってほしい約束ごとを書いておくと、依頼のたびに同じ説明をしなくて済みます。

ただし、最初から完璧なものを用意する必要はありません。筆者の場合、初日はCLAUDE.mdを作らずに触り始めて、依頼のたびに同じ前置きを書いているのが面倒になってから追記を始めました。半年ほど経った頃には内容が膨らみすぎたので、テーマ別のファイルに分割し、さらに後日いらない行を削っています。書いてから使うのではなく、使いながら書き足すほうが続きます。

書く内容に迷ったら、Claude Code自身に「このプロジェクトのCLAUDE.mdを書いて」と頼んでしまうのが早いところです。フォルダの中身を読んだうえで下書きを作ってくれるので、そこから自分の言葉で削ったり足したりします。

Claude Codeに前提を渡すCLAUDE.mdの記述例

ステップ3：設計してから書かせる

思いついた機能をそのまま「作って」と頼むと、こちらの想像と違うものが出てきます。先に「何を作るか」を言葉にさせてから着手させると、そのズレが減ります。

具体的には、最初の依頼を「作って」ではなく「どう作るつもりか先に教えて」にします。画面の構成、扱うデータ、使う技術が箇条書きで返ってくるので、違うところだけ指摘してから「ではその方針で作って」と伝えます。Claude Codeにはファイルを書き換えずに変更案だけを出させるplanモードがあり、セッション中にShift+Tabを押すと切り替えられます（Claude Codeのクイックスタート）。

ステップ4：一度に頼む範囲を1つに絞る

依頼が大きいほど、返ってくるものは自分の意図から遠ざかります。

筆者は洋館と庭園を地図にまとめたページを作ったとき、最初に「全国マップみたいなのっていけますか」と頼みました。ところが全国分のデータをどこから持ってくるかで詰まり、手作業で集めるしかないという返事が返ってきます。そこで範囲を関東に狭め、「関東だけにしようか」と伝え直したところ、そこから先は一気に進み、同じ日のうちに公開まで到達しました。

範囲を狭めるのは妥協ではなく、完成までの距離を短くする手です。ページ数、対象地域、扱うデータの種類のどれかを1つに固定してから頼むと、返ってきたものを判断しやすくなります。そして動くところまで来たらこまめに保存します。Gitを使っている場合は「ここまでをコミットして」と頼めばそのまま実行してくれるので、気に入らない変更が入っても直前の状態へ戻せます。

ステップ5：動かして直す

できあがったものを実際に開いて、気になったところを言葉で伝えます。ここでの指摘は技術的である必要がありません。

筆者が服装を提案するページを作ったときは、気温別の服装の分け方がおかしい、タイトルが野暮ったいので日本語にしたい、緑をもう少し濃くしてほしい、といった調子で伝えていました。専門用語を使う必要はなく、気になったことをそのまま言葉にすれば通じます。

この往復を数回まわすと、手元のパソコンで動くものができあがります。ただし、この時点ではまだ自分しか見られません。

手元で動くものができたら、次は公開してURLを持つ番です。作ったWebアプリをコマンドひとつで公開できるロリポップ！デプロイナウを使うと、この続きは数分で終わります。

作ったWebアプリをそのまま公開する

筆者がいちばん時間を取られたのは、作る側ではなくこちらでした。

初めて公開まで通した日、手元でページが動くところまでは順調でした。詰まったのはその先です。デプロイという言葉の意味がわからないまま指示されたコマンドを打ち込み、これで合っているのかを一手ごとに聞き返していました。途中で認証画面が出てきたときは、進める前にスクリーンショットを撮って、この画面が何を許可しようとしているのかを説明してもらっています。作業のあとに残したメモには、サイトを作るのは簡単だったが、公開のほうは知識がなさすぎて不安だった、と書いてありました。作るところで詰まったのではなく、公開の段になって初めて何をしているのかわからなくなった、という記録です。

デプロイナウは、作ったWebアプリやサイトをコマンドひとつで公開できるホスティングサービスです。プロジェクト名を決めるとhttps://（プロジェクト名）.lolipop-now.appという形で公開URLが発行され、そのままインターネットに出ます（サービスサイトにサブドメイン形式で発行される旨の記載があります）。動きのあるWebアプリを置けるほか、あとから独自ドメインを設定することもできます。公開のやり方は2通りあり、自分でコマンドを打つ方法と、Claude Code自身に頼む方法から選べます。

デプロイナウで公開する2つの方法（コマンドで自分で実行する／Claude Codeに頼む）の比較図

ひとつ目は、ターミナルで次の3つを順に実行する方法です。1つ目でCLIが手元に入り、2つ目でブラウザが開いてロリポップ！アカウントの認証が行われ、3つ目でビルドから公開までが自動で進みます。実行にはNode.js 22.12.0以上が必要です。

npm i -g lolipop
lolipop login
lolipop deploy

ふたつ目が、Claude Code自身に頼む方法です。lolipop skill installを実行すると、画面の案内に従って設置先を指定でき、デプロイ用のスキルが追加されます。あとはアプリのディレクトリで「このアプリをlolipopにデプロイして」と日本語で伝えるだけで、公開まで進みます。公式が案内しているのはClaude Code、Codex、Cursor、Antigravityなどです。

できあがったWebアプリがNext.jsだった場合は、next.configにoutput: 'standalone'の設定が要ります。これもClaude Codeに「デプロイできるようにnext.configを直して」と頼めば書き換えてくれます。執筆時点の対応フレームワークはNext.jsとNuxtで、最新の状況はデプロイナウの公式ドキュメントで確認してください。

料金は執筆時点でFreeプランが無料、Personalプランが月額980円で、どちらも商用利用できます。定額制なので、アクセスが伸びた月に想定外の請求が来る心配をせずに置いておけますし、画面もサポートも日本語です。

公開という作業が何をしているのかを先に知りたい場合はデプロイとは？意味・仕組みとビルドやリリースとの違いを、公開先の選択肢を横に並べたい場合はWebアプリを公開する方法を先に読むと、コマンドの意味がつかみやすくなります。

Claude Codeにデプロイを頼んで公開URLが発行された画面

CursorやほかのAIエディタとの使い分け

バイブコーディングをCursorで始めた人から、Claude Codeへ乗り換えるべきか聞かれることがあります。どちらかが上位ということはなく、置かれている場所が違うだけです。

Claude Codeはターミナルで動くので、エディタを開かずにフォルダごと渡して「ここに作って」と頼む使い方に向いています。Cursorはコードエディタそのもので、ファイルを目で追いながら書き換えを確認したい場合に手が届きます。コードを読む予定があるならCursor、読まずに結果だけ受け取りたいならClaude Codeという分け方が、実際の使われ方に近いところです。

判断を先送りにできる材料もあり、デプロイナウのスキルはClaude Code、Codex、Cursor、Antigravityなどに対応しているので、どれで作っても公開までの手順は変わりません。ツール選びで公開の可否が決まるわけではないので、まず1つ触ってみて、合わなければ乗り換えるので間に合います。

つまずきやすいポイントと対処

最初の1本で引っかかりやすい点を3つ挙げます。

ひとつ目は、APIキーをチャット欄に直接貼らないことです。外部サービスと連携するWebアプリを作ると、APIキーを求められる場面が出てきます。これをそのまま会話に貼るのは避け、環境変数として設定します。デプロイナウ側の設定方法は環境変数のドキュメントにまとまっています。

ふたつ目は、使える量の感覚を先に持っておくことです。Pro・Maxは定額制で、使った分だけ料金が上がる仕組みではありません。Claude Codeの公式ドキュメントにも「Claude Max and Pro subscribers have usage included in their subscription」と書かれています。そのかわりに一定期間で使える量に上限があり、集中して触った日は上限に当たって、次に使えるようになるまで待つことになります。使った量はトークン（文章を細かく区切って数える単位）で計算され、ひとつの会話を長く続けるほど1回のやり取りで送る量が増えていきます。話題が変わったところで会話を新しく始めると、上限に当たりにくくなります。慣れてくると1回のやり取りでできることが増えていくので、月額に対して割に合うかどうかの判断は3か月ほど使ってからで遅くありません。

3つ目は、コードの中身がわからないまま進んでよいということです。動いているものが何をしているのか説明できない状態は、たしかに落ち着きません。それでも、公開して誰かに見せる段階までは進めますし、気になるところが出てきたら、その部分だけClaude Codeに「このファイルが何をしているか説明して」と聞けば読み解けます。個人情報や決済にかかわる内容を扱うWebアプリを公開する前だけ、コードを読める人に一緒に見てもらえると安心です。

導入の段階でエラーが出て進めない場合は、Claude Codeのインストールに関する公式トラブルシューティングにエラー文ごとの対処が並んでいます。

よくある質問（FAQ）

Claude Codeは無料で使えますか？

使えません。公式ドキュメントに「The free Claude.ai plan does not include Claude Code access.」と明記されており、Pro・Max・Team・Enterprise・Consoleのいずれかの契約が必要です。

Node.jsを先に入れる必要はありますか？

公式が推奨するインストーラーを使う場合は要りません。npm経由で入れる場合だけNode.js 22以降が必要です。ただし、作ったWebアプリをデプロイナウで公開する段階ではNode.js 22.12.0以上が必要になります。

プログラミング未経験でも使えますか？

動くものを作って公開するところまでは進めます。筆者が最初に打ったのも一行の思いつきでした。コードを書く力より、できあがったものを見て「ここが違う」と言葉にする力のほうが要ります。

CursorとClaude Code、どちらから始めればいいですか？

コードを目で追いたいならCursor、結果だけ受け取りたいならClaude Codeです。どちらで作ってもデプロイナウのスキルで公開まで通せるので、あとから乗り換えられます。

作ったWebアプリはどうやって公開しますか？

デプロイナウならnpm i -g lolipopでCLIを入れ、lolipop loginで認証し、アプリのディレクトリでlolipop deployを実行します。プロジェクト名を決めると、そのプロジェクトの公開URLが表示されます。

公開までClaude Codeに任せられますか？

任せられます。lolipop skill installでClaude Codeにスキルを追加したあと、「このアプリをlolipopにデプロイして」と伝えると公開まで進みます。

Windowsでも使えますか？

使えます。Windows 10 1809以上またはWindows Server 2019以上に対応しており、PowerShellではirm https://claude.ai/install.ps1 | iexで導入でき、WSLの中で動かすこともできます。

まとめ

始める前に確認するのは、有料プランの契約とパソコンの条件の2つです
依頼は一度に1つへ絞り、動かして直す往復を数回まわします
手元で動いたら、コマンドかClaude Code自身への依頼で公開してURLを持ちます

作れたのに見せられない、という状態でとどまっている人はたくさんいますし、筆者もそこで数時間止まりました。公開の部分は、いちど通してしまえば2回目からは数分で終わります。

作ったWebアプリを今すぐ公開してみたい方は、ロリポップ！デプロイナウから始めてみませんか。

自分で作ったものにURLがつくと、次に作るものの相談相手が増えます。