司法書士事務所・相続（ナチュラル・やさしい／信頼感・誠実）のWebデザイン見本

親を亡くしたばかりで、何から手をつけていいか分からない50〜70代の子ども世代。専門用語に身構えている人に「ここなら話を聞いてもらえる」と感じてもらう。手紙を書いてもらっているような、ゆっくりした語り口にする。


業種	士業・コンサル
テイスト	ナチュラル・やさしい／信頼感・誠実
色	茶・ベージュ（蛍光ペンの黄を差し色に）
アニメーション	あり（GSAP＋ScrollTrigger）
演出の型	A06 0→100% の数字とマスコット（読み込み・1.5秒以内）／E06 ペン先が文を書いていき、要所に蛍光ペンの下線／B06 相続の手続きが付箋タブのように積み重なる（CSSだけ）
架空の事務所	「つむぎ司法書士事務所」— 相続の手続きを専門にする、司法書士2名の小さな事務所

だれに向けたページか

親を亡くしたばかりで、何から手をつけていいか分からない50〜70代の子ども世代。専門用語に身構えている人に「ここなら話を聞いてもらえる」と感じてもらう。手紙を書いてもらっているような、ゆっくりした語り口にする。

変数	値	使う所
`--c-bg`	`#f7f1e8`	背景（生成りの紙）
`--c-paper`	`#fffaf2`	便せん・カード
`--c-main`	`#4a3628`	見出し・濃い茶の面（白文字 10 以上）
`--c-accent`	`#c08a52`	線・印・タブの縁（文字には使わない）
`--c-accent-text`	`#8a5a2b`	紙色の上の茶色の文字（5.2）
`--c-marker`	`#f6d68a`	蛍光ペンの下線（上の文字は `--c-main`）
`--c-text`	`#374151`	本文
`--c-sub`	`#4b5563`	補足
付箋タブの4色（`--tab1`〜`--tab4`：`#efe4d2` `#e8d9c2` `#e0cdb0` `#d8c09c`）の上の文字は、どれも `--c-text` で 4.5 以上。

読み込み（演出① A06）：生成りの幕に、ふくろうのマスコット（自作SVG。「不苦労」にかけた）と「000%」。1.2秒で 100% になり、幕が上に引いて消える。2回目以降の表示（同じタブ内）は出さない。JSなしでは出さない
メインビジュアル：相談室の写真を角の丸い窓に。横に「ご相続のこと、ひとりで抱えていませんか。」
はじめに（演出② E06）：便せん風の紙に、事務所からの手紙。ペン先のアイコンが行ごとに文を書いていき、要所（「順番さえ分かれば」「期限があるもの」）に蛍光ペンの下線が引かれる
こんなとき：よくある困りごと4つ（写真つきのカード）
手続きの流れ（演出③ B06）：「1 ご相談」「2 戸籍を集める」「3 遺産分割協議」「4 名義変更」の4枚が、付箋のタブを横にずらしながら上に積み重なる。タブは見出しの代わりになり、重なっても番号が読める
料金のめやす：表（数字は〇〇）
事務所と司法書士：入口の写真＋ひとこと（手書き風）
ご相談の予約：濃い茶の面に、電話と予約ボタン
フッター（架空の断り書き）

相談室／手を添えて説明する場面／実家／古いアルバム／事務所の入口／机と印鑑、の6枚。顔は写さない。