噂通りのすごいヤツ「OpenAI Codex」が2ヶ月直らなかったWordPressのメニュー不具合を30分で片付けた話

※本記事は2025年5月時点の体験にもとづいています。OpenAI CodexはChatGPT Plusプランから利用可能です(公式サイト)。

この記事のまとめ

  • hiroshi.todayのナビゲーションメニューに3つの表示不具合があり、3月下旬から5月上旬にかけて複数のAIツールで修正を試みたが未解決だった
  • OpenAI Codexに任せたところ、3回のプロンプトで合計約30分(接続設定含む)で全不具合が解消された
  • 対話型AIとの本質的な違いは「環境に直接アクセスして、調査→修正→検証を自走できる」かどうかにあった
  • コーディングの知識がなくても「やりたいことをゴールとして伝える」だけで作業を委任できた

1ヶ月の沈黙と、その間に変わっていたAIの世界

前回のこのサイトの更新は4月23日でした。約1ヶ月、このブログを放置していたことになります。

言い訳ですが、実は前回更新後、少々体調が悪い状態でゴールデンウィークに突入。後半にちょっとしたイベントのお手伝いをしたあと、思いっきり発熱してしまいました。連休明けの週末を挟んで海外出張が入っていたのですが、出発を遅らせるような失態を演じ、回復もそこそこに海外出張へ突入し、毎日知らない言語で朝から晩まで会議漬けの日々が続いておりました。日程的にも体力的にも、とてもブログに向き合える状態ではなく現在に至っているというような次第です。

ブログを作成するどころか、AIの話題も国際情勢も大きく動いていましたのでそれらのニュースも追けてきたかったのですが、それをままならないような状況でした。時々見かけるYouTubeのショート動画などでも、CodeXがすごいというような話はたくさんあったので気にはなっていたのですが、今週末に至るまで全然触れない状況になっておりました。

ゴールデンウィークの前半ににOpenAI Codexをインストールしてはいたのですが、一度簡単なプロンプトをなげたもののほぼ使わないまま、1ヶ月ぶりにようやく触ることができました。

最初にCodexに任せたのは、2ヶ月以上ClaudeやChatGPTなどを通じて修正しようとしていたこのブログのメニュー不具合の修正だったのですが、結果としてなんと!、約30分で片付きました。今回はその体験をまとめます。


2ヶ月直らなかったメニューの不具合

hiroshi.todayはWordPress + GeneratePressというテーマ構成で動いています。3月下旬にサイトのデザインとカテゴリ構成を大幅に見直したのですが、それ以降、ナビゲーションメニューに複数の表示崩れが残り続けていました。

具体的には3つの問題がありました。PC表示ではドロップダウンメニューの矢印が上端に寄りすぎていること、スマートフォン表示ではハンバーガーメニューを開いたときに下層メニューが全展開状態で表示されてしまうこと、そしてiPadサイズの画面幅(810〜834px付近)でメニューとコンテンツがはみ出すことです。

3月下旬から新たなAIがリリースされるたびに、Claudeの新しいバージョンやChatGPTの新しいバージョンで修正をして一進一退の状態が続いていましたが、どれも納得できるようなところまでは直せないでいました。様々なAIで結構大量なクレジットをこの数ヶ月間使っていたような状況でしたが、何度か試してはうまくいかず、見た目の問題だけなので、「そのうち直そう」と後回しにし続けていました。

繰り返しの修正では、いずれも改善の糸口を見せてくれることはありましたが、一つ直ると別の箇所が崩れる、という状況が続きました。Claudeとのやり取りでは、複数セッションにわたってCSSの全文置き換えを繰り返すループに陥り、最終的に「DevToolsで人間が実際に検証してから再度アプローチを考える」という方針転換を提案される形になりました。つまりAI側からギブアップに近い状態を告げられた形です。

少し落ち着いて、自分でもコードを開いて作業すれば、おそらく直せてはいたと思うのですが、そこに時間を割くメリットも見出せず、次のAIモデルが出たらまた試そう、という状況になっていました。


OpenAI Codexとは何か

OpenAI Codexは、2025年5月にOpenAIが発表した自律型のコーディングエージェントです。ChatGPT内から利用でき、コーディングタスクを渡すと非同期で自走して作業を完結します。

ここで「対話型AIとどう違うのか」という疑問が出てくると思います。私も最初はそこがよくわかっていませんでした。

対話型AIを使う場合、人間がコンテキスト(コードの全文、エラーメッセージ、環境の説明など)をテキストで渡す必要があります。AIは渡された情報だけをもとに修正案を返し、それを人間が適用して、結果を再度AIに伝える——という伝言ゲームの構造になります。

Codexはその前提が異なります。実際の環境(WordPressの管理画面など)に直接アクセスして、調査・修正・検証を自走できます。人間はゴールを伝えるだけです。


実践記録:3回のプロンプト、合計30分

このサイトでも度々Gensparkなどのエージェント型のAIを紹介しているとおり、エージェント型を触るのは別に初めてではありません。ともあれ、みんながすごいすごいと騒いでいるので、MacのCodexアプリに以下のプロンプトを投げ始めました。

プロンプト1回目:調査(所要時間:2分32秒)

最初に投げた指示はシンプルなものでした。

hiroshi.todayのナビゲーションメニューに表示の問題があります。PC・モバイル・iPadのそれぞれで現在どういう状態になっているか確認して、課題を特定してください。

2分32秒後、Codexから返ってきたのは4つの課題と原因仮説のセットでした。

公開側の Hiroshi.Today をPC・iPad・スマホ幅で確認しました。現時点で見えている主な課題はこのあたりです。

見つかった課題

  • iPad縦向き相当の 810〜834px 幅で、モバイルメニューに切り替わらずPC用メニューのまま表示されています。その結果、メニュー幅が画面より約 180〜205px はみ出し、EN / JA と Intelligence Hub が重なります。
  • PC表示でも、ドロップダウン矢印がメニュー文字の右横ではなく上端寄りに見えます。特に横幅が狭いPC・iPad横向きで気になります。
  • スマホ表示ではハンバーガーメニュー自体は出ますが、開いた瞬間に下層メニューがかなり展開された状態で、長くて見通しが悪いです。階層のインデントや矢印位置も少し混み合っています。
  • スマホ幅ではトップ記事の見出し上部が詰まって見え、ヘッダー下の余白・ファーストビューの高さ調整も一緒に見た方がよさそうです。

原因としては、WordPressテーマが GeneratePress、子テーマが hiroshi-today-child で、メニュー周りのCSSとブレークポイント設定が今のメニュー項目数に合っていない可能性が高いです。

簡単な依頼を流しただけにもかかわらず、指摘してほしかった課題をすべて見つけてきてくれたので、この時点で期待が高まりました。

また原因仮説として「GeneratePressのブレークポイントが現在のメニュー項目数に合っていない可能性がある」という指摘もセットで出てきました。さらに、次のステップでWordPress管理画面への接続が必要になるため、その設定方法まで自発的に案内してきました。

プロンプト2回目:修正実行(所要時間:11分22秒)

接続設定を済ませてから、次の指示を出しました。

今日の日付でバックアップファイルを作成してから、修正を実行してください。

11分22秒で完了しました。Codexが行った作業は以下の通りです。

  • 変更前のCSSを日付入りファイル名でバックアップ保存
  • 修正版CSSをWordPressの追加CSS欄に適用
  • 1440px・834px・390pxの3パターンで自ら画面表示を確認し、結果を報告
  • 今回の修正に使ったチャネルのセキュリティ上の対応を自発的に提案

PC版とモバイル版の不具合はこの時点で解消されました。

修正前のスクショ:PC版ではテキストのレイアウトが崩れ、モバイル版では全てのサブメニューも表示されてしまい折りたたみができない

修正後のメニュー:モバイル用のハンバーガーメニューはきちんと展開・折りたたみができるようになって、PC用のメニューも文字や展開ができることを示す↓の表示位置が改善されている。

プロンプト3回目:iPad追加修正(所要時間:6分10秒)

PC・スマートフォンが解消されたので、残るiPad付近の問題について追加の指示を出しました。

「iPad付近の画面サイズで挙動がおかしい箇所があります。確認して修正してください。」

6分10秒で完了。問題の原因が「メニューそのもの」ではなく「横方向のはみ出し」にあることをCodexが自力で特定し、再度バックアップを作成した上で修正を適用しました。検証は1024px・980px・834pxの3パターンに加え、PC・モバイルへの影響がないことも確認しての計4パターン対応でした。

これで全デバイス幅での正常表示が確認できました。

[Before/Afterスクリーンショット:iPad付近の表示]


なぜ対話型AIでは解決せず、Codexで解決したのか

使ってみて初めて、以前の試みがなぜループに陥っていたかが腑に落ちました。

対話型AIとのCSS修正作業は、構造的に「伝言ゲーム」になります。私がCSSを貼り付け、AIが修正案を返し、私が適用し、別の箇所が崩れ、その状態を再度テキストで説明してAIに渡す——このサイクルを繰り返す構造です。AIは実際のサイトを直接「見て」いないため、人間が言語化できた範囲の情報しか扱えません。CSSの複雑な競合や、デバイス幅ごとの微妙な表示差は、テキストで正確に伝えること自体が難しい情報です。

Codexはその前提が根本的に異なります。実際の環境に接続し、複数の画面幅でサイトを確認し、原因を自分で特定してから修正を適用し、また自分で検証する。人間がその過程に介在する必要がありません。私が伝えたのは「メニューがおかしいので直してほしい」というゴールだけでした。

バックアップの作成やセキュリティ面の提案を自発的に行った点も印象的でした。指示していないのに、作業の安全性を自律的に担保しようとする動きが見えました。

ただし、初回の接続設定は対話型AIよりも手間がかかります。WordPress管理画面へのアクセス権限の付与など、Codexが環境に入るための準備が必要です。この設定ステップについてはCodex自身に聞けば案内してもらえますし、一度設定してしまえばその後はスムーズです。セキュリティに関わる詳細の手順はここでは非公開とします。


Codexを試してみたい方へ

OpenAI CodexはChatGPT Plusプラン以上から利用できます(公式ヘルプ:ChatGPTプランでCodexを使う)。利用量はエージェント利用上限としてカウントされ、タスクの規模・複雑さによって消費量が変わります。

WordPressのCSS修正のような用途では、まず小さな課題を一つ渡してみるのがおすすめです。接続設定の方法はCodexに直接聞けば案内してもらえます。

コードが読めなくても、「やりたいこと」をゴールとして伝えられれば作業を委任できます。今回の私のプロンプトもすべて自然な日本語の一文でした。


FAQ

OpenAI CodexはChatGPTと何が違いますか?

ChatGPT(対話型)はテキストのやり取りを通じてコードを提案しますが、実際の環境には直接アクセスできません。つまり大量のコピペでのやりとりが発生します。一方Codexは環境に接続して調査・修正・検証を自律的に実行できるエージェントです。人間が介在しなくてもタスクを完結させられる点が大きな違いです。コネクタを使うことで、たとえばGoogle DriveやNotionなどのデータに接続することも可能です。

コーディングの知識がなくても使えますか?

使えます。今回の私のプロンプトはすべて「〜がおかしいので確認してほしい」「修正してほしい」という自然な日本語でした。CSSやHTMLの知識がなくても、やりたいことをゴールとして伝えれば作業を委任できます。

WordPressへの接続設定は難しいですか?

対話型AIよりは手順が多く、管理画面へのアクセス権限の付与などが必要です。ただし設定方法はCodex自身に聞けば案内してもらえます。一度設定してしまえば、その後の作業はスムーズです。

今回のような修正に何回分のエージェント利用を消費しましたか?

プロンプト3回で完了しました。エージェント利用量はタスクの規模と複雑さで変わるため一概には言えませんが、今回のCSS修正程度であれば大きな消費にはならない印象です。20ドル課金プランの5時間消費制限の3%分くらいでした。


まとめ:「コードを書いてくれるAI」ではなく「作業を委任できるAI」

合計所要時間は約30分(接続設定含む)でした。対して、従来のアプローチは複数のAIツール・多数のセッション・2ヶ月超で未解決という結果でした。

この差は、プロンプトの質や使い方の問題ではなく、「環境に直接アクセスして自走できるかどうか」という構造の違いから来ていたと思います。対話型AIはテキストの伝言ゲームを前提にしており、人間が環境と情報の橋渡し役を担い続ける必要があります。Codexはその橋渡し役が不要で、人間はゴールを渡すだけです。「コードを書いてくれるAI」ではなく「作業を丸ごと委任できるAI」——これが今回の体験から得た一番のフレーム転換でした。

ウェブ制作を専業にしている方にとっては、今回のような作業は日常の一部に過ぎないかもしれません。ただ、普段CSSやHTMLを触らない私のような人間からすると、昔の知識を引っ張り出して調べながらほぼ丸1日かかっていたような作業が、口頭での指示30分で片付くようになったのは、率直に言ってすごい時代になったと感じます。

一方で、こうした作業を担ってきた方々にとっては、仕事の領域が狭まっていくという意味で厳しい変化でもあります。AIが何をどこまでできるのか——そしてまだできないのはどこなのか——を自分の手で確かめておくことは、これからの仕事においてますます重要な経験になっていくと思います。

もう一つ感じていることがあります。AIの利用料金は少しずつ上がってきており、インターネットとは異なり、AIを使える人と使えない人の間に経済的な格差が生まれてくる可能性があるということです。まだ仮説の域を出ませんが、意識しておく必要はあると感じています。

1ヶ月触れないだけで世界が変わってしまっている——今回の更新の空白期間を経て、改めてそれを実感しています。新しいAIに触れ続けることは、これからも意識的に続けていきたいと思います。次にCodexに渡す課題が何になるか、今から少し楽しみにしています。


本記事の調査・執筆の一部にAIツールを活用しています。掲載情報は2025年5月時点のソースに基づいており、内容は変更される場合があります。正確性の確保には最善を尽くしていますが、完全性を保証するものではありません。本記事の情報をもとに意思決定される場合は、公式ソース等での確認を含め、ご自身の判断と責任においてご利用ください。

Please follow and like us:

Discover more from hiroshi.today

Subscribe to get the latest posts sent to your email.

0 0 votes
Article Rating
Subscribe
Notify of
guest

0 Comments
Oldest
Newest Most Voted
Inline Feedbacks
View all comments
Social media & sharing icons powered by UltimatelySocial