カツプロ（ホーム）
カツプロチャットAI
カツプロ AI SEO
サイト診断
サーバーウォッチ
SNSアカウント診断
MoteRaku
デザインギャラリー
画像ツール
ファビコン生成
OGPの見え方チェック
文字の読みやすさチェック
カツプロPR
SNS文字数カウント
Instagram画像分割
QRコード作成
レビュー
名刺スキャン
見積書・請求書
電子印鑑作成
| 業種 | 建設・工務店・不動産（土地活用） |
| 系統 | 綺麗系（余白・細い線・極細の明朝・砂とベージュ・ゆっくり） |
| 骨組み | K07 目次が横に固定された読み物：PC は左に目次（position: sticky・いまの章に印）、右に720pxの読み物。章は 01 はじめに・02 夜の土地を歩く・03 活用の事例・04 進め方・05 会社のこと・06 ご相談。章の番号と引用で読ませる。スマホは目次が上の開閉（閉じている）、JSなしは開いたまま |
| 形 | ふつうの縦長 |
| スライド | Swiper：活用の事例4件（写真つき2・数字の札2）。点・矢印・キーボード。自動送りはしない（動きの主役を増やさないため）。JSなしは指で横に送れる並び |
| メインビジュアル | 画像1枚のLP風（大きなコピー）：朝の空き地の写真を全面に、「その土地に、次の五十年を。」と相談ボタン。下の縁は霧（mask）、下に社名のグラデ |
| 演出の型 | C06（暗い土地を明かりで歩く）。A05 は動きを外した：写真のせり上がりは C06 と並ぶ2つ目の主役になるため、霧の縁と社名のグラデという静止の飾りだけ残した |
| 動きの主役 | C06 だけ（素の JS。GSAP・ScrollTrigger は使わない）。目次の印は動きではなく現在地の表示 |
| 架空の会社 | 「つちのわ 土地活用研究所」 |
色と書体（共通の変数名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（Noto Serif JP 300/500）--font-en（Bellefair＋日本語の書体）。
夜の面（メインビジュアルの上・C06・問い合わせ）は .t-night が同じ名前の変数を全部上書きする。C06 の図の色は SVG に直に書かず、CSS のクラスで変数から取る。明かりの暗がりは color-mix で作る。
C06 の作り方・動かないとき
.is-motion のとき、図の上に暗い膜（radial-gradient）を重ね、ドラッグ・矢印キーで明かりを動かす。明かりの中の札だけ見え、押すと下に説明。「はじめる」で操作説明が消える。JS なし・動きを減らす設定：図は明るいまま、札と一覧で全部読める。
写真の出どころ
新しく作った：hero（朝の空き地・顔の1枚）。写真庫・既存から（画像を開いて確かめた）：house（平屋・004）・model（建築の模型・030）・talk（相談の手元・027）・shop（店を開ける人・024）。賃貸住宅と駐車場の写真は無いので、その事例は数字の札にした。
下層ページを作るときの決まり
- 読み物の幅は720px。左の目次は章の番号と題だけ。章の見出しは Noto Serif JP 300、番号は Bellefair
- 夜の面は1ページに2回まで（C06 と問い合わせ）。演出は C06 だけ（トップだけ）
- 事例の数字・お客様の声は見本の値（〇〇）。会員が本物に替える。宅建業の免許番号も〇〇のまま
