講習でハンズオンでたくさん作ってきました。
結論は、1つだけに渡すなら Antigravity です。
ただし、一番きれいに作るなら「Stitch → Antigravity → Codex」の順番がよいです。
目的が、単なる文章LPではなく、デザイン感を参考にしつつ、中央寄せ・SNSバー削除・幅調整・問い合わせ導線まで整えたLP制作なら、デザイン解釈+HTML/CSS実装+細部調整が必要です。
| ツール | 向いている役割 | 今回の使い方 |
|---|---|---|
| Stitch | デザイン案・UIラフ作成 | 最初の見た目作りに強い |
| Antigravity | 実装・複数ファイル管理・調整 | 本番LP化に一番向く |
| Codex | 既存コード修正・品質チェック・細部改善 | 仕上げ、崩れ修正、レスポンシブ確認に向く |
Stitch は、自然言語から高精度なUIデザインを作る用途に向いています。GoogleはStitchを「自然言語から高忠実度UIを作成・反復・共同編集できるAIネイティブなデザインキャンバス」と説明しており、URLからデザインシステムを抽出したり、DESIGN.mdで他の開発ツールへルールを渡せる点もあります。つまり、team-mir.ai 風の見た目を最初に作るにはかなり相性がよいです。(blog.google)
ただし、Stitchだけで完成させるより、デザインの方向性を作る道具と考えた方がよいです。フォーム、実ページの細かいレスポンシブ、既存サイトへの組み込み、CSSの詰めは別途必要になります。
Antigravity は、今回のように「LPを実際に作る」作業に一番向いています。GoogleのCodelabでは、Antigravityは通常のコード補完ではなく、計画・コード作成・Web閲覧まで行う自律エージェントを管理する「Mission Control」を持つ、エージェントファーストの開発環境と説明されています。
つまり、参照サイトを見ながら、LP構成、HTML/CSS、レスポンシブ、問い合わせ導線までまとめて実装させるなら、Antigravityが一番現実的です。
Codex は、既存コードの修正、品質チェック、リファクタリングに強いです。OpenAIはCodex CLIを、ローカル環境で安全かつ効率的に高品質なソフトウェア変更を行うクロスプラットフォームのソフトウェアエージェントと説明しています。
今回なら、Antigravityで作った後に「HTML構造の整理」「CSSの重複削除」「レスポンシブ崩れ修正」「不要なSNSバーや外部導線の除去」「見出し階層の確認」などをCodexにやらせるとよいです。
最短で作る場合
Antigravityに一本化。
まとめた制作指示をそのまま渡して、実際のサイトを参考にLPを作らせる。
見た目を重視する場合
Stitchに先に渡して、デザイン案を作る。
その後、Antigravityに「このStitch案をベースに実装」と渡す。
品質まで詰める場合
Stitch → Antigravity → Codex。
最後にCodexで、HTML/CSSの整合性、レスポンシブ、閉じタグ、不要コード、CTA導線を点検する。
まず Stitch で見た目の方向性を作る。
次に Antigravity で実装する。
最後に Codex でコードチェックと微調整。
ただ、手間を減らしたいなら、Antigravityに直接渡すのが一番バランスがよいです。
Stitchは「デザイン案を複数見たいとき」に使う、という位置づけで十分。



