カツプロ（ホーム）
カツプロチャットAI
カツプロ AI SEO
サイト診断
サーバーウォッチ
SNSアカウント診断
MoteRaku
デザインギャラリー
画像ツール
ファビコン生成
OGPの見え方チェック
文字の読みやすさチェック
カツプロPR
SNS文字数カウント
Instagram画像分割
QRコード作成
レビュー
名刺スキャン
見積書・請求書
電子印鑑作成
| 業種 | 士業・コンサル |
| 系統 | 綺麗系（広い余白・細い線・細い明朝・彩度を落としたベージュ・ゆっくりした動き） |
| テイスト | シンプル／高級感 |
| 色 | 茶・ベージュ |
| 形 | ページ全体が横に動く：PC（1080px以上）では縦にスクロールすると、6枚の面が横に進む（GSAP の pin＋横移動）。右下に「01 / 06」と細い進み具合の線。スマホと JSなしは普通の縦並び |
| スライド | CSSだけ（scroll-snap）：「ご相談の流れ」の4段。overflow-x: auto; scroll-snap-type: x mandatory。矢印ボタンは JS の scrollBy だけ。JSなしでも指で送れる |
| メインビジュアル | 文字が主役（タイポ）：細い明朝の巨大な「お金を、暮らしの言葉に。」と、Fraunces の斜体の大きな “Plan”。写真は縦長の1枚を脇に小さく |
| アニメーション | あり（GSAP＋ScrollTrigger） |
| 演出の型 | E03 見出しが1文字ずつ、ぼかし＋透明から現れる（短い見出しだけ）／C01 縦にスクロールすると横に流れる（ページ全体）／G03 ご相談の一覧の行にホバーすると、その行の上に写真が浮かぶ |
| 架空の事務所 | 「しおり FP オフィス」— 独立系のファイナンシャルプランナー1名の事務所。保険や商品を売らない相談料制 |
だれに向けたページか
家の購入・教育費・老後・保険の見直しを考えはじめた30〜50代の夫婦。売り込まれるのが不安。 静かで落ち着いた、本のような読み心地で「この人なら中立に話を聞いてくれる」と感じてもらう。
色
| 変数 | 値 | 使う所 |
|---|---|---|
--c-bg |
#f6f1ea |
背景（生成り） |
--c-bg2 |
#ece2d4 |
交互の面（ベージュ） |
--c-ink |
#3a2e24 |
見出し・濃い面（生成りの上で 11.7） |
--c-line |
#cdbba3 |
細い線 |
--c-accent |
#b89a78 |
飾りの線・点 |
--c-accent-text |
#7a5838 |
茶の文字（生成りで 5.7・ベージュで 5.0） |
--c-text |
#374151 |
本文 |
--c-sub |
#4b5563 |
補足 |
文字
- 見出し：Hina Mincho（細い明朝。大きく使う）
- 英字：Fraunces（300・斜体）
- 本文：Noto Sans JP 16px・行の高さ 2.0・字間 .06em
ページの構成と演出（PCでは左から右へ6面）
- はじめ（E03）：巨大な明朝「お金を、／暮らしの言葉に。」が1文字ずつぼかしから現れる。斜体の “Plan” と縦長の写真（机）を脇に
- しおりについて：中立の相談料制であること。写真（手元）
- ご相談の内容（G03）：5行の一覧（家を買う・教育費・老後・保険の見直し・相続と贈与）。PCでホバーした行の上に写真が浮かぶ。スマホは各行に小さな写真
- ご相談の流れ（scroll-snap）：4段のカードを指か矢印で送る
- 料金：初回・継続・ライフプラン表づくり（〇〇円のまま）
- ご予約・アクセス：予約ボタン・電話・住所
- 右下に「01 / 06」と進み具合の線（PCの横移動のときだけ）
動きの決まり
- JSや GSAP が無いとき・スマホ（1079px以下）：6面が縦に並ぶ普通のページ。文字は最初から全部見えている
prefers-reduced-motionのときは横移動をやめ、縦に並べる- 動きはゆっくり（0.8〜1.4秒）。ぼかしは 12px→0 の数字で渡す
写真（codex 3枚＋写真庫4枚）
机（新）／手元の相談（新）／ランドセル（新）／住まい（004 から）／和室の昼（006 から）／相談（024 から）／万年筆（023 から）。顔は写さない。
下層ページを作るときの決まり
- 見出しは Hina Mincho の細い明朝、英字は Fraunces 斜体の小さな添え字
- 区切りは「生成り」と「ベージュ」の交互。濃い茶の面は1ページに1回まで
- 下層は縦の普通のページ（横に動くのはトップだけ）。演出は E03 の見出しだけ
- 料金・実績・お客様の声は見本の値（〇〇）。会員が本物に替える
