OpenAI Codex UIデザインガイド：Oil UIで作るWebサイト、管理画面、アプリ
OpenAI CodexとGPTシリーズは、コード実行、複雑な状態の連携、データ密度の高いUIに強みがあります。Oil UI Skillと組み合わせると、その実装力を、見やすいレイアウトと使いやすいインタラクションにつなげられます。リアルタイムに試せる書体ファウンドリーのサイト、タイムラインのドラッグでログをそろえる運用監視コンソール、390×844の複数画面サーフ予報アプリまで同じ手法で作れます。
重要なポイント
- npx skills add oil-oil/oil-ui でCodexにデザインワークフローを導入し、コードを書く前にレイアウトの重心と色の抑制を確立します。
- Codexは実際に動くインタラクションを得意とします。「字重を変えるとライセンス価格を即時計算」「タイムラインをドラッグするとトポロジーとログのハイライトが同期」といった連携をプロンプトに明記すると、静的な展示ページよりはるかに効果的です。
- 同じタスクブリーフから、Codexに大きく異なる複数の方向を作らせられます。ギャラリーのOrvoの9方向、Atelier VoldersとFonderie Mercierのシリーズがその例です。
- 1440×900と390×844の実ビューポートのスクリーンショットとサブエージェントのブラインドレビューを組み合わせ、テーブルのはみ出し、文字サイズの不連続、余分な罫線を取り除きます。
npx skills add oil-oil/oil-ui実行後、対話形式のリストでCodex / OpenAI Agentのディレクトリを選択してください。
CodexがUIで得意なことと、陥りやすい盲点
ギャラリーの作品の80%以上は、GPT / Codex系モデル（GPT 6.1 Sol、GPT 6 Luna、GPT 6 Astraなど）とOil UIで制作されています。実際の成果を見ると、Codexは本物のロジックを伴うUIを特に得意としています。「Fieldwork Type」では文字を入力しながら字幅とライセンス料金を変更し、「Nightwatch」では障害の時間帯をドラッグしてトポロジー図とデプロイマーカーを連動させ、「Vesper」では異常な請求を絞り込んでWebhookペイロードを展開できます。
一方、デザイン上の制約がないと、Codexも「エンジニアのデバッグパネル」のような画面を作りがちです。すべての項目を平場に並べ、罫線を引きすぎ、状態ボタンを一列に積み、密なテーブルの枠線の中に主次関係を埋もれさせてしまいます。Oil UIは、先に視覚的な優先順位を確立し、余分な要素を減らすために役立ちます。
| 作品とモデル | UIの形式 | 中心的なインタラクション | ビューポートと状態設計 |
|---|---|---|---|
| Fieldwork Type (GPT 6.1 Sol) | 独立系書体ファウンドリーのWebサイト | オンラインの書体テスターと用途に応じて即時計算するライセンスセレクター | 1440×900から幅390pxまでレスポンシブ対応。テスター展開時と購入時の状態を含む |
| Nightwatch (GPT 6.1 Sol) | 運用監視と障害対応 | 時間範囲のドラッグに合わせてトポロジー、デプロイマーカー、ピーク時のログを同期 | 1440×900の4状態：正常、警告中、ピーク調査、リリースとの関連確認 |
| Vesper (GPT 6.1 Sol) | API使用量の請求管理画面 | 使用量のしきい値で顧客を絞り込み、異常な請求明細の確認と支払いの再試行 | 1440×900の3状態：通常ダッシュボード、異常請求ドロワー、コマンドパレット |
| Tide (GPT 6.1 Sol) | サーフィン・潮汐予報アプリ | タイムラインのドラッグで波高、風向、潮汐曲線、入水の推奨を同時に更新 | モバイル390×844。単一ページと3画面並列のscreens.htmlを提供 |
Codexで「方向比較 → 状態の実装 → スクリーンショットレビュー」を進める
CodexでOil UIを使うときは、大きなタスクを明確な段階に分け、各段階に具体的な完了条件を設けるのがおすすめです。一度に数千行の未検証コードを生成させないようにします。
Skillをインストールし、実際のタスクブリーフを渡す
npx skills add oil-oil/oil-ui を実行してインストールします。Codexに渡すブリーフには、プロダクトの位置づけ、中心となる対象、必須状態、ビューポートを含めてください。
npx skills add oil-oil/oil-ui複数方向を並べて比較し、主方向を一つに決める
実際のコンテンツを使い、構図、書体の印象、色の明度が明確に異なる3～4案をCodexに作らせます。一つを選んだら、落選した案の部品を主案に寄せ集めないようにします。
URLパラメーターや複数画面ページで重要な状態を固定する
ギャラリーの「Nightwatch」や「Vesper」のように、?state=incident や screens.html を使い、3つの重要な業務状態を直接開けるビューにすると、一つずつスクリーンショットを撮って検証しやすくなります。
100%と200%のスクリーンショットで要素を減らし、ブラインドレビューを行う
各状態を実際にレンダリングしてキャプチャし、折り返しのずれ、余分な区切り線、コントラスト不足の補助文字がないかを確認し、修正してからタスクを終えます。
Codexに適したタスクプロンプトの例
Codexへのプロンプトでは、「ユーザーがどのコントロールを操作し、画面のどこが連動して変わるか」を具体的に書くほど、プロダクトとしての実感が生まれます。次の文は直接書き換えて使えます。
Oil UIを使って、[プロダクト名と種類（例：AIチーム向けのAPI使用量・請求管理コンソール）]をデザインして実装してください。デスクトップのビューポートは1440×900です。
- 中心タスク：サブスクリプションプランとリアルタイムのAPI使用量を管理し、当期の請求額と異常な請求を確認します。状態や使用量のしきい値で顧客を絞り込み、各レコードの明細行、支払い、Webhookのタイムラインを開けるようにしてください。
- 重要な連動：フィルターを変えるとリストと上部のトレンドが同時に更新されます。異常な請求を開くと、支払いの再試行、クォータ調整、請求書のエクスポートを直接行えます。
- 納品する状態：1) 日常の概要とリアルタイムフィルター、2) 異常請求の詳細と復旧操作、3) クイックコマンドパレットの3状態を実装し、ブラウザーでスクリーンショットを撮って確認してください。この構成はギャラリー作品「Vesper」の実際のタスクプロンプトをもとにしています。自分の業務上の対象に置き換えてください。
実際に動くギャラリー作品とプロンプト
1440pxまたは390pxのライブデモを開き、モデルとプロンプトが最終的なUIにどう表れたかを確認できます。
Fieldwork Type
独立系タイプファウンドリー
独立系タイプファウンドリーのWebサイト（1440×900を基準とし、幅390までレスポンシブ対応）。ファーストビューではフラッグシップ書体を主役にし、訪問者が任意のテキストを入力して、サイズ、ウェイト、字幅を調整できるようにする。その後には、ファミリーのウェイト表、文字セット、使用例と、用途（デスクトップ、Web、アプリ）別に選んでカートに追加できるライセンスを配置する。 タイプテスターとライセンス選択がこの作品の中核。入力に応じて組見本が変わり、オプションを選ぶたびにライセンス価格が更新されるようにする。ファーストビュー、テスターパネルを展開した状態、ライセンス選択をデザインする。
作品とプロンプトを見る →
Nightwatch
運用監視・インシデント対応
中規模プラットフォームチーム向けの監視・オンコールツール（1440×900）。英語のインターフェースとし、サービストポロジー、レイテンシー、エラーレート、トラフィックのグラフ、最近のデプロイ、ログ、トレースを表示する。インシデント時には、アラート、現在のオンコール担当者、インシデントのタイムラインを示す。 中核はインシデントの進行。障害が起きているサービスと影響を受ける下流サービスがトポロジー上で明確に分かるようにする。時間範囲をドラッグすると、グラフ、デプロイマーカー、ログの時間がそろい、どのデプロイが問題を引き起こしたかを確認できるようにする。 正常な概要、アラートとトポロジー上の影響経路を強調した進行中のインシデント、エラーピーク時にログとトレースを開いて原因デプロイを特定する状態の3状態をデザインする。
作品とプロンプトを見る →
Vesper
API使用量請求コンソール
AI・開発者ツールチーム向けに、API使用量の請求と顧客請求書のコンソールをデザインする。英語のインターフェースで、デスクトップのビューポートは1440×900とする。ユーザーはサブスクリプションプランとライブAPI使用量を管理し、現在の請求サイクルの未払い額と請求書の例外を確認し、ステータスや使用量のしきい値で顧客・請求書を絞り込み、レコードを開いて明細、支払いと Webhook のタイムライン、イベントペイロードを確認できる。支払いの再試行、クォータ調整、請求書のエクスポートを含める。 3つの主要状態を実装する：収益と使用量の傾向、顧客または請求書リスト、ライブフィルターを備えた日常のワークスペース。使用量の内訳、ステータスタイムライン、復旧アクションを備えた例外請求書の詳細ビュー。クイックコマンドパレット。オフラインで使える `index.html` を納品し、`shots/desktop.png`、`shots/state-1.png`、`shots/state-2.png` を1440×900、DPR=2で撮影する。
作品とプロンプトを見る →
Tide
サーフィン・潮汐予報アプリ
サーファー向けのサーフ・潮汐予報アプリ（390×844）。保存したサーフスポットのリストと、各スポットの当日および翌7日間の波高、周期、風向・風速、潮汐曲線、おすすめ時間帯を表示する。 潮汐とコンディションは時間とともに変化するため、これはデータビジュアリゼーションの作品とする。タイムラインをドラッグすると、波、風、潮位が一体となって更新されるようにする。スポットリスト、単一スポットの詳細、タイムラインを特定時刻へドラッグする状態をデザインする。`index.html` と、3画面を横に並べた `screens.html` を納品する。
作品とプロンプトを見る →CodexでOil UI Proを使う
リスト―詳細、キャンバス―プロパティ、タイムライン、ノードグラフなど10種類の専門ワークスペースの骨格をCodexに使わせたい場合、既存フロントエンドリポジトリの散らかったスタイルを改修する場合、最大3ラウンドの厳密なブラインドレビューを行う場合は、Oil UI Proをインストールできます。
npx github:oil-oil/oil-cli install oil-ui-proよくある質問
ギャラリーに同じプロダクトのCodex作品が複数あるのはなぜですか（Orvoには9バージョンあります）？
同じプロダクトブリーフが、異なるデザイン方向でどう表現されるかを示すためです。Orvoの9作品は、同じプロダクトの位置づけと3段階の価格（$0 / $24.99 / $34.99）を共有しながら、「Launch Garden」「Tandem」「Coastal Workshop」「Open Creative Studio」などの方向ごとに、レイアウト、色調、語り口が大きく異なります。
CodexでモバイルUIを作るとき、縮小したWebページになるのを防ぐには？
プロンプトで390×844のビューポートを明示し、操作できるindex.htmlと複数画面を並べたscreens.htmlの両方を要求してください。Oil UIは、デスクトップの3カラムを無理に1カラムへ詰め込むのではなく、親指で届く範囲、下部またはセグメントナビゲーション、1画面1主タスクを軸にモバイルUIを組み立てるようモデルを導きます。
Codexが作るダークモードはくすんだり眩しかったりしがちですが、Oil UIではどう処理しますか？
プロダクトの使用場面に合わせて明暗を決めます。例えば夜間の車載UI「Yantu」や運用監視「Nightwatch」は暗色、日常の読書やフォームツールは明色を使います。高彩度の発光色は主要な操作経路と警告状態に限定し、ページ全体がネオンパープルになるのを防ぎます。
Oil UIオープンソース版を導入済みの場合、Proへはどう切り替えますか？
npx github:oil-oil/oil-cli install oil-ui-pro を実行してProをインストールしたら、旧オープンソース版のディレクトリを削除してください。Proにはオープンソース版の全機能が含まれています。