# 画像・UI モックアップサンプル
## 1. HTMLフォームのワイヤーフレーム例
以下のようなフォームのモックアップ画像があると、AIがより適切なInput クラスを生成できます：
### ユーザー登録フォームのワイヤーフレーム
```
┌─────────────────────────────────────────────┐
│ 新規会員登録 │
├─────────────────────────────────────────────┤
│ │
│ ┌── 個人情報 ────────────────────────────┐ │
│ │ │ │
│ │ [太郎 ] [山田 ] │ │
│ │ 名前 姓 │ │
│ │ │ │
│ │ [taro@example.com ] │ │
│ │ メールアドレス │ │
│ │ │ │
│ │ [090-1234-5678 ] │ │
│ │ 電話番号（任意） │ │
│ │ │ │
│ │ [1990-05-15] [男性 ▼] │ │
│ │ 生年月日 性別 │ │
│ └───────────────────────────────────────┘ │
│ │
│ ┌── アカウント情報 ─────────────────────┐ │
│ │ │ │
│ │ [yamada_taro ] │ │
│ │ ユーザー名 │ │
│ │ │ │
│ │ [●●●●●●●● ] │ │
│ │ パスワード │ │
│ │ │ │
│ │ [●●●●●●●● ] │ │
│ │ パスワード確認 │ │
│ │ │ │
│ │ [日本語 ▼] │ │
│ │ 優先言語 │ │
│ └───────────────────────────────────────┘ │
│ │
│ ┌── 住所 ──────────────────────────────┐ │
│ │ │ │
│ │ [100-0001] │ │
│ │ 郵便番号 │ │
│ │ │ │
│ │ [東京都 ▼] [千代田区 ] │ │
│ │ 都道府県 市区町村 │ │
│ │ │ │
│ │ [千代田1-1-1 ] │ │
│ │ 番地・町名 │ │
│ │ │ │
│ │ [千代田ビル101号 ] │ │
│ │ 建物名・部屋番号（任意） │ │
│ └───────────────────────────────────────┘ │
│ │
│ ┌── 設定 ──────────────────────────────┐ │
│ │ │ │
│ │ ☑ メールマガジンを受け取る │ │
│ │ ☐ SMS通知を受け取る │ │
│ │ ☐ マーケティング情報の受信に同意する │ │
│ │ ☑ 利用規約に同意する（必須） │ │
│ └───────────────────────────────────────┘ │
│ │
│ [登録する] │
│ │
└─────────────────────────────────────────────┘
```
### Eコマース注文フォームのワイヤーフレーム
```
┌─────────────────────────────────────────────┐
│ ご注文手続き │
├─────────────────────────────────────────────┤
│ │
│ ┌── 注文者情報 ───────────────────────────┐ │
│ │ [山田太郎 ] │ │
│ │ お名前 │ │
│ │ │ │
│ │ [customer@example.com ] │ │
│ │ メールアドレス │ │
│ │ │ │
│ │ [03-1234-5678 ] │ │
│ │ 電話番号 │ │
│ └───────────────────────────────────────┘ │
│ │
│ ┌── 配送先住所 ───────────────────────────┐ │
│ │ [150-0001] [東京都] [渋谷区] │ │
│ │ 郵便番号 都道府県 市区町村 │ │
│ │ │ │
│ │ [神宮前1-1-1 ] │ │
│ │ 番地・町名 │ │
│ │ │ │
│ │ [表参道ヒルズ ] │ │
│ │ 建物名（任意） │ │
│ │ │ │
│ │ [配送時の注意事項があれば... ] │ │
│ │ 配送メモ │ │
│ └───────────────────────────────────────┘ │
│ │
│ ☑ 請求先住所は配送先と同じ │
│ │
│ ┌── 支払い方法 ───────────────────────────┐ │
│ │ ◉ クレジットカード │ │
│ │ ○ 銀行振込 │ │
│ │ ○ コンビニ支払い │ │
│ │ │ │
│ │ [1234 5678 9012 3456 ] │ │
│ │ カード番号 │ │
│ │ │ │
│ │ [YAMADA TARO ] │ │
│ │ カード名義人 │ │
│ │ │ │
│ │ [12 ▼] [2025 ▼] [123] │ │
│ │ 月 年 CVV │ │
│ └───────────────────────────────────────┘ │
│ │
│ ┌── 配送オプション ─────────────────────┐ │
│ │ [指定なし ▼] │ │
│ │ 配送時間 │ │
│ │ │ │
│ │ ☑ ギフト包装（+500円） │ │
│ │ ☐ お急ぎ便（+800円） │ │
│ └───────────────────────────────────────┘ │
│ │
│ ┌── クーポン・ポイント ─────────────────┐ │
│ │ [クーポンコードを入力 ] [適用] │ │
│ │ │ │
│ │ 使用ポイント: [0 ] / 1000ポイント │ │
│ └───────────────────────────────────────┘ │
│ │
│ [注文を確定する] │
│ │
└──���──────────────────────────────────────────┘
```
## 2. 管理画面のフォーム例
### 商品登録フォームのモックアップ
```
┌─────────────────────────────────────────────────────────────┐
│ 新規商品登録 [保存] [戻る] │
├─────────────────────────────────────────────────────────────┤
│ │
│ ┌── 基本情報 ─────────────────┐ ┌── 価格・在庫 ──────────┐ │
│ │ │ │ │ │
│ │ 商品名 * │ │ 基本価格 * │ │
│ │ [ワイヤレスイヤホン ] │ │ [¥12,800 ] │ │
│ │ │ │ │ │
│ │ 商品コード (SKU) * │ │ セール価格 │ │
│ │ [WE-001 ] │ │ [¥9,800 ] │ │
│ │ │ │ │ │
│ │ ブランド │ │ 通貨 │ │
│ │ [TechSound ] │ │ [JPY ▼] │ │
│ │ │ │ │ │
│ │ モデル │ │ 在庫数量 │ │
│ │ [Elite Pro ] │ │ [50 ] │ │
│ │ │ │ │ │
│ │ 商品説明 * │ │ ☑ 在庫を管理する │ │
│ │ ┌─────────────────────────┐ │ │ │ │
│ │ │高音質Bluetooth5.0対応 │ │ │ 低在庫アラート │ │
│ │ │ワイヤレスイヤホン。 │ │ │ [5 ] │ │
│ │ │ノイズキャンセリング │ │ │ │ │
│ │ │機能付きで... │ │ │ ☐ バックオーダー許可 │ │
│ │ └─────────────────────────┘ │ │ │ │
│ └─────────────────────────────┘ └────────────────────────┘ │
│ │
│ ┌── カテゴリ・タグ ───────────────────────────────────────┐ │
│ │ │ │
│ │ メインカテゴリ * │ │
│ │ [オーディオ機器 ▼] │ │
│ │ │ │
│ │ サブカテゴリ │ │
│ │ ☑ イヤホン ☑ ワイヤレス ☐ スポーツ ☐ ゲーミング │ │
│ │ │ │
│ │ タグ │ │
│ │ [Bluetooth, ノイズキャンセリング, 高音質, 防水 ] │ │
│ └─────────────────────────────────────────────────────┘ │
│ │
│ ┌── 商品属性 ─────────────────────────────────────────────┐ │
│ │ │ │
│ │ 重量: [0.05]kg 色: [ブラック ▼] サイズ: [M ▼] │ │
│ │ │ │
│ │ 寸法 長さ:[5.2]cm 幅:[3.1]cm 高さ:[2.8]cm │ │
│ │ │ │
│ │ 素材: [プラスチック ] 製造国: [中国 ] │ │
│ └─────────────────────────────────────────────────────┘ │
│ │
│ ┌── 商品画像 ─────────────────────────────────────────────┐ │
│ │ │ │
│ │ ┌────┐ ┌────┐ ┌────┐ [画像を追加] │ │
│ │ │★ │ │ │ │ │ │ │
│ │ │IMG1│ │IMG2│ │IMG3│ 最大10枚まで │ │
│ │ │ │ │ │ │ │ │ │
│ │ └────┘ └────┘ └────┘ │ │
│ │ メイン サブ サブ │ │
│ └─────────────────────────────────────────────────────┘ │
│ │
│ ┌── SEO・公開設定 ────────────────────────────────────────┐ │
│ │ │ │
│ │ SEOタイトル │ │
│ │ [高音質ワイヤレスイヤホン - TechSound ] │ │
│ │ │ │
│ │ SEO説明文 │ │
│ │ [Bluetooth5.0対応の高音質ワイヤレスイヤホン... ] │ │
│ │ │ │
│ │ URLスラッグ │ │
│ │ [wireless-earphones-elite-pro ] │ │
│ │ │ │
│ │ ステータス: [下書き ▼] 公開日時: [2024-01-15 10:00] │ │
│ └──────────────────────────────────────────────────��──┘ │
│ │
│ [プレビュー] [下書き保存] [公開] │
│ │
└─────────────────────────────────────────────────────────────┘
```
## 3. モバイルフォームのモックアップ
### スマートフォン用ユーザー登録フォーム
```
┌─────────────────┐
│ ← 新規登録 │
├─────────────────┤
│ │
│ 個人情報 │
│ ┌─────────────┐ │
│ │太郎 │ │
│ └─────────────┘ │
│ 名前 │
│ │
│ ┌─────────────┐ │
│ │山田 │ │
│ └─────────────┘ │
│ 姓 │
│ │
│ ┌─────────────┐ │
│ │taro@ex... │ │
│ └─────────────┘ │
│ メール │
│ │
│ ┌─────────────┐ │
│ │090-1234-... │ │
│ └─────────────┘ │
│ 電話番号 │
│ │
│ ┌─────────────┐ │
│ │1990-05-15 │ │
│ └─────────────┘ │
│ 生年月日 │
│ │
│ ┌─────────────┐ │
│ │男性 ▼ │ │
│ └─────────────┘ │
│ 性別 │
│ │
│ │
│ アカウント情報 │
│ ┌─────────────┐ │
│ │yamada_taro │ │
│ └─────────────┘ │
│ ユーザー名 │
│ │
│ ┌─────────────┐ │
│ │●●●●●●●● │ │
│ └─────────────┘ │
│ パスワード │
│ │
│ ┌─────────────┐ │
│ │●●●●●●●● │ │
│ └─────────────┘ │
│ パスワード確認 │
│ │
│ ┌─────────────┐ │
│ │日本語 ▼ │ │
│ └─────────────┘ │
│ 優先言語 │
│ │
│ [続ける] │
│ │
└─────────────────┘
```
## 4. フォーム要素のパターン集
### 入力フィールドのバリエーション
```
テキスト入力:
┌─────────────────────────┐
│ 山田太郎 │ 単行テキスト
└─────────────────────────┘
┌─────────────────────────┐
│ ●●●●●●●● │ パスワード
└─────────────────────────┘
┌─────────────────────────┐
│ user@example.com │ メール
└─────────────────────────┘
┌─────────────────────────┐
│ 090-1234-5678 │ 電話番号
└─────────────────────────┘
┌─────────────────────────┐
│ 2024-01-15 │ 日付
└─────────────────────────┘
┌─────────────────────────┐
│ 10:30 │ 時間
└─────────────────────────┘
選択系:
┌─────────────────────────┐
│ 東京都 ▼ │ ドロップダウン
└─────────────────────────┘
◉ 男性 ○ 女性 ○ その他 ラジオボタン
☑ 利用規約に同意します チェックボックス
☐ メルマガを受け取る
☑ プライバシーポリシーに同意
テキストエリア:
┌─────────────────────────┐
│ ご質問やご要望があれば │
│ こちらにご記入ください... │
│ │
│ │
└─────────────────────────┘
ファイルアップロード:
┌─────────────────────────┐
│ 📁 ファイルを選択... │
└─────────────────────────┘
数値入力:
┌─────────────────────────┐
│ 1,000 [- │ +] │ 数量入力
└─────────────────────────┘
レンジスライダー:
├─���────●─────────────────┤ 価格範囲
0 100,000
星評価:
★★★☆☆ 評価: 3/5
カラーピッカー:
┌───┐ ┌───┐ ┌───┐ ┌───┐
│ ■ │ │ ■ │ │ ■ │ │ ■ │ 色選択
└───┘ └───┘ └───┘ └───┘
```
## 5. レスポンシブフォームのブレークポイント
### デスクトップ (1200px+)
```
┌─────────────────────────────────────────────────────────────┐
│ [フィールド1] [フィールド2] [フィールド3] [フィールド4] │ 横4列
└─────────────────────────────────────────────────────────────┘
```
### タブレット (768px - 1199px)
```
┌─────────────────────────────────────┐
│ [フィールド1] [フィールド2] │ 横2列
│ [フィールド3] [フィールド4] │
└─────────────────────────────────────┘
```
### スマートフォン (768px未満)
```
┌─────────────────┐
│ [フィールド1] │ 縦1列
│ [フィールド2] │
│ [フィールド3] │
│ [フィールド4] │
└─────────────────┘
```
これらの画像やワイヤーフレームをAIプロンプトと一緒に提供することで、視覚的な情報からもより適切なInput クラス群を生成できるようになります。