今回は、全く同じPRD.mdを以下の5環境に渡して、UIの完成度だけを比較した。

• Lovable（Gemini 3 Flash / 4分）
• Antigravity（Gemini 3.1 Pro / High / 20分）
• Cursor（Opus 4.6 / High / 15分）
• Claude Code App（Opus 4.6 / High / 20分）
• OpenAI Codex（GPT-5.3-Codex / High / 40分）

＊時間は開発にかかった時間

結論だけ先に言うと、UIは「モデルの賢さ」より テンプレ・制約・反復回数で決まる。

目次

1. 今回のUI比較ルール（UIに絞る）
2. PRD.md 紹介
3. Lovable
4. Antigravity
5. Cursor
6. Claude Code
7. OpenAI Codex
8. なぜこんな差が出たのか（深掘り）
9. 次回予告：バックエンド比較 / MCP解説

今回の比較ルール（UIに絞る）

UI比較としてブレないよう、ルールを固定した。

• PRD.mdは完全同一
• 評価対象は UIのみ（バックエンドの良し悪しは今回評価しない）
• 計測時間の定義：（例：生成開始→画面がローカル環境で表示されるまで）
• それぞれ一番賢く重たいLLMモデルを使用

今回使用したPRD.md

📝 PRD: Taro's Multi-hub 
1. プロジェクト概要 (Project Overview)
1.1 プロジェクト名

Taro's Multi-hub

1.2 背景および目的

既存サービスの限界突破: Linktree等の既存プラットフォームでは実現が難しい「デザインの自由度」を確保し、独自のブランドアイデンティティを確立する。

統合ブランディング: 日本の技術ブログと日常YouTubeチャンネルを1か所に集約し、相乗効果を生み出す。韓国と日本の技術コミュニティを繋ぐ架け橋としての役割を果たす。

1.3 コアバリュー (Value Proposition)

非専門家向けAI・バイブコーディングの指針: 「非専門家でも簡単に学べる」というメッセージを視覚的・言語的に伝え、AI技術への心理的ハードルを下げる。

専門性と親しみやすさの両立: 技術ブログ運営者としての「専門性」と、ユーチューバーとしての「親しみやすさ」を同時に提示し、多角的な信頼を獲得する。

1.4 成功指標 (Success Metrics)

トラフィック: 日本国内ユーザーのアクセス数および滞在時間の増加。

コンバージョン: ニュースレター購読者数の増加、およびビジネス協業の問い合わせ件数。

2. ユーザーシナリオ (User Scenarios)
シナリオA：日本の技術ブログ読者

行動: 日本の技術ブログで有益な情報を得たユーザーが「この運営者は何者か？」と興味を持ち、ハブページへ流入。

期待される結果: 運営者の専門的な背景を確認し、より深い情報を得るためにニュースレターを購読、またはSNSをフォローする。

シナリオB：非専門家の初心者（YouTube経由）

行動: YouTubeで「バイブコーディング」の動画を見て興味を持ったユーザーが流入。

期待される結果: 「自分にもできそう」と感じさせる直感的な導入コンテンツを確認し、学習の第一歩として質問を投稿したり、関連記事をチェックしたりする。

シナリオC：ビジネスパートナー（企業担当者）

行動: 協業や執筆依頼を検討している担当者が、運営者のポートフォリオとしてページを訪問。

期待される結果: 多言語対応（日・韓）や整理された実績を確認して信頼を感じ、専用フォームから協業を提案する。

3. 主要機能一覧 (Key Feature List)
区分	機能名	詳細内容
コア	多言語対応	日本語・韓国語（必須）の切り替え。ブラウザ言語の自動検知および手動選択機能。
コア	リンクのカテゴリ化	技術ブログ、SNS、YouTube等を直感的なカードUIで配置。
コミュニケーション	ニュースレター購読	メールアドレス入力のみで完結する簡潔な購読フォームの埋め込み。
コミュニケーション	質問・匿名箱	ユーザーが匿名で気軽に質問を送れる窓口（Spin等の外部ツール連携）。
ビジネス	協業提案フォーム	講演、執筆、広告など、目的に応じて選択可能な問い合わせフォーム。
UI/UX	Clean & Pro UI	白やグレーを基調とした清潔感のあるデザインと、エンジニアらしい専門性を感じるレイアウト。

＊UIデザインに関してはそれぞれのツールに任せるためにPRD.mdでは具体的に明記しません。

1) Lovable

• 開発時間：4分
• LLMモデル：Gemini 3 Flash
• 要約：爆速で綺麗、でも“Lovableの指紋”が残る

スクショ(URL)

僕の感想

• 4分で開発が完結。さらにTailwindCSSを使っているからデザインが綺麗。
• 4分でバックエンドまで完結（※今回はUI比較なので、あくまで参考情報）。
• 短所：Lovableユーザーが見たとき「Lovableデザイン」だとわかる。自由度が低い。

追加の深掘り

Lovableの強さは「UIを綺麗にするための制約」が最初から入ってること。
余白・タイポ・カードの雰囲気が崩れにくい代わりに、テンプレの“香り”が残りやすい。

向いてる：

• 最速で“見栄えのするMVP”を出したい
• UIを破綻させず、短時間でデモを作りたい

向いてない：

• UIを強く差別化したい（独自トーン＆マナーがある）
• 細部のデザインに強いこだわりがある

2) Antigravity

• 開発時間：20分
• LLMモデル：Gemini 3.1 Pro / High (最重量）
• 要約：無料なので処理が遅い。Gemini 3.1 Proの素性が良い

スクショ

AI業務自動化に興味がある方は、Instagram（@taro_taro609）にDMで「診断」と送ってください。

僕の感想

• 無料ツールなのにここまでできるのはすごい。
• Cursorよりビルドに時間はかかるが、良くも悪くも無料だから全部納得できる。
• やはり最新モデルのGemini3.1Proモデルが優秀。

追加の深掘り

無料枠でここまで出るのは、（1）テンプレが良い（2）モデルがUIの“無難解”を掴んでる、の合わせ技。
時間がかかるのは、ビルドや反復が増える構造か、実行環境の制約が原因になりがち。

向いてる：

• コストゼロでUIの完成度を取りにいきたい。UI検証だけならGoogle AI Studioの方が早い。
• “無料で出せる範囲”を最大化したい

3) Cursor

• 開発時間：15分
• LLMモデル：Claude Opus 4.6 / High （最重量）
• 要約：有料なのにAntigravityとそこまで差がない

スクショ

僕の感想

• 有料ツールなのにAntigravityとほぼ同じ結果なのが残念。

追加の深掘り

Cursorの価値は「UIを1発で作る」より、既存コードを育てる運用に出やすい。
ただ今回みたいに“ゼロからUI生成”をすると、テンプレが似ていれば結果も似る。

逆に言えば、Cursorで差を出すには

• 既存デザインシステムの導入
• UI規約（トークン）をプロジェクト側に持つ
• コンポーネント制約を先に決める
  が効く。

4) Claude Code

• 開発時間：20分
• LLMモデル：Claude Opus 4.6 / High (最重量）
• 要約：ほとんどCursor、Antigravityと変わらない。でもClaude Codeは“MCP後”が本番

スクショ

（補足予定）

僕の感想（そのまま）

• Cursor / Antigravityとほぼ同じUI。
• MCP、Context7を利用するともっと綺麗なUIになるはず（次回比較予定）。

追加の深掘り（僕の補足）

Claude Codeが化けるポイントは「外部の文脈」を食わせられること。
UIはセンスより ルール供給で伸びるので、MCPで

• コンポーネントの正しい使い方
• デザイン規約（余白/色/タイポ）
• 既存プロジェクトの意図
  が入ると、見た目が“急に整う”可能性が高い。

MCPについては次回解説予定（AI時代に必須です）

5) OpenAI Codex

• 開発時間：40分
• LLMモデル：GPT-5.3-Codex/ Extra High（最重量)
• 要約：同じPRDを入れたのか疑うレベルで洗練

スクショ

僕の感想

• 同じ企画書を入れたのか疑うくらい洗練されたUI。
• 開発に時間はかかる分、圧倒的な完成度。

追加の深掘り

UIの差は、最後の“磨き込み”で決まる。
Codexの強さは、時間をかけて

• 余白・タイポの階層
• 空状態やエラー表示
• 文言の自然さ
• アイコンや密度
  を丁寧に詰められる（＝反復が深い）ところに出やすい。

向いてる：

• UIの完成度を最優先にしたい
• “デモの見栄え”で勝ちたい

なぜこんな差が出たのか（まとめ）

同じPRDでもUIが変わる理由は、だいたいこの5つ。

1. 最初から入っているテンプレ（部品セット）が違う
2. ツールの制約が違う（綺麗さ vs 自由度）
3. 反復回数が違う（最後の10%を詰められるか）
4. プレビューと検証のしやすさが違う
5. UIの文脈（デザイントークン/参照スタイル）が足りないと“既視感”に寄る

つまり「モデル差」だけじゃなく、UIを作る製造ラインの差が支配的だった。

次回予告

次回は、UI比較だけじゃなく バックエンドまで徹底比較します。
さらに別記事で、

• AI時代必須知識：MCPとは？
• Claude Code にMCP連携後、UIはどう変わる？

もやります。（記事リンク：）

おまけ：僕が次回からPRDに足す“UI用テンプレ”

今回の比較で分かったのは、PRDが機能中心だとUIが似ること。

次回はPRDにこれを足す予定：

• 参照スタイル：（例：Linearっぽく / Notionっぽく）（）
• デザイントークン：（色/余白/角丸/影/タイポ）（）
• 画面一覧：（Top/一覧/詳細/設定）（）
• 状態定義：（空/ローディング/エラー/成功）（）

これだけで、同じツールでもUIが別物になる可能性が高い。

追記：Gemini CLI Ver

会員登録して無料学習資料、実務用テンプレートを手に入れよう！

以下のテンプレートや学習資料を無料DLできます。

• 世界一易しい非IT向けに「OS/ネットワーク/サーバー/API/JSON」を噛み砕く（19ページ分量）
• Codexレビュー用プロンプト（24ページ分量）
• Prompt Engineering入門 実務用テンプレート22選

テイラーの隠れ家

自然言語で世界を設計｜Vibe Codingメディア

こちらもお読みください

• Google Stitch 使い方【2026年最新】無料でアプリUIを一瞬で生成するAIデザインツール完全ガイド
• Leanstral完全ガイド【2026年最新】Mistral AIの形式検証エージェントでバイブコーディングのバグを数学的に消す
• Claude Cowork プラグイン11選【2026年最新】全て無料オープンソース——営業・法務・金融・データまで
• AIスキル設計パターン5選【2026年最新】Google×Anthropic×Vercel——エージェント開発の新定石
• #QuitGPT とは【2026年最新】ChatGPTを辞める人が急増中——400万人離脱の真相とClaude移行ガイド

📘 バイブコーディングを始めたい方へ

コードを書かずにAIと会話するだけでアプリが作れる「バイブコーディング」の入門ガイドPDFを販売中です。ゼロからアプリ完成までの全ステップを解説しています。

👉 バイブコーディング入門ガイドPDF（¥1,480）でゼロから始めよう →

著者: 稲邉舜太朗（Lovable公式アンバサダー）
運営: テイラーの隠れ家（shuntailor.net）

ツール比較表