【生成AIでLP制作を効率化】Claude CodeやCodexなど7ツールを比較し、出力をチューニングした話

サービスの概要を入力するだけで、LPらしい画面が数分で生成される。

生成AIによって、LP制作の初速は明らかに上がりました。

以前であれば、構成を考え、Figmaでデザインし、HTMLやCSSへ落とし込む必要がありました。

現在は、文章で要件を伝えるだけで、構成、デザイン、実装まで進められるツールが増えています。

ただし、実際に生成してみると、別の問題が出てきます。

見た目は整っているのに、何のサービスか伝わらない。

必要なセクションは揃っているのに、どこかで見たSaaSのLPに見える。

修正を頼むと、直してほしくなかった部分まで変わってしまう。

「LPを生成できるか」だけなら、多くのツールがすでに合格点に達しています。

差が出るのは、初回出力の完成度、サービス固有の表現、修正のしやすさ、実装後の扱いやすさです。

そこで今回は、次の7ツールに同じ条件でLPを作らせ、生成品質を比較しました。

• Claude Code
• Figma Make
• v0
• Bolt
• Lovable
• Codex
• Gemini

さらに、単発のプロンプトで比較して終わるのではなく、Claude CodeへCLAUDE.md、カスタムスキル、デザインシステムを導入し、出力品質をどこまで改善できるかも試しました。

最初から見栄えの良いLPを出すツールと、ブランドの判断基準を蓄積して品質を高められるツールは、分けて評価する必要があります。

今回作成したLP

今回は議事録AIという一般的なお題を与えてみます。

各ツールには、次の情報を共通して渡しています。

• サービスの概要
• 想定ユーザー
• ユーザーが抱えている課題
• サービスの特徴
• 導入するメリット
• 導入までの流れ
• よくある質問
• CTAの遷移先

比較時には、各ツールの標準的な生成方法を使いました。

特定のツールだけに参考サイトや詳細なデザインルールを渡すと、ツールそのものより入力条件の差を比べることになるためです。

Claude Codeのカスタマイズは、共通条件による比較を終えたあと、別の検証として行っています。

最初に入力した共通プロンプト

最初から細かなデザイン指定を入れると、プロンプトを作る能力の比較になってしまいます。

そのため、初回生成では必要な情報と最低限の条件だけを入力しました。

Minute AIは、オンライン会議や対面会議の音声を文字起こしし、要点、決定事項、担当者、期限を自動で整理するサービスです。

営業、採用、社内会議など、読者が利用場面を想像しやすく、LPに必要な情報も一般化しやすいため、この題材を選びました。

各ツールには、次のプロンプトを入力しています。

以下のサービスについて、無料トライアルの申し込みを目的としたLPを作成してください。

サービス名：
Minute AI

サービス概要：
オンライン会議や対面会議の音声を文字起こしし、
会議の要点、決定事項、担当者、期限を自動で整理する法人向けサービスです。

Zoom、Google Meet、Microsoft Teamsなどの会議で利用できます。
会議後には、議事録とタスク一覧が自動で作成され、
参加者へ共有できます。

想定ユーザー：
- 会議の多い企業で働くビジネスパーソン
- 営業、採用、企画、プロジェクト管理を担当している人
- 会議後の議事録作成や情報共有に時間を取られている人
- 会議で決まったタスクの抜け漏れを減らしたいチーム

ユーザーが抱えている課題：
- 会議中にメモを取るため、会話に集中できない
- 会議後の議事録作成に時間がかかる
- 決定事項や担当者が曖昧なまま会議が終わる
- 欠席者への情報共有に手間がかかる
- 会議で決まったタスクが実行されない
- 過去の会議内容を探しにくい

サービスの特徴：
- 会議音声を自動で文字起こしする
- 要点、決定事項、担当者、期限を自動で整理する
- 会議後に議事録を参加者へ共有できる
- 過去の議事録をキーワードで検索できる
- Zoom、Google Meet、Microsoft Teamsと連携できる
- 日本語と英語の会議に対応する

導入するメリット：
- 会議中にメモを取る時間を減らせる
- 議事録作成の負担を減らせる
- 決定事項と次の行動を明確にできる
- 欠席者にも会議内容を共有しやすくなる
- 過去の議論や判断を後から確認できる

CTA：
「14日間無料で試す」

遷移先：
無料トライアル申し込みフォーム

LPには、以下の要素を含めてください。

- ファーストビュー
- 会議や議事録に関する課題
- サービスによる解決方法
- 主な機能
- 導入するメリット
- 利用開始までの流れ
- 利用シーン
- よくある質問
- 無料トライアルへの導線

信頼感があり、業務で使いやすそうだと感じられるデザインにしてください。

一般的なSaaSのテンプレートに見えすぎないようにし、
会議の音声が議事録とタスクへ変わる流れを視覚的に表現してください。

過度なグラデーションや抽象的な装飾は避けてください。

PCとスマートフォンの両方で閲覧できるようにしてください。

文章、画像、アイコン、レイアウトは、
不足している情報を補いながら作成してください。

存在しない導入企業、受賞歴、利用者数、削減率は作成しないでください。

実装方法や使用するライブラリは、
各ツールの標準的な方法に任せます。

この題材であれば、各ツールの違いを次の箇所で比較しやすくなります。

会議中と会議後の変化をどう見せるか
文字起こしと要約の違いを説明できるか
議事録画面をどのように表現するか
「時間短縮」以外の価値を提示できるか
営業、採用、社内会議などの利用場面を描き分けられるか
無料トライアルまでの導線を自然に設計できるか

文章や条件を揃えたうえで、各ツールが不足部分をどう補完するかを確認しました。

7ツールの初回出力

各ツールには、初回生成後に同じ修正指示を入力しました。

現在のLPには、一般的なSaaSのテンプレートに見える部分があります。

以下を修正してください。

- ファーストビューだけで、工場向けのメーター点検サービスだと分かるようにする
- 抽象的なアイコンよりも、メーター、カメラ、点検画面の利用場面を優先する
- 同じ形のカードが続く構成を減らす
- 課題と解決方法の対応関係を分かりやすくする
- CTAを「詳しく見る」ではなく「対象設備について相談する」に統一する
- 現在の配色とフォントは維持する
- 指示していないセクションは変更しない

Claude Code

Opus5ですがなんとも言えないクオリティですね・・AI生成と人目でわかるのでこれは正直期待外れかもしれません。

ただCCならではのリモート環境のチューニングややスマホから操作できるなどのメリットはどうしても有るのでそこは無視できません。

ちなみにセッションクリアして、Fable5で実行してもほぼおなじ物が出てきたのは驚きです笑

ClaudeDesign

Opus5のEffortMediumで、正直結構微妙なデザインになりますね。

テンプレ感というかデザインとしても独創性があるとはいえなさそうです。

Figma Make

Defaultモデルが内部的に度のモデルを使っているかわからないですがすこし行けているベンチャー感あるLPになった感じで、余白や情報の強弱も適度で読みやすく感じます。

ただどこかAI生成感が絵文字アイコンなどにより感じられるのは残念なところです。

地味にFigmaMakeは既存の他社公開のデザインシステムをベースにできたり、プロンプトの磨き込み機能、Skillの設定などもできるのは良かったです。 なによりFigmaはそれをFigma上で手で直せるのが何より良いですね。

v0

v0Maxという内部モデルで出力しましたが、一番バランスが良い印象です。

アイコンや画像の生成もそこまで違和感ないですし、かなり使い物になりそうですがAIがつくったとバレないというレベルではないのかもしれません。

Bolt

BoltStandartというエージェント利用しましたが、一番クオリティ低い印象です。 AI生成感が強すぎるトンマナだと感じました。

figmaMakeほどではないですが、公開されているデザインシステムやコンポーネントライブラリを参照して作ることが可能なようです。

LPテンプレートも豊富にあるのでそこはモデルサプライヤー担い強みではありますね。

Lovable

モデルを選択させてもらえないのが安いプランのせいなのかは不明ですが、アニメーションなどが音声のところについているのは良いのですが正直シンプル過ぎる印象ですね。

外部デザインではないですが自社としてデザインシステムを構築してそれに準拠させるなどは可能なようです。

こちらもテンプレートがある程度あるのは嬉しいですね。

Codex

5.6Solの最新モデルですが、Sol感ありますねOpus系などと比較するとそれぞれモデルトンマナがあるように感じます。

洋風な感じは否めないですがこれはかなり質の高い人間の作っている感あるのではないでしょうか。

Gemini

GoogleAIStudio上でGemini3.6でMedium実行してみましたが、なんとも言えないクオリティです、ただ生成速度がかなり早かったです、Flashだからだと思うのですがこれは一つ差分になりそう。

7ツールの比較結果

Claude Codeは、初回出力だけでは評価しにくい

7ツールの比較では、できるだけ同じ条件を使いました。

しかしいくら高級なモデルが出てきたとしてもワンショット、つまり一度の出力ではなかなかクオリティが上がりきらないのも現実です。

そのため現実的には外部的なコンテキストやハーナスをどう組み込むのかというワークフローの作り込みが重要になります。

そこで、共通条件による比較とは別に、Claude Codeの制作環境をチューニングしました。

今回は、次の三段階でチューニングしました。

1. CLAUDE.md、カスタムスキル、デザインシステムで「味」を与える
2. 高品質なリファレンスと詳細なコンテキストで推測を減らす
3. レビューと実装を分け、実機テストまで行う

1．CLAUDE.md、スキル、デザインシステムで「味」を与える

まず、Claude Codeが参照する判断基準を、役割ごとにファイルへ分けて置きました。

プロジェクト/
├─ CLAUDE.md                      … 起動時に必ず読む普遍ルール（目的・原則・禁止事項）
└─ .claude/
   ├─ skills/lp-build/
   │  ├─ SKILL.md                 … LP制作の手順・レビュー観点・NG例
   │  └─ references/
   │     └─ design-tokens.md      … 配色・タイポ・余白の具体値
   └─ commands/lp-review.md       … /lp-review レビュー専用コマンド

使い分けの基準はシンプルです。毎回効かせたい普遍ルールはCLAUDE.mdに、特定作業の手順やチェックリストはスキルに置きます。スキルはSKILL.mdのdescriptionだけが起動時に読み込まれ、プロンプトが合致したときに本文が展開されるため、手順を細かく書いてもCLAUDE.mdを膨らませずに済みます。

CLAUDE.mdには、次のような判断基準を入れています。

markdown

# LPの目的
14日間の無料トライアル申し込みを増やす。

# デザイン原則
- ファーストビューだけでAI議事録サービスだと分かるようにする
- 会議音声が議事録とタスクへ変わる流れを見せる
- 同じ形のカードを連続させない
- すべての見出しを中央揃えにしない
- 修正指示がない箇所は維持する

# 避ける表現
- 意味のないグラデーション／抽象的な光や球体
- 汎用的な人物アイコン
- 「会議を革新する」などの抽象的なコピー
- 存在しない実績や数値

デザインシステムはdesign-tokens.mdに具体値まで書き、色やフォントだけでなく用途も指定しました。

markdown

# カラー
- テキスト: #0F172A ／ サブテキスト: #475569 ／ 境界線: #E2E8F0
- アクセント: #2563EB（CTAと「決定事項・タスクの状態表示」のみに限定）

# タイポグラフィ（Inter + Noto Sans JP）
- 本文 16px / 行間1.7、小見出し 20px、セクション見出し 32px
- ファーストビュー見出し 44px

# 余白（8pxグリッド：8 / 16 / 24 / 32 / 48 / 64 / 96）
- セクション上下 96px、要素間 24px

# レイアウト・部品
- コンテンツ最大幅 1120px、本文カラム 640px
- ボタン: 高さ48px・角丸8px・アクセント塗り、ホバーで10%暗く
- カード: 角丸12px・パディング24px・影は 0 1px 3px rgba(0,0,0,.1)

アクセントカラーは決定事項やタスクの状態表示に限定し、機能・利用シーン・導入効果で同じカードを使い回さない、といった具合です。

lp-buildスキルには、実際の出力で起きたズレを追記していきます。ポイントは、descriptionが起動トリガーになることと、感想ではなく再発防止ルールとして書くことです。

markdown

---
name: lp-build
description: Minute AIのLPを作成・修正するときに使う。構成の型、レビュー観点、過去に出たNG例と修正ルールを含む。「LPを作って」「ファーストビューを直して」で起動。
---

## 制作手順
1. references/design-tokens.md を読み込んでから着手する
2. ファーストビューだけでサービス種別が伝わる構成にする

## NG例 → 修正ルール
- NG:「機能」と「利用シーン」が両方3列カード → 交互にレイアウト種別を変える
- NG: 抽象的な光の背景 → プロダクト画面のスクリーンショットに置換

「デザインが微妙だった」ではなく、「機能と利用シーンがどちらも3列カードになった」と記録し、ルールへ変換します。

少し良くなった感じはありますが、mdやSkillファイルを磨き込無必要はありそうです。

2．リファレンスと詳細コンテキストで推測を減らす

ルールを追加しても、サービスや顧客の情報が不足していれば、Claude Codeは空白を推測して埋めます。

そこで、参考デザインを画像やURLで渡します。

参考サイトAからは、広い余白と文字サイズの差だけを参考にしてください。
参考サイトBからは、プロダクト画面を中心に見せる構成を参考にしてください。
配色、文章、ロゴ、固有のレイアウトはコピーしないでください。

顧客情報も、「会議の多いビジネスパーソン」だけでは足りません。導入をためらう理由まで渡しました。

• 会議中はメモを取らず、会話へ集中したい
• 決定事項と担当者を明確にしたい
• 文字起こしや要約の精度が不安
• 会議データの保存方法が気になる
• トライアル後の料金を事前に知りたい

これにより、機能を並べるだけでなく、利用者の不安へ答えるLPになりました。FAQには精度・セキュリティ・対応言語・料金の項目が入り、CTA付近には「クレジットカード登録不要」が表示されています。

Minute AIの画面素材も先に用意し、references/に置いてスキルから参照させました。マイクの抽象アイコンではなく、文字起こし・要点・決定事項・タスク一覧を見せる方針です。

3．レビューと実装を分け、実機で確認する

最後は、「全体的に改善して」と一度に修正させないようにしました。まず、コードを変更せずレビューだけを依頼します。

この手順は/lp-reviewコマンド（.claude/commands/lp-review.md）にまとめ、毎回同じ観点で呼び出せるようにしました。

markdown

現在のLPをレビューしてください。コードは変更しないでください。
次の3点だけを回答してください。
1. 最初に伝わるベネフィット
2. ユーザーが不安になりそうな表現
3. 最初に修正すべき1か所

.claude/commands/のファイルも.claude/skills/のSKILL.mdも、どちらも同名のスラッシュコマンドになります。レビュー結果を確認してから、対象と維持範囲を明示して実装させます。

markdown

先ほどの問題のうち、ファーストビューだけを修正してください。
会議音声が、文字起こし→要点→決定事項→タスクへ変わる流れを見せてください。
現在の配色・フォント・CTA・ほかのセクションは維持してください。

修正対象と維持箇所を分けると、良かった部分まで作り直される問題を減らせます。

確認は次の順番で行いました。

1. スマートフォンのファーストビュー
2. スマートフォンのページ全体
3. PC表示
4. CTAとフォーム
5. アニメーション
6. 公開前テスト

最後に、主要な画面幅での表示、フォーム送信、リンク、キーボード操作、画像サイズ、存在しない実績の混入を確認しました。見た目が完成していても、CTAが動かない、スマートフォンで崩れる、フォームを送信できない状態では公開できないためです。

三段階でどう変わったか

Claude Codeの品質を上げるには、長いプロンプトを一度入力するだけでは足りません。

判断基準を残す。必要な材料を渡す。レビューと実装を分け、小さく修正する。

この三段階を回すことで、単発のLP生成ではなく、修正するたびに精度が上がる制作環境になります。

まとめ

初回のデザイン案を作るなら、Figma MakeやLovableが使いやすい結果でした。UIと実装のバランスではv0、動くたたき台の速さではBolt、要件やコピーの整理ではGeminiに強みがあります。Claude CodeとCodexは、コードを管理しながら改善を続ける用途に向いています。

特にClaude Codeは、次の三段階で評価が変わりました。

1. CLAUDE.md・スキル・デザインシステムで判断基準を固定する
2. リファレンス・顧客情報・素材を渡して推測を減らす
3. レビューと実装を分け、実機テストまで行う

見つかったズレをCLAUDE.mdやスキルへ戻せば、次に作るLPの初回出力から改善できます。

Claude Codeは、一度のプロンプトで完成させるツールというより、制作を重ねながら判断基準を育てるツールでした。