パティスリー（カッコイイ系／スタイリッシュ）のWebデザイン見本

記念日や手みやげに「ほかと違うケーキ」を探している30〜40代。写真で選ぶ人。ケーキ1台を主役に、断面まで見せて予約させるページ。


業種	飲食・カフェ
系統	カッコイイ系（黒地・極太のイタリック・強いコントラスト・直線・切れのいい動き）
テイスト	スタイリッシュ
色	紫（黒に近いプラム＋すみれ色。文字は生成り）
形	LP型（1枚もの）：ヘッダーはロゴと「予約する」だけ。予約ボタンは4か所＋スマホは画面の下に固定
スライド	Swiper：ほかの生菓子の並び。点・矢印・キーボード・自動送り（止めるボタンつき）
メインビジュアル	静止画を動かす（動画風）：ケーキの写真1枚が下からせり上がり、ゆっくり寄り続ける。光の帯が表面をすべる
アニメーション	あり（GSAP＋ScrollTrigger＋Swiper）
演出の型	A05 写真が下からせり上がり、下端は霧のぼかし。巨大な店名がグラデで浮かぶ／G02 縦線を動かして「外側」と「断面」を見比べる／E01 「CASSIS」の文字の形に写真をくり抜き、中の写真がスクロールで流れる
架空の店	「SOIR VIOLET（ソワール・ヴィオレ）」— 夜だけ開く、カシスとすみれの菓子の店

だれに向けたページか

記念日や手みやげに「ほかと違うケーキ」を探している30〜40代。写真で選ぶ人。 ケーキ1台を主役に、断面まで見せて予約させるページ。

黒地の本文は #cfc6d6（#1c1520 の上でも 10.79）。

メインビジュアル（A05＋動画風）：黒い画面の下から写真がせり上がる。写真の下端は霧のようにぼけて黒に溶ける。上に巨大な「SOIR VIOLET」がすみれ→生成りのグラデ文字で浮かぶ。写真はゆっくり寄り続け、光の帯が表面を斜めにすべる（動画風）。予約ボタン①
こんな日に：記念日・手みやげ・自分にの3行
G02 外側と断面：縦線を動かすと、つやのある外側が切られて、4つの層が見える。層の名前は横に並べる
E01 「CASSIS」：画面いっぱいの「CASSIS」の文字の中に、つやの写真。スクロールすると中の写真が流れる。予約ボタン②
特長：3つ（素材・層・夜だけ）
Swiper ほかの生菓子：5品
声：2件
料金：明るい区切り。12cm／15cm（〇〇円）と受け取り日。予約ボタン③
よくある質問：details
予約：予約ボタン④と電話
フッター

JSや GSAP が無いとき：写真は最初からせり上がった位置、店名は見えている。G02 は真ん中で止まり、外側と断面が左右半分ずつ見える（つまみは JS があるときだけ動く）。E01 の文字の中は写真が止まって見える。Swiper は指で横に送れる並び
prefers-reduced-motion のとき：寄り続ける動きと光の帯を止め、Swiper の自動送りもしない
動きは速く切れよく（power4.out）。揺れや回転はしない

Swiper（vendor/swiper-bundle.min.js・MIT）。ページ送りの点・矢印・キーボード操作・自動送り（「止める」ボタンで止まる）。JSなしは overflow-x: auto の横並び。

新しく作る：ケーキ（メイン）／同じケーキの外側と断面（G02）。写真庫から：012 白いドームのデザート・001 焼き菓子（Swiper）／012 盛りつけの手（作り手）。顔は写さない。

価格・サイズ・受け取り日・声・電話番号・住所はすべて見本の値（〇〇）。会員が本物に替える。