画像から構造へのインタープリター(ビジョン支援)
撮影したスケッチを説明すると、階層と注釈付きの構造化されたUIマップが得られます。
プロンプト概要
あなたへのヒント
迷ったらトレードオフを含む選択肢を提案しましょう。|説明は構造的に保ち、どのデザインツールでも適用できるように。|バリデーションは早期に定義し、フォームの挙動を導きます。|決定的なKPIを早めに特定し、スコープの拡大を防ぎましょう。
運用チームよりNexusAi Technology解決する課題
スケッチの写真はノイズが多いです。これにより、誰でもモックアップ作成を始められる、テキスト優先のクリーンな構造が得られます。
階層優先
どのツールでも使える構造に注力します。
曖昧さの選択肢
トレードオフを提示し、迅速な意思決定を支援します。
バリデーションヒント
早期のフォームルール設定で後のエラーを減らします。
KPIアンカー
レイアウトを一つの成果に合わせて維持します。
AIプロンプト指示
役割:撮影したスケッチを正確でテキスト優先のUI構造に変換する、ビジョン対応のUIアナリストとして行動してください。
このタスクが重要な理由:粗い写真を構造に変換することで、認識のズレを防ぎ、関係者間の合意形成を加速します。
重要な制約:
- 正確な画像処理ができない場合は、詳細なユーザー説明に頼ってください。
- 美的判断は避け、構造と意図に集中してください。
- 曖昧な点は指摘し、2~3の解釈案を提案してください。
ユーザー入力:
- スケッチの写真説明(領域、テキストラベル、矢印など)
- 主な目的と最重要KPI
- 対象デバイスと制約条件
目的:
1) セクションと階層を抽出する
2) コンポーネントとインタラクティブ要素を特定する
3) 想定されるデータフィールドと状態を概説する
分析の流れ:
1) スケッチを中立的な表現で要約する
2) 目的ごとにセクションに分割する
3) 状態要件を含むコンポーネント一覧を作成する
4) 曖昧な点を指摘し、選択肢を提案する
必要な出力形式:
- 要約
- セクションマップ
- 状態付きコンポーネントリスト
- 曖昧さと選択肢
- 次のステップ
品質管理:
- 画面ごとに主要なアクションは1つにする
- すべてのインタラクティブ要素にフォーカス可能な状態を持たせる
- データフィールドには基本的なバリデーションヒントを付ける
最終指示:番号付きセクションと簡潔な箇条書きで構成されたマップを出力し、ワイヤーフレーム作成にすぐ使える形にしてください。
期待される成果
要約:メールフォーム、機能リスト、CTAを備えた単一のオンボーディングページ。 セクションマップ: 1) ヘッダー:ロゴ、サインインリンク 2) ヒーロー:価値提案、メール入力、主要CTA 3) 利点:3カラムの特徴 コンポーネント: - EmailInput:デフォルト/フォーカス/エラー状態;正規表現によるバリデーション - CTAボタン:デフォルト/読み込み中/無効状態 曖昧さ: - 利用規約リンクの配置;オプションA:フォーム下、オプションB:フッター。
実装ステップ
ChatGPTでスケッチを説明する
プロンプトを貼り付け、スケッチ写真の詳細な説明(領域やテキストを含む)を入力してください。番号付きセクションの構造化されたUIマップが得られます。
7 minGeminiで曖昧さの選択肢を検討する
マップをGeminiに貼り付け、曖昧な部分ごとに2~3の妥当な解釈とトレードオフを求めてください。短い意思決定リストが得られます。
6 min構造を確定する
最終決定を持ってChatGPTに戻り、ワイヤーフレーム作成に使えるクリーンで承認済みの構造を依頼してください。
5 min
