CodexとClaude Codeにまったく同じタスクをお願いしてみたよ
こんにちは！株式会社Rabeeのデザイナーのakaneです。
今回は、CodexとClaude Codeにまったく同じ依頼をしてみたらどんな結果になるかな？を試したので記録します。想定した利用シーンは「要件定義フェーズで、デザイナーがAIコーディングエージェントを相棒にする」です🐊
なお、今回はClaude CodeについてはSonnet 4.6、CodexについてはGPT-5.3-Codex（推論をExtra highに設定）を使っています。指示の渡し方など、大きく改善できそうな余地があればご教示ください。
Codexって？Claude Codeって？
CodexとClaude CodeはどちらもAIコーディングエージェントです。自然言語でタスクを伝えると必要なコードを出力してくれます。おそらくデザイナーにとってはClaude Codeのほうが聞き馴染みがあると思います。
元々、個人的にはClaude Codeだけを使っていましたが、ふとCodexの使い心地はどうなんだろう？と思ったので、まったく同じタスクをお願いして比較してみました。
要件定義フェーズで発生しそうなタスクをお願いしてみる
今回CodexとClaude Codeに手伝ってもらったのは、Webサービスにおける1機能のUI検討。「こういう気付きがあったから、2パターンのUIを比較・検討したい。助けてくれるかな？」と、ざっくりとお願いしました。
依頼の全文は以下です。機能に関わる部分はダミーテキストに置き換えていますが、構成はAIに渡した文章とまったく同じです。
今日、docs.mdに記載した内容の気付きがあったので検証したい。2パターンのUXを検証できるようなプロトタイプを作ってくれますか？Aパターン、Bパターンとしてタブで切り替えて、どちらもすぐに確認できる画面をつくってほしいです。
上記の文章中に登場している「docs.md」とは、自分がその日に得た気付きをまとめたテキストです。こちらもAIにあわせて渡しました。
## 今日の1シェア
https://gumroad.com/discover
## これは何？
- 形式問わずあらゆるデジタルコンテンツを販売できるプラットフォーム
- 自社で開発しているセミナー管理システム「EventHub（仮称）」のUI改善のヒントになりそうなのでシェア
## Gumroadを見て気付いたこと
- EventHubも「セミナーを公開する」ではなく「チケットを発行する」を主軸に考えればよかった、と気付けた
- これまでは「無料の勉強会」を作るのか「有料のセミナー」を作るのか、最初にユーザーに選ばせる操作があった。有料のセミナーの場合は個々のデータを別々で発行させていた
- しかし「チケットを発行する」という行為を主軸に置けば、どんな種類の集まりであっても、公開に必要な情報は一律で整理できたはず
## Gumoradはどうやっていろんな種類のコンテンツをカバーしてる？
- コンテンツの種類はたくさんあるが、どのコンテンツも販売に必要な「カバー画像」「価格」「購入によって得られる権利」は必ず指定させる。それらを必須項目にしてる
→ 「チケットを発行する」を基本思想に据えると、各セミナーデータに必ず「カバー画像」「価格」「購入によって得られる権利」を紐付けることを必須にできて、EventHubの動線も少しシンプルにできたのかもしれない。と思った
## こうできたかもしれない（改善案の比較）
これまでの設計：
- 作成フローの最初に「無料イベントを作る」か「有料セミナーを出品する」かユーザーに選ばせる
- 選択によってまったく別のモーダルが出る
これからの設計案：
- セミナー情報を登録するときに「無料」or「有料」を、選べる
- 公開するよ → 無料？有料？ → 有料にするんだったらこれも入力してねタスクの依頼文には「2パターンのUXを検証できるようなプロトタイプを作って」「Aパターン、Bパターンとしてタブで切り替えて、どちらもすぐに確認できる画面をつくって」と書いています。Claude Code、Codexはそれぞれどんな出力をしてくれるでしょうか。
1. Claude Codeのアウトプット
まずはClaude Codeに出力してみてもらいました。期待するのは、2パターンのUIを比較・検討できるプロトタイプです。1回目のアウトプットは以下でした。
想定した通り、2パターンのUIをタブで切り替えて、使用感をスムーズに確認できるプロトタイプを作ってくれました。比較したい内容も、ざっくりとしたドキュメントから適切に読み取ってくれていて、人間側（私）の思考が整理された感覚があります。
その後、3回のやり取りを経て、実際の管理者により近い体験ができるプロトタイプに調整しました。一般的な管理画面に多い、Table形式のUIから操作できるようにしています。
2. Codexのアウトプット
同じ内容をCodexにも渡し、出力してみてもらいました。繰り返しになりますが、期待するのは、2パターンのUIを比較・検討できるプロトタイプです。1回目のアウトプットは以下でした。
初見で、どうやって操作するんだろう？と迷いました。タスクとして依頼した「Aパターン、Bパターンとしてタブで切り替えて、どちらもすぐに確認できる画面」だけを作ってもらえたらよかったのですが、補足テキスト、メモなど、独自に+αで実装された機能が多いです。
UIを検討するプロトタイプとしては微妙です。先ほどのClaude Codeと比較すると、自分の思考がぼんやり遠ざかっていく感覚がありました。
その後、Claude Codeの出力を思い浮かべながら4回のやり取りを経て、Table形式のUIに整頓。ただし、基本操作はできるようになりましたが、レイアウトの崩れや分岐の破綻はありました。完璧と言える状態ではありません。
ふわっとした思考を一緒に整理するなら、Claude Codeのほうが好き
以上、あくまで1つのユースケース、1つのタスクに過ぎませんが、CodexとClaude Codeを使い比べてみました。今の所感としては、私が普段AIと一緒にやりたいと思っている思考の整理含むプロトタイプ作成は、Claude Codeのアウトプットのほうが好きです。
同じAIコーディングエージェントでも、実際に使ってみるとアウトプットが少しずつ違うことがわかりました。気になったらまず10分触ってみる、って大事ですね🐊
・ ・ ・
Rabeeは、一緒にはたらく仲間を募集しています。気になったらぜひWantedlyやコーポレートサイトを見てみてください。
