Everygenの制作ガイド

AIのUI画像を静的なアプリ・Webの案として検討

ユーザーの作業をひとつ決め、画面の情報と順番を画像で比較します。生成画像は動くアプリではありません。採用した案を実際の部品と状態に実装してください。

Everygen公開日 2026-10-04

AIの支援を受けて作成した制作ガイドです。指示例や撮影計画は検討の出発点であり、顧客の実績や提供サービスで完了した検証の報告ではありません。

AIのUI画像は、情報の順番、余白、表現の相談に使えます。動く操作や実データでの検証ではありません。AI画像のツールで画面と作業をひとつに絞り、画像として比較してから実装します。架空の予約画面の例で、静的な案を製品のように扱わずに構成を指定します。

ひとつの作業と画面状態を決める

架空の予約画面なら、空いている時間を選び、その日時を確認する作業にします。サービス、日付、空き時間、価格、主な操作など、判断に必要な情報を挙げます。選択した時間がある1日のように、状態もひとつにします。管理、初回案内、購入を1枚に混ぜると、各作業が伝わりません。

指示例：「静的なモバイル予約UI案。明確なタイトル、上のサービス概要、日付選択、少数の時間枠、選択時間の要約、主な予約操作1つ。広い余白、読める対比、落ち着いたアクセント、丸い操作の統一、短い仮ラベル、真正面の平面画面、端末モックアップなし」。自分の作業へ置き換え、装飾より構成を優先します。

書体の性格、余白、面の対比、角、アクセントの役割を記録し、次の画面でも使います。選択・未選択が区別できるか比べます。生成された数値やラベルは不整合の可能性があるため、重要な文章を直します。別アプリに似ていることだけで、完全な設計や適した操作と判断しません。

読む順番と主な操作の見つけやすさを確認します。長い名前や空き時間がない状態も検討しますが、それは画像で検証済みの状態ではありません。キーボード、タップ範囲、読み上げ、エラー、画面サイズへの対応は、実際の実装で確認します。

採用した情報の順番を、データモデル、再利用する操作、レスポンシブなルールにします。実データで空、読み込み、検証、成功を実装します。画像全体を操作画面にせず、文字と操作を実際の要素で作ります。携帯とPCで比較し、元の指示と採用理由を残します。

静的な案と明示し、対象の作業、仮ラベル、承認した判断、未実装の動作を記載します。レビュアーがボタンは動くのか推測しなくてよい状態にし、製品要件と装飾を分けます。

実装後の操作紹介には実際の画面録画のガイド、周囲のブランドにはブランドキットを使います。異なる成果物には異なる確認が必要です。