カツプロ（ホーム）
カツプロチャットAI
カツプロ AI SEO
サイト診断
サーバーウォッチ
SNSアカウント診断
MoteRaku
デザインギャラリー
画像ツール
ファビコン生成
OGPの見え方チェック
文字の読みやすさチェック
カツプロPR
SNS文字数カウント
Instagram画像分割
QRコード作成
レビュー
名刺スキャン
見積書・請求書
電子印鑑作成
| 業種 | 士業・コンサル（中小企業のマーケティング支援） |
| 系統 | カッコイイ系（黒地・太いゴシック・強いオレンジ・直線） |
| 色 | オレンジ・黄（黒地にのろし色のオレンジ、数字に黄。料金・質問・申し込みは明るい地） |
| 骨組み | K06 左固定・右だけ流れる：PC（1080px以上）は画面を左42%・右58%に割り、左（メインビジュアル・名前・申し込みボタン）を position: sticky で固定、右だけが流れる。スマホは左が先頭に来る1列 |
| 形 | LP型（1枚もの）：ヘッダーはロゴと「無料相談」だけ。申し込みボタンは左・5つの支援の下・料金・フォーム・ヘッダー・スマホ下の固定バーの6か所 |
| スライド | Swiper（支援の事例4件。点・矢印・キーボード。6秒の自動送りは「止める」ボタンつき、動きを減らす設定では送らない）。JSなしは scroll-snap で指で横に送れる並び |
| メインビジュアル | 静止画を動かす（動画風）：夕暮れの商店街の写真が丸窓から開き（A01・1.4秒）、そのあと30秒かけてゆっくり寄って流れる |
| 演出の型 | A01（左のメインビジュアル）／B02（5つの支援が1枚ずつ前の上に重なって切り替わり、「1／5」が進む。sticky・CSSだけ） |
| 動きの主役 | 左に固定した写真の丸窓と流れ（CSSのみ）。B02 は CSS の sticky の重なり。GSAP は使わない（vendor に入れていない）。「下からふわっと」は使っていない |
| 架空の会社 | 「ノロシ・マーケティング」— 従業員5〜50人の会社向けの販促・Web集客の伴走支援 |
右の並び
悩み（黒）→ 5つの支援（B02・黒）→ 3つの特長（濃い黒）→ 事例 Swiper（黒）→ お客様の声（濃い黒）→ 料金（明るい）→ よくある質問（白）→ 申し込み（明るい）
色と書体（共通の変数名13個だけ）
--c-bg --c-bg-alt --c-text --c-sub --c-line --c-accent（橙。ボタンの地）--c-accent-text（黒地は橙、明るい地は濃い橙 #a84a00）--c-on-accent --c-2（黄）--c-3 --font-ja・--font-head（LINE Seed JP）--font-en（Sora＋日本語の書体）。
明るい区間は .s-paper が同じ名前の変数を全部上書き。ヘッダーと下の固定バーはいつも黒なのでクラスで変数を上書き。script.js に色は無い。
動かないとき
JSなし：写真は最初から全画面、事例は指で横に送れる並び、5つの支援は縦に重なる（CSSだけ）。動きを減らす設定：丸窓・流れを止め、自動送りもしない。スマホ：左が先頭ブロック、右が続く。下に申し込みボタン固定。
写真の出どころ
- 新しく作る顔の1枚：hero（夕暮れの商店街）。いまの
images/のもの - 見本の中に既にある：wall（付箋を貼る手）
- 写真庫から（画像を開いて確かめた）：consult（024・グラフを指す手）・startup（024・開店の朝）
- 使わなかった：books（白い机の青いグラフで黒とオレンジに合わない）・board（025・紫の夜景で色が合わない）
外した型と理由
G04（行き先の色の幕）を外した。この骨組みは右だけが流れ、ページ内の移動が短い。幕の動きを足すと主役が2つになる。B02 は「1件ずつ切り替え」を sticky の重なりで作った（画面を止める pin は使わない）。
下層ページを作るときの決まり
- LP は1枚で完結。下層は「事例の詳細」だけ。ヘッダーは同じ最小の形
- 左の固定は1枚の写真と名前と申し込みだけ。右に足す区切りは、黒か明るい地から選び、隣どうしを同じ色にしない
- オレンジはボタンと強調と面だけ。黄は数字だけ
- 料金・事例の数字・お客様の声は見本の値（〇〇）。会員が本物に替える
