mado / 暮らしの道具 — ネットショップ UI 作例
デザインノート（2026-09-19）

※これはデザインの作例です。架空の店舗・架空の商品で、決済・注文・会員登録・
　問い合わせ送信はいずれも行いません。実在する企業・ブランドとは関係ありません。

────────────────────────────────────────────
1. ファイル
────────────────────────────────────────────
mado ネットショップ.dc.html  デザイン本体（編集用）
shop.html                    独立ファイル。ダブルクリックでブラウザに開けます。
                             CSS / JS / SVG をすべて内包。外部フォント・ライブラリ・
                             画像・通信の依存なし。localStorage / Cookie も未使用。
mado-art.js                  商品イラスト（オリジナル SVG）の生成コード。
design-notes.txt             このファイル。

────────────────────────────────────────────
2. 意匠
────────────────────────────────────────────
色    墨色 #23221f（文字・主要ボタン）
      白  #fbfaf8（地）／ 紙色 #f4f1ea（商品の地・フッター）
      罫線 #e6e1d8（1px の細い罫）
      朱赤 #c8462d（少量。特集の見出し、送料の案内、注文ボタン、フォーカス枠）
書体  ヒラギノ角ゴ ProN → 游ゴシック → Meiryo → system-ui の順に指定。
      端末に入っている日本語ゴシックを使うため、Web フォントの読み込みは不要。
余白  本文の行間 2.0 前後、字送り 0.04〜0.24em。見出しは大きく、説明文は小さく。
画像  商品は 1:1 の枠に大きく配置。すべて手描きの SVG で、写真の権利や外部 URL に
      依存しません。色違いは塗りを差し替えて描き分けます。

────────────────────────────────────────────
3. 画面構成
────────────────────────────────────────────
共通ヘッダー（追従）
  ロゴ「mado／暮らしの道具」＝トップへ戻る ／ 検索欄 ／ カート（点数バッジ）

① ショップトップ兼商品一覧
  ・特集：見出し・短い本文・「特集のうつわを見る」（カテゴリ「うつわ」で絞り込み）
  ・絞り込み：すべて／うつわ／布もの／道具（選択中は墨色で反転、aria-pressed）
  ・検索：品名・カテゴリ・色・説明文を対象に部分一致
  ・並べ替え：おすすめ／価格が安い順／価格が高い順
  ・件数表示：「6点の品を表示しています」「『◯◯』の検索結果：0点」
  ・商品カード：画像／カテゴリ／品名／色／価格（税込）／SOLD OUT の帯
  ・該当ゼロ：見出し・理由・「条件をリセットする」ボタン

② 商品詳細
  ・「← 一覧へ戻る」
  ・大きな画像（選んだ色に連動）／カテゴリ／品名／価格／短い説明
  ・色の選択（丸い色見本＋名前、選択中は枠が墨色）
  ・数量 1〜5 のセレクト
  ・「カートに入れる」（朱赤）。SOLD OUT の品は無効化し、文言も SOLD OUT に。
  ・送料の案内を併記

③ カート
  ・「← 買いものを続ける」
  ・行：画像／品名（押すと詳細へ）／色／単価／数量 −・＋（1〜5）／削除／小計
  ・同じ商品でも色が違えば別の行。同じ商品・同じ色はひとつの行にまとめ、
    数量は 5 点を上限に合算します。
  ・空のとき：「カートは空です」＋「商品一覧へ」
  ・お支払い内容：小計（点数）／送料／合計。合計に送料を含みます。
  ・「注文手続きへ」→「デモのため購入できません」のダイアログで停止。

画面の隅（左下）に「作例（架空の店舗・購入不可）」を常時、控えめに表示。
フッターにも同じ趣旨を一行入れています。

────────────────────────────────────────────
4. 見本データ（すべて架空・価格は税込）
────────────────────────────────────────────
  品名               価格     カテゴリ  色            在庫
  リムマグ           ¥2,400   うつわ    白 / 炭       あり
  リネンクロス       ¥1,800   布もの    生成 / 青     あり
  オークトレー       ¥3,600   道具      ナチュラル    あり
  ガラスの一輪挿し   ¥2,200   道具      クリア        あり
  朝のプレート       ¥2,800   うつわ    白            あり
  帆布のミニバッグ   ¥3,200   布もの    生成          SOLD OUT（追加不可）

送料：全国一律 550円。商品小計 6,000円以上で無料。
　　　小計が 6,000円未満のときは「あと¥◯◯で送料が無料になります。」を表示。
数量：1商品あたり 1〜5 点。

────────────────────────────────────────────
5. レスポンシブ
────────────────────────────────────────────
・PC 1200px：本文幅 1200px 上限、商品一覧は 3 列、詳細とカートは 2 段組。
・スマホ 390px：ヘッダーは検索欄とカートが折り返し、商品一覧は 1 列、
  詳細・カートは縦積み。横スクロールは発生しません。
・列数は grid の auto-fill / minmax、余白は clamp() で連続的に変化します。
  固定の高さや nowrap を使っていないため、日本語の文字切れは起きません。

────────────────────────────────────────────
6. アクセシビリティ
────────────────────────────────────────────
・ボタン・入力・数量操作はすべて 44px 以上の操作領域。
・キーボードフォーカスは朱赤 2px の枠（:focus-visible、offset 3px）。
・カートの追加・数量変更・削除・絞り込みのリセットは、画面外の
  aria-live="polite" 領域へ日本語の文で通知します。
　例「リムマグ（白）を1点カートに入れました。カートの合計は1点です。」
・ダイアログは role="dialog" aria-modal="true"。Escape キー、背景のクリック、
  「カートに戻る」で閉じ、閉じると「注文手続きへ」ボタンへフォーカスが戻ります。
・数量の −/＋ は上限・下限で disabled にし、文字色も薄くします。
・色の選択・カテゴリは aria-pressed で選択状態を伝えます。
・本文は 4.5:1 以上のコントラスト。補助文の #6f6a61 も紙色の地で 4.5:1 を満たします。

────────────────────────────────────────────
7. 実装するときに決めること
────────────────────────────────────────────
・商品写真：1:1 で 1200px 以上。SVG の位置に置き換え、alt に品名と色を入れる。
  詳細は複数枚（色ごと＋使用シーン）を想定し、サムネイル列を画像の下に追加。
・在庫：色ごとの在庫を持つ場合、色ボタン単位で無効化と「入荷待ち」表示が必要。
・価格・送料：税率と送料は管理画面から変更できる値として外に出す。
  離島・北海道などの地域別送料を設ける場合は、カートの送料行に注記を追加。
・カートの保存：本番では localStorage かサーバー側のカートに保存する（本作例は未使用）。
・数量上限 5 は仮。在庫数に連動させる場合は上限の根拠を画面に出す。
・検索：部分一致のみ。実装では読み仮名・表記ゆれ（うつわ／器）の辞書が要る。
・並べ替え：「おすすめ」は登録順。実運用では手動並べ替えの仕組みが必要。
・この先の画面：配送先入力、支払い方法、注文確認、完了、注文履歴、
  特定商取引法に基づく表記、プライバシーポリシー、問い合わせ。
・計測：一覧→詳細→カート→注文手続きの遷移率を見るイベント設計。
