一番イケてるWebページを作れるAIはどれだ？GPT 5.2,Gemini3 Pro,Opus 4.5,bolt,v0,Lovable

はじめに

私のスマホアプリ開発第一弾として、「すみねこ」という、スマホの隅で猫動画を無限にランダムに「ながら見」できるだけの非常にシンプルなスマホアプリを開発しています。

https://www.youtube.com/watch?v=J6cA1ftm26Q

このアプリを公式ストアに登録するにあたり、プライバシーポリシーページをWeb上に用意する必要があり、それならせっかくならと本アプリのLPを作ることとしました。

そこで、本記事ではLPの土台を代表的なLLMやAIコーディングサービスを用いて作成してもらい、その出来栄えを独断と偏見で比較します。

選手紹介

選手	特徴
v0（v0 Agent）	Vercelのエージェントツール。プロンプトからUI実装・デバッグまで一気通貫でサポート。
bolt.new （Claude Sonnet 4.5）	ブラウザベースのClaudeエージェント。Next.jsアプリを対話形式で効率的に構築。
Lovable	複数AIモデル対応のビルダー。React+Supabaseアプリを直感的に生成・編集可能。
Gemini 3.0 Pro	Googleの最新高性能モデル。マルチモーダル入力で洗練されたWebページを素早く生成。
Opus 4.5	Anthropicの最強モデル。長文コンテキストを活かし、複雑なWebアプリ設計を丁寧にこなす。​
GPT 5.2	OpenAI最新モデル。GPT-5.1比で「正しい答えを出す率」が1.8倍、「コードの正確さ」が大幅向上、ハルシネーション30%減。

便宜上の同列扱いについて
純粋LLM（Gemini 3.0 Pro, Opus 4.5, GPT 5.2）とLLMを内蔵した開発支援システム（bolt.new, v0, Lovable）はシステムアーキテクチャが異なりますが、本記事では便宜上同列に扱い、同一プロンプトでのWebページ生成結果の出来栄えを主観で比較することを目的としています。よって、本実験に厳密性は無いのでご注意ください。

プロンプト

下記2パターンを用意し、アドリブ力および要件への忠実な対応力をゆるく検証します。

• 最低限の要件のみ記載したおまかせパターン
• 比較的詳細な要件を記述した指示厨パターン

おまかせパターン

主に「すみねこ」の簡単な概要と、必要なセクションだけを明示し、デザインや文言などはおまかせするパターン。

おまかせパターン

# Landing Page Creation for "Sumineko" (Corner Cat)

## Request
Design and implement a landing page (Top page only) for the smartphone app "Sumineko".
**You have full creative freedom** regarding the layout, color palette, typography, and copywriting. Please build what you consider to be the **most attractive and modern** design for this product.

## Product Concept
- **App Name**: Sumineko (Corner Cat)
- **Core Value**: A "healing" app that lets users watch cat videos in a Picture-in-Picture (PiP) window while multitasking on their phone.
- **Vibe**: Relaxing, Minimal, Cute but sophisticated.

## Technical Stack
- Next.js 15 (App Router)
- Tailwind CSS
- TypeScript
- Lucide React (for icons)

## Essential Sections (Skeleton)
Please include the following three sections. The order and presentation are up to you.

### 1. Hero Section
- Create a catchy headline and sub-headline that conveys the app's appeal.
- Include "App Store" and "Google Play" buttons (UI only).
- Use a placeholder or CSS art for the main visual.

### 2. Experience / Demo Section (Critical Logic)
This section must adapt based on the user's device:
- **On Desktop (PC)**: Display a mock "Video Player" and a "Start Picture-in-Picture" button to let users simulate the experience in the browser.
- **On Mobile**: Display a message like "Experience the demo on PC" and guide them to the App Store buttons instead.

### 3. Collection Section
- Introduce the feature where users can "collect" the cats they have watched.
- visualize this "collection" aspect (e.g., a grid of cat placeholders, a list, etc.).

## Assets & Copy
- **No assets provided**: Use placeholders (e.g., `via.placeholder.com` or CSS shapes) for all images and videos.
- **Copywriting**: Please write engaging English copy for headings and descriptions based on the product concept.

## Goal
Surprise me with a high-quality, polished UI that balances "Healing/Cute" with "Modern Web Design."

指示厨パターン

「すみねこ」の概要や必要なセクションに加え、セクション毎の詳細な構成、文言や、配色などのデザイン面にも踏み込んだ指示した指示厨パターン。

指示厨パターン

# Landing Page Creation for "Sumineko" (Corner Cat)

## Project Overview
Create a landing page (Top page only) for the smartphone app "Sumineko" (Corner Cat), which allows users to watch cat videos in Picture-in-Picture (PiP) mode while multitasking. The PC browser version offers a free trial, while the smartphone version is a paid app.

## Assets
- **No assets are provided in advance.**
- Please use **placeholders** (e.g., solid colors, CSS patterns, or placeholder image services like `via.placeholder.com`) for all images, icons, and videos.
- Assume the file paths for images will be logically placed in `/public/images/` for future replacement, but use placeholders for now.

## Technical Requirements
- **Framework**: Next.js 15 (App Router)
- **Styling**: TailwindCSS
- **Language**: TypeScript
- **Deployment**: Targeted for Cloudflare Pages
- **i18n**: Foundation for multi-language support required (manage text in JSON files).
  - Create the **English** version as the default.
- **Code Quality**: Ensure components are modular and reusable. Avoid monolithic files.
- **Images**: Use standard `<img>` or Next.js `` with placeholder sources.
- **Videos**: Lazy loading implementation (Intersection Observer).
- **Fonts**: System fonts or optimized Fonts (e.g., Inter or a rounded font for a soft look).

## Environment Variables
Assume the following environment variables are used:
- `NEXT_PUBLIC_STORE_MODE` - Values: `coming-soon` or `live`
- `NEXT_PUBLIC_APP_STORE_URL` - URL for App Store
- `NEXT_PUBLIC_GOOGLE_PLAY_URL` - URL for Google Play

## Color Palette
- **Background**: #FAF8F5 (Warm off-white)
- **Main Text**: #8B7355 (Brownish)
- **Accent**: Add a soft, harmonious color if necessary.

## Design Guidelines
- Minimal and clean.
- Focus on "what we want to show the user" in each section.
- A soft, healing atmosphere suitable for a cat app.
- No header required.

---

## Page Structure

### 1. Top Page (`/`)

#### Section 1: Hero

**Layout**: 2 columns (Text on Left, Video on Right).

**Left Side:**
- **Mascot Image**: Use a placeholder.
- **Catchphrase**: "Cats in the Corner of Your Screen."
- **Sub-copy**: "Just open and play. Infinite cat videos for your multitasking moments."

- **3 Selling Points (Use icons for visual appeal):**
  1. **"Instant Comfort"** - One tap to play. No searching, no choosing.
  2. **"Heal Your Mind"** - Perfect for when you feel tired, stressed, or lonely.
  3. **"Stay Focused"** - Unintrusive PiP window. Work and study with cats by your side.

- **Store Buttons:**
  - If `NEXT_PUBLIC_STORE_MODE` is `coming-soon` -> Show "Coming Soon" label.
  - If `NEXT_PUBLIC_STORE_MODE` is `live` -> Show Store Links.

- **Supplementary Text**: "One-time purchase. Yours forever."

**Right Side:**
- **Demo Video Frame**:
  - Placeholder for WebM video (muted, loop, auto-play).
  - Ensure a poster image (thumbnail) can be set.

---

#### Section 2: Experience Section

**PC View:**
- **Heading**: "Try Sumineko in Your Browser"
- **Description**: "Click the button below to start the Picture-in-Picture player. Enjoy the cats while you work on other tasks."
- **Video Player Frame**: Placeholder (Logic implementation not required yet).
- **"Start PiP" Button**: UI only (Functionality to be implemented later).

**Mobile View:**
- **Heading**: "Try the Web Demo on Desktop"
- **Description**: "Open this page on your computer to try the Picture-in-Picture mode for free."
- **Action**: Display Store Buttons prominently.

---

#### Section 3: Collection Introduction

- **Heading**: "Build Your Cat Collection"
- **Description**: "Every cat you meet is saved to your history. Revisit your favorites anytime."
- **Visual**: Placeholder for Collection Screen Screenshot.
- **Note**: Indicate clearly that this feature is exclusive to the smartphone app.

---

#### Section 4: Final CTA

- **Heading**: "Take the Cats Wherever You Go"
- **Action**: Store Buttons (Reuse component from Hero).

---

#### Section 5: Footer

- **Links**:
  - Privacy Policy (Link to `/privacy` - page implementation not required)
  - Contact (External link, URL changes based on locale):
    - ja -> `https://yukapero.com/ja/contact`
    - en-US -> `https://yukapero.com/en/contact`
    - (and so on for other locales, default to `en/contact`)
- **Copyright**: © 2025 yukapero

---

## Responsive Design

### PC (1024px+)
- Full feature display.
- Hero: 2-column layout (Text Left, Video Right).
- Experience Section: Show Video Player + PiP Button.

### Tablet (768px - 1023px)
- Hero: Keep 2 columns but compact.
- Experience Section: Same as PC.

### Smartphone (767px-)
- Hero: 1 column (Text Top, Video Bottom).
- Experience Section: Switch to "Experience on PC" message.
- Emphasize Store Buttons.

---

## i18n Infrastructure

- Load all text from JSON files (e.g., `/locales/en.json`).
- **Do not hardcode text in components.**
- Structure should allow easy addition of other languages later.
- Locale switching via URL path (`/en/`, `/ja/`) or similar mechanism.

---

## Accessibility (Basic)

- Proper `alt` attributes for images.
- Focus indicators for buttons/links.
- Sufficient color contrast for readability.

---

## Notes

- **No logic required** for video playback or PiP function (UI only).
- **Metadata/OGP**: Use temporary dummy data.
- **Favicon**: Use a placeholder or comment out the reference if file is missing.

結果

v0（v0 Agent）

v0 おまかせプロンプト

おまかせパターンの方は超王道なUIデザインに非常に控えめな配色で、良くも悪くも無難中の無難といった印象です。
画像や動画、アイコンなどが仮のものなので、より一層簡素感が引き立ってしまっているのかもしれません。
実際にそういった素材を入れれば、逆にこの簡素さがスクショや動画などの要素を引き立ててくれる良い塩梅になっているのかもしれません。

v0 指示厨プロンプト

一方指示厨パターンの方は、プロンプトの内容を忠実に守りながらも、全体的にこれもまた控えめなデザインです。
文字を太字にして強調するようなこともなく、良くも悪くも平坦な印象を受け、おまかせパターンの方とあまり印象は変わりません。

bolt.new （Claude Sonnet 4.5）

bolt.new おまかせプロンプト

おまかせパターンの方はオレンジ色を基調としたやわらかく生き生きとしたデザイン、配色で、自然とオレンジ色の文字や画像に目が誘導され、洗練された印象を受けます。

スクロールしなくても見える位置にある訴求文言

細かいポイントですが、HEROセクション、つまりスクロールしなくても見える位置に「Experience the magic (魔法を体験してみよう！)」という興味をそそるような、さり気ない訴求要素があるのも、離脱者を減らす良い工夫ですね。

ただし仮要素とは言え、HEROセクションのスマホのデザインや、コレクションセクションの要素ののっぺり感に何となく古臭さやチープさ、素人感を感じてしまいました。

bolt.new 指示厨プロンプト

一方指示厨パターンの方はプロンプトに実に忠実なのは良いのですが、忠実過ぎてboltの良さを殺してしまっているような印象を受けます。
決して全体的に悪くは無いのですが、おまかせパターンと比べると単調過ぎます。
これはboltが悪いのではなく、私の用意したプロンプトのレベルの低さがそのまま形として表れていると考えられます。

Lovable

Lovable おまかせプロンプト

おまかせパターンの方は、まず目につくのが顔面が崩壊している猫のイラストです。

顔面崩壊猫1

顔面崩壊猫2

こちらが素材を提供していないため、親切にも用意してくれたようですが、幼稚園児が描いたようなシュールなデザインで思わず笑ってしまいます。
しかしこれらは飽くまでも仮で用意してくれたものなので、これらの顔面崩壊猫を無視して他の部分のデザインに目を向けると、背景に猫があちこちにいたり、強調したい部分はしっかり茶色やオレンジのアクセント色で強調していたりと、悪くありません。

Lovable 指示厨プロンプト

指示厨パターンの方は指示に非常に忠実でありながらも、強調したい文字列を太字＆アプリに合わせて柔らかいフォントにしていたり、PiP移行ボタンをプロンプトでは特に明示していないオレンジ色で強調していたりと、随所に工夫が見られます。

アプリに合わせて柔らかフォント

背景とのコントラスト的にちゃんと目立つボタン

Gemini 3.0 Pro

Gemini 3.0 Pro おまかせプロンプト

おまかせパターンの方は良くも悪くも遊び心がなく、全体的に引き締まったデザイン/配色で、癒し系アプリというよりはビジネス向けのアプリやツールのような印象を受けます。
ただの偏見でしか無いですが、Googleらしいと言えばGoogleらしい方向性ですね。
デザインの方向性に関してはアプリと明らかにマッチしていませんが、そこを一旦棚上げすると、全体的に非常にクオリティが高いと感じます。
「Webデザインの教科書に沿って作ってみました！」といった印象で、癖がなく、安心して依頼できる気がします。

PiPの表現

ブラウザの表現

細かいですが、PiPやブラウザなどの仮のイラストの再現度も高いですね。
完成イメージが持ちやすいので、地味に嬉しいポイントです。

Gemini 3.0 Pro 指示厨プロンプト

指示厨パターンの方は他のAIと同様に指示に忠実で、プロンプトのデザイン指示のレベルの低さに引っ張られてしまっているものの、細かいポイントですが、スマホ画像やコレクション画面イメージが若干斜めに傾いた動きのあるデザインをアドリブで取り入れており、とても良いアクセントになっています。

斜めのスマホ

斜めのコレクションイメージ

また、フッターでさりげなく歩いている猫もお洒落ですね。

フッター上を歩く猫

Opus 4.5

Opus 4.5 おまかせプロンプト

おまかせパターンの方は、全体的に明るくカラフルで可愛らしいデザインで、「猫の癒しアプリ」というテーマ性をしっかりデザインに反映していることが見て取れます。
ヘッダーも透明感がある現代的なデザインで、とてもお洒落です。

カラフルで統一感のあるデザイン

背景に散らばるアイコンや、見出しのグラデーション、多彩な配色など、遊び心に富みつつも、デザインとして一貫性があり、チグハグを感じさせない優れたデザインのように思います。

Opus 4.5 指示厨プロンプト

一方指示厨パターンの方は、おまかせパターンと比べてみると完全にOpus4.5の良さを殺してしまっており、一気に退屈なデザインになってしまいました。
boltと同様にプロンプトのレベルの低さがそのまま形として表れてしまったように見えます。

GPT 5.2

GPT 5.2 おまかせプロンプト

おまかせパターンの方はデザインや配色の方向性がOpusと似ており、カラフルなグラデーションをアクセントとして随所に用いており、明るい雰囲気です。
私のような素人がこういった多彩なグラデーションを使おうとするとどうしてもチープ感が出てしまうのですが、綺麗に上手くまとめられている印象です。

他モデルは猫の絵文字や写真などで仮素材を表現していましたが、GPT 5.2では一切そういったものは用いないようです。
また、HEROセクションで他モデルとの差異が顕著に表れています。

HEROセクション

HEROセクション全体がカード要素として表現されており、スマホのイメージは縦長ではなく正方形で表現されています。
しかしスマホ画面の下部の要素がはみ出していたり、ダウンロードリンクなどが設置されている行がアプリの訴求文言要素と同列に設置されていてごちゃついていたりと、デザイン素人ながらも若干の違和感を感じます。

GPT 5.2 指示厨プロンプト

指示厨パターンの方はOpusやboltなどと同様に退屈なデザインになってしまいました。
ここまで何度も述べている通り、良くも悪くもプロンプトに忠実であることの表れかとは思います。
しかしLovableではオレンジ色をアクセント色として加えていたり、フォントをアプリに合わせて柔らかいものにしたり、Geminiでは要素を敢えて斜めにしたりなど、ちょっとした表現の工夫が光っていましたが、GPT 5.2ではそういった類のものは一切見られませんでした。

独断と偏見にまみれた総評とまとめ

気に入ったAIランキング

今回得られた結果をもとに、理由を添えて私が気に入ったAI順に並び替えてみます。
ちなみに私はデザイン面はド素人で専門的な知見がある訳ではないので、飽くまでも素人なりの直感や体感に基づいた評価となります。

#	選手	理由
1位	Gemini 3.0 Pro	適当に指示しようが詳細に指示しようが、どちらにせよデザイン的な洗練感、安定感を感じる。とりあえずGeminiにお願いしておけば、総合的に平均以上の成果物を叩き出してくれる感を最も強く感じることができたので１位。
2位	Opus 4.5	おまかせプロンプトで上手くアプリの趣旨を解釈してデザインに高クオリティで反映できており、素晴らしい。しかしプロンプトの質が低いと、Geminiよりも一気に成果物の質も低くなる点で注意が必要に感じた。
3位	GPT 5.2	全体的にクオリティが高く非常に可能性を感じるが、やはりおまかせパターンでのHEROセクションのデザインに一抹の不安を感じてしまった。
4位	bolt.new (Sonnet 4.5)	おまかせパターンでの一部要素のチープ感に加え、Opus4.5と同様にアドリブ力は高いが、プロンプト次第でboltの良さを殺してしまうように感じたので4位。
4位	Lovable	やはり顔面崩壊猫が気になる。一時的な仮の素材でしかないので気にすべきではないのかもしれないが、あまりにも仮画像がお粗末過ぎると完成イメージが持ちにくいので、個人的には減点せざるを得ない。しかし指示厨プロンプトは他のAIと比較しても引けを取らないほどの完成度だった。
5位	v0(v0 Agent)	全体的に無難で地味で退屈。アドリブ力は低く、さらに利用者のプロンプトエンジニアリングのレベルの低さにも強く引っ張られているように感じたので、デザインへの拘りが強い人にとっては、かなり注意して利用する必要があるように思えた。過去に一時的に愛用していたツールだっただけに、少し残念。

Gemini 3.0 Proが何でも作れてスゲーぞ！というのは最近SNSで話題になっていましたが、デザイン面においても優れており脱帽です。
これまでClaude Code(Max Plan)とCursorをメインに使ってきましたが、Antigravityに乗り換えるのもありかもしれないと強く思わせてくれた結果となりました。

デザインセンスの無い人はプロンプトで出しゃばり過ぎない方が良い

結果を見て誰もが感じたところと思いますが、指示厨パターンの方では、一部モデルでは工夫が見られつつも、基本的には地味で退屈な成果物となってしまいました。
特に配色がアプリ内のテーマ色に合わせてブラウン系のみの指定としてしまったことが、最も単調なデザインの拍車をかけたように感じます。
AIは良くも悪くも基本的に指示に忠実なので当然と言えば当然かもしれませんが、デザインセンスが無い人が背伸びして細かにデザイン部分にも踏み込んでプロンプトを設計すべきでは無いのでしょう。
よく分からん領域に関してはある程度お任せすることで、AIは概ねその領域でのベストプラクティスに則って判断してくれるはずです。
そうすると今度は「何かどっかで見たことあるなこれ」感はどうしても出てしまいますが、素人が適当にいじくり回すよりはずっとマシのように感じました。

本当の地獄はこれからだ

今回の成果物は単なるスタート地点に過ぎず、これをベースに、何度もAIと方向性を擦り合わせて、自身の理想とするUIUXに近づけていく工程が必要です。
私の場合はセンスが無い癖にUIに変に拘りがある方なので、この工程が特に時間が掛かります。
それを踏まえると一発目の成果物よりも、私としてはAIの思考時間の短さ(トライアンドエラーのスパンの短さ)や、バグ率の低さ、指示の意図を正確に汲み取り実装に繋げる力なども非常に重要だったりもします。
その観点の場合、ランキングの順位は上に挙げたものとは全く違ったものになるかもしれません。
よって、本結果だけを見て優劣を判断するのは早計なのは間違いないので、飽くまでも参考までにぜひご自身でもお試し頂けたらと思います。

---

筆者について

「個人 x AI」で戦う孤独な個人開発者です。独りビジネスや、フリーランスエンジニアの生々しい実態、その軌跡や過程で得られた知見を赤裸々に発信しています。
記事が気に入りましたら、いいねやフォローを頂けたら嬉しくてむせび泣きます。

取り組んでいるプロジェクトや、記事の詳細版などにご興味のある方はぜひ yukapero.com を覗いてみてください。
SNSでも積極的に活動していますので、是非繋がりましょう！ @yukapero_com

X: @yukapero_com
Web: yukapero.com