島の観光ツアー（可愛い系／ナチュラル・やさしい）のWebデザイン見本

島への旅行を決めたけれど「着いてから何をしよう」と迷っている20〜40代の友だち同士・カップル・親子。写真を見ているうちに島にいる気分になり、そのまま予約ボタンを押す1本道のページにする。


業種	宿泊・観光
系統	可愛い系（丸み・太い線と影・手書き風の見出し・弾む動き・シールと吹き出し）
テイスト	ナチュラル・やさしい
色	赤・ピンク（さんごピンク＋ハイビスカスの赤。差し色に海の水色）
形	LP型（1枚もの）：ヘッダーはロゴと「予約する」だけ。予約ボタンは4か所＋スマホは画面の下に固定
スライド	CSSだけ（scroll-snap）：参加した人の声。矢印ボタンは `scrollBy` だけの JS
メインビジュアル	静止画を動かす（動画風）：浜の写真1枚がゆっくり寄りながら横に流れる（ケン・バーンズ）。波線が下でゆれる
アニメーション	あり（GSAP＋ScrollTrigger）
演出の型	A02 寄りの写真が縮み、中央に麦わら帽子が1個浮かぶ→左右から単語／B02 ツアー4つを区画を固定して1件ずつ切り替え、「1／4」が進む／E08 島のことばが流れる帯（脇役）
架空の会社	「ぷかり島ツアー」— 〇〇島で、少人数の半日・1日ツアーを開く小さな会社

だれに向けたページか

島への旅行を決めたけれど「着いてから何をしよう」と迷っている20〜40代の友だち同士・カップル・親子。 写真を見ているうちに島にいる気分になり、そのまま予約ボタンを押す1本道のページにする。

メインビジュアル：浜の写真1枚が、ゆっくり寄りながら少し横に流れる（10秒で1往復・ずっと続く。止める設定あり）。大きなコピー「島で、ぷかり。」と予約ボタン①
A02：スクロールすると写真が縮んで角丸の窓になり、中央に麦わら帽子の切り抜きが浮かぶ。左から「のんびり」右から「ぷかぷか」の単語が入ってくる（PC・スマホとも。固定の長さは画面1.2枚ぶんに控える）
E08 文字の帯：「シュノーケル・島ごはん・古民家・夕日」が流れる（脇役）
悩み：「着いてから何する？」の吹き出し3つ
解決：「島の人が案内する、少人数ツアー」
B02 ツアー4つ：区画を固定したまま、海あそび→島ごはん→古民家でひとやすみ→夕日のさんぽが1件ずつ入れ替わり、「1／4」が進む。右に予約ボタン②
特長：3つのシール型カード
声（scroll-snap）：指で横に送るカード。矢印あり
料金：半日・1日の2つ（〇〇円）
よくある質問：details の折りたたみ
申し込み：予約ボタン③④（フォームへ・電話）
フッター（架空の注記）

CSSだけ（scroll-snap）。overflow-x: auto; scroll-snap-type: x mandatory。矢印は JS の scrollBy だけ。JSなしでも指で送れる。

新しく作る：浜の全景（メイン）／麦わら帽子の切り抜き（A02）／ボートから見た海（海あそび）。写真庫から：001 カフェのランチ（島ごはん）／006 旅館の昼の和室（古民家）。夕日はSVGの絵で描く。人の顔は写さない。

料金・日数・定員・声・電話番号・住所はすべて見本の値（〇〇）。会員が本物に替える。