喫茶店（可愛い系・緑）のWebデザイン見本｜カツプロデザインギャラリー

レトロ喫茶が好きで、休みの日に「わざわざ行く」20〜30代。写真を撮りたい人も、ひとりで静かに過ごしたい人も。LPの目的は「席の予約」（週末は待ちが出るので）。悩み→解決→名物→特長→声→料金（お品書き）→よくある質問→予約、の流れ。


業種	飲食・カフェ（喫茶店）
系統	可愛い系（丸み・太い線・レトロな手描き風・明るいメロン色・弾む動き・シール）
テイスト	かわいい／ナチュラル・やさしい
色	緑（メロンソーダの緑と、深い緑）＋さくらんぼの赤を少し
形	LP型（1枚もの）：ヘッダーはロゴ＋「席を予約」だけ。予約ボタンは5か所。スマホは画面の下に固定
スライド	CSSだけ（scroll-snap）：お店の中の写真。矢印は `scrollBy` だけの小さなJS
メインビジュアル	文字が主役（タイポ）：画面いっぱいのレトロな「クリームソーダ」の文字。切り抜きのソーダが文字に重なる
アニメーション	あり（GSAP＋ScrollTrigger）
演出の型	A08 巨大な文字に切り抜き写真が重なり、スクロールで左右に割れる／B02 区画を固定し、名物を1品ずつ切り替え「1／5」が進む／G04 ページ内の移動を、行き先の色の幕で切り替える
架空の店	「喫茶メロンの木」— 商店街の2階にある、昭和から続く小さな喫茶店（席の予約ができる）

だれに向けたページか

レトロ喫茶が好きで、休みの日に「わざわざ行く」20〜30代。写真を撮りたい人も、ひとりで静かに過ごしたい人も。 LPの目的は「席の予約」（週末は待ちが出るので）。悩み→解決→名物→特長→声→料金（お品書き）→よくある質問→予約、の流れ。

メインビジュアル（タイポ・A08）：クリームの地に、画面いっぱいの「クリーム」「ソーダ」2段の大文字（上段は深い緑、下段は縁取り）。切り抜きのメロンソーダが文字のうしろに立ち（文字は全部読める）、泡の丸がまわりに浮く。スクロールすると上段は左へ、下段は右へ割れて、ソーダが前に出る。下に「ようこそ、メロンの木へ。」と予約ボタン
悩み：3つ（「カフェはどこも混んでいて」…）。吹き出し
解決：「2階の、静かな昭和へ。」
名物（B02）：画面を止めて、メロンクリームソーダ→プリン→ナポリタン→ブレンド→厚切りトーストを1品ずつ切り替える。左上に「1／5」。背景の色も品ごとに変わる
お店の中（scroll-snap）：写真と文のカードを横に送る
お客様の声：3つ（〇〇）
お品書き（料金）：点線のメニュー表（〇〇円）
よくある質問：details
予約・フッター

G04：ヘッダー・ページ内のリンクを押すと、行き先の区切りの色の幕が下から上がって、移動したあと上へ抜ける（0.5秒）。

JSや GSAP が無いとき：「クリーム」「ソーダ」は割れずに重なったまま読める。名物は5品が縦に並ぶ（それぞれの色の帯）。幕は出ず、普通にページ内を移動する。scroll-snap は CSS だけで動く
prefers-reduced-motion のときは、上と同じ「動かない版」。幕も出さない
弾むのは読み込み時の1回と、シールだけ

切り抜き：メロンクリームソーダ・プリン・ナポリタン。写真庫から：ハンドドリップのコーヒー（001）・朝のトースト（010）・店内（001）・カウンター（001）。

値段・席数・営業時間・お客様の声・住所・電話はすべて〇〇。