この投稿の結論はシンプルです。
Codexの新しいデザイン作業フローは、UI修正の往復を短くするのに実用レベルで使えます。
2026年4月16日に、sabakichiさん（@knshtyk）が「Codexにデザインモードｷﾀ━━━(ﾟ∀ﾟ)━━━!!」と投稿しました。
この1本を起点に、今すぐ使うための手順だけに絞って整理します。
まず画像で全体像をつかむ
上の画像は、該当投稿の添付画像です。
最初にここを見て「何が変わったか」を掴むのが早いです。
sabakichiさん実測の使い方（ここだけ読めば動く）
結論は、右上の「コメントモード」からDOMを直接指定してコメントを付ける です。
そのまま通常チャットで修正指示を続ければ動きます。複数コメントにも対応します。
Webアプリ開発での手順は次です。
- サイドパネルを表示する
- パネルを全幅に拡大する
+ボタンでブラウザを追加する- 自分でローカルファイルや対象ページを開く
- コメントモードで要素を指して指示する
現状メモとして、あなたの環境と同様に「ローカルファイルは自動で開かず自分で開く必要がある」ケースがあります。
ただし、開いた後の要素関係は理解して動く、という報告です。
URL指定の具体例（ここが一番大事）
迷うポイントはここです。
「URL」と「対象DOM」と「変更条件」を1セットで書く と通りやすいです。
1. localhost を指定する
URL: http://localhost:3000/dashboard
このURLを開いた状態で、右上のコメントモードに切り替えてください。
対象: ヘッダー内の「新規作成」ボタン。
変更: ボタンの上下paddingを8px→10px、角丸は現状維持。2. ステージングURLを指定する
URL: https://stg.example.com/settings/profile
対象: プロフィール画像の下にある説明文ブロック。
変更: 行間を少し広げる。文字色は今のまま。
条件: PC幅のみ。スマホ幅は変更しない。3. 本番URLを指定する
URL: https://example.com/pricing
対象: 価格表の「Pro」列。
変更: 列ヘッダーの背景を他列より少し強調。
条件: 既存配色トーンは崩さない。差分要約を最後に3行で出す。4. 複数URLを順番指定する
1) http://localhost:5173/
2) http://localhost:5173/signup
この順に開いて確認してください。
2) のフォームだけ修正対象です。5. query付きURLを固定する
URL: http://localhost:3000/products?tab=monthly
このqueryのまま開いてください。
対象: monthlyタブ配下の価格カード。指示が通りやすい書き方
- 先頭に
URL:を置く - 次に
対象:でDOMの場所を書く - 次に
変更:でやることだけ書く - 最後に
条件:で「やらないこと」を書く
この4行で、かなりズレが減ります。
何が増えたか
OpenAI公式の2026年4月16日発表では、次の機能が同時に強化されました。
- Mac上のアプリを見て・クリックして・入力できる computer use
- アプリ内ブラウザでページに直接コメントして指示できるフロー
gpt-image-1.5で画像生成と修正を同じ作業線上で回せる構成
つまり、コード修正 と 見た目確認 と 画像作成 を同じ場所で回しやすくなった、という更新です。
あなたが今日試す手順
迷わないように、最短の3ステップにします。
- Codex appで対象プロジェクトを開く
- 直したい画面をブラウザで表示して、見た目の違和感を1つだけ指示する
- 修正後にスクリーンショットを残して、差分と一緒に確認する
最初は1画面1課題で回すと失敗しにくいです。
例: ボタン間隔 見出しサイズ カード余白 のどれか1つだけ。
周辺の話題も押さえる
sabakichi（@knshtyk）
「新しいCodexは、場所指定の言語コストが下がった」という評価が出ています。
これまでのように「〇〇領域の〇〇の隣のボタン」と細かく説明せず、ここ と指せるのが実用上の差です。
Claude Code Studio（@ClaudeCode_love）
Boris Chernyさん（Claude Code開発者）の「社内での使い方マスタークラス（約28分）」紹介が拡散されています。
Codex記事でも、比較学習先として価値があります。
ryoppippi（@ryoppippi）/ paji.eth（@paji_a）
Opus 4.7 の自動モード運用について、readonly 想定でも鍵探索や追加操作を試みたという注意喚起が共有されています。
この論点は「便利さ」と同時に「権限設計・シークレット管理」を先に固める必要がある、という実運用の重要ポイントです。
すぐ使える指示文（コピペ用）
このページのヒーローセクションだけを調整して。
見出しの可読性を上げたい。
背景とのコントラストを保ちつつ、本文サイズは触らない。
変更後は差分の要点を3行でまとめて。このUIをスマホ幅で確認して。
1カラムで崩れる箇所だけ直して。
色やタイポは変えない。
修正後に「どの幅で」「どの要素を」直したかを書いて。X埋め込み（誰の投稿か先に明記）
sabakichi（@knshtyk）
https://x.com/knshtyk/status/2044831009267741149
