Bolt.new入門ガイド

Bolt.newは、ブラウザだけでフルスタックアプリが作れるAIツールです。環境構築一切不要。

Bolt.newとは

特徴

項目	内容
タイプ	ブラウザベース
環境構築	不要
料金	無料〜$20/月
出力	React, Next.js等
デプロイ	Netlifyに自動

こんな人におすすめ

• 環境構築が面倒
• とにかく早く作りたい
• プロトタイプを作りたい
• コードを書きたくない

始め方

ステップ1: アクセス

1. bolt.newにアクセス
2. Googleアカウントでログイン

ステップ2: アプリを作る

1. 入力欄に指示を入力
2. 例：「ToDoアプリを作って」
3. Enterを押す
4. AIがアプリを生成

ステップ3: プレビュー

• リアルタイムでプレビューが表示
• 動作確認が可能

ステップ4: デプロイ

• 「Deploy」ボタンをクリック
• Netlifyに自動デプロイ
• URLが発行される

基本的な使い方

1. 新規アプリ作成

指示例:
- 「シンプルなブログを作って」
- 「ポートフォリオサイトを作って」
- 「チャットアプリを作って」

2. 機能追加

指示例:
- 「ダークモードを追加して」
- 「ログイン機能を追加して」
- 「データベースに保存できるようにして」

3. デザイン変更

指示例:
- 「もっとモダンなデザインにして」
- 「色を青ベースに変えて」
- 「レスポンシブ対応して」

4. バグ修正

指示例:
- 「ボタンが動かないのを直して」
- 「このエラーを修正して: [エラーメッセージ]」

料金プラン

プラン	料金	内容
Free	$0	月5プロジェクト
Pro	$20/月	無制限
Team	要問合せ	チーム機能

できること・できないこと

✅ できる

• 静的サイト
• Reactアプリ
• Next.jsアプリ
• APIルート
• データベース連携（Supabase等）
• 認証機能
• デプロイ

❌ 苦手

• 複雑なバックエンド
• 大規模アプリ
• 細かいカスタマイズ
• 既存プロジェクトの編集

Cursorとの使い分け

用途	おすすめ
プロトタイプ	Bolt.new
本格開発	Cursor
学習	Bolt.new
細かい調整	Cursor

併用のすすめ

1. Bolt.newでプロトタイプ作成
2. コードをダウンロード
3. Cursorで本格開発

活用例

例1: ランディングページ

指示: 「AIサービスのランディングページを作って。
ヒーローセクション、特徴3つ、料金表、CTAを含めて」

結果: 数分でLPが完成

例2: 管理画面

指示: 「ユーザー管理の管理画面を作って。
一覧、詳細、編集、削除ができるようにして」

結果: CRUD機能付きの管理画面

よくある質問

Q. 無料でどこまでできる？

月5プロジェクトまで。デプロイも可能。

Q. コードはダウンロードできる？

はい、GitHubに出力またはZIPダウンロード可能。

Q. 日本語対応？

AIは日本語を理解します。

Q. 商用利用は？

問題ありません。

まとめ

• 環境構築不要でブラウザだけで開発
• プロトタイプ作成に最適
• 無料プランで始められる
• 本格開発はCursorと併用がおすすめ

次のステップ

• AIコーディングツール比較2024
• v0入門ガイド