ChatGPT で UI デザインする方法。
ChatGPT は、ラフなアイデアから動く画面まで UI を形にできます。ただし、ステップごとに向いている場所が違います。考えるのはチャット、見た目を探るのは画像生成、開いて比べて出荷できる本物の画面を作るのは Codex です。
2026年11月2日 更新 · 約 7 分で読めます
結論から
はい、ChatGPT でアプリや Web サイトの UI をデザインできます。今いるステップに合ったモードを選びましょう。
| ステップ | ChatGPT で使う場所 | 得られるもの |
|---|---|---|
| アイデアを固める | チャット | デザインブリーフ、画面リスト、ユーザーフロー |
| 見た目を探る | 画像生成 | いくつかのビジュアルの方向性のモックアップ画像 |
| 本物の画面を作る | Codex | 開いて試して編集できる HTML ファイル |
| 比べて磨き込む | キャンバスつきの Codex | 横に並べた複数の画面を、すばやく修正 |
| 出荷する | コードベース上の Codex | 選んだデザインを、使っているフレームワークで |
チャットと Work は、考えたりドキュメントを作ったりするのに向いています。Codex はソフトウェア開発のためのモードで、プロジェクトのファイルを読み書きできます。それがデザインを本物にする鍵です。ChatGPT デスクトップアプリでは、プロダクトセレクターで Codex を選びます。
ステップ 1：チャットでアイデアを固める
デザインからではなく、会話から始めましょう。ラフなアイデアを ChatGPT にブリーフとしてまとめてもらいます。誰のためのプロダクトか、どんな画面が必要か、各画面に何を表示するべきかです。
もっと本を読みたい人のための習慣トラッカーアプリをデザインしています。1 ページのデザインブリーフを書くのを手伝ってください。内容は、ターゲットユーザー、最も重要な 5 つの画面、各画面に表示するもの、そして考えられるビジュアルスタイル 3 案（各 1 文）です。不明な点があれば、先に 3 つまで質問してください。
ブリーフは保存しておきましょう。このあとのステップすべてに貼り付けるので、どのステップも同じ前提から始められます。
ステップ 2：画像で見た目を探る
誰かがコードを書く前に、モックアップ画像を使えば手軽にスタイルを確かめられます。ChatGPT の画像モデルは、読める文字を含むインターフェース画像が得意で、最新リリースの GPT Image 2.6 では参照画像、GIF、SVG 書き出しにも対応しました。チャットでは、画像を頼むだけで OK です。Codex では、プロンプトに $imagegen を含めると画像生成スキルを直接呼び出せます。
$imagegen このブリーフをもとに、ホーム画面のモックアップ画像を 3 枚作ってください。ビジュアルスタイルごとに 1 枚ずつです。iPhone の画面、390×844、本物らしい文字や数字が入ったリアルな UI で、端末のフレームはなし。3 枚とも内容は同じにして、スタイルだけが変わるようにしてください。
これらは仕様ではなくムードボードとして扱いましょう。生成画像の小さな文字や正確な余白は、まだ確認が必要です。また Codex では、画像生成は通常のやり取りの 3〜5 倍の速さで利用上限を消費するので、何十枚も作るより数枚で方向性を探りましょう。
ステップ 3：Codex で本物の画面を作る
画像は、画面がどう見えそうかを示すだけです。HTML ファイルなら、クリックしたりサイズを変えたり、1 行ずつ修正したりできる画面になります。Codex に切り替えてプロジェクトのフォルダを開き、画面をコードとして頼みましょう。
添付したブリーフと、選んだモックアップ画像をもとに、ホーム画面を 1 つの自己完結した HTML ファイルとして作ってください。サイズは 390×844、CSS はインライン、フォントはシステムフォントです。そのうえで、同じ内容で別の方向性を 2 案、それぞれ別ファイルで作ってください。1 案はより大胆に、もう 1 案はより落ち着いた雰囲気に。
気に入ったモックアップ画像を添付すれば、Codex がそのレイアウトや雰囲気に合わせられます。画面ごとに自己完結したファイルを 1 つにしておけば、どのバージョンも持ち運びやすく、修正もしやすくなります。
ステップ 4：方向性を横に並べて比べる
3 つのデザインをブラウザのタブで 1 つずつ見比べるのは時間がかかります。横に並べましょう。
- プラグインなしの場合： 3 つの画面を 1 列に並べた比較ページを 1 枚作るよう Codex に頼みます。
- キャンバスプラグインを使う場合： Codex Design は Codex にキャンバスを追加し、画面をライブ HTML としてリファレンス画像の隣に並べて表示します。インストールはプロンプト 1 つで完了します。
そのうえで方向性を選ぶか、気に入った部分を組み合わせます。「大胆な案のヘッダーに、落ち着いた案のカードを組み合わせて」は、次の指示としてとても良い例です。
ステップ 5：具体的なフィードバックで磨き込む
要素と変更内容を名指ししましょう。「もっと目立たせて」では、エージェントは何をすればいいのかわかりません。次のように伝えます。
落ち着いた方向性の案を調整してください。 - 連続記録のカウンターが最初に目に入るようにする。 - カードのパディングを 16px に減らし、アクティブ状態のアクセントカラーは 1 色にする。 - それ以外はすべてそのままにする。
フォントサイズや色の濃さなど、説明するより直したほうが早い変更は、HTML を直接編集するか、Codex Design のキャンバスで要素を選択してプロパティパネルで調整しましょう。
ステップ 6：デザインを本番コードにする
方向性が決まったら、Codex に本物のアプリの中で、使っているフレームワーク、コンポーネント、色を使って作り直してもらいます。HTML のモックアップがそのまま仕様になります。
承認されたホーム画面を、私たちの SwiftUI アプリに実装してください。レイアウトと余白は home-calm.html に合わせ、色は Theme.swift のものを使い、既存のカードコンポーネントを再利用してください。
良い結果を出すコツ
- 実際のサイズを伝える。 スマートフォンなら 390×844、デスクトップのページなら 1440×900。
- 本物らしい内容を使う。 もっともらしい名前、数字、日付を入れると、ダミーテキストでは隠れてしまうレイアウトの問題が見えてきます。
- 複数案を頼む。 1 案の細かなバリエーションを 10 個作るより、意図的に違う方向性を 3 つ作るほうが役に立ちます。
- デザインスキルを追加する。 Taste Skill などのスキルを入れると、Codex がタイポグラフィやレイアウトについてより明確な考えを持てるようになります。UI デザインにおすすめの Codex スキルを参照してください。
よくある質問
ChatGPT にアプリをデザインしてもらえますか？
画面のデザインも、実際の構築もできます。チャットで計画を立て、画像生成で見た目を確かめ、Codex が動くコードとして書き上げます。どの方向性にするか、何を変えるか、いつ完成とするかを決めるのは、あなた自身です。
ChatGPT 向けの UI デザインプラグインはありますか？
あります。プラグインは ChatGPT デスクトップアプリのチャット、Work、Codex と、Codex CLI で使えます。Codex Design は、Codex にビジュアルキャンバスを追加する UI デザインプラグインです。OpenAI のプラグインディレクトリには、Figma で作業するチーム向けの Figma プラグインもあります。
UI デザインには ChatGPT と Codex のどちらを使うべきですか？
どちらも ChatGPT です。アイデアやブリーフにはチャットを使い、本物のファイルがほしくなったら Codex に切り替えましょう。開いて、比べて、編集して、コードベースに移せる画面が手に入ります。