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 は仮。在庫数に連動させる場合は上限の根拠を画面に出す。 ・検索：部分一致のみ。実装では読み仮名・表記ゆれ（うつわ／器）の辞書が要る。 ・並べ替え：「おすすめ」は登録順。実運用では手動並べ替えの仕組みが必要。 ・この先の画面：配送先入力、支払い方法、注文確認、完了、注文履歴、 特定商取引法に基づく表記、プライバシーポリシー、問い合わせ。 ・計測：一覧→詳細→カート→注文手続きの遷移率を見るイベント設計。