カツプロ（ホーム）
カツプロチャットAI
カツプロ AI SEO
サイト診断
サーバーウォッチ
SNSアカウント診断
MoteRaku
デザインギャラリー
画像ツール
ファビコン生成
OGPの見え方チェック
文字の読みやすさチェック
カツプロPR
SNS文字数カウント
Instagram画像分割
QRコード作成
レビュー
名刺スキャン
見積書・請求書
電子印鑑作成
| 業種 | 建設・工務店・不動産 |
| テイスト | ポップ・元気／ナチュラル・やさしい |
| 色 | オレンジ・黄 |
| アニメーション | あり（GSAP＋ScrollTrigger） |
| 演出の型 | B08 PCでは左右を固定し、中央だけスマホ幅で流す（左右は舞台）／E05 筆記体の一語が太い見出しの上に一筆書きで描かれ、シールが弾んで出る／F01 写真が区切りの境目をまたいで置かれる |
| 架空の会社 | 「ひなた不動産」— 駅前の商店街で40年、賃貸と売買を扱う家族経営の不動産屋 |
だれに向けたページか
この町に引っ越してくる人・この町で家を買いたい家族。大手のサイトで物件を探す前に「この町に詳しい人に聞きたい」人。 スマホのアプリのように、町の案内を一本道で読んでいけるページにする。
色
| 変数 | 値 | 使う所 |
|---|---|---|
--c-bg |
#fff8ec |
背景（クリーム） |
--c-orange |
#ff7a1a |
メインの面・線（上の文字は --c-ink） |
--c-yellow |
#ffc21a |
差し色・シール（上の文字は --c-ink） |
--c-ink |
#2a2016 |
見出し・太い線（オレンジの上で 6.1、黄の上で 9.9） |
--c-accent-text |
#9a3412 |
クリームの上のオレンジ系の文字（6.9） |
--c-text |
#374151 |
本文 |
--c-sub |
#4b5563 |
補足 |
文字
- 見出し：Mochiy Pop One
- 本文：M PLUS Rounded 1c（16px）
- 筆記体の一語：Yellowtail（SVG の文字の輪郭を一筆書きのように描く）
ページの構成と演出
- 3列の舞台（演出① B08）：PC（1080px以上）では、左の舞台に町の写真とロゴ・大きな「この町で、暮らそう。」、右の舞台にメニューと「来店予約」「LINEで相談」のボタンを固定。中央の幅420pxの列だけが縦に流れる。中央の列は白い紙で、縁は波形。スマホ・タブレットでは中央の列だけになる
- メインビジュアル（演出② E05）：太い見出し「この町の、家さがし。」の上に、筆記体の「Welcome home」が一筆書きで描かれ、「町の情報 ぜんぶ話します」の丸いシールがポンと弾んで出る（読み込み時の1回だけ）
- ひなたのこと：商店街の写真が、次の区切り（オレンジの面）の境目をまたいで置かれる（演出③ F01）
- さがし方：賃貸・売買・売りたい・管理の4つの入口
- 町の案内：公園・商店街・学校の近さ。写真が境目をまたぐ（F01 の2回目）
- お客さまの声：見本の声（〇〇）
- 来店予約：黄色の面、カギの切り抜き写真
- フッター
動きの決まり
- JSや GSAP が無いとき：筆記体は最初から描き終わり・シールも出たまま。3列の舞台は CSS（grid＋sticky）なので、JSなしでも PC では3列になる
prefers-reduced-motionのときは、一筆書きとシールの弾みを出さない- 弾む動きは読み込み時の1回だけ。左の舞台の写真は、中央で読んでいる区切りに合わせてふわっと切り替わる（JSがあるときだけ）
- 物件数・創業年・お客さまの声は見本の値（〇〇）。宅建業の免許番号も〇〇。会員が本物に替える
写真（codex）
商店街／カギ（切り抜き）／家族と家／明るい部屋／公園／お店の前／手を振るスタッフ（切り抜き）、の7枚。顔は写さない。
下層ページを作るときの決まり
- PCでは3列の舞台（
.stage）を全ページで使う。左の舞台の写真だけページごとに替える - 筆記体の一語は1ページに1つまで（ページの頭だけ）
- 境目をまたぐ写真は1ページに2つまで
