カツプロ（ホーム）
カツプロチャットAI
カツプロ AI SEO
サイト診断
サーバーウォッチ
SNSアカウント診断
MoteRaku
デザインギャラリー
画像ツール
ファビコン生成
OGPの見え方チェック
文字の読みやすさチェック
カツプロPR
SNS文字数カウント
Instagram画像分割
QRコード作成
レビュー
名刺スキャン
見積書・請求書
電子印鑑作成
| 業種 | 宿泊・観光（温泉街の観光案内） |
| 系統 | 綺麗系（余白・1px の細い線・明朝・字間を広く・藤色・ゆっくりした動き） |
| 骨組み | K06 左固定・右だけ流れる：PC（1080px〜）は左2：右3。左（縦に3つに割った写真・縦書きの題・申し込み）を position: sticky で固定し、右だけ流れる。スマホ・JSなしは左が上に来る1列 |
| 形 | LP型（1枚もの）：ヘッダーはロゴと申し込みだけ。悩み→手形→見どころ→使い方→声→料金→質問→申し込み。申し込みボタン5か所＋スマホは下に固定 |
| スライド | なし |
| メインビジュアル | 分割（3枚）：縦に3つに割った写真（石畳の路地・夜の宿・露天風呂）。中央に縦書きの題の帯 |
| 演出の型 | A07（左の3枚が読み込み後に8秒でゆっくり拡大・1回だけ）／E06（右の手形の説明を、ペン先が1行ずつ書き、書き終えた語に蛍光ペンの下線）。C05（横に流れる見開き）は外した：右の列は縦に流れる決まりで、横に流す区画を入れると動きの主役が2つになるため。見どころは見開き風の2列の組み（上下にずらす）にした |
| 動きの主役 | E06 のペン先（スクロールで1行ずつ・PCだけ）。A07 は読み込み直後の1回だけの小さな拡大。GSAP は使わない（スクロールの位置を読んで --w を渡し、見せ方は CSS）。「下からふわっと」は無い |
| 架空の温泉街 | 「紫雲温泉」の観光協会がおくる「宵の湯めぐり手形」 |
色と書体（共通の変数名13個だけ）
--c-bg（白藤）--c-bg-alt（藤のうすい紙）--c-text --c-sub --c-line（藤）--c-accent（濃い藤）--c-accent-text --c-on-accent --c-2（蛍光ペンの色）--font-ja（Noto Sans JP）--font-head（Zen Old Mincho 600）--font-en（Bellefair＋日本語の書体）。宵の区切りは .t-night が同じ名前の変数を全部上書き（使い方・申し込み）。
動かないとき
JSなし・スマホ・prefers-reduced-motion：説明文は最初から全部見え、下線も引いてある。写真は止まったまま。左を固定するのは幅1080px以上のときだけ。
スライドの作り方
スライドは使わない。
写真の出どころ
新しく作った顔の1枚：strip1（夜の路地・左の1枚）。写真庫から（前の版のものを開いて確かめた）：006 の bath（露天風呂）・night（夜の宿）・meal（会席）・room（和室）。049 の銭湯は富士の壁絵で雰囲気が合わず使わない。
数字・料金
手形の料金・声・時間は見本の値（〇〇）。会員が本物に替える。
下層ページを作るときの決まり
- 見出しは Zen Old Mincho、英字は Bellefair の小さな添え字。線は 1px・角丸なし
- 区切りは「白藤」「藤のうすい紙」「宵」。宵は1ページに2回まで
- 左の面は1ページに1つ。演出は1ページに1つまで
