LovableとClaude Codeを2026年に比較：最初のプロジェクトにはどちらを選ぶべき？

Ailootの利用方法については、ドキュメントをご覧ください。

LovableとClaude Codeとは？#

Lovableは、ブラウザーベースのビルダーです。技術的には、LovableはAnthropicのClaude Opusの上に構築されたレイヤーです。同社は商用モデルとオープンソースモデルを評価した後、Claudeを主要モデルに選んだと公表しています（Anthropicの顧客事例：Lovable）。つまり、「LovableかClaudeか」という捉え方では全体像を単純化しすぎています。実際には、両者はレイヤーです。Lovableは、Claude Codeを通じて直接利用するのと同じClaudeを便利に包んだものです。

lovable.devにアクセスすると、次のように進みます。

1. GoogleまたはGitHubで登録します。
2. プロンプトを書きます。「不動産会社向けに、認証機能と顧客データベースを備えたCRMを作ってください。」
3. 30–60秒で、データベース、ログインフォーム、動作するページを備えたライブサイトが、無料の*.lovable.appドメイン上に表示されます。
4. その後、プロンプトで調整します。「取引状況で絞り込むフィルターを追加」「ダークテーマを追加」「サブスクリプションの支払い用にStripeを追加」などです。

内部では、LovableはVite、Tailwind CSSのスタイル、shadcn/uiコンポーネントを使ったReactアプリケーションを構築します。バックエンドはSupabaseです。データにはPostgreSQL、ログインにはSupabase Auth、サーバー側のロジックにはEdge Functionsを使います。2026年5月13日以降、新しいプロジェクトではサーバーサイドレンダリングを備えたTanStack Startが使われます。

Claude CodeはAnthropicのプログラムで、Mac、Windows、Linuxのマシンにインストールして使います。プロジェクトフォルダー内のターミナルでclaudeコマンドを実行します。あとはテキストで指示すると、ファイルを読み、コードを書き、コマンドを実行し、エラーを修正します。2026年4月16日以降、主要モデルはOpus 4.7です（Anthropic - Claude Opus 4.7）。

主な違いを一文でいうと、Lovableはあなたに代わってウェブサイトを作るウェブサイトです。Claude Codeはターミナルにいて、あなたの指示に従う開発者の同僚です。

この2つの立場は、実は同じ道の2つの段階を表しています。Lovableは、まだ技術を学んでいない人が「ゼロからイチへ」進むためのツールです。Claude Codeは、アプリケーションの構築方法をすでに理解し、主導権を持ちたい人が成長するためのツールです。

Lovableを使うべき人、Claude Codeを使うべき人#

私は、レストランの食事と自宅のキッチンのどちらを選ぶかに似ていると考えています。Lovableはレストランです。席に着いて注文すれば、20分後には料理が目の前に運ばれてきます。Claude Codeはキッチンです。道具と食材が揃い、あらゆるレシピを知るアシスタントもいますが、何をどう作るか決めて料理するのはあなたです。

Lovableが向いている人:

• ターミナルを開いたことがなく、これからも使いたくない。
• パートナーや顧客に見せるアイデアのプロトタイプを、一晩で作りたい。
• ランディングページ、CRM、マーケットプレイス、ダッシュボード、問い合わせフォームなど、Lovableが何百回も構築してきた標準的な製品を作っている。
• React + Supabaseのスタックで作る準備ができていて、Python、Go、モバイルアプリは必要ない。
• 月$25–100の有料プランが気にならず、コードがベンダー側に置かれることも問題ではない。

Claude Codeが向いている人:

• プロジェクトフォルダーを扱ったことがあり、gitと.envが何か知っている。
• すべてのファイルを管理し、自分でスタックを選びたい。
• Telegramボット、データ処理スクリプト、モバイルアプリ、標準的でないAPIとの連携など、典型的なものより複雑なプロジェクトを作っている。
• コードをベンダー側ではなく、自分のリポジトリに置きたい。
• 一貫した結果を得るために、CLAUDE.mdとコンテキストエンジニアリングについて学ぶ準備ができている。

試行錯誤せず、自分のタスクに合う組み合わせを選びたいですか？効果的な組み合わせは3つの要素で構成されます。AIクローン + セカンドブレイン + コンテキストエンジニアリング。この組み合わせによって、Lovable、Claude Code、またはその両方を、信頼できるパイプラインにできます。

各ツールで最初のプロジェクトを作るにはいくらかかる？#

Lovable：プランとクレジット

2026年5月時点のLovable公式料金：

クレジット1つは、おおむねプロンプト1回分です。軽いスタイル変更なら0.5クレジット、認証付きの新機能なら1.5+クレジットかかります。大きな落とし穴は、バグ修正のサイクル（AIが1つ直すと別の箇所を壊す場合）によって、初回構築に加えて60–150クレジットを余計に使うことがある点です。これは2026年のユーザーフォーラムでの実際の苦情に基づいています。Proでクレジットを追加購入すると、50クレジットで$15かかります。

⚠️ 別途費用がかかるのがLovable Cloud（プラットフォームのマネージドホスティング）です。サブスクリプションには含まれません。ワークスペースには、無料ホスティングが月$25分、無料のAI利用が月$1分付与されます。その後は従量課金です（データベースの読み書き、エッジ関数、ストレージ）。知られている事例では、アクティブユーザーが100人未満のプロジェクトが、1週間で無料枠を使い切りました。

Claude Code：プランとトークン

2026年のClaude公式料金：

独自の連携機能を構築する人向けに、APIトークンもあります。Opus 4.8は、入力トークン100万件あたり$5、出力トークン100万件あたり$25です。詳細はClaude Code向けOpus 4.8ガイドをご覧ください。

最初のプロジェクトと本格的なプロジェクトにかかる実際の費用

よくあるタスクを考えてみましょう。「データベース、予約フォーム、管理パネルを備えた顧客予約サイトを作る。」

Lovable: Proプラン（$25）では、構築と調整におよそ30–40クレジットかかります。1か月分のサブスクリプション内に収まります。その後、新しい製品や大幅な再設計を行うたびに、サブスクリプションがさらに1か月分必要になり、Lovable Cloudの費用がかかる可能性もあります。

Claude Code: Proプラン（$20）では、同じタスクに3–4時間の作業と、およそ10回のAIセッションが必要です。月間上限内で、こうしたプロジェクトを2–3件並行して進めながら、ウェブサイトの文章の編集、小さな修正、自動化スクリプトなどの日常作業もできます。

長期的には差がさらに大きくなります。ある開発者は8か月でClaude Codeに100億トークンを通しました。API経由なら$15,000+かかるところ、Maxプランでは約$800でした。製品を一度だけ作って終わりなら、LovableとClaude Codeの費用はほぼ同じです。5–10件のプロジェクトを抱えて定期的に取り組むなら、Claude Codeのほうが5–6倍安くなります。

どんなコードができる？内部の仕組み#

Lovableでは、「これは何で書かれているの？」という問いに、すでに答えが用意されています。すべてのアプリが次を使います。

• フロントエンド：React、Vite、Tailwind CSS、および既製コンポーネントのライブラリーshadcn/ui。
• バックエンド：Supabase。データベースのPostgreSQL、ログインのSupabase Auth、ファイル用のSupabase Storage、サーバー側のロジック用のDeno上のEdge Functions。
• リアルタイム機能：チャットや更新に使うWebSocket経由のSupabase Realtime。
• 決済：組み込みのStripe連携。
• ホスティング：無料プランでは*.lovable.app、有料プランでは独自ドメイン。

これは強みです。プログラマーではない人のタスクの80%をカバーする、実績のある1つのスタックを使えます。同時に限界でもあります。Telegramボット、PDF文書処理、データ収集スクリプト、モバイルアプリを作るなら、Lovableは選択肢になりません。

Claude Codeでは、自分でスタックを選びます。プロジェクト例では、次の技術が使われていました。

• クリエイタープラットフォームにはNext.js + TypeScript + PostgreSQL。
• 顧客向け製品のバックエンドの1つにはPython + FastAPI。
• grammYライブラリーを使ったTypeScript製Telegramボット。
• Node.jsのデータ処理スクリプト。

同じClaude Codeが、あらゆるフォルダーやスタックに対応します。プロジェクトの内容を読み、その構造を理解し、適切な言語を使います。自由度が得られる反面、どのスタックを使うか決める必要があります。

製品が軌道に乗ったら：プロジェクトの開発#

始めるときにはあまり検討されませんが、ツール間の決定的な違いはここにあります。

Lovableでタスク管理ツールを作ったとしましょう。人気が出て、顧客から「CRMとの連携を追加して」「特定の形式でExcelにエクスポートしたい」「モバイルアプリを作って」と依頼が来ています。どうなるでしょうか？

• 簡単な変更はプロンプトで行い、クレジットを消費します。
• 複雑な変更では、アーキテクチャの限界にぶつかることがよくあります。LovableはあなたのCRMを知らず、エクスポートの形式は標準的ではなく、モバイルアプリには別のスタックが必要です。
• Lovableはコードのエクスポートとエディターでの作業を提供していますが、これはもう「バイブコーディング」ではありません。React、TypeScript、Supabaseを理解する必要がある通常の開発です。

Claude Codeでは、こうした断絶はありません。CRM連携を追加するなら、Claude CodeがCRMのドキュメントを読み、クライアントを書き、テストして、コミットします。モバイルアプリが必要なら、新しいフォルダーを開いて「同じAPIを使ってSwiftでiOSアプリを作って」と頼めば、結果が得られます。リポジトリを所有しているので、コンテキストも失われません。

だからといってLovableが悪いわけではありません。最初のタスクを解決するのは得意です。製品の入り口にはなりますが、長期的に製品を置いておく場所ではないということです。

Claude CodeとLovableが間違えたとき：どちらのほうが修正しやすい？#

AIは必ず間違えます。大切なのは、修正にどれだけ手間がかかるかです。

Lovableで何かが壊れたときの選択肢は3つです。

1. プロンプトを続けます。「これを直して。ボタンが動かない」と伝えます。うまくいくことも多いですが、そうでないこともあります。
2. Lovableの履歴を使って戻します。一度にNステップ戻るため、細かく指定することはできません。
3. Dev Mode（有料プランのみ）に切り替えて、コードを手動で編集します。

Claude Codeでバグが起きたときは、次のようにします。

1. ターミナルまたはブラウザーに表示されたエラーを見て、Claudeに「このエラーを見て、原因を調べて」と伝えます。
2. 行き詰まったら、/rewindコマンドで最後に動作していた時点に戻します（変更を元に戻すガイド）。
3. 自分でファイルを開き、1行を修正できます。自分のコードだからです。

Claude Codeの利点は、何が変わり、エラーがどこにあるかを確認できることです。Lovableは「ブラックボックス」のように機能します。結果は得られますが、原因は見えません。初心者には「自分で調べなくていい」という安心感がありますが、標準的なランディングページより複雑な製品になると、問題になります。

LovableがClaude Codeより優れている4つの場面#

場面1：フォームとデータベースを備えたランディングページ。「メールアドレスを入力できて、誰が入力したかを管理パネルで確認できるページが欲しい」。Lovableならデザイン、ドメイン、SSL込みで10分です。Claude Codeでは骨組みの構築に1–2時間、公開にさらに1時間かかります。一度きりのタスクなら、Lovableが大差で勝ちます。

場面2：投資家やパートナーに見せるデモ用プロトタイプ。3日後の会議で、製品が「どう動くか」を見せる必要があるとします。Lovableなら、一晩で見栄えのよい動作するプロトタイプを作れます。「この部分にはこのロジックが入り、あちらには別のロジックが入ります」と説明できます。パートナーがボタンをクリックすると、PowerPointではなく、本物の画面が動きます。

場面3：よく知られたテンプレートを使う標準的な製品。代理店向けのシンプルなCRM、認証付きの顧客ポータル、グラフ付きのダッシュボードなどです。Lovableはこうしたアプリを何百回も作っており、モデルはすでにパターンを知っています。最初の試みで動作するものを得られる可能性が高まります。

場面4：インストールが障害になるとき。ターミナルを開いたことがなく、Node.js、git、VS Codeの使い方を調べる準備もできていない人には、Claude Codeでは得られない結果をLovableが提供できます。始めなかったプロジェクトより、動くプロトタイプがあるほうがよいでしょう。

Claude CodeがLovableより優れている4つの場面#

場面1：ウェブ以外のプロジェクト。顧客に応答して問い合わせを記録するTelegramボット。競合のウェブサイトを1時間ごとに巡回し、要約をSlackに送るスクリプト。会計用のデータを抽出するPDFパーサー。Lovableでは作れません。ウェブ専用だからです。Claude Codeなら、よくある一晩のプロジェクトです。

場面2：本格的な長期プロジェクト。製品を中心に会社を作るなら、コードをGitHubリポジトリと独自のインフラに置き、すべてを管理する必要があります。Lovableでは常にプラットフォームに結びつきます。コードをエクスポートできますが、Lovableなしで開発を続けるのは難しくなります（スタックが固定され、アーキテクチャ上の判断も代わりに行われているためです）。Claude Codeなら、最初からコードは自分のものです。

場面3：標準的でないアーキテクチャやスタック。Node.jsではなくBunを使いたい。Postgres + Redis + ClickHouseを使いたい。AIコンポーネントにはPython、マイクロサービスにはGoを使いたい。Supabase以外でワーカー、キュー、WebSocketを使いたい。Lovableでは、こうした構成は実現できないか、コードを手動編集して「突破」する必要があります。その場合、ビルダーの利点は失われます。

場面4：プロジェクトのセカンドブレインが必要なとき。本格的な製品にはコードだけでなく、ビジネスモデル、対象者、法的制約、目標などのコンテキストも必要です。このコンテキストをコードと並ぶbusiness/フォルダーに置き、Claude Codeがリクエストのたびに読み込みます（Claude Codeのセカンドブレインガイド）。Lovableにはこのレイヤーがありません。「なぜ」を理解しないまま、技術的に動く製品ができあがります。

ハイブリッド：1つのプロジェクトでLovable → Claude Code#

この方法はシンプルです。それぞれのツールは得意分野が異なるので、「どちらか一方」を選ぶ必要はありません。

進め方：

1. アイデア段階。Lovableで一晩作業します。欲しいものを説明すると、データベース、認証機能、数ページを備えた動作するプロトタイプができます。パートナーに見せたり、見込み顧客5人にインタビューしたりするには十分です。

2. 検証段階。製品がまだシンプルな間は、Lovableで作業を続けます。1–2週間かけてプロンプトを使い、小さな修正を加え、データベースに新しいフィールドを追加します。

3. 引き継ぎ段階。Lovableの限界に達したら（Telegramボットを並行して動かしたい、複雑なロジックが必要、別の言語を使いたい場合など）、Dev Mode（Proプランが必要）からコードをエクスポートし、リポジトリをローカルにクローンします。

4. 開発段階。VS Codeで開き、同じフォルダーからClaude Codeを起動します。ClaudeはLovableが作ったコードを確認して、開発を続けられます。アーキテクチャはReact + Supabaseのままですが、主導権はあなたに移ります。

欠点は、最初の1か月以上、Lovableに料金を払ってから、結局Claude Codeへ移ることです。追加で$25–50かかります。その代わり、開発の最初の1週間を節約できます。軌道に乗らないアイデアがほとんどなので、$25は多くの場合、価値のある出費です。後で捨てる骨組みに2週間を投じず、何がうまくいかなかったのかをすぐに把握できます。

彼女はStripe、Customer.io、Meta Pixelなど12の連携機能を備えたメインウェブサイトをLovableで1日で作り直し、その後、Claude Codeでchallenge prompts機能を、予定していた2週間ではなく2日で本番環境に導入しました。

あまり語られないLovableの5つの落とし穴#

落とし穴1：無料プランは1–2晩分。1日5クレジットあれば、アプリの骨組みと数回の修正には足ります。その後は、1日待つか、$25を支払うことになります。

落とし穴2：コードにアクセスできるのはPro以上のみ。無料プランでは、コードをダウンロードしたり、エディターで開いたり、開発者に引き継いだりできません。離れると決めたら、有料プランにアップグレードするか、最初から作り直すことになります。

落とし穴3：Supabaseに強く依存する。後から自分のサーバーでPostgreSQLを動かしたい、Supabase Authを独自の認証に置き換えたい、ウェブ以外のバックエンドと接続したい場合、作業は大変です。基盤にスタックが組み込まれています。

落とし穴4：インターフェイスの言語。Lovableはデフォルトで英語のアプリケーションインターフェイスを生成します。たとえば「自分が希望する言語で作って」のように、プロンプトで使用言語を明示してください。システムエラーや入力検証フォームなど、一部のテキストは英語のまま残ることがあります。別のプロンプトを使って修正できます。

落とし穴5：Supabaseのセキュリティは初期状態では穴がある。最初に誰も触れない、最も重要な点です。調査者がLovable公式ショーケースにある1,645のアプリを調べたところ、170件（10.3%）に、Supabaseの重大なRow Level Securityの問題がありました。ログインしたユーザーなら誰でも、他人のデータを読み取り、変更し、削除できる状態でした。実際のアプリでは、調査者が顧客の住所、債務額、稼働中のStripeキーにアクセスしました（CVE-2025-48757）。原因は、LovableがSupabaseにテーブルを作る一方で、デフォルトではRLSポリシーを有効にしないことです。対策は、最初に起動した後、すべてのテーブルでRLSを手動で有効にし、Supabaseのドキュメントに照らして確認することです。実際のユーザーデータを扱う製品を作るなら、これは「後で」ではありません。「最初の構築の直後」に行ってください。

初心者がつまずくClaude Codeの5つの落とし穴#

落とし穴1：インストールが最初の障害。始めるには、Node.js、npm、git、VS Code、そしてClaude Code自体をインストールする必要があります。WindowsではWSLの使い方を調べなければなりません。Macなら簡単ですが、それでもターミナルを開く必要があります。こうした作業をしたことがない場合、最初の30分は「どう起動するか」を調べることになります。

落とし穴2：コンテキストがないと、1日で上限を使い切ることがある。$20のProプランでは、上限はメッセージ数とトークン数に基づきます。Claudeに毎回プロジェクトのファイルを50個送ると、2–3時間で上限に達します。解決策はコンテキストエンジニアリングです。必要なものだけを渡し、/clearと/compactを使い、CLAUDE.mdを維持します（上限についてのガイド）。

落とし穴3：コンテキストがないと幻覚を起こす。Claude Codeは賢いですが、プロジェクトを理解していないと、APIメソッド、データベースフィールド、ライブラリーをでっち上げることがあります。ルールを記したCLAUDE.mdと、セカンドブレインとしてのbusiness/フォルダーがなければ、結果は運任せです。用意すれば、信頼できるパイプラインが手に入ります（CLAUDE.mdのガイド）。

落とし穴4：アクセスと企業所有に関する制限。2025年9月、Anthropicは中国、イラン、北朝鮮の事業体が50%を超える持分を持つ企業をブロックしました。アクセス条件はプロバイダーと所有構造によって異なります。ツールを選ぶ前に確認してください。

落とし穴5：ビジュアルエディターがない。やりとりはすべてテキストで行います。ボタンを右に10ピクセル動かしたい場合、ドラッグすることはできません。言葉で説明する必要があります。デザイン作業では、Lovableを含むビジュアルビルダーより不便です。

5分で選ぶ：判断表#

5つの質問に答えて、おすすめを確認しましょう。

最初の2行でLovableに✅が付き、残りの行では⚪または❌なら、Lovableを選びましょう。3–5行でClaude Codeに✅が付くなら、Claude Codeを選びましょう。両方の列に✅が付くなら、最初の1–2週間はLovableを使い、次にClaude Codeへ移行します（上のハイブリッドの項を参照）。

もう1つ大切なことがあります。どちらを選んでも、ボトルネックはAIそのものではありません。大切なのは、AIとの取り組み方です。3つの柱（AIクローン + セカンドブレイン + コンテキストエンジニアリング）を組み合わせれば、どんなツールでも一貫した結果が得られます。これがなければAIは幻覚を起こし、あれば信頼できる機械のように働きます。

一晩でバイブコーディングをするための完全ガイド：AIクローン + セカンドブレイン + コンテキストエンジニアリング。

Ailootについて知ってください。