Codexガイド：画像から実際のUIへ 6ステップ

こんにちは、学習者の皆さん！

OpenAIは最近、最先端の画像モデル gpt-image-2（以降GI2）をリリースし、その驚異的なテキストから画像、画像から画像へのパフォーマンスで、数多くのベンチマークで世界を熱狂させました。

率直に言います。このモデルは真の飛躍であり、Nano Banana以来、初めての顕著な能力向上です。

私が実行したテストのスレッドをご覧ください。「開発者のVS Codeターミナル」の画像を生成し、画像からコードを抽出して実行しました。

引用ツイート動画：GPT-Image-2に開発者のVSCodeウィンドウのスクリーンショットをレンダリングするよう依頼しました。GPT-Image-2はインテリジェントなモデルです。単に画像をレンダリングしているのではなく、実際に考えています。このモデルは豊富な世界知識を持っています。完璧なテキスト。動作するコード。魅力的です！htt... https://x.com/i/web/status/2046695738847993957

すごいですよね？他にも多くのテストがあります。

その後すぐに、GI2を使って実際の製品を構築するための、初心者に最適なワークフローを作り始めました。画像を取得してUIを作成することについて多くの人が話しているのを見ました。そして、ご存知ですか？彼らは正しいのです！それができるのです。

引用ツイート GPT 5.4で6プロンプトで作られたフロントエンド。そうです。フロントエンドができないと言われているモデルで作られたフロントエンドです🫣 でも実際にできます。そしてSpudを使えばさらに簡単になります。これについて記事を書くべきかもしれませんね？🤔 https://t.co/aPyDFGEd1h https://x.com/i/web/status/2047299952423084119

しかし、彼らが教えてくれないのは、適切な戦略がなければ、画像を忠実に再現できる確率は4回中3回は失敗するということです。

これは私の経験であり、多くのコメント投稿者が「うまくいかない」と言っているのを見た理由でもあります。これはあなたのためのものです！

次のポイントに移ります。これは魔法の公式ではありません。それでも適切にプロンプトを入力し、努力を払い、結果を微調整する必要があります。それが形になり始めて満足するまでは。それでいいのです！

この演習の目的は2つです。

第一に、AIの非決定性を活用して、白紙の状態をどのように見せたいかアイデアをブレインストーミングする優れた方法です。ビジュアルブレインストーミングです。

第二に、ばらつきを減らすことです。

このガイドを使えば、時間やトークンを無駄にすることなく、より一貫性のあるスタート地点に到達できるはずです。それでは、始めましょう。

画像からフロントエンドへのスキルガイド#

いつものように、あなたのためにスキルを作成しました。ダウンロードして、あなたのものにすることをお勧めします！これは進行中の作業であり、間違いなく改善できます。改善点があれば、ぜひお聞かせください。

このガイドでは、初心者にもできるだけわかりやすくするために複雑さを最小限に抑えたいと考えましたが、上級ビルダーの方々からのご意見もお待ちしています。

ステップ1：開始プロンプトを作成する#

これはほとんど説明を必要としません。ワークフローを開始するには、img-to-frontend スキルを呼び出すだけです。すでにイメージしているルックや開始点、ページを似せたい画像やウェブサイトがある場合は、これらの詳細をできるだけ最初に含める必要があります。

これは、曖昧さを許容しないという意味ではありません。どのように見せたいかが本当にわからない場合でも問題ありません。しかし、最初に方向性を与えることで、具体的なイメージがある場合には、モデルをより望ましい結果に導くことができます。

markdown

やあ Codex！一緒にフロントエンドを作ろう。$img-to-frontend スキルを使ってモックアップを生成してほしい。

ビジネス名は Peak Path Fitness。忙しい大人向けの地域密着型パーソナルトレーニング＆リカバリースタジオで、大手ジムのような強度や威圧感なしに、筋力、可動性、そして長期的な健康を向上させたい人々を対象としている。

Peak Path Fitness では、マンツーマンのパーソナルトレーニング、少人数制の筋力クラス、可動性コーチング、アシストストレッチ、リカバリーセッション、動作評価、カスタムフィットネスプランを提供している。初心者、復帰アスリート、デスクワークで凝り固まったプロフェッショナル、運動許可が出た軽度の怪我からの回復中の成人など、幅広い層に対応する。

ビジネスは、専門的で、地に足がついていて、親しみやすい印象であるべき。ハードコアなボディビルジムや派手なフィットネスインフルエンサーのブランドではない。ページは、パーソナルなケア、測定可能な進歩、怪我に配慮したコーチング、そして落ち着いていながらもやる気を起こさせるスタジオ環境を伝える必要がある。

主な目標：
- 訪問者に無料の動作評価を予約してもらうこと。
- 主要なサービスを明確に説明すること。
- スタジオが様々なフィットネスレベルの人々を歓迎していることを示すこと。
- コーチの資格、クライアントの成果、明確なプロセスを通じて信頼を構築すること。

その他の役立つ詳細としては、美的嗜好、雰囲気、ターゲットオーディエンス、ウェブサイトのタイプ（SaaS、マーケットプレイス、個人など）、カラースキーム、アイコンや要素へのファイルパスなどが含まれます。

ステップ2：デザインのブレインストーミングと生成#

ステップ1でプロンプトを送信すると、スキルはすぐにあなたのプロンプトに基づいて4つのバリエーションを生成します。これらは、参考点または開始点として、互いにスタイル的にユニークなものになります。これには時間がかかります。すべての画像が完了するまで待ちましょう。

ステップ3に進む前の重要なヒント

4つ以上必要な場合は、さらにリクエストしてください。
最初の4つのどれも気に入らなければ、プロンプトを修正して別のセットをリクエストしてください。
生成が難しい要素が多く含まれる、非常に複雑で「ごちゃごちゃした」UIは選択しないでください（以下の例2を参照：ページ上に多くのチャート、アイコン、要素があり、ごちゃごちゃして乱雑です）。

気に入ったデザインが見つかったら、そのデザインを選択すると、スキルが次のステップに進みます。

ステップ3：画像からプロンプトへ#

このガイドが、世に出回っている他のガイドと一線を画すのは、まさにこの部分だと考えています。なぜなら、先ほども言ったように、これらのワークフローの問題は一貫性だからです。

うまくいくUIもあれば、そうでないものもあります。これに対抗するために、私はモデルに、選択したモック画像から実際のUIを作成できるエージェントのための、非常に詳細なプロンプトを書くように依頼します。

ここでの考え方は、実装モデルに強力な開始プロンプトと、より一貫して高品質な結果を生成するための視覚的な参照を提供することです。

単に「よし、2番目の画像を構築して」と言うのではなく、モデルにそのようなUIを実際に構築するために何が必要かを真剣に考えさせるのです。

markdown

私は #3 が気に入りました。ページ上のすべての要素を注意深く書き留めてください。
ヒーローセクションのテキストから画像へのグラデーションブレンド。
コンテナの間隔。フォント。美学。
この画像を正確に再現できるように、プロンプトを慎重に作成してください。

画像を選択すると、スキルは自動的にこれを行うはずですが、念のため私がその方向に誘導してもコストはかかりません。このワークフロー全体には、GPT-5.5 を使用することを強くお勧めします。すべての例は Medium にあります。

注：モックUIにフッターやページに必要な要素が欠けている場合は、それらをプロンプトに含めてください。同じ美的スタイルを使用してページを拡張するように依頼してください。

ステップ4：BUIDL（構築）#

詳細なプロンプトが作成されたら、大量のトークンを費やそうとしている内容を読むことは常に良い考えです。プロンプトに含まれていなかった重要な詳細や追加要素を追加してください。

この時点で私がよくやるのは、選択した元のモックUI画像をエージェントのプロンプトにコピー＆ペーストして、明示的にコンテキストに含め、以下のプロンプトを提供することです。

markdown

概要に従ってフロントエンドを注意深く構築してください。

ページを構築する際には、定期的に元の画像を参照して作業内容を確認し、ページが元の画像に可能な限りピクセルパーフェクトに一致するようにしてください。

間隔、フォント、アイコン、ロゴ、レイアウト、テキストを注意深く確認し、細部まで正確に仕上げてください。

スピードよりも実行。効率よりも正確さ。モバイルデバイスでも動作することを確認してください。

元の画像を参照しながら、不一致を修正し、最終出力が直接一致するまでループで作業を続けてください。

ステップ5：注釈と微調整#

これらのワークフローのいずれかが、最初の試行でモックUIの完璧なレプリカを吐き出すと思うなら、今すぐその幻想を打ち砕きます。そんなことはありません。しかし、かなり良い出発点にはなるはずです。

間違いなく、サイズが適切でない要素、ミスマッチなフォント、質の低いSVG、ページ全体のスペーシングの問題が発生します。これらは修正が簡単な問題であり、Codexのアプリ内ブラウザを使用すれば、すべてを一度に直接対処できます！

満足のいくものにするために必要なフォローアッププロンプトの数は、UIによって明らかに異なりますが、私の経験では、ほとんどの場合、10回未満のフォローアップで目的を達成できます。

Codexアプリから完成したUIをクリックするだけで、ブラウザが自動的に開くはずです。開かない場合は、「表示」ドロップダウンをクリックして「ブラウザタブを開く」を選択し、開始してください。

ページがブラウザで開かれたら、右上隅の「注釈」をクリックして、修正が必要な要素の選択を開始します。選択方法は2つあります。

要素またはコンテナをハイライトしてクリックするだけです。
マウスをドラッグ＆ドロップして、選択したい領域を囲みます。

クリック/選択すると、小さな吹き出しが表示され、そこで希望する変更を箇条書きにできます。ヒント：音声も使用できます☺️。

プロンプトを送信する前に、希望するすべての変更がカバーされるまで、これをページ全体で繰り返します。同じプロンプトに一度に好きなだけ追加できるので、遠慮しないでください。

完了したら、それらをすべて一度に送信します。さて、またあなたの小さな甘い心を打ち砕きます。おそらく、これを数回繰り返す必要があるでしょう。それで問題ありません。そのたびに、目標に確実に近づくはずです。エージェントの作業を容易にする、明確で曖昧さのないプロンプトを書くことに集中すれば、あっという間に目標に到達できます。

ステップ6：反復、改善、パーソナライズを続ける#

この時点で、チュートリアルはほぼ完了です。ここではランディングページの半分しか構築していませんが、ビジュアルスタイルが確立されたので、それを使用して要素やサブページなどの追加画像を生成したり、リポジトリ内の既存のコードからこのスタイルを推測させることもできます。

最も難しい部分はすでに完了しており、モデルはその上に構築するための動作するベースを持っています。そして、ページの残りの部分を構築するために必要なすべてのツールが揃っています。

このワークフローの非常に優れた点の1つは、GI2を使用してウェブサイトに表示したい任意の画像を生成できることです。実際、私の両方の例で見られるすべての画像とロゴは、GI2によって生成されました。

だから、創造性を発揮してください。あなたの個性を加えてください。GI2で生成した画像を使って、ウェブサイト用の動画を生成してみるのもいいかもしれません。どこまでも深く掘り下げることができます。画像から動画への変換には、Bytedance Seedream 2.0 をお勧めします。

さあ、外に出て、OpenAI Dev Day のチケットを勝ち取りましょう。大胆なものを作り上げてください。

引用ツイート OpenAI DevDay の早期チケットを確保したいですか？ GPT-5.5 と Image Gen で何かを作りましょう。毎週、2～3の favorites を選び、OpenAI DevDay 2026 の無料チケットを贈呈します。Codex が最優秀作品を見つけるのを手伝い、私たちのチームが勝者を選びます。#OpenAIDe... で返信してください。 https://x.com/i/web/status/2049535650626785334

このようなコンテンツを楽しんでいただけたら、フォローを検討してください。

この記事全体は、人間のように昔ながらの方法で書きました。かなりの労力を要したので、いいねやシェアをいただけると大変ありがたいです！

このガイドはどちらかというと出発点としての位置づけですが、GPT-Image-2 を使用すれば、はるかに複雑で印象的なウェブサイトを生成することももちろん可能です。このガイドは初心者にとってより親しみやすいものにしたかったのです。

間違いなくシリーズのパートIIも行う予定で、そこではアニメーション用の要素を生成して、視聴者を本当に感動させる方法について掘り下げます。

世界はあなたのものです。決して忘れないでください。✌️

-ウィリアム