Codex Design と Lovable の比較。
Lovable と Codex Design は、どちらも会話からインターフェースを作りますが、担う仕事が違います。Lovable は、バックエンドを含む完全な Web アプリを作り、ホスティングし、動かします。Codex Design は Codex 向けのデザインキャンバスで、Codex が自分のプロジェクトに実装する前に、画面を探って磨き込むためのものです。
2026年11月6日 更新 · 約 6 分で読めます
結論から
開発環境を整えずに、データベースとログインを備えた公開中の Web アプリがほしいなら、Lovable が向いています。Codex で開発していて、作る前にデザインを固めたいなら、Codex Design が向いています。この 2 つは見た目ほど重なりません。Lovable はホスティング付きのアプリビルダーで、Codex Design は Codex ワークフローのデザインの工程です。
- Lovable を選ぶのは、フルスタックのアプリを早くオンラインに出したい、コードベースやホスティングを管理したくない、または変更を加える非開発者と一緒に作業する場合です。
- Codex Design を選ぶのは、すでに Codex を使っていて、複数のデザインの方向性を並べて比べたい、そしてスタックとホスティングを自分で選びたい場合です。
それぞれのツールとは
Lovable は、自らを Web アプリケーションを作り、改良し、デプロイするためのフルスタックの AI 開発プラットフォームと説明しています。チャットで話しかけると、フロントエンド、バックエンド、データベース、認証、連携機能を備えたアプリを作ります。新しいプロジェクトは TanStack Start を使い、PostgreSQL データベースは Lovable 組み込みのバックエンドか Supabase を通じて使います。どのプランでも lovable.app のアドレスに公開でき、コードを GitHub リポジトリと同期でき、プレビュー上の要素を指して変更を伝えられます。
Codex Design は、私たちが開発した Codex 向けの独立したプラグインです。ローカルのキャンバスを追加し、Codex がデザインした画面をライブ HTML ページとして、モックアップ画像やリファレンスの隣に並べます。要素を選んでサイドバーでフォント、色、余白を変えることも、Codex に頼んで磨き込み続けることもできます。キャンバスのプロジェクトはお使いのコンピューターに保存されます。
並べて比較
| Lovable | Codex Design | |
|---|---|---|
| 作れるもの | バックエンド、データベース、ログインを備えたフルスタックの Web アプリと Web サイト | Web サイトとアプリのモックアップ（ライブ HTML ページ）と、モックアップ画像 |
| 動作する場所 | lovable.dev 上。アプリは lovable.app か独自ドメインでホスティング | Codex の中。キャンバスはお使いのコンピューター上（macOS と Linux） |
| 出力とコード | TanStack Start アプリ（古いプロジェクトは React と Vite）、PostgreSQL。Git 同期は全プラン、.zip ダウンロードは有料プラン | ローカルプロジェクト内の HTML ページと画像。選んだデザインは Codex がコードで実装 |
| 料金 | 無料プランは 1 日 5 クレジット（月最大 30）。Pro は月額 $25 から 100 クレジット、年払いなら月額 $21 | キャンバスプロジェクト 1 つまで無料。Pro は月額 $5 でプロジェクト無制限。Codex の利用料は別 |
| 向いている用途 | 開発環境を整えずに、動く Web アプリをオンラインに出したい | Codex を使っていて、作る前に UI の方向性を比べて磨き込みたい人 |
Lovable の Business プランは月額 $50 から。クレジットは、アプリ内のホスティングや AI 機能の費用にも使われます。この比較は、2026 年 11 月 6 日時点の両プロダクトの公式サイトとドキュメントの内容にもとづいています。
Lovable を選ぶべきとき
Lovable が向いているのは、次のような場合です。
- 画面ではなく、プロダクト全体がほしい。 Lovable はフロントエンド、バックエンド、データベース、認証をまとめて用意するので、プロトタイプでも本物のデータを保存し、本物のユーザーを迎えられます。
- ホスティングを管理したくない。 公開すると、Lovable がプロジェクトを専用の URL にデプロイします。lovable.app のアドレスへの公開はすべてのプランで無料で、有料プランでは独自ドメインも使えます。
- 非開発者が変更を加える。 チームメンバーは、プレビュー上の要素を選んで変更内容を伝えたり、テキストをその場で編集したりでき、コードには触れません。
- チームが増えていく。 Lovable の料金はシート数ではなくクレジットで決まり、ワークスペースのメンバーはどのプランでも無制限です。
- コードも手元に置きたい。 Git 同期で、どのプランでもリポジトリをプロジェクトと同じ状態に保てます。有料プランではプロジェクト全体を .zip でダウンロードできます。
Codex Design を選ぶべきとき
- 出荷前のデザインの段階。 Codex Design は、誰かが 1 つに決める前に、リファレンスや Codex が生成するモックアップ画像の隣へ、複数の方向性をひとつのキャンバスに並べるためのものです。
- スタックを自分で選びたい。 Lovable はプロジェクトごとにフレームワークとデータベースを選びます。Codex は既存のリポジトリで作業するので、選んだデザインを、すでに使っているツールで作れます。
- ビジュアルで直接編集したい。 HTML のモックアップで要素を選び、フォント、色、余白などのプロパティをサイドバーで変更できます。
- 作業を自分のマシンに置いておきたい。 キャンバスのプロジェクトはローカルに保存されます。ただし、Codex に共有した内容は、これまでどおり Codex が処理します。
- キャンバスは定額がいい。 Codex Design にクレジット残高はありません。キャンバスプロジェクト 1 つは無料で、Pro は月額 $5 でプロジェクト無制限です。Codex の利用分は Codex のプランから消費されます。
よくある質問
Codex Design は Lovable の代わりになりますか？
Lovable ができることの一部だけです。Codex Design が扱うのはデザインの段階、つまり Codex で画面を探り、比べ、磨き込むことです。アプリのホスティング、バックエンドの追加、データベースの管理はしません。自分で開発環境を整えずに、ホスティングされたフルスタックのアプリがほしいなら、Lovable のほうが向いています。
あとから Lovable から Codex に移れますか？
Lovable の Git 同期で、どのプランでもプロジェクトをリポジトリに置け、有料プランではコードを .zip でダウンロードすることもできます。コードがリポジトリにあれば、Codex はほかのプロジェクトと同じように作業できます。
Codex Design は Codex が作ったアプリをホスティングしますか？
いいえ。Codex Design はローカルのデザインキャンバスで、ホスティングサービスではありません。Codex が作ったものをどうデプロイするかは、お使いの環境次第です。