ChatGPT Images 2.0でUIを作りCodexで実装——デザインからコードまでAI完結
目次
先日の記事では、参考サイトをクローンして要件に合わせて変換・カスタマイズするDesign as Codeのワークフローを紹介しました。さらに記事の最後では、Claude Designと組み合わせることでUIデザイン作成〜実装まで一気通貫できるかもしれない、という提案もしていました。
ところがその翌日、そのあれこれの工程すらもいらなくなるかもしれないアップデートが、OpenAIから発表されました。UIの完成イメージを作って「これを実装して」と依頼するだけでウェブデザインが完成する——そんな世界になりつつあることを、今回身をもって体験しました。
具体的には、ChatGPT Images 2.0（APIモデル名: gpt-image-2）の画像生成能力と、GPT-5.5の視覚理解能力です。
(26/04/22) ChatGPT Images 2.0については、OpenAIから正式発表がありました。
この2つが揃った瞬間、「あ、Webデザインのワークフローが根本から変わるぞ」と感じました。実際に試してみた結果を、プロンプトのコツと合わせて記録しておきます。
この記事では、①Images 2.0でUIデザインを作る話、②Codexでそのまま実装する話、③よいUIデザインを生むプロンプトの3つを順に扱います。
ChatGPT Images 2.0はバナー作りを超えて、UIデザインを実務レベルで生成できる
Xのタイムラインでは「Images 2.0がすごい」という話が盛り上がっていますね。バナー画像、チラシ——バズっているツイートを見たことのある方も多いんじゃないでしょうか。実際、クオリティは段違いです。
ただ今回私が触れたいのは、そちらではなくこの画像生成能力をWebデザインのUIデザイン作りに活用するという話。
ここで「UIデザイン画像」と呼んでいるのは、動かないけれど見た目の完成形として全要素を満たした静止画のこと。プロトタイプのように実際に動作確認はできないけれど、「見た目としてはこれで完成」という状態の画像です。
ChatGPT Images 2.0の精度が高まったことで、このUIデザイン画像をAIに生成させることが現実的になりました。ウェブサイト全体を一気に生成させることもできますし、パーツごとのデザイン案を作ってもらうこともできる。最初の感触を試すのにコンポーネント単体から始めるのもありです。
その手応えを確かめた上で、次は本命——このブログの記事編集エディター画面全体のUIデザインを生成してみました。AIと会話しながら記事を仕上げていくような画面のイメージです。
記事のプレビューを見ながら「この段落、もっと具体例を入れて」とAIに話しかけると直してくれる——そんな感じのツールが欲しかったんですよね。V0やLovableがデザインを対話的に作るように、記事を対話的に育てていくイメージです。
自分でもレイアウトのイメージが固まりきっていなかったんですが、AIがユーザーストーリーを読み取って「こういうことがしたいんでしょ」という配置を出してくれた。人間が具体化する前に、AIが意図を形にしてくれる——そういう感覚の体験でした。
バナー作りだけじゃなく、UI全体のデザイン出力として十分使える精度だと思います。
では、そのUIデザインをどう実装に繋げるか。次がもう一つの大きなアップデートです。
Codexの視覚理解が向上し、UIデザインからコードを直接再現できる
ChatGPT Images 2.0の話とは別に、コーディングモデルのCodexにも大きな変化が来そうな気配があります。GPT-5.5——正式発表はまだですが、Xのタイムラインを見ていると数日前からコーディング性能が明らかに上がっているという声が多数出ていました。
最近はClaudeのOpusの性能が微妙だみたいな話も盛り上がっていますが、その反面、Codexの安定感はここ最近かなりいい感じなんですよね。
で、今回のアップデートで特に注目すべきなのが視覚的理解の向上です。添付した画像を見せて「これを再現したHTMLを書いてください」という指示が、かなり高い精度で通るようになった。
考えてみれば自然な話で、画像の生成能力が大きく上がったのであれば、画像を「読む」理解能力が向上しているというのも十分想像できる話ですよね。
もうお察しだと思いますが、ここまでの話を繋げると何が起きるか。
ChatGPT Images 2.0でよいUIデザイン画像が作れて、その画像を認識できるコーディングモデルがいる。
画像を見せて「この通りに実装してください」と言えばいい。デザイン案の作成と、その実装——この2つの工程が同時にAIで可能になりつつあるのです。
元々Codexのコーディング能力はここ最近だいぶいい感じだったので、よいUIデザインさえできれば実装はもうCodexに任せられる状態になっていたんですよね。
そこにChatGPT Images 2.0の画像生成能力が加わったことで、パズルのピースが全部埋まった感覚です。
ということは、あとはどうやってよいUIデザインを作るかが鍵になるわけです。ここからは、実際に私が試したプロンプトのパターンを紹介します。
UIデザインの品質はプロンプトの「文脈量」で決まる
ここからは具体的なテクニックの話に入っていきます。どういうプロンプトを書けば、自分が欲しい機能をすべて盛り込んだUIデザインができるのしょうか。
まず「todoアプリのLPを写真で作ってほしい」——このくらいシンプルなプロンプトでも、十分なクオリティのUIデザインが出てきます。試してみるだけなら、これで十分です。
ただ、これを実際の業務に活かすとなると話が変わってきます。既存プロジェクトのカラールール、デザインとの整合性、機能の背景——そういった文脈を伝えながら書かないと、「それっぽいけど使えないデザイン」になりがちです。そのためのワークフローを次から紹介します。
コードベースを共有してから指示すると、AIの文脈理解が圧倒的に上がる
大前提として、ChatGPT Images 2.0にゼロから指示を書くよりも、まずClaude CodeやCodex上でコードベースを参照した状態でデザイン指示書を作るという一段階を挟むことで、既存プロジェクトの文脈に沿った指示書が作れます。
私の場合は、Claude CodeやCodex上でこのブログプロジェクトのコードベースを見せた上で「この中で新規にダッシュボード機能を作りたいから、実際のコードを把握した上でウェブデザイナーへの指示書を作って」と伝えました。
「ブログ記事を編集するエディターを作ってほしい」とだけ書くより、プロジェクトの文脈を見せた上で話した方が、AIも内容を把握しやすい。当然ですよね。
コンポーネント構成・既存スタイル・デザインの方向性を把握した上で作られたプロンプトをimage-2に渡すことで、「既存UIと整合しない浮いたデザイン」が出にくくなります。
音声入力でユーザーストーリーをガーッと詰め込む
で、もう少し具体的にどんな指示をしたかを書いていきましょう。
具体的な画面構成（「サイドバーにこれを置いて」とか）についてはほとんど触れず、代わりに「どんなことができてほしいか」「こんな悩みがあるから、それを解消する機能が欲しい」というユーザーストーリーを中心に書きました。
具体的には、こんな感じで音声入力しました（原文はもっと荒いですが、少しだけ整えています）:
私たちのブログの記事編集機能を作りたいです。そのための新しいダッシュボードのデザインをまとめて、webデザイナーの指示書を作成してください。
実際にコードを書くわけではなくて、どんな機能があるべきか、逆に何を削ぎ落としていくかを練っていく感じですね。今回はAIによって記事の内容を変更していく機能だけ絞った要件を考えていこうと思います。なので、ログインページとかそういうものは考える必要がありません。またUI/UXだけを考えるので、技術構成とかは考える必要もありません。逆にユーザーストーリーとかそういうところはとても大事になりますね。
V0であるとかLovableのような対話的にデザインを作っていくAIツールはすでにあると思いますが、あれのブログ記事を作る版だと思うのが一番早いですね。そして、今回は1から記事を書くというよりは、既存の記事をブラッシュアップしていくというところだけにフォーカスを絞っていきましょう。
現在私たちのプロジェクトには次のようなスキルがありますね。.claude/skills/brushup/SKILL.md これはこれで良いものなのですが、結局これをやった後に記事の内容についてCLIベースで、すごい指示をして「こう直して、こう直して、こう直して」みたいなことを繰り返しているんですよね。なので、それをCLIでなくダッシュボードでやることで、より見やすく、わかりやすくやっていきたい、みたいな感じになります。
なので、これは全部入れると画面がいっぱいになっちゃうので、削り落としていくような面もあると思いますが、MDXベースのプレビュー、そしてGitHubのようなDiff表示、そして実際のPCサイトプレビュー、そしてスマートフォン上でのプレビューなどの表示が考えられますよね。
とりあえずここまでの内容を整理して docs/REFERENCE にマークダウンでまとめて書いてください。こういう内容を音声でガーッと話して、AIに整理してもらったものが、先ほどのUIデザイン画像の元になった要件定義です。
長いですが、この程度の指示だけで良いとも言えます。「UI/UX」と「ユーザーストーリー」あたりの単語が入っていれば、あとはAIがよしなにやってくれます。
テンプレートがあるわけでもないし、特別なプロンプト技術が必要なわけでもない。既存のプロジェクトのコードベースを参照させて、とにかく欲しい機能を乱雑に伝えて「webデザイナーへの指示資料を作って欲しい」と言うだけで十分です。
画面の仕様を指示するより、利用シーンのストーリーを伝える方が、UI要素の配置に意図が反映されたUIデザインが得られます。
すでにAIが考える方が良い面が増えてきているので、レイアウトの詳細まで人間が指示するより、やりたいことと背景をしっかり伝えた方が、思いがけない良い構成を提案してくれるんですよね。
そして、実際に出力された、デザインの要件定義はこういう内容です:
**Dashboard UX 要件整理 — 記事仕上げ編集画面**
> 対象: `/brushup` スキル完了後の、記事を見ながら対話的に仕上げる編集画面のみ。ログイン・管理画面・新規記事作成・brushup 工程そのものは対象外。技術構成も対象外。UX / ユーザーストーリーに集中する。
**コンセプト: V0 / Lovable の「ブログ記事ブラッシュアップ」版。**
V0 や Lovable が対話的にデザインを作り上げるように、AI との対話を通じて既存記事の品質を向上させる。ただし brushup スキルのような構造的改善は CLI が担い、このダッシュボードは brushup 後の「目で見て、指して、直す」仕上げ工程に特化する。
**2 段階のワークフロー:**
| 段階 | 手段 | やること |
| ------------------ | ------------------------ | -------------------------------------------------------------------------------- |
| 第 1 段階: brushup | CLI（/brushup スキル） | AI が 6 軸で評価 → 工程を提案 → 自動で記事に反映 |
| 第 2 段階: 仕上げ | ダッシュボード（本画面） | brushup 後の記事を目で見ながら「ここ直して」「この表現変えて」と対話的に仕上げる |
**確認時に欲しい表示:**
| 表示 | 目的 | 優先度 |
| -------------------- | --------------------------------------- | ---------- |
| PC サイトプレビュー | デスクトップでの読者体験を確認 | 必須 |
| Diff 表示 | GitHub 風の変更前後の差分を視覚的に把握 | 必須 |
| MDX ソースプレビュー | frontmatter・MDX 記法を直接確認 | 必須 |
| モバイルプレビュー | スマートフォンでの読者体験を確認 | あると良い |
**主なユーザーストーリー:**
- 「brushup が終わった記事を、本番と同じ見た目で通して読みたい」
- 「この段落がしっくりこない。ここを選択して『もっと具体例を入れて』と AI に指示したい」
- 「AI が直してくれた箇所を、変更前と変更後を横並びで見たい」
- 「一連の修正が終わったら、brushup 後からのトータルの差分を見て、ワンクリックでコミットしたい」あとはChatGPT にこの出力をコピペして、画像を生成させればUIデザインの案が出てくるというわけです
デザインから実装までAIが一気通貫する未来は、すでに目の前に来ている
改めて整理すると、今回のアップデートで何が起きたか。
デザイン案の作成をChatGPT Images 2.0が担い、その実装を視覚理解の強化されたCodexが担う。この2つが同時に可能になったことで、Webデザインの制作フローが一変しました。
以前はDesign as Code——プロンプトから直接コードでUIを生成するアプローチ——が主流になりつつありましたが、今回のUIデザイン経由フローはまた別の強みがあります。
特に複雑なレイアウトやビジュアル要素を含むデザインでは、一度画像で完成形を確認してからコードに渡す方が再現度が高いのは当然です。今までは単純にAIにそれほどの画像認識能力がなかったというだけですね。
もちろんこのワークフローが完璧とまでは言い切らないですが「最初の叩き台」が一瞬で出てくる価値は確かなので、まずは試しながら自分の用途に合う使い方を見つけていってください。
もし実際のプロジェクトで試すなら、まずは小さな管理画面やダッシュボードのデザインから始めるのがおすすめ。サイクルはシンプルです。
- コードベースを共有 — Claude CodeかCodexで、既存プロジェクトを参照した状態で会話を始める
- 音声入力で要件を詰め込む — 「こんな悩みがある」「こう使いたい」というユーザーストーリーを長めに話す
- デザイン指示書を出力させる — 「UI/UXの資料として、コードは書かないで」と制限をかけて指示書を作らせる
- Images 2.0でUIデザインを生成 — 出力された指示書をChatGPT Images 2.0に貼り付けてUIデザイン画像を作る
- Codexで実装 — UIデザイン画像をCodexに投げて「この通りに実装して」と指示する
デザインから実装までAIが一気通貫する未来は、もう目の前に来ています。
ありがとうAI。ではでは。
