Codex で UI デザインする方法。
Codex はアプリの画面や Web ページをコーディングするだけでなく、デザインすることもできます。コツは、ボタンを押せば終わる道具ではなく、ブリーフを渡して仕事を頼むデザイナーとして扱うこと。背景を伝え、複数の案を求め、すぐ手を動かせるフィードバックを返しましょう。
2026年11月1日 更新 · 約 8 分で読めます
Codex で UI デザインについてできること
Codex は OpenAI のコーディングエージェントです。プロジェクト内のファイルを読み書きし、コマンドを実行できるので、UI 制作では次のようなことができます。
- 画面を HTML と CSS で書く。 1 ファイルで完結する HTML は、どのブラウザでも開けて、リアルでクリックできるモックアップをいちばん早く作れる方法です。
- 画像を手がかりに作る。 スクリーンショットや手描きのスケッチ、気に入ったリファレンスを添付して、そのレイアウトや雰囲気に合わせるよう頼めます。
- 頼めばすぐ直す。 Codex が自分で書いたファイルを見られる状態なら、「カードをもっと柔らかく」「余白を詰めて」といった一言で十分です。
- 完成したデザインをコードベースに移す。 方向性が決まれば、同じエージェントがあなたのフレームワークとコンポーネントで作り直せます。
一方で、Codex 単体では複数のデザインを一度に見渡せる場所がありません。HTML ファイルはそれぞれ別のタブで開くので、案を比べるのに手間がかかります。このギャップを埋めるために作ったのが、Codex 用のキャンバスプラグイン Codex Design です。このガイドの手順は、プラグインがあってもなくても試せます。
ステップ 1：デザインブリーフを書く
あいまいな依頼からは、ありきたりな結果しか返ってきません。よいブリーフは 5 つの問いに答えています。どんなプロダクトか、誰が使うのか、どの画面が必要か、どんな印象にしたいか、そして画面サイズ・ブランドカラー・フォントといった制約です。
Ember & Bean というコーヒー定期便アプリのホーム画面をデザインしてください。ユーザーは普段から自宅でコーヒーを淹れていて、2 週間ごとに新しいシングルオリジンの豆を受け取りたい人たちです。ホーム画面には、次回のお届け、その人向けに選んだ 2 種類のロースト、短い抽出のコツを表示します。 390×844 のモバイル画面として、CSS をインラインで書いた 1 つの完結した HTML ファイルにしてください。フォントはシステムフォントを使い、外部画像は使わずにコーヒー豆の袋は CSS で描いてください。
1 ファイルで完結させることには意味があります。どの画面も持ち運びやすく、修正もプレビューも手軽になります。
ステップ 2：1 案ではなく、複数の方向性を頼む
最初のデザインがベストであることはまれです。あえて違いを持たせた 3 つの方向性を頼めば、同じアイデアのバリエーションではなく、本当に別の選択肢から選べます。
この画面について、3 つの方向性をそれぞれ別ファイルで作ってください。 A — 温かみのあるエディトリアル調で、見出しはセリフ体 B — 大胆でダーク、明るいアクセントカラーを 1 色だけ C — 柔らかく落ち着いた雰囲気で、角の丸いカードと広い余白 見た目のスタイルだけを比べられるよう、内容はすべて同じにしてください。
ステップ 3：デザインを並べて見比べる
評価する前に、案を横に並べましょう。情報の優先順位や密度、トーンの違いは、タブを 1 つずつ切り替えるより、一度に見渡したほうがずっとわかりやすくなります。
- プラグインなしの場合： 各 HTML ファイルをブラウザで開くか、3 画面を横一列に埋め込んだ比較用ページを 1 つ作るよう Codex に頼みます。
- Codex Design を使う場合： 画面をキャンバスに置くよう Codex に頼みます。実際に動く HTML として横に並び、その隣にリファレンス画像も置けます。試すなら、プロンプト 1 つで Codex Design をインストールできます。
方向性を 1 つに絞るか、それぞれの気に入った部分を挙げましょう。「B のお届けカードに、C の落ち着いた配色」といった指示は、そのまま次のブリーフになります。
ステップ 4：具体的なフィードバックで磨き込む
Codex がいちばんよく応えるのは、要素と変更内容を名指ししたフィードバックです。次の 2 つの依頼を比べてみてください。
- 弱い依頼：「もっといい感じにして」
- 強い依頼：「あいさつ文を 32px に大きくし、カードの padding を 16px に減らして、お届けの進捗バーが真っ先に目に入るようにして」
方向性 C を改善してください。 - あいさつ文を大きく、日付を小さく。 - ローストのおすすめより前に、お届けの進捗を表示。 - アクセントのグリーンは 1 色だけにして、アクティブ状態にのみ使う。 - それ以外はすべてそのまま。
「それ以外はすべてそのまま」は、ほとんどの修正依頼に添える価値があります。すでに満足している部分までエージェントが作り直してしまうのを防げます。
ステップ 5：細部は手で調整する
説明するより自分で直したほうが早い変更もあります。フォントサイズを少しずらす、色の濃淡を 3 段階試す、padding を数ピクセル調整する、といったものです。HTML を直接編集するか、Codex Design ならキャンバス上で要素を選んで、プロパティパネルでフォント、色、余白を変更できます。次に変更を頼んだとき、Codex は更新後のファイルを見て作業します。
ステップ 6：デザインを本番コードにする
モックアップは仕様書であって、最終的なコードではありません。方向性が承認されたら、アプリの中で作り直すよう Codex に頼みましょう。
承認済みのホーム画面を、私たちの React Native アプリに実装してください。 既存の Button と Card コンポーネント、theme.ts の色を使ってください。 レイアウトと余白は asset/coffee-home-soft.html のモックアップに合わせてください。
よりよい結果を得るためのコツ
- 実際のサイズを指定する。 スマホなら 390×844、デスクトップのページなら 1440×900。指定しないとレイアウトがぶれます。
- 実際に近いコンテンツを使う。 それらしい名前、価格、日付を入れると、「Lorem ipsum」では隠れてしまうレイアウトの問題が見えてきます。
- 言葉だけでなく、見せる。 リファレンスのスクリーンショットは、形容詞を並べた段落よりも早くスタイルを伝えます。
- トークンを明示する。 ブランドカラー、フォント、余白のスケールがあるなら、ブリーフに書いておけば、どの方向性にも反映されます。
- 1 画面につき 1 ファイルにする。 修正が毎回小さくなり、レビューしやすくなります。
よくある質問
Codex は本当に UI をデザインできるのですか？コードを書くだけでは？
両方できます。Codex は画面を構成する HTML と CSS を書くので、完成したビジュアルデザインを作れます。仕上がりは、ブリーフの質とフィードバックの具体性で決まります。
Figma はもう必要ありませんか？
方向性を探って試す段階では必要ありません。共有のデザインシステムやハンドオフには、今も Figma を使い続けるチームが多くあります。HTML モックアップには、最初からコードになっているという利点があります。
Codex でデザインするのにプラグインは必要ですか？
いいえ。このガイドの内容は、すべて普通の HTML ファイルで実践できます。Codex Design のようなキャンバスプラグインを使うと、複数の画面の比較や磨き込みが速くなります。