制作サンプル／架空の洋菓子店です。店名・価格・所在地はすべて創作で、実在しません。
ものぐさ堂CHOUX SPECIALTY

CHOUX SPECIALTY

さくっと、
とろり。

MONOGUSA-DO

クリームは注文を受けてから詰めます。詰めた瞬間から皮は湿っていくので、店内でお召し上がりいただくのがいちばんおいしいです。

いつでもある、3つ

季節ものは入れ替わりますが、この3つは一年中焼いています。

使っているもの

産地を書けないものは、使っていません。

焼き上がりの時間

1日3回だけ焼きます。売り切れたらその日は終わりです。取り置きはしていません。

10:30

1回目・36個

13:30

2回目・36個

16:00

3回目・24個

17:30

だいたいこの時間に売り切れます

お知らせ

焼き上がりの変更や、季節ものの入れ替わりをお伝えします。

Instagram

その日に焼けたもの、店先のようすを毎日あげています。@monogusado_choux

上の9枚は、写真をお預かりするまでの仮の作図です。実案件では Instagram の公式埋め込み、または Graph API での自動取得に差し替えます。

お問い合わせ

ご予約は承っていませんが、ご質問・アレルギーのご相談・ギフトのご相談はこちらから。2日以内にご返信します。

このサイトで使っている実装

写真がまだ無い店舗を、写真なしで成立させるための作りです。

5ページを1ファイルで切り替え
トップ・こだわり・メニュー・店舗・お知らせの5枚を、読み込み直さずに切り替えます。URLのハッシュを書き換えるので、ブラウザの戻る・進むも効きます。実案件では WordPress の固定ページ5枚に分けます。
商品はすべてSVGの手描き
6点の商品イラストと表紙の絵は、画像ファイルではなくコードで描いた図形です。撮影前でもサイトを公開でき、写真ができたら差し替えるだけです。拡大しても輪郭が崩れません。
お知らせの更新機能
お知らせは投稿データとして持ち、一覧・絞り込み・本文の開閉を行っています。管理画面のモックから追加すると、その場で一覧とトップページに反映されます。
画面外から登場する
読み進めると、品書きが画面の外から回りながら定位置に収まります。方向・距離・角度・倍率は毎回ランダムなので、同じ並びになりません。
ふわふわ浮く動きと影
イラストの上下動に合わせて、下の影が伸び縮みします。影を連動させないと、浮いているように見えません。1点ずつ周期をずらしています。
粉糖の奥行き
背景の粒を3段の速度に分けてスクロールに追随させ、奥行きを出しています。requestAnimationFrame に同期させているため、粒を増やしても描画が詰まりません。
地図の埋め込み
Google マップをAPIキーなしで埋め込み、loading="lazy" で画面に入るまで読み込みを遅らせています。同意を得るまで読み込まない形にも変更できます。
動きを止める設定に対応
OS側で「視差効果を減らす」を有効にしている方には、回転・浮遊・粉糖をすべて止めて表示します。内容は必ず見えます。

ご依頼にあった「公開後も店舗側で更新できるように」について。このサンプルは静的なHTMLですが、そのまま WordPress のオリジナルテーマへ移せる形で組んであります。お知らせはカスタム投稿タイプ news、商品はカスタム投稿タイプ item（価格・区分・販売期間・アレルゲンをカスタムフィールドで保持）として設計しており、店舗の方は管理画面から文章と写真を差し替えるだけで更新できます。ペライチ・Wix・STUDIO をご希望の場合も対応できますが、商品が増えたときの絞り込みとアレルゲン表示の一括管理は WordPress のほうが後々ラクです。ご予算とあわせてご相談させてください。

↑TOP