カツプロ（ホーム）
カツプロチャットAI
カツプロ AI SEO
サイト診断
サーバーウォッチ
SNSアカウント診断
MoteRaku
デザインギャラリー
画像ツール
ファビコン生成
OGPの見え方チェック
文字の読みやすさチェック
カツプロPR
SNS文字数カウント
Instagram画像分割
QRコード作成
レビュー
名刺スキャン
見積書・請求書
電子印鑑作成
| 業種 | 建設・工務店・不動産（注文住宅） |
| 系統 | カッコイイ系（黒地・大きく太い文字・直線・速く切れのいい動き） |
| テイスト | 高級感／スタイリッシュ |
| 色 | オレンジ・黄（黒地に灯りの色） |
| 形 | LP型（1枚もの）。ヘッダーはロゴと予約ボタンだけ。スマホは画面の下に予約ボタンを固定 |
| スライド | なし |
| メインビジュアル | 静止画を動かす（動画風）。夕暮れの家の写真1枚を、上下の黒い幕が開き→ゆっくり寄り→窓の灯りが横に流れる。左上に録画中のような時刻表示と一時停止ボタン |
| アニメーション | あり（GSAP＋ScrollTrigger） |
| 演出の型 | A02（寄りの写真が縮み、中央に商品が1個浮かぶ→左右から単語）／G02（中央の縦線を左右に動かしてビフォー・アフター＝図面と完成）／E04（崩れた英字が少しずつ正しい綴りに揃う） |
| 架空の会社 | 「篝（かがり）建築」— 年に〇〇棟だけ建てる、設計と施工の注文住宅の会社 |
だれに向けたページか
家を建てる30〜40代。住宅展示場の家に物足りず、「かっこいい家」を探している人。 広告から来て、完成見学会を予約するまでを1本の流れで読ませる。
色
| 変数 | 値 | 使う所 |
|---|---|---|
--c-bg |
#0e0e0e |
背景（黒） |
--c-panel |
#1a1a1a |
カードの地 |
--c-white |
#ffffff |
見出し |
--c-ondark |
#d1d5db |
黒地の本文（13.1） |
--c-ondark-sub |
#a7a9ad |
黒地の補足（8.2） |
--c-accent |
#ff8a1f |
灯りのオレンジ。黒地の文字（8.19）・ボタンの地（黒文字 8.19） |
--c-yellow |
#ffc93c |
細い線・数字 |
--c-light |
#f4f1ec |
白い区切り（料金・FAQ）の地 |
--c-accent-text |
#b04e00 |
白い区切りの上のオレンジの文字（5.34） |
--c-text |
#374151 |
白い区切りの本文 |
--c-sub |
#4b5563 |
白い区切りの補足 |
文字
- 英字の見出し：Big Shoulders Display 900（縦に細長く、とても大きく）
- 日本語の見出し：M PLUS 1 800
- 本文：M PLUS 1 400 16px・行の高さ 1.9
ページの構成と演出（LPの1本の流れ）
- メインビジュアル（動画風）：黒い幕が上下に開き、夕暮れの家がゆっくり寄る。窓の灯りの光が横に流れる。「暮らしに、火を灯す。」と予約ボタン①。時刻表示と一時停止
- 悩み（PROBLEM）：大きな番号つきの3行
- 解決（A02・SOLUTION）：木を削る手元の寄りの写真が縮んでカードになり、中央に家の模型が1つ浮かぶ。左から「DESIGN」、右から「BUILD」
- 特長（G02）：リビングの写真で「図面／完成」。中央の縦線をつまんで左右に動かす（キーボードでも動く）
- 特長3つ：番号と短い文
- 申し込みボタン②の帯
- お客様の声（VOICE）：見学会の写真と声2つ（見本の文）
- 料金（PRICE）：白い区切り。3つのプラン（〇〇）と申し込みボタン③
- よくある質問（FAQ）：白い区切り。details
- 申し込み（CONTACT）：最後の大きなボタン④と電話
- 英字の見出しはすべて E04（スクランブル）で、崩れた文字から正しい綴りに揃う。読み上げ用に
aria-labelに本当の綴り
動きの決まり
- 速く切れのいい動き（
power4.out・expo.out、0.4〜0.8秒）。弾まない - 動画風の動きは一時停止ボタンで止められる。
prefers-reduced-motionのときは最初から止まった写真 - JSや GSAP が無いとき：幕は開いた状態・写真は止まったまま。A02 は写真と模型と単語が縦に並ぶ。図面／完成は半分ずつ見えた状態。英字は最初から正しい綴り
- 画面全体を揺らす・回す動きはしない
写真
新しく作る：夕暮れの家（メインビジュアル）／家の模型（切り抜き）／夜のリビング。 写真庫から：004-builder の craft・stairs・openhouse。
数字・声について
価格・坪数・棟数・お客様の声・電話番号は見本の値（〇〇）。会員が本物に替える。
下層ページを作るときの決まり
- 黒地が基本。白い区切りは料金と表だけ
- 英字の見出しは Big Shoulders Display、スクランブルは各ページの最初の見出し1つだけ
- ボタンはオレンジ1色
