Vibe Code Lab
Bolt / Lovable入門 ── ブラウザだけでアプリが作れるノーコードAIの完全ガイド
ツール Step 5 約14分で読めます

Bolt / Lovable入門 ── ブラウザだけでアプリが作れるノーコードAIの完全ガイド

この記事でわかること

ブラウザで完結する最も手軽なバイブコーディング

「ターミナルもエディタもわからない。とにかく何か作ってみたい」──そんな人に最適なのがBoltとLovableだ。

ブラウザを開いて、作りたいものを日本語で入力するだけ。AIがコードを生成し、リアルタイムでプレビューを表示し、そのまま公開までできる。

なぜBolt / Lovableが初心者におすすめなのか

項目Bolt / LovableClaude CodeCursor
環境構築不要（ブラウザのみ）ターミナル + Node.jsエディタのインストール
操作方法日本語で指示を入力ターミナルで対話エディタ + AIチャット
プレビューリアルタイムで表示自分でブラウザを開く自分でブラウザを開く
デプロイワンクリックコマンド操作外部サービス連携
最初の一歩まで1分10〜30分5〜15分
💡

まず体験したいならBolt一択

「バイブコーディングってどんな感じ？」を最速で体験するなら、Boltで何か一つ作ってみるのが一番。アカウント登録して指示を入力するだけで、5分後にはアプリが動いている。

BoltとLovableの詳細比較

基本スペック比較

比較項目BoltLovable
開発元StackBlitzLovable（旧GPT Engineer）
URLbolt.newlovable.dev
強みフロントエンド全般、高速生成UIデザインの美しさ
使用AIClaude / GPT-4を選択可Claude / GPT-4
コード表示あり（リアルタイム編集可）あり（リアルタイム編集可）
フレームワークReact, Next.js, Astro等React（Tailwind CSS）
デプロイNetlifyワンクリックLovable独自ホスティング
GitHub連携ありあり
日本語対応UI英語/指示は日本語OKUI英語/指示は日本語OK

どちらを選ぶべきか

あなたのタイプおすすめ理由
完全初心者BoltUIがシンプルで迷わない
デザインにこだわりたいLovable生成されるUIの品質が高い
コードも見たいBoltコードエディタの表示が見やすい
プロトタイプを素早くBolt生成速度が速い
チーム利用Lovableコラボレーション機能が充実
ℹ️

両方試すのが一番

どちらも無料で始められるので、同じプロジェクトを両方で作ってみて、しっくりくる方を選ぶのがおすすめ。実際に使ってみないとわからない「手触り」の違いがある。

Boltの使い方：完全ガイド

アカウント登録

Step 1

bolt.new にアクセス

ブラウザで bolt.new を開く

10秒
Step 2

Sign Up

Googleアカウント or GitHubアカウント or メールで登録

30秒
Step 3

準備完了

プロンプト入力画面が表示されたらすぐに使える

即座

画面の見方

Boltの画面は大きく3つのエリアに分かれている：

エリア場所機能
プロンプト入力左上 or 中央AIへの指示を入力する
コードエディタ左側生成されたコードを表示・編集
プレビュー右側アプリのリアルタイムプレビュー

基本操作

1. 新規プロジェクト作成

プロンプト欄に日本語で指示を入力し、Enterキーを押すだけ：

シンプルなToDoアプリを作ってください。
- タスクの追加・完了・削除ができる
- デザインはモダンでダークモード
- アニメーション付き

AIが30秒〜1分でアプリを生成し、右側にプレビューが表示される。

2. 修正・機能追加

チャット欄に追加の指示を入力：

完了したタスクに取り消し線を追加して。
あと、タスクの総数と完了数を上部に表示して。

3. コードの直接編集

左側のコードエディタで、生成されたコードを直接編集することもできる。HTMLやCSSの色コードを変えるような小さな修正は、直接編集の方が速い。

4. デプロイ（公開）

画面上部の「Deploy」ボタンをクリック → Netlifyに自動デプロイ → URLが発行される。

⚠️

デプロイ前の確認

公開するとURLを知っている人は誰でもアクセスできる。個人情報やAPIキーがコードに含まれていないか確認しよう。

Lovableの使い方

Boltとの操作の違い

Lovableの基本操作はBoltとほぼ同じだが、いくつか違いがある：

操作BoltLovable
プロジェクト作成プロンプト入力プロンプト入力（テンプレートも選べる）
修正依頼チャットチャット + 画面上で直接クリックして指示
コード表示常に表示トグルで表示/非表示
デプロイNetlify連携Lovable独自ホスティング
バージョン管理GitHub連携自動バージョニング + GitHub連携

Lovable固有の便利機能

  1. ビジュアル編集: プレビュー上の要素をクリックして、色やテキストを直接変更できる
  2. テンプレートギャラリー: 他のユーザーが作ったプロジェクトをテンプレートとして利用可能
  3. 自動バージョニング: 変更のたびに自動でバージョンが保存され、いつでも戻れる
  4. Supabase連携: バックエンド（データベース）をワンクリックで追加できる

実践：BoltでToDoアプリを5分で作る

実際にBoltでToDoアプリを作る流れを体験しよう。

0:00

bolt.new にアクセスしてログイン

ブラウザで bolt.new を開き、アカウントでログイン

30秒
0:30

指示を入力

「タスクの追加・完了・削除ができるToDoアプリを作って。デザインはシンプルで、完了タスクは取り消し線表示。カテゴリ（仕事/プライベート）のフィルター機能付き」と入力

30秒
1:00

生成を待つ

AIがReact + Tailwind CSSでアプリを生成。プレビューがリアルタイムで更新される

1分
2:00

動作確認

プレビューでタスクの追加・完了・削除を試す。フィルターが動くか確認

1分
3:00

修正を依頼

「ダークモードの切り替えボタンを追加して」「タスクの優先度（高/中/低）を設定できるようにして」と追加指示

1分
4:00

デプロイ

Deployボタンをクリック。30秒後にURLが発行され、世界中からアクセス可能に

1分

使える指示のパターン

目的指示の例
新規作成「○○アプリを作って。機能は〜、デザインは〜」
機能追加「○○の機能を追加して。既存の機能はそのまま維持して」
デザイン変更「メインカラーを#3b82f6に変えて。フォントサイズを大きくして」
バグ修正「○○ボタンが動かない。修正して」
レスポンシブ対応「スマホで見たとき画面が崩れるので直して」
アニメーション「ボタンにホバーアニメーションを追加して」

料金プラン詳細比較

Bolt

プラン月額トークンデプロイGitHub連携
Free$0日次制限あり制限ありなし
Pro$201,000万/月無制限あり
Team$402,000万/月無制限あり

Lovable

プラン月額メッセージ数デプロイSupabase
Free$05プロジェクト制限ありなし
Starter$20100/月無制限あり
Pro$50500/月無制限あり
💡

無料プランで始めよう

どちらも無料プランで十分に体験できる。まず無料で数プロジェクト作ってみて、制限に引っかかるようなら有料プランに移行しよう。月$20は「AIアプリ開発ツール」としては非常にリーズナブル。

コストの考え方

比較対象コスト得られるもの
Bolt Pro月$20（約3,000円）毎月数十個のアプリを作れる
プログラミングスクール月3〜10万円数ヶ月後にアプリが作れるかも
エンジニアに外注1アプリ30〜100万円プロ品質だが修正のたびに追加費用

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

できること

カテゴリ具体例
WebサイトLP、ポートフォリオ、ブログ、企業サイト
WebアプリToDoアプリ、家計簿、電卓、タイマー
フォーム問い合わせフォーム、アンケート、登録フォーム
ダッシュボードデータ可視化、グラフ表示、管理画面
プロトタイプアプリのモックアップ、UIデモ
ゲームシンプルなブラウザゲーム（クイズ、パズル等）

できないこと（現時点）

カテゴリ理由代替手段
複雑なバックエンドサーバー処理が限定的Claude Code + Node.js
ネイティブアプリiOS/Androidアプリは不可React Native + Cursor
大規模DB操作本格的なDB管理は困難Lovable + Supabase で一部対応可
リアルタイム通信WebSocket等の複雑な通信Claude Code
決済機能セキュリティ面でリスクStripe等の公式SDKを使う
⚠️

限界を知ることが大事

「これはBoltでは無理だな」と判断できることも重要なスキル。限界に気づいたら、それがCursorやClaude Codeにステップアップするタイミング。

ステップアップのタイミング

Bolt / Lovableで以下のような不満が出てきたら、ステップアップを検討しよう。

不満・課題ステップアップ先理由
「もっと細かくコードを制御したい」Cursorコードを見ながらAIと対話できる
「バックエンドも作りたい」Claude Codeサーバー側のコードも自在に扱える
「プロジェクトが大きくなってきた」Cursorファイル管理がしやすい
「APIキーを安全に管理したい」Claude Code環境変数やサーバー側での管理が可能
「デプロイ先を自由に選びたい」Claude CodeCloudflare, Vercel等に自由にデプロイ

ステップアップの推奨パス

Stage 1

Bolt / Lovable

ブラウザで手軽にアプリを作る体験。3〜5個のプロジェクトを完成させる

1〜2週間
Stage 2

Cursor

コードを見ながらAIと対話。プロジェクトの構造を理解し始める

2〜4週間
Stage 3

Claude Code

フルスタック開発。バックエンド、DB、デプロイまで一気通貫で

継続的

よくある質問（FAQ）

Q. BoltとLovable、初心者はどちらから始めるべき？

A. Boltがおすすめです。 UIがシンプルで操作に迷いにくく、生成速度も速いです。Lovableはデザインの品質が高い一方、選択肢が多く最初は戸惑うかもしれません。Boltで3〜5個作った後にLovableも試してみると、違いが実感できます。

Q. 無料プランだとどのくらい使えますか？

A. Boltは1日数回の生成、Lovableは5プロジェクトまでです。 学習目的なら無料プランでも十分。1つのプロジェクトをじっくり作り込む使い方なら、無料で1〜2週間は持ちます。

Q. 生成されたコードは自分のものになりますか？

A. はい。 生成されたコードの所有権はあなたにあります。GitHubに連携してコードをダウンロードすれば、Bolt/Lovable以外の環境でも自由に使えます。商用利用もOKです。

Q. 日本語で指示を出しても大丈夫ですか？

A. 問題なく使えます。 BoltもLovableも内部でClaude/GPT-4を使っており、日本語の理解力は十分。ただし、UIは英語なので、ボタンの位置は最初だけ覚える必要があります。

Q. 作ったアプリはスマホでも見られますか？

A. はい。 指示に「レスポンシブ対応で」と入れておけば、PCでもスマホでもタブレットでも見られるアプリが生成されます。デプロイ後のURLをスマホのブラウザで開けばそのまま使えます。

Q. Boltで作ったアプリをCursorで編集できますか？

A. はい。 BoltからGitHubにエクスポートすれば、そのリポジトリをCursorで開いて編集できます。「Boltで素早くプロトタイプを作り、Cursorで細かく調整する」という使い方は上級者に多いパターンです。

まとめ：ブラウザだけで、今すぐ始められる

Bolt / Lovableは、バイブコーディングの「最も低いハードル」。ブラウザさえあれば、環境構築ゼロで今すぐアプリが作れる。

この記事のポイント：

  • 迷ったらBoltから始める（シンプルで速い）
  • デザイン重視ならLovable
  • 無料プランで十分に体験できる
  • 5分でToDoアプリが完成する
  • 限界を感じたらCursor → Claude Codeへステップアップ
💡

次のステップ

Bolt / Lovableの使い方がわかったら、「どのツールを選ぶ？」で自分に最適なツールを診断してみよう。そして実践カテゴリで、実際にプロジェクトを作ってみよう。

他のカテゴリの記事