OpenAI Codex公式ワークフローガイド:スクリーンショットからのウェブ制作からAI研究まで

·Toolin 編集部

OpenAIが公式に十数個のCodex実ワークフロー事例を更新。Computer Use、/goalによる長期目標、PPT生成、ゲーム開発などの実用シーンをカバーし、Codexの効率的な使い方を手取り足取り解説します。

OpenAI Codex公式ワークフローガイド:スクリーンショットからのウェブ制作からAI研究まで

OpenAI は公式サイトで十数個の Codex 実ワークフロー事例を一挙に更新しました。ウェブページのデプロイ、アプリの構築から、大型プロジェクトの管理、150時間の研究タスクまで、それぞれに対応する操作方法が用意されています。Codex はまもなく大幅な値下げを迎える予定で、今が学んで使い始める最良のタイミングです。

公式事例コレクション:developers.openai.com/codex/use-cases

始める前の準備

  • ChatGPT Pro または Team のサブスクリプションが必要(Codex はサイドバーから開きます)
  • 基本的なターミナル操作を理解していること
  • Codex のトークン消費は通常の ChatGPT 対話よりはるかに多くなる可能性があるため、小さいタスクから始めることをおすすめします

Computer Use:Codex にパソコンを操作させる

Computer Use を使うと、AI があなたのようにパソコンの画面を操作できます。クリック、閲覧、入力によってアプリをまたぐタスクを完遂します。

使い方

  1. Codex App で Computer Use を見つけ、有効になっていることを確認
  2. ダイアログの冒頭に @Computer を付ける、または @Slack、@Messages のように特定のアプリに言及する
  3. タスクと望む結果を描写する
  4. Codex がアクセス権を必要とする際は、アクセスを承認
  5. バックグラウンドで実行を続けさせる

典型的な使い方

@Computer 集中したいので音楽をかけて。
@Computer Notes の中の面接メモを Feishu に追加してください。
@Computer WeCom を確認して、今日の終わりまでに完了すべきすべての項目をリマインドする通知を追加してください。

Computer Use の画面

注意事項

  • 実行中は Mac がロックされないようにするか、Codex の「ロック中の操作」機能をオンにする
  • 2つの Computer Use スレッドで同じアプリを操作させない
  • 各スレッドの終了後には Codex にまとめと最適化を依頼し、ワークフローを繰り返し可能なパターンに変換できる

/goal:Codex に長期目標を与える

普段 AI に作業させるには、そばについて見ている必要があります。/goal が解決するのはまさにこの問題です。Codex に長期目標を与え、その方向に向かって自分で作業を続けさせます。

適したシーン

  • プロジェクト移行:ゲームを新しい技術スタックへ、モバイルアプリを新しいプラットフォームへ、コードベースのフレームワーク乗り換え
  • プロトタイプ制作:ゼロから新しいアプリや機能を作る。PLAN.md と併用して目標を明確に伝える
  • プロンプチューニング:手元にテストセットがある場合、失敗ケースを見せて、プロンプトを直し、評価を再実行させ、スコアが上がるまで反復させる

良い目標の書き方のポイント

  1. 明確な目標と完了条件を1つずつ与える
  2. 最初に読むべきファイル、ドキュメント、計画を伝える
  3. 進捗を証明するコマンドを決めておく
  4. 段階的に進めさせ、簡単な進捗ログを残させる
  5. 途中ではいつでも /goal で状況を確認
  6. 完了時、詰まった時、方向転換の際には、一時停止・再開・クリアを使う

$$slides + $$imagegen:Codex で PPT を作る

PPT 作りで最も骨が折れるのはレイアウトです。Codex には2つの技能が組み込まれています。$$slides は PptxGenJS で .pptx ファイルを直接読み書きし、$$imagegen が画像の生成を担います。

参考プロンプト

$$slides と $$imagegen の技能を使って、以下の方針でこのスライドを編集してください:

- 存在する場合、各スライドの右下に logo.png ファイルを追加する
- スライドX、Y、Zではテキストを左に移動し、画像生成機能で右側にイラストを生成する(スタイル:抽象的、デジタルアート)
- できるだけテキストはテキストのまま、単純な図表はPowerPointネイティブの図表のまま維持する
- 更新後のプレゼンテーションをスライド画像としてレンダリングし、出力結果を確認し、納品前にレイアウトの問題を修正する
- 関連する画像を一括作成する際は、再利用可能なプロンプトや生成指示を保存する

スクリーンショットからウェブページを作る

手元にスクリーンショットやデザイン稿があれば、Codex はそれに合わせてレスポンシブな画面を作れます。その際、プロジェクトが既に使っているフレームワークや書き方にならって進めるため、別の流儀を持ち込みません。$playwright を組み合わせれば、実際のブラウザで複数の画面サイズとスクリーンショットを1つずつ照合し、繰り返し調整できます。

参考プロンプト

私が提供するスクリーンショットと注記を根拠に、現在のプロジェクトでこのユーザーインターフェースを実装してください。

要件:
- 既存のデザインシステムのコンポーネントとマークアップを再利用する
- スクリーンショットをこのリポジトリのユーティリティとコンポーネントのパターンに変換する
- 間隔、レイアウト、階層、レスポンシブ動作を厳密に一致させる
- リポジトリのルーティング、状態、データ取得のパターンを尊重する
- ページをデスクトップとモバイルの両方でレスポンシブにする

検証:
- $playwright-interactive を使ってUIが参照と一致しているか確認し、必要に応じて反復する

Codex でゲームを開発する

ゲームは Codex の能力を総合的に試すシーンです。着手の前に、2つのドキュメントを書かせましょう:

PLAN.md -- ゲームを次の要素に分解します:プレイヤーの目標、コアループ、操作入力、勝敗条件、難度カーブ、ビジュアル方向、技術スタック、マイルストーンの順序。

AGENTS.md -- 技術スタック、取り決め、検証方法を明確に書きます。

ゲーム名
<ゲームジャンル>

技術スタック:
- フロントエンドは NextJS(Vercel にデプロイ)
- レンダリングは <技術を記入>
- バックエンドは Fastify + WebSocket
- データベースは Postgres

取り決め:
- 機能を1つ完成させるごとに build / test コマンドで検証する
- 新機能は PLAN.md に沿って作る
- 画面の見た目は playwright でテストする
- 素材は imagegen で作り、prompt は .prompts に保存する

AGENTS.md に登場する技能をすべてインストールします:$$imagegen、$$playwright、$openai-docs。必要なら Context7 MCP を追加してレンダリングフレームワークのドキュメントを引っ張れます。計画が細かいほど、初版の完成度は高くなります。

Codex で研究を回す

Codex は長期研究アシスタントとしても機能します。あなたが方向づけと判断を担い、Codex が実装、証拠収集、採点、反復を行います。

典型的なケース:タンパク質折り畳みの仮説があり、Goal Mode で3つのものを与えます。科学的方向、動かせるベースラインモデル、自動採点できるベンチマークです。公式事例では、Codex は150時間以上連続で走り、SimplexFold という実験的アーキテクチャを産出しました。

よくある質問

  • Codex はどこで開く? ChatGPT のサイドバー。Pro/Team/Enterprise ユーザーが利用可能
  • トークン消費は多い? 通常の対話よりはるかに多いので、小さいタスクから始めることをおすすめします
  • Computer Use はどんなアプリに対応? 理論上すべてのデスクトップアプリに対応。画面要素の認識を通じて操作します
  • Codex は値下げされる? 海外メディアの報道によると、OpenAI は顧客獲得競争のため大幅な値下げを検討しています

さらに多くの事例:developers.openai.com/codex/use-cases