UIモック制作の新常識！プロンプトで始めるUI作成

あなたはECサイトのUI/UXに精通したプロのフロントエンドデザイナーです。 以下の要件をもとに「自社雑貨を販売するECサイト」のUIモックを画面ごとに出力してください。 各画面は1ファイルずつ、見やすいモダンなデザイン、直感的な操作感を重視し、スマホ/PC両対応のレスポンシブで作成してください。 【プロジェクト概要】 ・ジャンル：自社雑貨（可愛い・日常使いの小物中心 ・ブランドトーン：ポップでカラフル（明るく親しみやすい世界観 ・主要ターゲット：20〜30代女性 ・参考UI傾向：Amazonの情報量・導線の分かりやすさを参考（ビジュアルは自社トーンで最適化 【デザイン要件】 ・配色：白をベースに、アクセントにビビッドなカラー（例：ピンク、ミント、オレンジ、イエロー ・タイポ：丸みのあるサンセリフ（見出しは太め、本文は可読性重視 ・要素の丸み：ボタン/カードは角丸大きめ、影はやや柔らかめ ・コンポーネントの一貫性：ボタン、バッジ、カード、トースト、モーダルのスタイルを統一 ・アクセシビリティ：コントラスト比を意識（重要ボタンは十分なコントラスト、フォーカスリング明示 ・レスポンシブ：モバイル優先、ブレークポイント例 480px / 768px / 1024px ・アニメーション：ホバー/押下で軽いトランジション（0.2〜0.3s 【共通コンポーネント（全ページ共通ヘッダー/フッター】 ・ヘッダー：ロゴ、検索バー、カート、ログイン/マイページ、クーポン告知バナー（小 ・グローバルナビ：カテゴリ（新作・人気・ギフト・セール など ・フッター：顧客サポート、配送/返品、SNSリンク、著作権 ・トースト通知：追加/適用/エラー系メッセージ ・モーダル：クーポン適用確認、ギフト設定、配送日時選択確認 【作成してほしい画面（それぞれ別HTMLで出力】 ログイン/新規登録 　・メール/パスワード、SNSログイン（見た目のみ 　・新規登録導線、パスワード再設定導線 　・メリット列挙（ポイント/クーポン/配送先保存 　・// 参考UI: https://www.amazon.co.jp/（サインインの導線整理 ホーム（トップ 　・メインKV（新作・季節特集のスライダー 　・ランキング（デイリー/ウィークリー切替 　・おすすめ（レコメンド枠：最近閲覧・あなたへのおすすめ 　・クーポン告知（取得→自動適用までの説明 　・ギフト特集/セール導線 　・// 参考UI: https://www.amazon.co.jp/ 検索結果/一覧（カテゴリ共通テンプレ 　・検索バー、ソート（人気/新着/価格、絞り込み（価格帯/カラー/在庫/レビュー星 　・商品カード（画像、商品名、価格、レビュー星、バッジ：新作/人気/セール 　・ページネーション/無限スクロール風 　・空状態の提案（検索ヒント表示 　・// 参考UI: https://www.amazon.co.jp/ カテゴリ一覧（ギフト・新作・セールの専用ビジュアル 　・カテゴリバナー（カラフル/季節感 　・サブカテゴリチップ 　・商品カードグリッド 商品詳細 　・メイン画像（サムネ切替/拡大 　・商品名、価格、在庫、バリエーション（カラー/サイズ 　・カートに入れる、今すぐ購入 　・ギフトラッピング設定（ラッピング種類、メッセージ入力 　・配送日時指定（カレンダー/時間帯選択 　・クーポン適用UI（適用済み表示/トグル 　・レビュー（星平均、並び替え、絞り込み、投稿導線 　・レコメンド（関連・一緒に購入される 　・// 参考UI: https://www.amazon.co.jp/ カート 　・商品行（画像、バリエーション、数量ステッパー、金額、小計 　・クーポン入力/適用ボタン、適用結果の小計反映 　・ギフトラッピングの有無/編集、配送日時の確認/編集 　・送料/合計の明細、購入手続きへ 　・// 参考UI: https://www.amazon.co.jp/ チェックアウト（住所/配送/支払い 　・配送先住所フォーム（郵便番号→住所補完UI想定の見た目 　・配送方法（通常/お急ぎ、配送日時指定（簡易カレンダーUI 　・支払い方法（見た目：カード/代引き/後払い 　・注文内容の確認、クーポン/ギフト適用最終表示 　・注文確定ボタン（確認モーダル 　・// 参考UI: https://www.amazon.co.jp/ 注文完了 　・注文番号、サマリー（商品/金額/配送予定 　・シェア導線（SNS 　・「引き続きお買い物」おすすめ枠 マイページ（ダッシュボード 　・注文履歴（ステータス、詳細リンク 　・クーポン一覧（未使用/使用済/期限間近 　・配送先/支払い情報の編集 　・レビュー管理（投稿済/下書き 注文詳細 　・注文番号、日付、配送先、支払い、明細 　・配送日時の変更（見た目のみ、ギフト設定確認 　・領収書ダウンロード（ダミーリンク レビュー投稿 　・星評価、タイトル、本文、画像添付（見た目のみ 　・投稿ガイドラインの注意書き 　・送信確認モーダル ランキング 　・デイリー/ウィークリー/カテゴリ別タブ 　・ランキングカード（順位バッジ、レビュー星、価格、カート導線 クーポンセンター 　・配布中クーポン一覧（条件/割引率/期限/利用可能カテゴリ 　・「取得」→「適用中」表示切替（トグル 　・注意事項アコーディオン ギフトガイド 　・シーン別/予算別提案（誕生日/季節のイベント/〜¥3,000など 　・ラッピング種類の比較（カード/包装/メッセージ 【ダミーデータの扱い】 ・商品画像はプレースホルダーでOK（カラフルな雑貨風のサンプル ・価格は¥1,000〜¥9,800のランダム ・レビューは星1〜5、テキスト数行のダミー ・配送日時は今日から30日内で選択可能な見た目 【アウトプット指示】 ・各HTML冒頭に1〜2行のコメントで「デザインの意図/主要導線」を記述 ・可能なら画面ごとに「// 参考UI: URL」コメントを記載（任意、例は上記 ・HTML/CSSのみでサンプルとして動くレベル（JSは最小限の見た目用の疑似処理で可、API連携不要 ・CSSは同一ファイル内で完結可。BEM風クラス名で読みやすく ・ボタン/入力/カード/バッジ/トースト/モーダルの共通スタイル変数を定義 　・--color-primary、--color-accent、--radius-lg、--shadow-soft、--gap-md など 【強調したい体験】 ・「毎日見たくなる」楽しさ：色・丸み・軽快なアニメーション ・「迷わず買える」導線：検索→一覧→詳細→カート→チェックアウトの一貫性 ・「お得がわかる」：クーポン適用のフィードバック（合計の即時反映、バッジ表示 ・「贈りたくなる」：ギフト設定と配送日時指定のわかりやすいUI 【ファイル出力順・命名】 ・01_login.html ・02_home.html ・03_search-list.html ・04_category.html ・05_product-detail.html ・06_cart.html ・07_checkout.html ・08_order-complete.html ・09_mypage.html ・10_order-detail.html ・11_review-new.html ・12_ranking.html ・13_coupons.html ・14_gift-guide.html 【フォーム/バリデーション（見た目の文言例】 ・必須エラー：「この項目は必須です」 ・形式エラー（メール：「メールアドレスの形式が正しくありません」 ・クーポン適用成功：「クーポンを適用しました（-¥500」 ・在庫不足：「選択した数量は在庫数を超えています」 【レスポンシブ・レイアウト指針】 ・モバイル：1カラム基調、検索/カートは常時アクセス可能な固定ボトムバー案も可 ・タブレット：2カラム中心（一覧は2〜3列 ・デスクトップ：3〜4列グリッド、サイドフィルター固定