mado｜暮らしの道具 ネットショップ — 設計・利用メモ
作成: Codex / 2026-09-19

Claude Designの初稿をもとに、Codexがギャラリー用HTMLへ動作・アクセシビリティの補正を加えました。この文書はCodex作成です。Claude Design出力の原本ZIPは別ファイルとして保全しています。

画面と操作
・商品一覧: 6品、カテゴリと検索の組み合わせ、価格順の並べ替え、0件時のリセット。
・商品詳細: 商品説明・価格・色・数量を確認し、カートへ追加。
・カート: 商品・色ごとに行をまとめ、数量変更・削除。商品名から詳細へ戻れます。
・注文手続き: 購入できない作例であることを示すダイアログだけを表示。決済・注文・問い合わせ送信は行いません。
・ダイアログ: 初期フォーカスは「カートに戻る」。Tab / Shift+Tabはこのボタンにとどまり、Escapeでも閉じます。閉じた後は注文ボタンへフォーカスを戻します。

見本データ
すべて架空の店舗・商品・税込価格です。リムマグ2,400円（白・炭）、リネンクロス1,800円（生成・青）、オークトレー3,600円（ナチュラル）、ガラスの一輪挿し2,200円（クリア）、朝のプレート2,800円（白）、帆布のミニバッグ3,200円（生成・売り切れ）。同じ商品・色は5点まで。送料は全国一律550円、小計6,000円以上は無料。空のカートは送料0円です。

Codexによる補正
・同梱ランタイムのcomponentDidUpdate(prevProps)契約に合わせ、前回モーダル状態を自前で保持。
・モーダル内のTab / Shift+Tab制御を追加。
・検索欄のフォーカス表示を復元し、検索欄・カート商品名・削除ボタンの44px操作領域を補完。
・カートの現在数量を読み上げ可能に変更。
・追加上限の通知を、実際に追加できた数と一致させる。
・外側および展開後HTMLへ日本語の言語指定とページタイトルを追加。
価格・送料計算・商品SVG・ライブラリ内包データは維持しています。

利用上の注意
JavaScriptが必要です。HTMLはReact / ReactDOM / Claude Design用ランタイム / SVG描画を内包したバンドルです。必要な資源は同梱されていますが、現時点で全ブラウザ・完全オフライン環境の動作は保証していません。ブラウザ内メモリの状態のみで、ページ再読込時にはカートが初期化されます。本番の在庫・決済・注文受付・会員管理は実装していません。検証の範囲・未確認事項はギャラリー掲載情報を参照してください。