AI で UI モックアップを作る方法。

AI エージェントなら、1 文の説明から数分でクリックできる UI モックアップを作れます。コツは、確かめたいことに合わせて精度を選ぶことです。レイアウトを固めるならワイヤーフレーム、見た目を判断するなら高精度の HTML モックアップ、雰囲気を探るならモックアップ画像です。

2026年11月6日 更新 · 約 7 分で読めます

AI モックアップの 3 つの種類

コーディングエージェントと作業するなら、たいていは HTML モックアップを基本にするのがおすすめです。どのブラウザでも開け、実際の画面サイズに反応し、すでに本番コードへの道のりの半分まで来ています。画像は、プロダクトの印象をまだ決めている早い段階で役立ちます。

ステップ 1：画面を説明する

画面の目的、使う人、載せるべき内容から始めましょう。内容が具体的なほど、レイアウトも具体的になります。

[サブスクリプションを販売しているコーヒー焙煎所] のメインダッシュボードが必要です。ユーザーは [毎朝これを確認するヘッドロースター] です。表示する必要があるのは [有効なサブスクリプション数、今週出荷した袋数、解約率、目標に対する売上、直近 8 週間の週ごとの出荷数、今週予定している焙煎とそのステータス] です。デスクトップ、1440×900。

ステップ 2：ワイヤーフレームでレイアウトを固める

ワイヤーフレームが答える問いは 1 つだけです。レイアウトは内容を正しい順番で収められているか？色について議論が始まらないよう、グレーのままにしておきます。

このダッシュボードの低精度のワイヤーフレームを、1440×900 の自己完結した HTML ファイル 1 つで作ってください。破線の枠のグレーのボックスで、各ボックスの中には何が入るかを書いたラベルを入れます。色や本格的なスタイルは付けないでください。最も重要な情報を最初に置いてください。

情報の階層がしっくりくるまでボックスを動かしましょう。この段階なら変更のコストはわずかです。

ステップ 3：高精度のモックアップにする

レイアウトが決まったら、それを保ったままビジュアルデザインを加えます。エージェントには方向性、本物らしい数字、そしてあればブランドのルールを伝えます。

承認されたワイヤーフレームを、新しい HTML ファイルで高精度のモックアップにしてください。レイアウトはそのまま保ってください。スタイルは [温かく落ち着いた雰囲気、クリーム色の背景、濃い茶色のサイドバー、メインのアクションと今週の表示にだけ使うラスト色のアクセント 1 色] です。名前、数字、日付、ステータスには本物らしいデータを使ってください。グラフは HTML と CSS で描いてください。

デザインシステムがあるなら、DESIGN.md ファイルを使えば、プロンプトのたびにルールを繰り返さなくても、すべてのモックアップをブランドに沿ったものにできます。

ステップ 4：画像で雰囲気を探る（任意）

スタイルを決める前に、モックアップ画像を使えば手早くいくつか試せます。Codex では、$imagegen を含めると画像生成スキルを呼び出せます。

$imagegen このダッシュボードのモックアップ画像を、異なるスタイルで 3 枚作ってください。温かみのあるエディトリアル、ダークで技術的、明るく親しみやすい、の 3 つです。デスクトップの画面で、UI の文字や数字は本物らしく、端末のフレームはなしで。

方向性を選んだら、気に入った画像をステップ 3 の高精度のプロンプトに添付します。画像は参考として扱いましょう。小さな文字や正確な余白は、まだ確認が必要です。

ステップ 5：バリエーションを作って比べる

同じ画面を、意図的に違う 2〜3 のバージョンで頼み、横に並べて見てみましょう。Codex Design のキャンバスでは、各バージョンがライブ HTML としてほかのバージョンやワイヤーフレームの隣に表示されるので、何が変わったかがひと目でわかります。

同じ内容で、モックアップをあと 2 バージョン作ってください。1 つはパワーユーザー向けにより情報量を多く、もう 1 つは朝の手早いチェック向けに数字を大きく、詳細を少なくしてください。それぞれ別のファイルにしてください。

ステップ 6：引き渡す

• 関係者へ： HTML ファイルかスクリーンショットを共有します。HTML ファイルはどのブラウザでも開け、実際のレイアウトを実寸で見せられます。
• 開発へ： 承認されたモックアップを、使っているフレームワークとコンポーネントでアプリの中に作り直すようエージェントに頼みます。Codex で UI デザインする方法と同じように、モックアップがそのまま仕様になります。

コツ

• 1 ファイルに 1 画面。 小さなファイルは修正が速く、比べやすくなります。
• スタイルより先にレイアウトを固める。 ワイヤーフレームの変更は数秒ですが、3 つのモックアップのスタイルを変えるには時間がかかります。
• 実際のサイズと本物らしいデータを使う。 デスクトップは 1440×900、スマートフォンは 390×844、そしてもっともらしい数字。
• ありがちなパターンに注意する。 避けるべきことは AI っぽい UI デザインの特徴を参照してください。

よくある質問

AI はテキストの説明からワイヤーフレームを作れますか？

作れます。ステップ 2 のように、画面とその内容を説明して低精度の HTML ワイヤーフレームを頼みましょう。Codex は、開いて編集し、高精度のモックアップに仕上げられるファイルを返します。

モックアップは画像と HTML のどちらで作るべきですか？

雰囲気を手早く探るなら画像、実寸で評価したいものや実装したいものなら HTML を使いましょう。HTML のモックアップはクリック、サイズ変更、編集ができ、そのままコードに移せます。

Figma はもう必要ありませんか？

方向性を探ったりテストしたりするだけなら不要です。デザインシステムを Figma で管理しているチームは、共有ライブラリや引き渡しのために引き続き使うことが多いでしょう。

続けて読む

• モバイルアプリの UI デザインプロンプトオンボーディング、ホーム、リスト、設定、空の状態のためのプロンプト。
• Codex で UI デザインする方法ブリーフから本番コードまでのワークフロー全体。