雑貨店 madoのネットショップ

Make UI mockups for UI mockupsテンプレートで、架空の生活雑貨店「mado / 暮らしの道具」のネットショップをデザインしてください。日本語の完成度の高い画面見本と、操作できるレスポンシブなプロトタイプを制作します。他の作品やカフェの意匠に合わせる必要はありません。

目的：小さなお店の店主が、商品一覧→詳細→カートの購入前導線を説明できること。実際の決済・注文・送信・会員登録はしないデモです。
意匠：編集者が選ぶ生活道具の静かなオンラインショップ。墨色と白、鮮やかな朱赤を少量。大きな商品ビジュアル、余白、細い罫線、端正な日本語ゴシック。単調な管理画面やカードの羅列にはしない。商品はオリジナルSVG/描画で、写真の権利や外部URLに依存しない。既存ブランドの模倣は避ける。

商品データは必ず次で統一（すべて架空・税込）。
1. リムマグ：2,400円、うつわ、色は白/炭、在庫あり。
2. リネンクロス：1,800円、布もの、生成/青、在庫あり。
3. オークトレー：3,600円、道具、ナチュラル、在庫あり。
4. ガラスの一輪挿し：2,200円、道具、クリア、在庫あり。
5. 朝のプレート：2,800円、うつわ、白、在庫あり。
6. 帆布のミニバッグ：3,200円、布もの、生成、SOLD OUT（カートに追加不可）。
送料全国一律550円、商品小計6,000円以上で送料無料。価格は税込、送料は合計に含める。クーポンや実在の会社情報は不要。

必要画面：①ショップトップ兼商品一覧（特集、カテゴリ絞り込み、検索、該当ゼロ状態、価格順の並べ替え）②商品詳細（画像、選択肢、価格、短い説明、数量1〜5、追加ボタン）③カート（数量増減・削除・空状態・小計/送料/合計）。色違いは別行、同商品同色はまとめる。画面内で遷移し、戻る手段を置く。「注文手続きへ」は「デモのため購入できません」の案内までで停止。画面の隅に作例であることを控えめに明示。

PC1200pxとスマホ390pxの両方で見やすく。操作領域44px以上、キーボードフォーカス可視化、モーダルを使う場合はEscape/閉じるとフォーカス復帰。カート更新は支援技術へ通知。localStorageやCookie、外部通信、フォーム送信は不要。

成果物：デザイン本体に加え、すぐブラウザで開ける独立ファイル shop.html（CSS/JS/SVG内包、外部フォント/ライブラリ/画像依存なし）、design-notes.txt（画面構成、操作、見本データ、実装時に必要なこと）。HTMLを画面でも操作確認し、スマホで横はみ出しと日本語文字切れを直してください。納品時にファイルをプロジェクト内へ残してください。

店名・商品・価格・色の指定を、自分のお店に合わせて書き換えてください。生成結果は利用前に確認しましょう。