着付け・ヘアセット（可愛い系）のWebデザイン見本

成人式・卒業式・七五三・夏祭りの日に、着物と髪をまとめて頼みたい人と、その家族。「かわいくしてもらえそう」と気分が上がり、予約につなげる。同じ A07 を 114（温泉街）でも使うが、あちらは藤色・細い線・角のない縦長の静かな写真。こちらは上が丸いアーチ窓・太いピンクの縁・弾んで出るシールで、別の見た目にする。


業種	美容・サロン（着付け・ヘアセット）
系統	可愛い系（丸いアーチの窓・太い縁と沈む影・ころんとした数字・さくら色と赤・花のシール）
骨組み	K07 目次が横に固定された読み物：上にメインビジュアル、その下は「章」の読み物（01〜06）。PC は左に目次（角丸の箱）を固定し、いま読んでいる章に印がつく。スマホは目次が上に貼りつく開閉の帯（いまの章を表示）
形	ふつうの縦長
スライド	なし
メインビジュアル	分割（3枚）：上が丸いアーチの窓3つ（髪飾りの後ろ姿・花束・手鏡）。高さをずらして並べ、花のシールを1つ。縦書きの見出し「きょうは、とびきり。」（PC）
演出の型	A07（3枚の写真が時間差でゆっくり拡大＋縦書き）／F05（「20」「60」「753」の数字の形に写真をはめ、SVG フィルターで二色刷り。動かさず形だけ）
動きの主役	A07 の写真の寄り（7秒・時間差・往復）。CSS の @keyframes だけ。GSAP・ScrollTrigger なし（vendor/ なし）。目次の「いまの章」の印は動きではなく読み取りの道具（script.js の IntersectionObserver）。「下からふわっと」は使っていない
架空の店	「結い処てまり」

章の組み

01 てまりのこと（見出し・リード・本文・引用の枠）→ 02 メニュー（数字の穴に写真）→ 03 料金 → 04 当日の流れ（番号を点線でつなぐ）→ 05 よくある質問 → 06 ご予約・アクセス（ピンクの面）。読み物の幅は 760px、章の番号は大きな丸文字。

色と書体（共通の変数名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（Zen Kaku Gothic New）--font-head（Yusei Magic）--font-en（Cherry Bomb One＋日本語の書体）。面の色は .t-pink（引用の枠）と .t-blush（予約の面）が、同じ名前の変数を全部上書きする。二色刷りの2色は SVG フィルター #duo の数値（SVG の仕様で変数が使えないため、ここだけ色の数値が HTML にある）。script.js に色は無い。

動かないとき

prefers-reduced-motion：写真は止まる。JS なし：目次は開いたまま（スマホは本文の頭に並ぶ）で、「いまの章」の印だけ付かない。

写真の出どころ

新しく作る：strip1（髪飾りの後ろ姿。顔の1枚）。写真庫から（画像を開いて確かめた）：017 花（flower）・017 手鏡（mirror）。使わなかった：003 サロン店内と003 道具（黒い壁・琥珀色の瓶で、可愛い系の着付けに合わない）。数字の中にも同じ3枚を使う。

外した型と理由

なし（A07 は動かす、F05 は形だけ）。F05 の写真が動くと動きが2つになるので止めた。

下層ページを作るときの決まり

章の番号は大きな丸文字、見出しは Yusei Magic。読み物は 760px まで
目次は PC で左に固定、スマホは上の開閉。章を足したら目次にも足す
縁は 3px の濃い色、角丸は大きく（24〜32px）
料金・営業時間・お客様の声は見本の値（〇〇）。会員が本物に替える

カツプロ・AI

診断・見張り

サイト・デザイン

SNS・集客

仕事・事務

着付け・ヘアセット（可愛い系）

この見本の特徴

章の組み

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

動かないとき

写真の出どころ

外した型と理由

下層ページを作るときの決まり

同じ業種の見本

美容サロン（高級感／スタイリッシュ）

ネイルサロン（かわいい）

メンズ理容室（スタイリッシュ）

エステ・スパ（高級感／ナチュラル）