店舗サイト（6ページ・EC・予約フォーム付き）のデモ「御菓子司 鈴音堂」
創業百年の和菓子店を想定した、6ページの店舗サイト。こだわり・お品書き・オンラインショップ・店舗案内・ご予約まで、実際のお店に必要なページをひと通りそろえました。
レスポンシブ表示
PC（1440px）
タブレット（820px）
スマートフォン（390px）
このデモで目指したこと
- 老舗らしい品のある世界観を、写真と縦書き・明朝体で伝える
- 来店前に知りたいこと（営業日・道順・日持ち・アレルギー）に迷わずたどり着ける
- 日持ちする菓子をオンラインで売り、上生菓子は予約で取り置きできる
- 検索エンジンに正しく伝わる構造（ページごとのタイトル・構造化データ・パンくず）
ページ構成（6ページ）
- トップ →季節の便り・今月の上生菓子・各ページへの案内・営業時間
- こだわり →店のあゆみ（年表）・餡へのこだわり・十二か月の意匠・職人の手しごと
- お品書き →6カテゴリ・20品目の価格と特定原材料・日持ち。カテゴリへ飛べる追従ナビ
- オンラインショップ →カート（数量変更・送料計算・送料無料までの残額表示）と注文手続きの画面
- 店舗案内・アクセス →店舗オリジナルのイラストマップ・駅からの道順・自動で描く営業カレンダー
- ご予約・お問い合わせ →受け取り日時・のしを指定できる予約フォーム・よくあるご質問
制作のポイント
縦書きと写真で「老舗らしさ」を
ファーストビューは店先の写真に縦書きのコピーを重ね、明朝体と金茶色で落ち着いた印象に。各ページの冒頭も写真の帯でそろえ、どのページから入っても同じ店の空気が伝わるようにしています。
カートまで動くオンラインショップ
商品の追加・数量変更・小計と送料の計算・「あと○円で送料無料」の表示・お届け先の入力まで、実際に操作できます。カートはブラウザに保存され、ページを移動しても消えません。本番では決済サービスとつなぎます。
地図とカレンダーも、店に合わせて
アクセスは、駅からの道順を描いたオリジナルのイラストマップに。営業カレンダーは定休日（水曜）を自動で描くので、毎月の更新が要りません。
SEOを前提にした作り
ページごとに固有のタイトルと説明文、canonical、OGP、パンくずリスト、店舗（Store）と商品（Product）の構造化データ、サイトマップを出力。6ページは小さなビルドスクリプトで共通部分を管理し、表記ゆれが起きない構成です。
どの画面幅でも
スマートフォン・タブレット・PCで確認。スマートフォンではメニューが全画面で開き、電話番号はタップで発信、お品書きのカテゴリナビは横にスクロールできます。