ジェラート店（カッコイイ系）のWebデザイン見本

少し高くても「本当においしいもの」を選ぶ20〜40代。手みやげを探す人。黒と金のような硬い見た目で「ここは本気の店だ」と一瞬で伝え、素材と製法の説明で信頼させる。


業種	飲食・カフェ（ジェラート店）
系統	カッコイイ系（黒地・極太の文字・オレンジと卵黄色・直線）
骨組み	K07：PC は左に固定の目次（300px）、右が1本の長い読み物（6章）。いま読んでいる章に目次の印が付く。スマホは上のバーの三本線に目次をしまう
形	ふつうの縦長
スライド	CSSだけ（scroll-snap）：02「今日の八つ」。矢印は JS の `scrollBy` だけ。JSなしでも指で送れる
メインビジュアル	文字が主役（タイポ）：幅いっぱいの「ORO」と、1文字ずつ現れる「冷たいのに、濃い。」。写真は縦のアーチに切り抜いて脇に1枚
演出の型	E03（見出しが1文字ずつぼかしから現れる）／F04（写真をアーチに切り抜く。形は静止）
動きの主役	E03（ファーストビューの見出し・約1.3秒・1回だけ）。F04 は形だけで動かさない。GSAP なし（CSS の animation と IntersectionObserver だけ）
外した型と理由	F04 の「下から形が伸びて現れる」動きを外した：動きの主役が2つになるため（形は残した）
架空の店	「GELATERIA ORO」

色と書体（共通の変数名13個だけ）

--c-bg --c-bg-alt --c-text --c-sub --c-line --c-accent（オレンジ）--c-accent-text --c-on-accent --c-2（卵黄色）--c-3（クリーム白）--font-ja（IBM Plex Sans JP）--font-head（Dela Gothic One＋日本語の書体）--font-en（Anybody＋日本語の書体）。明るい章（03・06）は .is-light が同じ名前の変数を全部上書きする。フレーバーの色板は --c-accent・--c-2・--c-3 と color-mix() で作り、色は直に書いていない。script.js に色は無い。

動かないとき

JS なし：見出しは最初から全部見え、目次の印だけ付かない。prefers-reduced-motion：1文字ずつの出現なし。PC の左の目次は幅1080px以上のときだけ。

スライドの作り方

overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline。矢印ボタンは scrollBy だけ。

写真の出どころ

新しく作る：cup（顔の1枚。黒い器のジェラート）。写真庫から（画像を開いて確かめた）：orchard（050 の海を見下ろす柑橘畑。「果実は畑から」の章に合う）。使わなかった：citrus（野菜の盆でジェラートに合わない）・espresso（木の机の珈琲で黒地に合わない）・hands（魚介の盛りつけで業種違い）。