この記事は「GoQSystem Advent Calendar 2025」10日目の記事です。
はじめに
はじめまして。コーダーの高橋です。
未経験でGoQSystemに入社してから約1年半、主に自社プロダクトのLP（ランディングページ）のコーディングを担当しています。
最近、社内でも「AIでLP制作をもっと効率化できるのでは？」という話題が増えてきました。私自身も日々の実装にClaude Codeを活用していますが、コーダー仲間からは「Codexの生成精度も高い」という声を耳にすることがありました。
そこで今回、Figmaデザインからのコード生成精度を、Claude CodeとCodexの2つで比較検証してみました。
検証条件
使用したデザイン
社内LPの一部セクション（FAQ + CTA）で、PC版とSP版の両方のFigmaデザインを用意しました。
コーディング条件
- Tailwindに
tw-の接頭辞を付ける ※プロジェクト固有のCSS競合回避のため - WordPressテーマ内で使用可能なHTML
-
レスポンシブ切り替えは、768px以上をPCとして扱うため
md:
生成方法
- Claude Code：FigmaMCP（Figmaのデザインを直接読み込むツール）で読み込み
- Codex：同じ要件を満たすプロンプトで依頼
生成結果の比較
対象デザイン
今回比較したのはこちらのデザイン（FAQ＋CTAセクション）です。実際のLPの一部分を切り出しています。
Claude Codeの生成結果
まずはClaude CodeにFigma MCPで読み込ませて生成した結果です。余白や構造の再現度が高く、全体的に忠実な仕上がりになっています。
Codexの生成結果
続いてCodexの生成結果です。こちらは背景グラデーションなどのビジュアル表現が自然で、初期生成の見た目の完成度が高い印象を受けました。
詳細比較
レスポンシブ対応
まずレスポンシブですが、どちらも完全とは言えませんでした。
SP→PCへの切り替えでFAQカードの横並びが崩れたり、ボタンの並び順が違ったりと、人間が微調整する必要があります。
ただし再現度はClaude Codeの方が高く、SP版のpaddingやgapを比較的正確に拾ってくれました。逆にCodexはflexの方向やgapの扱いが甘く、レスポンシブ調整では Claude Codeに一歩譲る結果でした。
余白とTailwindクラスの精度
こちらはClaude Codeに軍配が上がりました。
特にFAQカードの内側余白（tw-px / tw-py）やCTAセクションのテキスト階層の再現など、Figmaのレイアウト情報を正確に解析し、適切なTailwindクラスに変換する精度が強いと感じました。
ビジュアル要素の再現度
背景グラデーションはCodexが圧勝でした。
CTAセクションの青系グラデーションを自然に再現し、デザインカンプに非常に近い仕上がりになっています。Claude Codeはグラデーションが再現されず単色背景になってしまいました。
HTML構造の違い
面白かった点として、Codexの方がHTMLのセマンティック構造を自然に生成する傾向がありました。
article や section を使い、余計な div を減らしながら、セマンティックなマークアップになります。
一方Claude Codeは、div が多くなりがちですが、代わりにデザインの再現度が非常に高く、特に余白やテキストの階層、レイアウトはFigmaに近い結果となりました。
「HTMLとしての美しさ（Codex）」と「デザインの忠実性（Claude Code）」という違いが結果に表れました。
実務での使い分け
個人的には、「Codexで初期生成 → Claude Codeで微調整」という組み合わせが最も効率的に感じました。
Codexで見た目の完成度とHTML構造を整え、Claude Codeで細かい余白やレイアウトを調整していく流れです。
ただし、Codexは命令を具体的に与える必要がある一方、Claude Codeはざっくりした指示でも意図を汲み取ってくれるため、急ぎの調整にはClaude Codeが便利です。
まとめ
改めて整理すると、以下のような結果になりました：
- 構造理解と余白の再現：Claude Code
- ビジュアル表現の初期生成：Codex
- レスポンシブ対応：どちらも人間の微調整が必要
完全自動化にはまだ時間がかかりそうですが、AIツールを適材適所で活用することで、コーディング業務をより効率的にしていきたいです。
