カツプロ（ホーム）
カツプロチャットAI
カツプロ AI SEO
サイト診断
サーバーウォッチ
SNSアカウント診断
MoteRaku
デザインギャラリー
画像ツール
ファビコン生成
OGPの見え方チェック
文字の読みやすさチェック
カツプロPR
SNS文字数カウント
Instagram画像分割
QRコード作成
レビュー
名刺スキャン
見積書・請求書
電子印鑑作成
| 業種 | 建設・工務店・不動産 |
| テイスト | シンプル／スタイリッシュ |
| 色 | 白・黒・グレー |
| アニメーション | あり（GSAP＋ScrollTrigger） |
| 演出の型 | F07 線画（ワイヤーフレーム）の家がスクロールで寄ってくる／C05 作品が雑誌の見開きのように横に流れる（縦書きと組む）／E04 崩れた英字が少しずつ正しい綴りに揃う |
| 架空の事務所 | 「YOHAKU 建築設計室」— 住宅と小さなお店を設計する、建築家2人の事務所 |
だれに向けたページか
家を建てる予定があり、ハウスメーカーではなく建築家に頼むか迷っている30〜40代。 「線一本から考えている」ことが伝わる、静かで余白の多いページにする。
色
| 変数 | 値 | 使う所 |
|---|---|---|
--c-bg |
#f4f4f2 |
背景（トレーシングペーパーの白） |
--c-paper |
#ffffff |
見開きの紙面 |
--c-ink |
#161616 |
見出し・線画・黒い面 |
--c-gray |
#dededa |
見開きの奥の紙面・薄い面 |
--c-line |
#9a9a95 |
罫線・目盛り（線だけ。文字には使わない） |
--c-accent-text |
#161616 |
強調の文字（差し色は持たない） |
--c-text |
#374151 |
本文 |
--c-sub |
#4b5563 |
補足 |
文字
- 英字：Space Grotesk（崩れる文字・番号・目盛り）
- 見出し：Shippori Mincho（見開きの中は縦書き）
- 本文：IBM Plex Sans JP
ページの構成と演出
- メインビジュアル（演出① F07）：トレーシングペーパー色の画面いっぱいに、細い線だけで描いた切妻屋根の家（Canvas に透視投影）。スクロールすると家がゆっくり回りながら手前に寄ってきて、最後は窓の向こうに本物の家の写真が透ける。右下に「余白から、設計する。」
- 英字の見出し（演出③ E04）：「PHILOSOPHY」「WORKS」「PROCESS」「CONTACT」が、画面に入ったとき崩れた文字から1回だけ正しい綴りに揃う。読み上げ用に
aria-labelに正しい綴り - 考え方：短い文を3つ。罫線と寸法線の飾り
- 作品（演出② C05）：4作品を雑誌の見開きにして、縦スクロールで横に流す（PCだけ）。左ページは写真、右ページは縦書きの題と短い文。見開きごとに紙の色が白とグレーで交互
- 設計の進め方：6段階を寸法線のような線でつなぐ
- ご相談：黒い面に白い文字
- フッター
動きの決まり
- JSや GSAP が無いとき：線画の家は SVG の止まった絵で出る（写真も下に並ぶ）。見開きは指で横に送れる一覧。英字は最初から正しい綴り
prefers-reduced-motionのときは、家は回らず止まった絵、スクランブルもしない- 家の回転は左右 30度以内・ゆっくり。画面全体は揺らさない
- 竣工年・面積・費用は見本の値（〇〇）。建築士事務所の登録番号も〇〇。会員が本物に替える
写真（codex）
家の外観／吹き抜け／中庭／階段／白い模型／スケッチする手、の6枚。人の顔は写さない。
下層ページを作るときの決まり
- 英字の見出しはスクランブル（1ページに3つまで）＋日本語の小見出し
- 作品ページは見開きの形（
.spread）を縦に積んで使う - 色を足さない。強調は太さと余白で
