「Claude CodeやCodexがすごいと聞くけれど、LPのコーディングに実務で一番使えるのはどれ？」
「AIで速く作れても、崩れたCSSの手直しに時間がかかるなら意味がないのでは？」
こんな疑問を持っているWeb制作者の方は多いのではないでしょうか。
本記事では、AIエージェントにLP1枚を丸ごとコーディングさせ、Claude Code・Codex・Gemini CLIの3つでデザインの再現度と手直しの量を比べた検証結果を解説します。
同じFigmaデザインと同じプロンプトで比べているので、実務でどのAIエージェントを使えばいいかの判断材料になります。
解説は、Webコーディングをメインに400件以上の案件に関わり、デイトラWeb制作コースのマネージャーを務めるはにわまんです。
・LPコーディングで比較した3大AIエージェント（Gemini CLI・Codex・Claude Code）と使用モデル
・検証の条件（1回の指示・HTML／CSS／JavaScript）とFigma MCPの準備
・各AIエージェントの実装結果（PC・スマホ375px・動く部分）
・最終ランキングと、AIエージェントを実務で使うときの考え方
公式LINEでは、デイトラ受講に関する個別のお悩み相談も承っております！
「デイトラは積極的に情報を開示し、ミスマッチをなくす」方針を取っているので、あなたの状況に合わせて、中立の立場から回答いたします。
LPを丸ごとAIエージェントにコーディングさせる検証の目的
今回は、LP1枚を丸ごと3つのAIエージェントに1発で実装してもらいました。
結果から言うと、ほぼ手直しなしで使えそうなレベルのものがありました。
Web制作をしていると、次のように感じることがあると思います。
- Claude CodeやCodexがすごいと聞くけれど、実務で一番使えるのはどれだろう
- AIで速くなっても、手直しに時間がかかるなら意味がないのでは
AIに任せても、崩れたCSSを直す時間の方が長くなったら本末転倒です。
そこで今回は、実際のLPのデザインを使い、「再現度」と「手直しの量」の2つで比べました。
流れは次のとおりです。
- 検証の条件と3つのAIエージェントの紹介
- 3つのエージェントに実際に実装してもらう
- 結果を確認する
指示を受けて、ファイルの読み書きやコマンドの実行を自分で進めながら作業してくれるAIのことです。チャットで答えを返すだけのAIと違い、実際にファイルを作ったり書き換えたりできるため、LPのコーディングのように「手を動かす作業」を任せられます。
LPコーディングで比較する3大AIエージェント（Gemini CLI・Codex・Claude Code）
今回比較するのは、次の3つです。
| AIエージェント | 使用モデル |
|---|---|
| ① Gemini CLI（Google） | Gemini 3.1 Pro |
| ② Codex | GPT-5.6 Sol |
| ③ Claude Code | Claude Opus 5 |
どれも、AIのモデルを作っている会社が自分たちで出している公式のAIエージェントです。
特徴は、ターミナル上で動き、指示を出すとファイルを読んだり書いたり、コマンドを実行したりしながら自分で作業を進めてくれる点です。
今回は、AIのモデルと、それを動かすエージェントをセットで比較します。
なお、3つともインストールとログインを済ませた状態から始めています。
セットアップの方法やターミナル上での詳しい使い方は今回は割愛するので、初めて使う方は各公式ページで使い方を確認してから進めてください。
文字でコマンドを入力してパソコンを操作する画面のことです。今回の3つのAIエージェントはいずれもターミナル上で動きます。動画ではVS Codeに内蔵されたターミナルから各エージェントを動かしています。
AIエージェントのLPコーディング検証の条件と評価ポイント
題材はデイトラのカリキュラムに登場する「OHA!」のページ
今回使うデザインは、デイトラのカリキュラムの中でも登場する「OHA!」のページです。
かなり長いページですが、このページを丸ごと1回の指示で作ってもらい、どんな結果になるかを比較します。
検証の条件
- Gemini CLI・Codex・Claude Codeのすべてに、同じOHA!のデザインを使って実装してもらう
- シンプルな指示を1回だけ送る
- コードはHTML・CSS・JavaScriptで書いてもらう
- 追加の指示はせず、確認を求められたときだけ許可する
評価ポイントは「見た目の再現度」と「手直しの量」
見るポイントは主に2つです。
- 見た目の再現度（最も重視）：Figmaのデザインカンプを渡して実装してもらった後、デスクトップの画面とモバイルの画面で、どれくらいの再現度で作られているかを確認します。
- 手直しの量：見栄えに近い観点ですが、どれくらい修正する必要があるかを確認します。
この3つのAIエージェントを使い、Figmaのデザインからどれくらいの再現度で作れるかを比較していきます。
Webサイトの完成見本となるデザインデータのことです。今回はFigmaで作られたOHA!のデザインカンプ（PC版とスマホ版）を、AIエージェントにそのまま実装してもらっています。
事前準備：AIエージェントとFigma MCPを接続する
事前準備として、各AIエージェントからFigmaのデザインカンプの情報を見られるようにする必要があります。
そのために、公式のFigma MCPを接続する作業が必要です。
接続方法は公式に載っているので、動画と一緒に進めたい方は公式の手順を参考にしてください。
ドキュメントとしては、Figmaのドキュメントと、Figma MCPサーバーのGitHubのドキュメントがあり、それぞれに接続方法が記載されています。
Gemini CLI・Claude Code・Codexを自分のパソコンに導入したら、記載されているコマンドを使ってFigma MCPサーバーと接続します。
動画内で映っているGitHubのドキュメントには、たとえば次のようなコマンドが載っています。
Claude Codeの場合：
claude mcp add --transport http figma https://mcp.figma.com/mcpGemini CLIの場合：
gemini extensions install https://github.com/figma/mcp-server-guide接続した後は、各エージェントが直接Figmaのデータを見に行けるようになります。
つまり、Figmaと接続してから実装してもらうという流れです。
はにわまんの環境ではすでにFigmaとの連携を済ませているので、ここからFigmaと連携しながらAIエージェントに実装してもらいます。
Claude CodeとFigma MCPの使い方は、こちらの記事でも詳しく解説しています。
Claude Code×Figma MCPの使い方｜デザインカンプ自動コーディング手順
MCP（Model Context Protocol）は、AIエージェントが外部のツールやデータにアクセスするための仕組みです。Figma MCPを接続すると、AIエージェントがFigmaのデザインデータ（レイアウト・色・テキストなど）を直接読み取れるようになり、デザインカンプを見ながらコーディングできます。
Gemini CLIのLPコーディング実力検証
Gemini CLIに送ったプロンプト
まずはGemini CLIに実装してもらいます。
VS Codeのターミナルで、Gemini CLIを接続した環境から実行します。
プロンプトはシンプルに、次のように依頼しました。
Figmaのデザインカンプをもとに、Figma MCPを使用してHTMLとCSSとJavaScriptで再現度高く実装してくださいFigmaのURLは「Copy link to selection」でコピーする
プロンプトの後に、対象となるFigmaのURLを貼り付けます。
Figmaの画面に移動し、今回はデスクトップの見栄えとスマホの見栄えが入っているセクション全体をコピーします。
- Figmaでセクションを右クリック
- 「Copy/Paste as」→「Copy link to selection」を選んでセクション全体のリンクをコピー
- VS Codeに戻ってプロンプトに貼り付け、依頼する
依頼すると、Figmaから情報を取得しながら実装の準備を進めてくれます。
途中で確認を求められることがあるので、問題なければ許可して進めます。
CodexとClaude Codeにも同じ依頼を同時に出す
実装には時間がかかるので、CodexとClaude Codeにも同時に依頼しました。
Gemini CLIに出した依頼内容をコピーし、Codex、Claude Codeの順にそのまま貼り付けて依頼します。
これで、3つのエージェントがそれぞれ同じデザインカンプをもとに実装を進めている状態になります。完成までは時間がかかるので、そのまま待ちます。
Gemini CLIの実装結果（デスクトップ）
最初に完成したのはGemini CLIでした。
作成されたindex.htmlを、Finderで表示してから開いて確認します。
ヘッダー、ファーストビュー、導入実績、ニュース、OHA!について、ムービー、HOW TO USE、メリット、CTA、料金、Q&A、ギャラリー、コンタクトと、デザインカンプの各セクションがひととおり作られています。
ただし、細かいところで表現が崩れている箇所がありそうです。
- Q&Aの「Q」の文字が隠れている
- 「OHA!について」のセクションで、画像の位置が大きくずれている
- 導入実績の画像に背景があるのが気になる
- ファーストビューの位置関係が少しずれている
Gemini CLIの実装結果（スマホ375px）
次に、検証ツールで幅を小さくしてスマホの表示を見ます。
375pxの幅では結構再現度高く表現されているように見えますが、次のような点がありました。
- ロゴの大きさや画像の位置がずれている
- 絶対配置の部分が重なってしまっている
- ステップの番号がデザインとずれている
- メリットの縦並びで、デザイン上はすべて画像が上に来るはずが、画像が下に来ているものがある
- ギャラリーが画面幅からはみ出ている
- コンタクトの細かい感じが違う
- 水平スクロールが出ている（おそらくギャラリーがはみ出ているため）
Gemini CLIの動く部分の確認
- Q&Aのアコーディオン：動く
- 「誕生ストーリーを見る」ボタン：押しても特に反応しない
- ハンバーガーメニュー：特に動かない
Gemini CLIの結果を見た所感
この結果にはいろいろな感想があると思いますが、URLを渡しただけでここまで作ってくれるのが今のAIの現状です。
個人的には、思ったよりもすごいと感じました。
一昔前なら、ここまで完成度高く作れなかったと思います。
年々進化していて、ページ全体のURLをデスクトップ・モバイルで分けずに両方渡しても、どこかのセクションが忘れられることなく実装してくれるところまで来ています。
ただ、Gemini CLIの場合は、細かいところの表現でもう少し改善の余地がありそうです。
ブラウザに標準で付いている開発者向けの機能です。ページ上で右クリック→「検証」で開けます。画面幅を375pxなどに変えて、スマホでの見え方を確認するときにも使います。
Claude CodeのLPコーディング実力検証
VS Codeに戻ると、残り2つのエージェントで確認が求められていたので、許可しながら進めます。
続いて完成したのはClaude Codeです。
Claude Codeは「oha」というフォルダを作り、その中にHTMLファイルを作ってくれていました。
Finderで開いて表示を確認します。
Claude Codeの実装結果（デスクトップ）
このように、かなり完成度高く作られていることが分かります。
パッと見では、特に崩れているところが見当たりません。
Claude Codeの実装結果（スマホ375px）
検証ツールで375pxに縮めて見ていきます。
- 「OHA!について」のセクションも問題なさそう
- HOW TO USEも特に崩れることなく表現されている
- メリットの画像も、画像が上・テキストが下の配置に並び替えられている
- 横スクロールも動き、スクロールバーの色も変更されている
スマホの表示も、特に問題はなさそうです。
Claude Codeの動く部分の確認
- アコーディオン：動く
- ギャラリー：動く
- 「誕生ストーリーを見る」：まだ表現されていない
- ドロワーメニュー：右からスライドして表示される形で作られている
改めてデザインカンプと見比べると、ハンバーガーメニューも表現されています。
全体的に、デザインカンプと見比べても大きな崩れがなく表現されていると言えそうです。
ハンバーガーメニュー（三本線のアイコン）を押したときに、画面の端から引き出しのようにスライドして出てくるメニューのことです。スマホ表示のLPでよく使われます。
CodexのLPコーディング実力検証
最後に、Codexの実装が終わったので表示内容を確認します。
エクスプローラーからindex.htmlをFinderで開いて表示します。
Codexの実装結果（デスクトップ）
まず、ファーストビューが重なって崩れていそうなことが分かります。
ほかは、導入実績、ニュース、OHA!について、ムービー、HOW TO USE（少し枠からはみ出ていそう）、メリット、CTA、テーブル、Q&A、ギャラリー、コンタクト、フッターという形で実装してくれました。
Codexの実装結果（スマホ375px）
375pxで見ていきます。
- 「OHA!について」のセクションの表現が違っていそうで、下の方が多く余っている
- HOW TO USE、メリット、CTAと続く
- テーブルのセクションで、スクロールバーが動いていない
- Q&Aの「Q」と「A」の位置がずれている
- ギャラリー、コンタクトと続く
見ていただくと分かるように、明らかにずれていそうなところが数点あります。
Codexの動く部分の確認
- Q&Aのアコーディオン：動く
- モーダル（誕生ストーリー）：表示される
- ハンバーガーメニュー：表現されているが、ロゴが上にあったり背景が違っていたりする
ボタンを押したときに、ページの上に重なって表示される小窓のことです。今回のOHA!のページでは「誕生ストーリーを見る」を押すと表示される部分がこれにあたります。
AIエージェントのLPコーディング比較 最終ランキング発表
3つとも実装してもらったので、改めてデスクトップの幅1440pxでそれぞれを見比べます。
デザインカンプの再現度という観点で、特に難しそうなポイントごとに比較しました。
ファーストビュー：右側の画像が下にはみ出す表現
ファーストビューで特徴的なのは、右側の画像が少し下にはみ出している表現です。
- Gemini CLI：下が少し隠れていそう
- Codex：下がはみ出すことなく隠れていそう
- Claude Code：デザインに近い表現になっている
「OHA!について」：丸の背景からはみ出す画像
「OHA!について」のセクションは、丸の背景があり、そこからはみ出すように上部に画像が配置される表現です。
- Gemini CLI：画像の配置がデザインと異なる表示になっている
- Codex：正しく表現されていそう
- Claude Code：デザイン通りに表現されていそう
HOW TO USE：ステップの重なり方と人物の横並び
HOW TO USEは、ステップの重なり方と、人物がテキストと横並びになっている点が難しそうなところです。
- Gemini CLI：横並びは合っていそうだが、下揃えがずれていそう。ステップの表現もデザインと異なっていそう
- Codex：テキストと人物の横並びは合っていそうだが、枠の中のテキストが下にずれて隠れて表示されている
- Claude Code：横並びになっていて、ステップの丸の表現とコンテンツも正しく表示されていそう
ギャラリー〜コンタクト
- Gemini CLI：PCに関してはよく表現されていそう
- Codex：問い合わせ項目がずれていそう。チェックボックスの表現も少し異なっていそう
- Claude Code：崩れることなく表現されている
比較結果のまとめ
| 比較ポイント（PC 1440px） | Gemini CLI | Codex | Claude Code |
|---|---|---|---|
| ファーストビュー右側の画像 | 下が少し隠れる | はみ出さず隠れる | デザインに近い |
| OHA!について | 画像の配置がずれる | 正しく表現 | デザイン通り |
| HOW TO USE | 下揃えのずれ・ステップ表現が異なる | 枠内のテキストが下にずれて隠れる | 正しく表示 |
| ギャラリー〜コンタクト | よく表現 | 問い合わせ項目・チェックボックスに差異 | 崩れなし |
全体的に、3つとも全部のセクションを指示に従って再現度高く表現しようと実装してくれていました。
ただ、細かいところの完成度で見ると、Gemini CLIとCodexはところどころ崩れていることが確認できます。
一方で、Claude Codeはパッと見ではあまり指摘するところがないくらいのレベルでコーディングしてくれていました。
指示の出し方次第で結果は変わる
今回の依頼は、かなりシンプルな内容を1回だけ送る形で行っています。
そのため、指示の出し方や使い方によっては結果も変わってくると考えられます。
より完成度を高めたい場合や、コードの作り方にこだわりたい場合は、追加で指示を出すとそれに沿った作り方にしてくれるはずです。
今回の結果を参考に、自分に合うエージェントを使い、指示の出し方を工夫しながら、自分の実務に合う使い方を見つけてみてください。
AIエージェントでのコーディングは「どれだけ速く作れるか」よりも、「デザインとのずれがどれだけ少なく、手直しにどれだけ時間がかかるか」で実務の使いやすさが決まります。今回の検証でも、すべてのセクションを作れるかどうかでは差がつかず、細部の崩れの少なさで差がつきました。
AIエージェントのLPコーディングに関するよくある質問
Q. LPのコーディングで一番デザインの再現度が高かったAIエージェントはどれですか？
今回の検証では、Claude Code（モデルはClaude Opus 5）が一番再現度高く実装してくれました。PC・スマホともに、パッと見ではあまり指摘するところがないレベルでした。
Q. どんな条件で3つのAIエージェントを比較したのですか？
同じOHA!のFigmaデザインを使い、シンプルな指示を1回だけ送り、HTML・CSS・JavaScriptで書いてもらう条件です。追加の指示はせず、確認を求められたときだけ許可しました。
Q. AIエージェントにFigmaのデザインを読ませるにはどうすればいいですか？
公式のFigma MCPを接続します。接続方法はFigmaのドキュメントやFigma MCPサーバーのGitHubのドキュメントに載っており、接続後は各エージェントが直接Figmaのデータを見に行けるようになります。
Q. 実際にどんなプロンプトで依頼したのですか？
「Figmaのデザインカンプをもとに、Figma MCPを使用してHTMLとCSSとJavaScriptで再現度高く実装してください」と送り、続けてFigmaの「Copy link to selection」でコピーしたセクション全体のURLを貼り付けました。
Q. Claude Codeに任せれば手直しはまったく不要ですか？
大きな崩れはありませんでしたが、「誕生ストーリーを見る」の部分はまだ表現されていませんでした。今回は1回だけのシンプルな指示なので、追加で指示を出したり指示の出し方を工夫したりすると、結果は変わってくると考えられます。
AIエージェントを使ったLPコーディングをさらに深く学ぶならデイトラ「Web制作コース」
本記事で解説したAIエージェントによるLPコーディングは、独学でも試すことはできます。
ただし、AIが書いたコードの崩れを見抜いて直し、実務で通用するレベルに仕上げるには、HTML・CSS・JavaScriptの基礎を体系的に身につけておくことが欠かせません。
デイトラの「Web制作コース」は、実務レベルを想定したカリキュラムと、現役プロによる質問対応が特徴のオンラインスクールです。
広告費を最小限に抑え、口コミと品質で支持を得てきたからこそ、業界の数分の一という低価格で学べます。
今回題材にした「OHA!」のページも、デイトラのカリキュラムの中で登場するデザインです。
また動画内でも触れているとおり、デイトラでは新しく「学び放題」が始まり、Web制作・Webデザインなど幅広いスキルをまとめて学べるようになりました。
AIエージェントを使いこなせるWeb制作者を目指したい方は、ぜひ一度カリキュラムをチェックしてみてください。
「自分に合うか不安…」という方は公式LINEへ
「独学とスクール、どちらが自分に合っているか分からない」
「複数のコースのうち、どれを選ぶべきか相談したい」
そんな方は、デイトラ公式LINEに登録してみてください。
自分に合ったコースの診断や、無料の学習動画などの特典もプレゼント中です。
無理な勧誘は一切ありませんので、まずは情報収集として気軽に登録してみてくださいね。
はにわまん（@haniwa008）
業界歴10年以上の現役フリーランスWeb制作者です。Webコーディングをメインに400件以上の案件に関わってきました。技術ブログ「HPcode」を運営し、数千人が受講したデイトラWeb制作コースのマネージャーも務めています。
