Codexデザインモードの使い方。初心者でも3分で再現できる手順書

結論です。
初心者は「自分でURLを開く」「コメントモードで要素を指す」「4行フォーマットで指示する」だけで使えます。

この記事は、実運用で詰まりやすい順に手順を整理しています。

正確キャッチアップ（2026年4月19日時点）

ここは一次情報だけで整理します。

公式で確定していること

2026年4月16日にCodexの大型更新が公開された
Codex app に in-app browser が入り、ページに直接コメントして指示できる
その説明には「localhostのWebアプリから広げる予定」と明記がある
automations の文脈再利用と memory preview が案内されている
computer use は「初期はmacOS」、EU/UK は順次展開予定
Codex利用対象は Plus / Pro / Business / Enterprise/Edu（期間限定でFree/Goにも提供）

まだ揺れるので断定しないこと

環境差でローカルURLを自動で開けるかどうか
コメントモード周りのUI文言や導線の細かな差
いつ全リージョン・全プランで同じ体験になるか

結論として、初心者向け運用は「手動で対象URLを開く」を前提にしておくのが安全です。

30秒で全体像

サイドパネルを開く
パネルを全幅にする
+ でブラウザを追加する
自分で対象URLを開く
右上 コメントモード を押す
DOMをクリックしてコメント
チャットで修正指示

これで最初の1回は動きます。

最初に押さえる3つの前提

前提1: まず自分で開く

投稿実測では、環境によってローカルファイルやローカルURLを自動で開かないケースがあります。
この場合は、先に自分で開けば使える という運用が安定です。

前提2: 「ここ」を指せるのが強み

デザインモードの実利は、長い場所説明を減らせる点です。
以前のように「〇〇領域の〇〇の隣」と言わず、対象DOMを直接指せます。

前提3: 便利さと権限はセットで管理

周辺では「自動モードで想定外の操作を試みる」注意喚起も出ています。
デザイン修正でも、権限とシークレット管理は最初に決めるのが安全です。

迷わない操作手順（クリック順）

Codexでプロジェクトを開く
画面右側のサイドパネルを表示
パネルを全幅に拡大
+ ボタンでブラウザを追加
対象URLを手動で開く
右上の コメントモード に切替
直したい要素をクリック
コメントを付ける（複数可）
通常チャットで「変更内容」を送る

URL指定はこの4行だけ

URL: （開くページ）
対象: （どのDOMを直すか）
変更: （何を変えるか）
条件: （何を変えないか）

この4行を守るだけで、指示ズレが大きく減ります。

そのまま使えるコピペ

localhost

URL: http://localhost:3000/dashboard
対象: ヘッダー右上の「新規作成」ボタン
変更: 上下paddingを8pxから10pxにする
条件: 色とフォントは変えない

staging

URL: https://stg.example.com/pricing
対象: Proプランのカード内CTAボタン
変更: ボタンの上下余白を少し増やす
条件: 他プランには触らない

本番URL（確認だけ先）

URL: https://example.com/contact
対象: 送信ボタン
変更: モバイル時のみ横幅100%にする提案を出して
条件: まだ反映しない。差分案だけ出す

複数URLを順番指定

1) http://localhost:5173/
2) http://localhost:5173/signup
この順で開く。修正対象は2)だけ。

詰まった時の確認

URLを書いたか
対象DOMを1つに絞ったか
変更条件を1つに絞ったか
1回で複数画面を直そうとしていないか

最初は 1画面1課題 が安全です。

安全運用の最小ルール

APIキーやシークレットを平文で置かない
不要な外部連携は切ってから作業する
いきなり本番を書き換えない（提案→確認→反映）