カツプロ（ホーム）
カツプロチャットAI
カツプロ AI SEO
サイト診断
サーバーウォッチ
SNSアカウント診断
MoteRaku
デザインギャラリー
画像ツール
ファビコン生成
OGPの見え方チェック
文字の読みやすさチェック
カツプロPR
SNS文字数カウント
Instagram画像分割
QRコード作成
レビュー
名刺スキャン
見積書・請求書
電子印鑑作成
| 業種 | 建設・工務店・不動産（店舗内装） |
| 系統 | カッコイイ系（極太の明朝・黒と白の強い対比・直線と割れた縁・切れのいい動き。色味は足さない） |
| 骨組み | K01 1画面完結：PC は 1 画面（ヘッダー＋左の縦の目次＋面＋細いフッター）に6つの「面」を入れ、左の縦の目次（00〜05）か ← → キーで切り替える。縦に長く積まない |
| 形 | ふつうの縦長（スマホ・JSなしは6つの面が縦に並ぶ） |
| スライド | CSSだけ（scroll-snap）：施工事例の面。矢印ボタンは scrollBy だけの JS。JSなしでも指で横に送れる |
| メインビジュアル | コラージュ：施工写真4枚（白黒寄り）・図面の SVG・色見本・「No.128」の札・寸法線が外周を囲み、中央に見出し |
| 演出の型 | A10（面0の外周カード）／F03（面を切り替えるとき、次の面が割れたコンクリートの縁で横から入る。面0の下の縁と、素材の写真も割れた形） |
| 動きの主役 | 面を切り替える「割れ目」の幕（0.8秒）。ほかは動かさない。「下からふわっと」は使っていない。GSAP・ScrollTrigger は使わない（vendor なし）。外した型：なし |
| 架空の会社 | 「アッシュグリッド店舗内装（ASHGRID）」— 飲食店・物販店・美容室の内装を、設計から施工・什器まで一社で請ける会社 |
面の順番
0 コラージュ（黒）→ 1 私たち（明るい灰・模型の写真）→ 2 施工事例（黒・scroll-snap）→ 3 素材（明るい灰・割れた形の写真＋4素材）→ 4 進め方（灰・4手順）→ 5 相談（黒）
色と書体（共通の変数名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（Noto Sans JP）--font-head（Noto Serif JP 900）--font-en（Michroma＋日本語の書体）。
面の色は .t-dark .t-light .t-grey が 同じ名前の変数を全部上書きする（--c-bg〜--c-on-accent）。ヘッダー・目次・フッターは、いま出ている面の色に body のクラスで合わせる。script.js に色は無い。
見出しと数字は --c-accent（黒／白）で締める。
動かないとき
JS なし・スマホ・高さ640px未満：全部の面が縦に並ぶ（全部読める）。prefers-reduced-motion：割れ目の幕なしで即切り替え。1画面モードは幅1080px以上かつ高さ640px以上のときだけ。
スライド（scroll-snap）の作り方
.works__viewport { overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline }。矢印は JS が hidden を外して scrollBy するだけ。JSなしでは指（トラックパッドも）で送れる。
写真の出どころ
- 顔の1枚：
shop1（コーヒースタンド。前の版で作ったものをそのまま使用） - 写真庫から（画像を開いて確かめて選んだ）：理容室
barber（015）・オフィスstudio（053）・図面を描く手sketch・白い模型model（030）・黒い扉の玄関door（028）。どれも黒・灰・白で内装の中身が合う - 使わなかった：前の版の
shop2・samples（外した）
見本の値（会員が本物に替える）
実績の件数・工期・費用・許可番号・電話・住所はすべて〇〇。事例の店名は架空。
下層ページを作るときの決まり
- 面の地は「明るい灰」「灰」「黒」の3つだけ。隣り合う面は同じ色にしない
- 見出しは Noto Serif JP 900、英字の小見出しは Michroma
- 割れた縁は1ページに3回まで（幕・面0の下・素材の写真）。角丸は使わない（すべて直角）
