カツプロ（ホーム）
カツプロチャットAI
カツプロ AI SEO
サイト診断
サーバーウォッチ
SNSアカウント診断
MoteRaku
デザインギャラリー
画像ツール
ファビコン生成
OGPの見え方チェック
文字の読みやすさチェック
カツプロPR
SNS文字数カウント
Instagram画像分割
QRコード作成
レビュー
名刺スキャン
見積書・請求書
電子印鑑作成
| 業種 | 美容・サロン（パーソナルカラー診断） |
| 系統 | 綺麗系（広い余白・細い線・細い明朝・彩度を落とした緑・ゆっくり） |
| 骨組み | K05：PC（1080px以上）は縦スクロールで6枚の面が横に進む（GSAP の pin＋横移動・scrub 1）。左下に「01 ―― 06」の進み具合。スマホ・JSなし・reduce は縦並び |
| 形 | ページ全体が横に動く |
| スライド | なし |
| メインビジュアル | 文字が主役（タイポ）：「似合う」「色を、」の巨大な細い明朝のあいだに、布見本の切り抜き写真 |
| 演出の型 | A08（横に進みはじめると、上の文字は左へ・下の文字は右へ割れる）／C03（面の地色が 白→若草→セージ→森の緑 と変わり、進み具合の番号と色も追う） |
| 動きの主役 | 横に進むこと。A08・C03 は同じ横移動の onUpdate で動かしている（別のアニメーションは持たない） |
| 外した型と理由 | A11（破片の文字）：動きの主役が2つになり、canvas の色も要るため外した |
| 架空のサロン | 「いろのは」 |
色と書体（共通の変数名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 --font-head（Kaisei Decol）--font-en（Italiana＋日本語の書体）。
区切りの色は data-tone（p-white／p-grass／p-sage／p-forest）が13変数を全部上書きする。進み具合とヘッダーは、いまの面の tone と同じクラスを JS が付け替える。script.js に色は無い。4つの季節の色は、布見本の写真を4つに切り分けて見せている（色を直に書かない）。
動かないとき
JS なし・スマホ・reduce：6面が縦に並び、文字は割れずに重なったまま。メニューは三本線。
写真の出どころ
新しく作る：drapes（顔の1枚・切り抜き。すでに images/ にある）。写真庫から（画像を開いて確かめた）：mirror（017 の手鏡を持つ手。診断の流れの丸窓）。使わなかった：lounge（灰色と大理石の待合で、緑の見本と色が合わない）。
下層ページを作るときの決まり
- 見出しは Kaisei Decol、英字は Italiana の小さな添え字。面の色は白・若草・セージ・森の緑を順に
- 下層は縦の普通のページ（横に進むのはトップだけ）
- 料金・時間は見本の値（〇〇）。会員が本物に替える
