この記事でわかること：Bolt.newでLPを作る具体的な手順・v0・Claude Codeとの使い分け・副業の提案デモを30分で作る方法。所要時間：約10分
1. Bolt.newとは？ブラウザだけでWebアプリを作れるAI環境
Bolt.new（ボルト・ドット・ニュー）は、StackBlitz社が開発したAIコーディング環境です。ローカルへのインストールや環境構築が一切不要で、ブラウザのURLバーに「bolt.new」と入力するだけで即座に使い始められます。
チャットで「こんなサイトを作って」と指示するだけで、HTML/CSS/JavaScript・React・Node.jsなどのフルスタックアプリが生成・実行され、そのままNetlifyやVercelにワンクリックでデプロイできます。
- 公式サイト：bolt.new
- 無料プラン：あり（月150クレジット）
- 有料プラン：Pro $20/月〜（年払い）
2. v0・Claude Codeとの違い（比較表）
| ツール | 特徴 | 向いている用途 | 料金 | 環境 |
|---|---|---|---|---|
| Bolt.new | フルスタック・即デプロイ | LP・Webアプリ全般 | 無料〜$20/月 | ブラウザのみ |
| v0（Vercel） | Reactコンポーネント特化 | UIパーツ・デザイン重視 | 無料〜$20/月 | ブラウザのみ |
| Claude Code | 複数ファイルの自律実装 | 大規模開発・リファクタ | Claudeプランに含む | ローカルターミナル |
| Cursor | IDEにAIを統合 | 既存プロジェクトの改修 | 無料〜$20/月 | ローカルIDE |
使い分けの目安：初めてLP・サイトをゼロから作る→Bolt.new。UIデザインを細かく調整したい→v0。既存のNext.jsプロジェクトを改修→Claude Code。
3. 無料・有料プランの違い
| 項目 | 無料 | Pro（$20/月） |
|---|---|---|
| 月間クレジット | 150 | 10,000 |
| プロジェクト数 | 無制限 | 無制限 |
| デプロイ | 可 | 可 |
| プライベートプロジェクト | 不可 | 可 |
| 商用利用 | 可 | 可 |
副業・受託利用にはProプラン（$20/月）を推奨。月150クレジットの無料プランはLPを3〜5本作るとなくなる計算です。まず無料で使い方を習得し、受注が決まってから有料化するのが賢明です。
4. LPを作る手順（STEP by STEP）
STEP 1：bolt.newにアクセス
ブラウザで bolt.new を開きます。Googleアカウントまたはメールアドレスで登録（無料）します。
STEP 2：チャット欄にプロンプトを入力
画面中央のチャット入力欄に、作りたいLPの内容を入力します。日本語でも動作しますが、具体的な英語プロンプトの方が精度が上がります（次のセクションにテンプレあり）。
STEP 3：プレビューを確認して修正指示を出す
生成後、右側のプレビューでサイトを確認します。「ヘッダーの色を#1a1a2eに変えて」「CTAボタンを大きくして」のように具体的に指示して改修できます。
STEP 4：デプロイ
右上の「Deploy」ボタンからNetlifyに自動デプロイ。数十秒でURLが発行され、クライアントに共有できます。独自ドメインの設定も可能です。
STEP 5：コードをダウンロードして渡す
「Export to ZIP」でソースコードをダウンロードし、クライアントに納品できます。GitHubへのプッシュも対応しています。
5. コピペで使えるプロンプト例
[ ]の部分を差し替えてそのまま使えます。
汎用LP（サービス紹介）
Create a modern landing page for [サービス名]. Target audience: [ターゲット層]. Include: hero section with headline "[キャッチコピー]" and CTA button, 3 feature cards, testimonials section, and a contact form. Use a clean dark theme with [カラーコード] as accent color. Make it responsive and mobile-friendly.
飲食店向けHP
Create a restaurant website for [店名]. Include: top hero with background image placeholder, menu section with 6 items in a grid layout, about section, access/map section, and reservation button. Use warm brown and cream colors. Japanese text support required.
ポートフォリオサイト
Create a personal portfolio site for a freelance web designer. Include: hero section with name and tagline, skills section, 4 portfolio cards with hover effects, and contact form. Dark background with cyan accent. Clean minimalist design.
6. ChatGPT×Boltの分業ワークフロー
効率的な制作フローはChatGPTで設計→Boltで実装の2ステップです。
- ChatGPTに構成を作ってもらう：「[クライアント情報]のLP構成をBolt.newのプロンプト用に英語で書いて」と依頼
- 生成されたプロンプトをBoltに貼り付ける：そのままチャット欄に貼り付けて生成
- 修正は日本語で指示：「色を変えて」「セクションを追加して」と日本語でも修正可能
- デプロイしてURLをクライアントに共有：修正のたびに再デプロイすれば常に最新版が確認できる
このフローで初回提案デモを30〜60分で作れるようになります。
7. 副業への活かし方
パターン①：提案前のデモ制作
「こんなサイトを作れます」という実物デモをBoltで作り、商談時にURLを見せる。言葉で説明するより圧倒的に受注率が上がります。
パターン②：LP制作の受注〜納品
Boltで生成→細部をv0やClaude Codeで仕上げ→Vercelにデプロイして独自ドメインを設定して納品。初期費用なし・環境構築なしで始められます。受注単価の目安：LP1本3〜10万円（難易度・要件による）。
パターン③：月額保守契約
納品後も「月1〜2回の文言修正・画像差し替え」を月1〜2万円で継続受注するパターン。Boltでサクッと修正→デプロイで完結するため工数が少なく、複数クライアントを並走できます。
8. よくある質問（FAQ）
Q. プログラミング未経験でも使えますか？
はい。コードを書く必要はなく、チャットで指示するだけで動くサイトが生成されます。ただし、生成結果の良し悪しを判断するためにHTMLの基礎知識（h1・p・divなど）があると修正指示を出しやすくなります。
Q. 作ったサイトのドメインはどうなりますか？
デフォルトではNetlifyのサブドメイン（例：amazing-project-123.netlify.app）が発行されます。独自ドメインはNetlifyまたはVercelの管理画面で設定できます（別途ドメイン費用が必要）。
Q. v0と両方使う意味はありますか？
用途を分けて使うのが効果的です。v0はReactコンポーネントの細かいUIデザインが得意。Boltはフルスタックアプリのゼロから生成が得意。LPなら最初からBolt、コンポーネント単体の調整にv0、という使い分けが現実的です。
Q. 生成したコードの著作権は誰のものですか？
Bolt.newの利用規約では、生成されたコードのライセンスはユーザーに帰属します。商用利用・クライアントへの納品に問題ありません。最新の利用規約は公式サイトでご確認ください。
Q. 無料プランで月に何サイト作れますか？
月150クレジットは、シンプルなLPなら3〜5本、複雑な多ページサイトなら1〜2本が目安です。修正のたびにクレジットを消費するため、本格的に副業利用するならProプラン（$20/月）への移行を検討してください。
→ 関連ツール：Bolt.new・v0・Claude Code
本記事の情報は2026年6月時点のものです。料金・機能は変更される場合があります。最新情報はBolt.new公式サイトでご確認ください。