眼鏡店（綺麗系・シンプル）のWebデザイン見本

初めて「ちゃんとした眼鏡」を作りたい20〜40代と、遠近両用を考え始めた50代。たくさんの品ぞろえより、測ってから選ぶ店であることを、ショーウィンドウを横に歩くように見せる。


業種	小売・EC（街の眼鏡店）
系統	綺麗系（余白・細い線・細いゴシック・彩度を落とした色・ゆっくりした動き）
テイスト	シンプル
色	紫（ラベンダー）
形	ページ全体が横に動く（PCだけ。スマホとJSなしは縦並び）
スライド	Swiper（`vendor/swiper-bundle.min.js`・MIT。フレームの形の紹介）
メインビジュアル	画像1枚のLP風（店内の写真1枚に、大きなコピーと来店予約ボタン）
アニメーション	あり（GSAP＋ScrollTrigger、Swiper）
演出の型	A05 写真が下からせり上がり、霧の縁。店名がグラデで浮かぶ／C02 フレームが円柱の内側に貼られたようにたわんで横に流れる（Swiper で）／B06 眼鏡ができるまでが付箋タブのように積み重なる
架空の店	「紫苑眼鏡店（しおんめがねてん）／SHION OPTICAL」— 〇〇駅前の、小さな眼鏡店。認定眼鏡士（〇〇）が在籍

だれに向けたページか

初めて「ちゃんとした眼鏡」を作りたい20〜40代と、遠近両用を考え始めた50代。 たくさんの品ぞろえより、測ってから選ぶ店であることを、ショーウィンドウを横に歩くように見せる。

PC（1080px以上・JSあり）は、縦スクロールでページ全体が横に進む。右下に「01 — 06」の番号、上端に細い進み具合の線。

メインビジュアル（A05）：店内の写真が下からせり上がり、下の縁は霧のようにぼける。店名「SHION」がラベンダーのグラデで浮かび、大きなコピー「測ってから、選ぶ。」と「来店予約」ボタン
ごあいさつ：余白の多い短い文と、ラウンジの写真
フレームの形（C02・Swiper）：丸・ボストン・ウェリントン・スクエア・オーバル・キャットアイの6つを、細い線画（SVG）のカードで。カードは円柱の内側に貼られたように、端ほど手前に向いてたわむ。点・矢印・キーボードで送る（自動送りなし）
眼鏡ができるまで（B06）：相談→測定→フレーム選び→加工→お渡しの5枚。横の旅の途中で一度止まり、5枚のカードが付箋タブのように左から積み重なる（スマホとJSなしは、縦に sticky で積み重なる。CSSだけ）
調整・保証：手元の写真と、調整は何度でも無料（見本の文）
来店予約：大きなボタンと営業時間
フッター（横の旅が終わったあと、縦に出る）

vendor/ の Swiper。slidesPerView: auto・centeredSlides・keyboard・a11y・押せる点・矢印
C02 のたわみは Swiper の progress を使い、各カードを rotateY(進み×-22deg) と translateZ で手前に向ける（perspective は親に）
自動送りはしない（綺麗系でゆっくり見せるため）
JSなし：同じ並びが overflow-x: auto; scroll-snap-type: x mandatory で指で送れる（たわみは無し）

新しく3枚：店内（メインビジュアル）／フレーム5本の真上からの写真／眼鏡を調整する手（縦）。写真庫から2枚：ラウンジ（003）／受付のカウンター（021）。

価格・保証の期間・資格の名前は見本の値（〇〇）。会員が本物に替える。