CodexとGoogle Antigravityを実務で比較｜構成はCodex、デザインはAntigravity

OpenAIのCodexとGoogle Antigravityを、Web制作の構成案作成、ワイヤー、デザイン、コード編集で実際に使ってきました。

両方を使い比べたうえで、私の中では、それぞれの得意分野がかなりはっきりしています。

構成案やワイヤーを作る工程では、Codexの方が使いやすいです。一方、すでに構成がある状態からデザインを作る工程では、Antigravityの方が明らかに強いと感じています。

現在は、Codexで構成案とワイヤーを作り、それをAntigravityへ渡してデザインを詰める流れを採用しています。

この記事では、製品の機能やベンチマークを比較するのではなく、Web制作の実務で両方を使った体験をもとに、CodexとAntigravityの違いをまとめます。

CodexとAntigravityを使い比べた結論

先に結論を書くと、文章や要件の整理、構成案、ワイヤー、コード編集はCodex、デザイン作成はAntigravityという使い分けが、私の環境では最も進めやすいです。

デザイン力については、Antigravityの方が高いと感じています。

Codexでもデザインは作れますが、デザインの指示をかなり細かく調整しなければ、ワイヤーに近い見た目のまま進んでしまうことがありました。細かく指示すれば忠実に反映してくれる一方で、こちらが想定していなかったようなデザインが出てくるケースは少ない印象です。

Antigravityは、ざっくりした指示でも、私が見たときにAIっぽさを感じにくいデザインが出てくることがありました。最初の出力をそのまま採用するわけではありませんが、そこから調整を重ねることで、かなり納得できる状態まで持っていけています。

ただし、文章や要件を整理してページ構成へ落とし込む工程では、Codexの方が使いやすいです。

そのため、どちらか一方ですべてを進めるのではなく、それぞれの強みが出る工程で使い分けています。

構成案やワイヤーはCodexの方が作りやすい

Codexを使っていて特に強いと感じるのは、文書を構造化する力です。

Webサイトの構成案を作るときは、用意した文章や要件を整理し、どの内容をどの順番で掲載するかを考える必要があります。

この工程では、Codexの方が自分の意図に近い形へまとめやすいと感じています。

文章として渡した情報を整理し、ページの構成として組み立て、そのままワイヤーや簡易的なプロトタイプへ落とし込む流れが進めやすいためです。

私にとって、ワイヤーは完成後のデザインを作るものではなく、ページに掲載する情報と、その順番を確認するための設計図です。

この設計図を作る工程では、現時点でもCodexを使うことが多くなっています。

Antigravityでも構成案やワイヤーを作ることはできますが、両方を使った範囲では、文章や情報の整理についてはCodexの方が安定している印象です。

Codexのデザインはワイヤー感が残りやすかった

Codexで作ったワイヤーを、そのままCodexでデザインまで進めることもできます。

ただ、私が実際に試した範囲では、デザインの指示を細かく調整しなければ、いつまでもワイヤーのような見た目が残ることがありました。

構成としては成立していても、デザインとして見たときに、AIで作ったような印象が抜けにくいという感覚です。

もちろん、Codexでデザインができないわけではありません。

こちらが完成形をある程度想定し、それを具体的な指示として伝えれば、内容を忠実に反映してくれます。

そのため、作りたいデザインがすでに決まっていて、それを再現してもらう使い方では、Codexでも問題なく進められます。

一方で、まだ完成形が決まっておらず、デザインの方向性やパターンそのものをAIから提案してほしい場合は、少し進めにくさを感じました。

複数の案を検討したいときも、こちらから違いを細かく指定する必要があり、想定していなかったものが自然に上がってくるケースは、私が使った範囲では多くありませんでした。

Codexは、指定した内容を正確に反映する力は高い一方で、デザインの案出しについては、こちら側で方向性を考えて指示する場面が多いというのが現在の印象です。

デザイン力はAntigravityの方が高いと感じた

デザイン作成については、Antigravityの方が明らかに強いと感じています。

構成案やワイヤーがある状態で、デザインの方向性をざっくりと伝えた場合でも、Codexと比べて、ワイヤーの延長に見えにくいデザインが出てきやすかったためです。

私が細部まで指定していない段階でも、ある程度デザインとしてまとまったものが出てくることがありました。

また、こちらが事前に想定していなかった方向のデザインが出てくることもあります。

最初から完成形が決まっていないときは、実際に案を見てから方向性を考えたいことがあります。そうした場面では、Antigravityの方がデザインのパターン出しや案出しを進めやすいと感じました。

もちろん、最初に出てきたデザインをそのまま使用しているわけではありません。

出てきた案を確認し、違うと感じた部分を伝えながら調整しています。何度かやり取りを重ねることで、かなり納得できるものを作れました。

Codexでは、こちらがデザインを考えて指示を追加していく感覚が強くありました。

Antigravityでは、まずデザイン案を出してもらい、それを見ながら方向性を詰めていく感覚に近いです。

この違いから、デザイン力についてはAntigravityの方が高いと考えています。

Antigravityでも調整は必要

Antigravityの方がデザイン力は高いと感じていますが、ざっくり指示を出すだけで、毎回そのまま使えるデザインが完成するわけではありません。

実際には、最初に出てきた案を確認し、自分が違うと感じた部分を伝えながら調整を重ねています。

それでも、Codexでワイヤーに近い状態から細かいデザイン指示を一つずつ追加していくよりも、Antigravityから出てきたデザインをもとに調整する方が進めやすいと感じました。

特に、こちらが完成形を決め切れていない場合は、先に何らかのデザイン案が出てくることで、それを基準に考えられます。

出てきたものを見て、採用したい部分と変更したい部分を判断できるためです。

Antigravityの初案が常に正しいということではありません。

ただ、デザインの出発点として使いやすく、そこから調整を続けることで、納得できる状態へ近づけやすいというのが、実際に使った感想です。

Codexでワイヤーを作り、Antigravityでデザインを詰める

両方を使った結果、現在はCodexでワイヤーやプロトタイプを作り、Antigravityでデザインを詰める流れが定着しています。

最初にCodexへ文章や要件を渡し、ページの構成を整理します。

構成が固まったら、実際に画面として確認できるワイヤーや簡易的なプロトタイプを作ります。

この段階では、デザインを完成させることよりも、掲載する内容とページ全体の流れを固めることを優先しています。

その後、Codexで作ったワイヤーやプロトタイプをAntigravityへ渡し、デザインを作ります。

すでに構成が決まっているため、Antigravityでは文章や情報の順番を大きく変えるのではなく、デザインを詰めることに集中できます。

出てきたデザインを確認し、調整を重ねながら完成に近づけていきます。

必要に応じて、最後にCodexへ戻し、既存コードへの反映やコードの整理を行います。

この流れにしてから、構成を考える工程とデザインを考える工程を分けやすくなりました。

Codexだけでデザインまで完成させようとするよりも、Antigravityだけで構成から始めるよりも、それぞれを得意な工程で使う方が、私には合っています。

AIを使った制作フロー全体については、別の記事「ワイヤー・デザイン・実装をAI化する制作フロー｜AI Studio / Stitch / Antigravity」でもまとめています。

こちらの記事では、AI Studioでワイヤーとデザインを作成し、Antigravityで実装する、Googleのツールで統一した制作フローを紹介しています。

コード編集の安定感はCodexの方が高い

実用面では、Codexの方が安定感があると感じています。

特にコード編集については、現在もCodexを使うことが多いです。

Antigravityでもコードの作成や編集はできますが、実務で継続的にコードを触る場合は、私の環境ではCodexの方が安定していました。

そのため、Antigravityでデザインを詰めたあと、既存の環境へ反映したり、コードを調整したりする工程でCodexへ戻すことがあります。

もちろん、Codexが出したコードを無条件に採用しているわけではありません。

実際の変更内容や動作は確認します。

それでも、日常的なコード編集に利用した結果として、現時点ではCodexの方が実務へ取り入れやすいと感じています。

デザイン力だけで比較するとAntigravityですが、制作や開発の仕事全体で考えると、Codexを使う時間の方が長くなっています。

実務利用ではChatGPT ProとGoogle AI Proを利用中

Codexは実務で多用しています。

以前はChatGPT Plusで利用していましたが、私の使い方では利用範囲が足りなかったため、現在はChatGPT Proへ変更しています。

コード編集を継続的に依頼することが多く、日常的に使うツールになっているためです。

これは、すべての人にChatGPT Proが必要という意味ではありません。あくまで、自分の環境でCodexを実務的に多用した結果、ChatGPT Plusのままでは足りなかったという体験です。

費用は上がりましたが、実務で利用する頻度を考えると、自分にとっては必要な変更でした。

一方、GeminiはGoogle AI Proを契約して利用しています。本記事で書いているAntigravityの使用感も、この環境で実際に利用した体験に基づいています。

Antigravityの方がデザイン力は高いと感じていますが、コード編集を含めた実用面ではCodexの安定感も欠かせません。

そのため、現時点ではCodexをChatGPT Pro、GeminiをGoogle AI Proで利用し、構成やコード編集はCodex、デザインはAntigravityという形で使い分けています。

Gemini側に期待していること

理想としては、構成案の作成からデザイン、実装まで、一つの環境で進められる方が使いやすいです。

Antigravityのデザイン力には満足しています。

そのため、Gemini側でもCodexと同じくらい文章や要件を整理できるようになれば、GeminiとAntigravityを中心とした制作フローへ一本化したいと考えています。

ただ、現時点で私が使った範囲では、文書を整理し、ページ構成やワイヤーへ落とし込む工程はCodexの方が使いやすいです。

デザインではAntigravityを選びますが、構成案から始める場合は、まだCodexを外せません。

今後のモデルやアップデートには期待していますが、現在は一つに絞らず、実際の使用感をもとに使い分けています。

CodexとAntigravityはどちらを使うべきか

構成案やワイヤーを作りたい場合は、私はCodexを使います。

文章や要件を整理し、ページの構造へ落とし込む工程を進めやすいためです。

すでに構成案があり、そこからデザインを作りたい場合は、Antigravityを使います。

ざっくりとした指示からでもデザイン案が出てきやすく、出てきたものを見ながら調整できるためです。

既存コードを継続的に編集する場合は、現在のところCodexを使うことが多くなっています。

どちらか一方ですべてを完結させることもできますが、私の場合は、一つに絞るよりも工程ごとに使い分ける方が進めやすいです。

CodexとAntigravityのどちらが優れているかというよりも、構成、デザイン、コード編集のどこで使うかによって、評価が変わると感じています。

ただし、デザイン力だけで比較するのであれば、私の評価はAntigravityです。

まとめ

CodexとGoogle AntigravityをWeb制作で使い比べた結果、私の中では役割の違いが明確になりました。

Codexは、文書を整理し、構成案やワイヤーへ落とし込む力が強いです。

デザインも作れますが、細かく指示しなければワイヤーのような見た目や、AIっぽい印象が残りやすいと感じました。

こちらが作りたいものを具体的に伝えれば忠実に反映してくれる一方で、想定していなかったデザインが出てくるケースは多くありませんでした。

Antigravityは、ざっくりした指示でもデザインとしてまとまったものが出てきやすく、こちらが事前に想定していなかった案が出てくることもありました。

最初の出力をそのまま使うのではなく、調整を重ねることで、かなり納得できるものを作れています。

現在、私が最も進めやすいと感じているのは、Codexで文章と構成を整理し、ワイヤーやプロトタイプを作ったあと、Antigravityでデザインを詰める流れです。

コード編集が必要になった場合は、再びCodexを使います。

デザインはAntigravity、構成とコード編集はCodex。

現時点では、この使い分けが最も実用的だと感じています。

※本記事は、筆者自身の制作環境と使用経験に基づく内容です。すべての利用環境で同じ結果になることを示すものではありません。

よくある質問

CodexとAntigravityでは、どちらがWebデザインに強いですか？

私が実際に使った範囲では、Antigravityの方がWebデザインに強いと感じています。

ざっくりした指示でも、ワイヤーの延長に見えにくいデザインが出てきやすく、こちらが想定していなかった案が出てくることもあったためです。

Codexではデザインを作れませんか？

Codexでもデザインは作れます。

作りたいデザインを細かく指示すれば、その内容を忠実に反映してくれます。

ただし、私の使い方では、指示が大まかな場合にワイヤーのような見た目が残りやすく、デザインの案出しには進めにくさを感じました。

構成案やワイヤーの作成にはどちらが向いていますか？

私の場合はCodexの方が向いています。

文章や要件を整理し、ページの構成として組み立てる工程を進めやすいためです。

CodexとAntigravityはどのように使い分けていますか？

最初にCodexで文章と構成を整理し、ワイヤーや簡易的なプロトタイプを作ります。

その後、Antigravityへ渡してデザインを作り、調整を重ねます。

最後に既存コードへの反映やコード編集が必要な場合は、再びCodexを使っています。

なぜCodexをProで利用していますか？

私の環境では、Codexを実務で多用するとChatGPT Plusでは足りなかったためです。

コード編集を含めて日常的に利用しているため、現在はProへ変更しています。