EveryGen AIとGPT-Image-2のUIモックアップ：静的コンセプトのガイド

役立つUIモックアップは、製品の情報、優先順位、状態を明確にします。GPT Image 2は、モバイル画面、SaaSダッシュボード、ランディングページの見た目の方向性を探る助けになります。各出力は静的なコンセプト画像であり、動作するソフトウェアや編集可能なコンポーネントライブラリーではありません。

この手順では、架空の個人用タスクアプリTodayを作ります。モバイル画面から始め、同じ内容と見た目の規則を、デスクトップと宣伝の配置へ展開してください。図はCodexが生成した教材であり、EveryGen AIのテスト出力ではありません。

1. 内容と状態を定める

EveryGen AIのモバイルの例は、未完了のタスク三つを示します。そのため、進捗表示は0 of 3 completeで、三つのタスクのチェックボックスはすべて空である必要があります。

要素	文面または状態
見出し	Today
日付	Tuesday, 29 September
進捗	0 of 3 completeと0%
補助の一文	A little focus goes a long way.
タスク1	Read 10 pages — Personal · 20 min
タスク2	Walk for 20 minutes — Health · 20 min
タスク3	Plan tomorrow — Planning · 10 min
主な操作	Add task
ナビゲーション	Today / Projects / Calendar / Profile

これは作例の内容であり、実際のアカウントデータではありません。日付の列は火曜日29日を強調します。進捗の概要は、装飾として選ぶのではなく、タスクの状態から決まります。

EveryGen AIのUI制作指示では、画面の見た目を決める前に、人が理解する必要のある内容を定めてください。この例は、今日のタスクと、その未完了の状態を伝える必要があります。EveryGen AIのプロンプトとともに目的を残し、魅力的な別案が、必要な情報を装飾ウィジェットや説明のない状態へ置き換えないようにします。

EveryGen AIのモックアップ用に、ラベル、タスクの文面、進捗と完了の関係を含む、承認済みの文面記録を残します。文章の提案ではなく、仕様として扱ってください。EveryGen AIの確認では、生成画像と記録を比較します。出力にもっともらしい代案が含まれるだけで、元の記録を書き換えないようにしましょう。

EveryGen AIの静止したチェックボックスは、状態を示すだけで、保存や変更は行いません。画像に示す状態を決め、その後で、ほかの見える表示が一致するか確認してください。EveryGen AIは提案画面を描けますが、永続化、アカウントデータ、操作を選んだ結果は、動作する製品で別に設計する必要があります。

2. 優先順位と再利用する部品を計画する

静的な教材図です。配置の寸法は説明用のデザイン提案であり、実装したアプリから測り出した寸法ではありません。

EveryGen AIの画面を、ヘッダー、進捗、日付の列、タスク一覧、主な操作、ナビゲーションの順に読みます。タスクカードは、左にチェックボックス、中央に題名と補足情報、右にカテゴリーアイコンで統一してください。

EveryGen AIでは、目立つAdd taskの操作と、控えめなナビゲーションを区別します。下部ナビゲーションの項目は、区画を切り替えるものです。タスクを作る操作と、見た目で競合させないでください。

EveryGen AIのモバイル案では、関連情報をまとめ、タスクの題名と、カテゴリーや所要時間を区別できるようにします。一枚ずつ別々に承認せず、繰り返すカードをまとめて確認してください。EveryGen AIの候補の位置合わせが不統一なら、色や全体のスタイルがそろっても、異なる部品の規則を伝える場合があります。

EveryGen AIの画面の主な操作とナビゲーションの周囲に、安全な余裕があるか確認します。目的の違いを画像で理解でき、ラベルを読む十分な空間が必要です。EveryGen AIの静止した配置では、快適なタッチ領域やキーボード操作は証明できません。デザインを実際の画面へ変えた後に、寸法と操作の確認が必要です。

3. 完全なプロンプト一つからモバイル画面を生成する

EveryGen AIのGPT Image 2を開き、文章から画像と、縦長の9:16を選びます。解像度を増やす前に構図を確認するため、1Kで始めてください。画面で実際に使える出力形式を確認します。ここでの教材画像は、書き出しの選択肢を示しません。

Create one complete static mobile UI concept for a fictional task app called Today.
Use a flat 9:16 portrait canvas with no device frame or surrounding scene.

Visual direction:
Cream background, charcoal text, white task cards, deep teal accents,
subtle borders and shadows, clear readable typography, generous safe margins.

Header:
Today
Tuesday, 29 September
A small avatar circle with AL.

Progress card:
0 of 3 complete
0%
A little focus goes a long way.
Show an empty pale progress ring, with no completed green segment.

Add a seven-day strip: Mon 28, Tue 29, Wed 30, Thu 1, Fri 2, Sat 3, Sun 4.
Highlight Tue 29.

Exactly three task cards, all with EMPTY circular checkboxes:
Read 10 pages — Personal · 20 min — book icon
Walk for 20 minutes — Health · 20 min — walking icon
Plan tomorrow — Planning · 10 min — calendar icon

Place one prominent deep-teal Add task button beneath the cards.
Bottom navigation: Today, Projects, Calendar, Profile. Select Today.

Align repeated components, preserve every word, and keep all content visible.
Do not invent extra tasks, checked states, or a working interactive interface.

Codexが生成したコンセプトです。ボタン、アイコン、ナビゲーションは画像の画素であり、動作しません。

EveryGen AIのモバイルの依頼は、画面一つと、承認した状態一つを中心に書きます。空間を埋めるためだけに、無関係なメッセージ、グラフ、追加のタスク群を入れないようにしてください。ダウンロードしたEveryGen AIの候補とともにプロンプトを残し、使った設定を記録します。記憶した見た目ではなく、実際に保存した版と、後の修正を比較できるようにしましょう。

サムネイルに頼らず、実際のEveryGen AIの書き出しで小さなラベルを確認します。見出しが正しく見えても、タスクの補足情報に抜けた単語や結合した文字がある場合があります。画像全体を意図した表示サイズで見てから、不確かな細部を拡大してください。EveryGen AIのコンセプトは、必要な情報がその確認に耐えてこそ役立ちます。

教材の図の出所と、自分のEveryGen AIの出力を区別します。教材は、意図した構図と確認を説明するもので、依頼がその画素を再現するとは証明しません。自分のEveryGen AIの候補に版を付け、完全なプロンプトを保管してください。確認する人が、作例と観察した結果を区別する明確な基準になります。

4. SaaSダッシュボードへ制作指示を展開する

横長の比率を使い、デスクトップ版に明確な情報構成を与えます。製品名、配色、タスクの文面、状態の用語を再利用してください。モバイルの配置指示を、次の内容に置き換えます。

Create a static landscape SaaS dashboard for Today.
Use a left sidebar: Overview, Projects, Calendar, Files.
Place a greeting and summary cards above the main workspace.
Use a task table with Task, Project, Status, and Due columns.
Include a weekly activity chart and a compact calendar in a secondary column.
Use the same cream, charcoal, white, and deep-teal visual system.
Label any invented analytics as example data.
Keep table headings and status labels readable; do not add a mobile device frame.

細かなダッシュボードを生成する前に、実際のサンプル行とグラフ値を指定します。表示合計がその値と一致するか確認してください。説得力のあるグラフも、データの正確さの証拠ではありません。

EveryGen AIのダッシュボードの制作指示では、主な作業領域と補助領域に置く情報を定めます。キャンバスが広くても、架空の事業指標を加える理由にはなりません。各状態の意味と、最終画像へ表示するサンプル値を含め、EveryGen AIの内容記録を明確にしてください。

見た目の一貫性を判断する前に、EveryGen AIのデスクトップのタスク文面と、モバイルの文面を比較します。面に合わせてナビゲーションを変えても、タスクの識別と状態の用語は一貫させます。EveryGen AIの展開は、元の配色に似た魅力的な配置で、別の製品を黙って加えるのではなく、承認情報を組み直すものにしてください。

EveryGen AIのダッシュボード内のグラフも、仕様が必要な別の項目として扱います。依頼する前に、出所と意図したメッセージを特定し、その後でラベルと関係を独立して確認してください。EveryGen AIにグラフが現れても、測定結果、実データとの接続、その値を調べる動作するフィルターは証明されません。

5. ランディングページへ制作指示を展開する

ランディングページは、始めるよう求める前に利点を説明します。ダッシュボードのすべての操作項目は必要ありません。

Create a static desktop landing-page concept for the fictional Today app.
Headline: Make room for focused work
Primary CTA: Start planning
Show a product preview and three concise benefit cards:
Stay organized / Focus on what matters / Make real progress.
Use the same deep-teal accent, warm ivory surfaces, and restrained typography.
Keep the headline and CTA readable at ordinary browser size.
Do not invent customer logos, testimonials, prices, or performance statistics.

記事のカバーは、三つの面が同じ見た目の表現を共有する方法を示します。小さな文字を確認するなら、画面を別々に生成してください。複数の機器を含む提示画像では、各画面に使える画素が減ります。

EveryGen AIのランディングページの案は、製品の目的を説明し、主な操作を見つけやすくするものにします。製品プレビューや補助カードを加える前に、承認したメッセージを選んでください。EveryGen AIのCTAの文面を、その目的に結び付けます。画像中の目立つボタンは意図を伝えますが、行き先や登録手順を作りません。

EveryGen AIのランディングページと製品画面の関係を確認します。プレビューは、矛盾するタスク状態や無関係な機能を見せず、述べた利点を支えるものにしてください。EveryGen AIの制作指示に、裏付けのない推薦文や顧客の主張を入れないようにします。洗練された見た目でも、実際の人が製品を使った、特定の成果を得たとは証明できません。

6. 言葉、状態、形を別々に確認する

最初に、見えるラベルをすべて承認文面と比較します。次にカード、チェックボックス、ナビゲーション項目、主な操作を数えます。最後に位置合わせ、コントラスト、間隔、安全な余白を確認してください。

1 of 3の状態には、完了したタスクがちょうど一つ必要です。0 of 3の状態には、一つもありません。画面が洗練して見えるだけで、タスク一覧と矛盾する進捗リングを承認しないでください。

修正には、保存した候補を画像から画像へアップロードし、例えば次のように、観察可能な変更を一つ説明します。

Correct only the second task label to Walk for 20 minutes.
Preserve the other copy, three empty checkboxes, zero progress,
layout, colors, navigation, and Add task button.

修正版全体を前の版と比較してください。ほかの領域を保つ指示は、それらが同一に残る保証ではありません。

EveryGen AIのコンセプトを、承認文面、描かれた状態、配置の別々の段階で評価します。見出しが正しくても進捗表示の確認にはならず、カードが整っていても内容の確認にはなりません。修正を求める前に、観察した問題を記録してください。EveryGen AIの修正を、別の確認者も特定できる問題へ絞る助けになります。

EveryGen AIの修正版と基準版を比較する際は、以前に受け入れた画面の部分をすべて確認します。ラベル一つを変える依頼でも、別のチェックボックス、余白、ナビゲーションが変わる場合があります。不採用の別案は、承認ファイルと分けてください。EveryGen AIの指示は意図を説明します。結果の画像には、構図全体の確認が引き続き必要です。

レスポンシブな製品にする予定の配置なら、EveryGen AIの画素を異なる形へ引き伸ばさず、案をどう組み直すか記録します。目立たせ続ける内容と、移動できる内容を決めてください。EveryGen AIの画像は話し合いを導けますが、狭い幅と広い幅での実際の動作は、実装で定める必要があります。

7. 選んだ案を実際のデザインへ変える

承認画像を、文面記録、意図した状態、未解決の問題とともに保存します。デザインツールやコードで、編集可能な文字と部品を使って配置を作り直してください。その実装で、キーボード操作、レスポンシブ動作、コントラスト、実際の操作を確認します。

生成したモックアップは、方向性を話し合うのに役立ちます。アクセシビリティ適合を証明せず、フォントのライセンスを提供せず、動作する画面のテストの代わりにもなりません。

EveryGen AIのコンセプトを、承認文面、描いた状態、未定の判断の短い一覧とともに引き渡します。描いただけの操作項目と、将来の製品で対応する必要がある操作を説明してください。EveryGen AIの書き出しを、編集可能な実装と並べた参考として残します。開発者が、ラスターの画素を部品と考えずに、意図した情報の優先順位を追えるようにしましょう。

繰り返すEveryGen AIのカードを、編集可能な文章と明示的な状態を持つ、実際に再利用できる部品として作り直します。画像が答えると仮定せず、動作する製品で、読み込み中、空、選択済み、エラーの動作を定めてください。EveryGen AIのモックアップは、選んだ見た目の方向性を伝えられますが、アプリには、データ、フォーカス、検証、操作の独自の規則が必要です。

タスクを読む、状態を変える、移動する、正しい文脈へ戻るといった実際の作業で、実装デザインを受け入れます。レスポンシブ配置とアクセシビリティの実用的な調整を認めながら、その結果をEveryGen AIの仕様と比較してください。EveryGen AIの検討の役割を明確に保ちます。デザインの判断と確認を支えるものであり、動作する画面は、その動作を自ら示す必要があります。