カツプロ（ホーム）
カツプロチャットAI
カツプロ AI SEO
サイト診断
サーバーウォッチ
SNSアカウント診断
MoteRaku
デザインギャラリー
画像ツール
ファビコン生成
OGPの見え方チェック
文字の読みやすさチェック
カツプロPR
SNS文字数カウント
Instagram画像分割
QRコード作成
レビュー
名刺スキャン
見積書・請求書
電子印鑑作成
| 業種 | 士業・コンサル |
| テイスト | 信頼感・誠実／高級感 |
| 色 | 白・黒・グレー（銀） |
| アニメーション | あり（GSAP＋ScrollTrigger） |
| 演出の型 | D05 暗い煙の背景に金属調のロゴ、結びで格子状に並ぶ／B09 横に置いた目次がいまの区切りを示し続ける／E03 見出しが1文字ずつ、ぼかし＋透明から現れる |
| 架空の事務所 | 「要（かなめ）総合法律事務所 KANAME LAW OFFICE」— 弁護士5名の事務所 |
だれに向けたページか
相続・離婚・会社の契約トラブルなどで、はじめて弁護士に相談しようとしている個人と中小企業の経営者。 「重みがあって、でも話しやすい」。黒と銀の重厚さで信頼を見せ、本文は白い面で読みやすくする。
色
| 変数 | 値 | 使う所 |
|---|---|---|
--c-bg |
#f5f5f4 |
背景（白い面） |
--c-dark |
#0f1012 |
黒い面・煙の地 |
--c-silver |
#b8bcc4 |
黒地の上の小さな文字・線（黒地で 10.0） |
--c-accent-text |
#57534e |
白地の上の英字ラベル（白地で 7.0） |
--c-ink |
#1c1917 |
白地の見出し |
--c-text |
#374151 |
本文 |
--c-sub |
#4b5563 |
補足 |
文字
- 英字・ロゴ：Cinzel（金属調のグラデで塗る）
- 見出し：Shippori Mincho（700）
- 本文：Noto Sans JP 16px・行の高さ 2.0
ページの構成と演出
- 開幕（D05）：暗い煙の写真がゆっくり動き、その上に金属調の「K」の紋と「KANAME LAW OFFICE」。紋の上を光の筋が1回だけ横切る
- 目次（B09）：PCでは左に縦の目次を固定。いまの区切りの番号に銀の線が伸びる。スマホでは上に細い帯で「03／06 取扱分野」を出す
- ごあいさつ：見出しが1文字ずつぼかしから現れる（E03）。以下の各区切りの見出しも同じ
- 取扱分野：相続・離婚・企業法務・労働・不動産・債務整理の6つ（細い線の格子）
- ご相談の流れ：4段
- 弁護士紹介：写真ではなく名前・経歴の文字だけ（顔写真は会員が入れる）
- 費用の目安：表
- 結び（D05）：煙の黒い面に金属調の紋が格子状に並び、1つずつ少しずつ違う向きで光る。その上に「まずは、お話をお聞かせください。」とご相談ボタン
- アクセス・フッター
動きの決まり
- JSや GSAP が無いとき：煙は止まった写真、紋は光らない、見出しは最初から出ている。目次は PC で
position: stickyだけで固定（いまの区切りの印は付かない）。全部読める prefers-reduced-motionのときは、煙・光の筋・文字のぼかしを止める- 1文字ずつ出るのは短い見出しだけ（本文には使わない）
士業で気をつけること
- 弁護士名・登録番号・所属弁護士会・費用は見本の値（〇〇）。会員が本物に替える
- 「必ず勝てる」など結果を約束する言葉は使わない（弁護士の広告の規程）
写真（codex）
煙／相談室／法律書／署名する手／夜景／入口、の6枚。顔は写さない。
下層ページを作るときの決まり
- 左の目次（B09）は下層でも使う。区切りは6つまで
- 黒い面（煙）は1ページに1回まで。金属調は紋とロゴだけに使い、見出しには使わない
- 見出しの1文字ずつの演出は、1ページに3つまで
