制作サンプル「星よみ整体 ルナソレイユ」（スピリチュアル整体）の解説です。
🔮 実物はこちら → 星よみ整体 ルナソレイユ デモ（カートに商品を入れてみてください）
個人事業のサイトは「導線過多」で壊れる
腕のある個人事業主ほど、サービスが増えます。このデモの想定は、対面整体・占いZOOM面談・グッズ販売・LINE相談の4本立て。素直に作るとメニューが4ページに分かれ、お客様はどこから入ればいいか分からなくなります。
採った方針は逆で、全部を1ページに置き、役割で分けること。「じっくり(対面)」「遠くから(ZOOM)」「モノで(EC)」「まず気軽に(LINE)」と、同じ4つでも“お客様の状態”で選べるカード設計にしています。
ECは「本物を作る前に、見せて試す」
面白いのはグッズ販売です。決済もサーバーもなしで、カート体験だけを localStorage で本物そっくりに作りました。
const KEY = 'luna-cart';
const load = () => JSON.parse(localStorage.getItem(KEY) || '[]');
const save = (c) => localStorage.setItem(KEY, JSON.stringify(c));
// 追加→バッジ加算→モーダルで合計・削除。リロードしても消えない
これで「ECを始めるべきか」をオーナーが体験してから判断できます。導入が決まれば、この見た目のまま Stripe や BASE に接続するだけです。
世界観はCSSだけで
夜空・星のきらめき・浮かぶ月は全部CSS（星の配置は黄金角で散らしています）。画像を1枚も使っていないので、世界観の変更も撮影もコストゼロ。個人サロンの「らしさ」づくりに向いたやり方です。
まとめ
- サービスが多いなら、ページを増やすより「選び方」を設計する
- EC・LINEなどの新機能は、まず“見せるデモ”で合意形成すると速い
- 世界観はコードで作ると、育てるのが楽