0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

OpenAI Codex デスクトップ完全ガイド — Skills・Plugins・Automationsを使いこなす

0
Posted at

この記事は @DeRonin_ さんによる以下の X ポストの動画(約103分)を日本語でまとめたものです。

元動画: https://twitter.com/DeRonin_/status/2048823420977119727

はじめに

OpenAI Codex のデスクトップアプリは、コーディング支援にとどまらず、デザイン・ドキュメント作成・調査・自動化まで幅広く対応できる AI エージェントプラットフォームです。この記事では約103分の完全ガイド動画の内容を日本語でまとめます。


Codex デスクトップアプリの主要機能

動画冒頭で紹介されていた機能一覧がこちらです。

Codex アプリの機能一覧とデモ画面(0分頃)

プロジェクト管理とファイル整理

コンピューターのローカルフォルダと1対1で紐づく「プロジェクト」単位でチャットを管理します。チャットで生成したファイルは自動的にプロジェクトフォルダ内の outputs/ に保存され、フォルダ内のファイルは @ファイル名 で参照できます。Finder で開くボタンから即座にアクセス可能です。

並列マルチタスク

複数のチャットスレッドを同時進行できます。ひとつのエージェントが実行中でも、別のチャットで新しいタスクを開始できます。完了すると青いドットで通知され、タスクが終わり次第確認・次の指示を出せます。

Skills(スキル)と Plugins(プラグイン)

スキルは「再利用可能なレシピ」、プラグインは「そのレシピを Codex にインストールするパッケージ」です。Google カレンダー・Gmail・Figma・Remotion など数百の既製プラグインがあるほか、外部 API と skill creator を組み合わせて自前のカスタムスキルも作れます。スキルは次のセッション以降 /スキル名 または @スキル名 で呼び出せます。

Automations(自動化)

「毎週金曜4時に週次カレンダーサマリーをメールで送って」など自然言語で定期タスクをセットできます。Automations タブで一覧確認・テスト実行・編集が可能です。

Computer Control(コンピューター操作)

エージェントがマウスとキーボードを文字通り操作します。Xcode でアプリをビルドする・ブラウザを操作するなど、API が存在しない GUI アプリにも対応できます。

インアプリ画像生成

プロンプトだけで画像を生成してそのまま作業に活用できます。動画では靴ブランドのプロダクト画像や iOS アプリアイコン10案を生成するデモが行われました。背景なし(透過)での生成も可能です。

ステアリング(Steer)機能

エージェントが処理中でも、テキストや画像を貼り付けて「この箇所を修正して」と即座に方向転換できます。通常はプロンプトがキューに積まれて順番待ちになりますが、「Steer」ボタンで割り込み入力できます。

Terminal 統合(Claude Code)

デザイン重視のタスクは、ターミナルから claude --dangerously-skip-permissions で Claude Code を起動して対応できます。動画内では Codex のデザイン精度に限界を感じた場面で Claude Code に切り替えて、ランディングページやスライドデッキの仕上げを行っていました。

Canva エクスポート

作成した PowerPoint ファイルはワンクリックで Canva に開き、手動で最後の5〜10%を仕上げられます。


Skills(スキル)と Plugins(プラグイン)の違い

動画中盤では Excalidraw スキルを使って構造図が自動生成されました。

Skill と Plugin の構造を Excalidraw で図解(10分頃)

Skill(スキル) Plugin(プラグイン)
定義 特定タスク向けの再利用可能なワークフローパッケージ Codex に追加機能をインストールする単位
役割 指示・リソース・スクリプトをまとめて Codex のタスク処理能力を拡張 スキル・アプリ・MCP Server・統合機能をバンドル
目的 ワークフローを Codex に確実に実行させるレシピ 接続システムとパッケージツールへのアクセスを提供

シンプルな覚え方:

  • Skill = 再利用可能なレシピ
  • Plugin = そのレシピを Codex に持ち込めるインストール可能パッケージ

デザインツール連携(Paper / Figma 統合)

Paper(Alpha版)でランディングページを自動生成中(30分頃)

Codex は Figma ライクなデザインツール Paper(Alpha 版) と統合できます。

デモの流れ:

  1. 「新会社 Noo Shoo のロゴ画像を使って、Paper 上に直接ランディングページを作って」と指示
  2. Codex が Paper MCP アクションを確認し、ヒーロー画像の透過素材を選択
  3. デザイン方針を自動決定: editorial-tech・ウォームニアブラックニュートラル・シアンアクセント
  4. 4 セクション構成(Hero・パフォーマンスストリップ・プロダクトストーリー・CTA/フッター)で自動構築

Paper は AI エージェントとの連携を前提に設計されたデザインツールで、Figma の直接編集より直感的な操作が可能です。


Automations(自動化)機能

Automation の設定画面(35分頃)

Automations はチャットに「毎週〇〇して」と書くだけで作成できます。動画では次の2つがデモされました。

週次カレンダーサマリー
Google カレンダーと Gmail のプラグインを接続した後、「毎週金曜4時に今週の予定をサマリーしてメール送信して」と指示するだけで設定完了。翌日の実行予定もすぐ確認できます。

月次 YouTube レポート
SuperData API を使った YouTube Researcher スキルを作成後、「毎月最終日にそのスキルで今月の動画を分析して Word 文書にまとめて」と指示。フック分析・再生数順の表付きレポートが自動で届きます。


Part 2 ハイライト:6プロジェクトの並列作成

動画の後半では「Chorus(AI エージェント学習アプリ)」を題材に、以下の6つを同時並行で作成しました。

タスク 使用ツール
iOS アプリ(デザイン + 実装) Swift・Xcode・Supabase・モバイルデザインスキル
Web ランディングページ Tally・React・Claude Code・Vercel
ローンチ動画 Remotion プラグイン・Claude Code
投資家向けデッキ PowerPoint スキル・Claude Code・Canva
X 投稿オートメーション Typefully スキル
プロジェクト計画書 Markdown(チェックリスト)

各タスクに指示を送ったら、完了通知を待たずに次のタスクへ移ることが並列作業の核心です。「プロンプトを入力したら離れる」というシリアルタスクの積み重ねが、実質的なマルチタスクになります。


まとめ

Codex デスクトップアプリは コーディングだけでなく、デザイン・ドキュメント・調査・自動化 まで対応できる総合 AI エージェントプラットフォームです。

  • Skills + Plugins の組み合わせでどんなワークフローも自動化できる
  • Automations により定期的なリサーチ・レポート作成を完全自動化
  • デザインツール連携 で非エンジニアの業務にも活用可能
  • マルチタスク(指示を出したら次へ移る)が AI 時代の核心スキル
  • Claude Code との使い分けがポイント:Codex は汎用オーケストレーション、Claude Code はデザイン精度が必要な場面で補完

タスクの規模や精度要件に合わせてモデルや処理負荷を選択できる点も Codex の強みです。


📝 動画詳細ガイド


Part 1 — 基本操作マスター編

アプリのダウンロードとプロジェクト管理

ブラウザで「Codex app download」と検索して chatgpt.com からダウンロードできます。初回起動時は ChatGPT に似たチャット画面が表示されますが、中身は全く別物です。

Codex の最大の特徴は ローカルフォルダと連携したプロジェクト管理 です。チャットを始める前に「どのフォルダで作業するか」を指定します。指定したフォルダが「プロジェクト」になり、エージェントが作成したファイルはすべてその outputs/ フォルダに自動保存されます。

プロジェクトのサイドパネルからは Finder でフォルダを開いたり、チャット内から @ファイル名 でファイルを参照できます。30個以上のプロジェクトを作っても、Command+G の検索でチャット名や内容から即座に見つかります。

パーミッション設定では「フルアクセス」モードにするとエージェントが承認なしで作業を進められます。モデルは GPT-5.4、処理負荷は Extra High がデフォルト推奨です。


スキルとプラグインの使い方

スキルとプラグインはよく混同されますが、本質的な違いは次の通りです。

スキルはエージェントへの「レシピ」です。特定タスクをどう実行するかの手順書です。プラグインはそのレシピをインストール可能な単位にパッケージ化したものです。感覚的には「プラグイン = スキルの入れ物」と覚えると整理しやすいです。

新しいプラグインの機能を確認したいときは、新しいチャットで @Figma このプラグインでできることを全部教えて のように聞くのが最速です。応答の▼(キャレット)を開くと思考過程も確認できます。


実践デモ:Google カレンダー + Gmail でオートメーション化

Google カレンダー連携とオートメーション設定の様子(15分頃)

Google カレンダープラグインのインストールは、Plugins から「Google Calendar」を選んでブラウザでサインインするだけです。

連携後は次のような操作が一連の会話で完結します。

  1. 「今週のイベントを一覧にして」→ カレンダーの予定が全件表示
  2. 「週次サマリーをメールで自分宛てに送って」→ Gmail で即送信
  3. 「毎週金曜4時にこれをオートメーションにして」→ 週次タスクとして登録完了

Automations タブで確認すると、次回実行日時・ステータス・テスト実行ボタンが表示されます。作成後も「Gmail スキルを必ず使うように」など自然言語で編集できます。


Figma と Paper MCP でデザインを生成

Figma プラグインの主な用途は「既存の Figma ボードをコードに変換する」です。逆方向(AI にデザインを生成させて Figma に配置する)には向いていません。

その役割を担うのが Paper(Alpha 版)です。Paper は AI エージェントとの連携を前提に設計されたデザインツールで、次のような手順で動作します。

「new shoe PNG(背景なし)を使って、Paper 上にランディングページを作成して」
↓
Codex が Paper MCP を呼び出してデザイン方針を決定
↓
Hero・パフォーマンスストリップ・プロダクトストーリー・CTA の4セクションを自動構築

チャットを「ミニウィンドウで開く」に設定すると、Codex を最小化した状態でサイドに浮かべながら Paper を確認できます。

また Codex には ステアリング(Steer) という機能があります。通常 AI が作業中にプロンプトを入力するとキューに積まれて順番待ちになりますが、「Steer」ボタンを押すと処理中でも即座に割り込めます。画面のスクリーンショットを貼り付けて「ここが重なっているから修正して」と伝えると、エージェントが作業の途中で軌道修正してくれます。


カスタムスキルを自作する:YouTube Researcher

外部 API と組み合わせれば、Codex にない機能を自作スキルで追加できます。ここでは YouTube のトランスクリプト取得スキルを例に手順を示します。

ステップ1 : API を探す

「YouTube トランスクリプトを取得できる API のトップ5を教えて」と Codex に聞くと、SuperData・Transcript API・YouTube Transcript.io などが提案されます。SuperData は月100件まで無料です。

ステップ2 : スキルを作成する

新しいチャットで次のように入力します。

skill creator を使って、SuperData API で特定チャンネルの
最新10本の動画トランスクリプトを取得・要約できるスキルを作成して。
API キー: [貼り付け]

skill creator と入力することでスキル作成に特化したモードになります。

ステップ3 : スキルを使う

作成完了後、新しいチャットを開いて「YouTube Researcher」と入力すれば使えます。

Riley Brown の最新10本の YouTube 動画を調べて、
トランスクリプトを取得してドキュメントにまとめて。
どの動画がうまくいったか、フック(イントロ)の分析も含めて。
サムネイルも入れて。

完成したレポートにはフックの勝敗分析が含まれており、「Claude is taking over(緊急感・大きな市場転換)」「Claude Code Leak」などが高評価。バイブコーディング系の動画は低パフォーマンスという分析が出力されました。

その後「毎月末にこのスキルで今月の動画を分析して Word レポートを自動作成して」とオートメーション化しています。


Part 2 — 6プロジェクトを並列で作り上げる

ここからは「Chorus(AI エージェント学習アプリ)」を題材に、6つのプロジェクトを同時並行で作成するデモです。
「指示を出したら離れて次に移る」というシリアルタスクの積み重ねが核心です。

プロジェクト計画の立て方

まず「My New Business」フォルダを作成して新しいプロジェクトを立ち上げます。計画書はチャットから Markdown ファイルとして作成します。

スクリーンショットを添付して:

「これを見てチェックリスト形式の計画書を作って。
 項目は iOS アプリ・Web ランディングページ・
 モバイルアプリデザイン・ローンチ動画・投資家向けデッキ・
 X 投稿オートメーションの6つ。
 上部にアプリのアイデアも記載して。」

アプリ「Chorus」のコンセプト:AI エージェントについて学べるプラットフォーム。エージェントツールの比較・スキルのライブラリ(コピペで即使用可能)・学習コンテンツを提供する iOS アプリです。


iOS アプリ:デザインから TestFlight まで

スクリーンデザインスキルの作成

claude.ai/design の新しいデザインツールからエクスポートした手順書をそのまま Codex に貼り付けて「同じことができるモバイルデザインスキルを作って」と指示するだけで、カスタムスキルが完成します。

「モバイルデザインスキルを使って、Chorus アプリの画面を
 基本的な Apple スタイルで作成して」

完成するとプロトタイプリンクが表示されて、Learn・Platforms・Skills・Saved の4タブ構成のモックアップが確認できます。

Xcode でのビルド

「Chorus という名前の Swift モバイルアプリを作って。
 今は画面中央に Hello, this is Chorus と表示するだけでいい。
 完了したら Xcode プロジェクトを開いて。」

Xcode + iOS シミュレーター(または実機)で「Play」を押すたびに最新のビルドが反映されます。画面デザインのスクリーンを統合したら Supabase を接続します。

Supabase 接続と認証

Supabase は AI エージェントのデファクトデータベースです。MCP を設定後に Codex を再起動すると接続が反映されます。再起動後「接続できたら全テーブルを作成して」と指示するとスキルカテゴリ・プラットフォーム・スキル・保存アイテムのテーブルが自動生成されます。

認証はメール+パスワードで実装しました(最初 Google サインインを試みましたが Supabase のネイティブメール認証が最短経路でした)。Supabase でメール確認をオフにするとすぐにサインインできます。

最終的に TestFlight へのアップロードまで完了しています。


Web ランディングページ:Tally + React + Vercel

フォームの準備(tally.so)

tally.so でウェイトリストフォームを作成してテンプレートから氏名・メールアドレスの入力フォームを設定します。完了したら「埋め込みコード」をコピーします。

React アプリとして動かす

「tally.so を使っています。このフォームをサイトに埋め込んで
 React アプリとしてローカルで動かして。デザインは後で。」

Claude Code でスタイリング

Codex はデザインが苦手なので、ターミナルから Claude Code を呼び出します。

claude --dangerously-skip-permissions
「このページのスタイルを全部忘れて。
 Chorus アプリのコードを見てフォントとデザインを揃えて。
 Tally の埋め込みはそのまま残して。
 テキスト最小限・シンプル・コンバージョン重視で。」

Claude Code が数分で大幅に改善してくれます。完成後は「Vercel にデプロイしてパブリックリンクをください」で公開完了です。


ローンチ動画:Remotion プラグイン

Remotion でモーショングラフィック動画を作成中(55分頃)

Remotion プラグインをインストールして新しいチャットで @remotion と入力するだけで使えます。

「Chorus アプリのローンチ動画を作って。
 まずテスト動画として:アプリの各画面スクリーンショット(添付)を
 iPhone モックアップにして白背景でアニメーションさせて。
 localhost で動くようにして。」

localhost:3031 を開くとタイムラインエディタが表示されます。時刻指定は 秒.フレーム 形式(例:2.20 = 2秒20フレーム)で行います。

処理中でもステアリングで随時修正できます。グリッド線を表示してエージェントに座標(例:「X軸1040・Y軸540」)を渡すと正確に位置合わせできます。

デザインの精度が必要な箇所(アニメーション・カラーカード・カットの質感)は Claude Code に任せると格段に良くなります。BGM は MP3 ファイルをメッセージに添付して「50%音量で追加して」と指示するだけです。


投資家向けデッキ:チャットフォークと Canva 連携

チャットをフォーク

モバイルアプリのチャットを右クリックして「Fork into Local」を選択すると、同じコンテキストを引き継いだ新しいチャットが作れます。これを「Investor Deck」に名前変更して作業します。

「アプリの機能・アイコン・スタイルを分析して
 同じデザインの投資家向けスライドデッキを作成して。
 PowerPoint スキルを使って。
 投資家が2026年4月に何を求めているか調べてスタイルを合わせて。」

Claude Code でリファイン

claude --dangerously-skip-permissions
「このデッキを見てテキストを減らしビジュアルを増やして。
 チャートや図を追加して読みやすくして。スライドは増やさなくていい。」

Canva でエクスポート

PowerPoint ファイルの横に「Canva」アイコンが表示されています。クリックするだけで Canva が開いて最後の仕上げができます。アニメーションも付加できます。


X 投稿オートメーション:Typefully スキル

Typefully(複数 Twitter アカウントのスケジュール管理ツール)の API キーを取得して次のように指示します。

「Typefully の API を調べてフル制御できるスキルを作成して。
 Riley Brown アカウントでテストして(フルーツ絵文字で識別)。
 API キー: [貼り付け]」

スキル完成後はオートメーション化します。

「毎朝3つの X 投稿ドラフトを作成するオートメーションを設定して。
 Typefully コントロールスキルを使って。」

完成:全タスクのまとめ

動画の最終時点で達成した成果がこちらです。

タスク 成果
iOS アプリ TestFlight に公開(Learn・Platforms・Skills・Saved 機能付き)
Web ランディングページ Vercel で公開・Tally フォーム動作確認済み
ローンチ動画 Remotion + Claude Code で初稿完成
投資家向けデッキ Canva でエクスポート・手動仕上げ済み
X 投稿オートメーション 毎朝3ドラフト自動生成をスケジュール設定
プロジェクト計画書 全6項目チェック完了

動画からの学び:
AI エージェントはタスクに1〜2時間かかることもある。そのあいだ待つのではなく「別のエージェントに新しい指示を出す→離れる」を繰り返すのが AI 時代の生産性の核心です。

0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?