社労士・行政書士事務所（ナチュラル・やさしい／信頼感・誠実）

だれに向けたページか

従業員を雇いはじめた小さな会社・お店の経営者と、許認可や相続の書類に困っている個人。 「むずかしい手続きを、近所の人のように手伝ってくれる」。木と葉っぱの、やわらかい画面にする。

色

文字

• 見出し：Kiwi Maru（500）
• 手書き（ペン先が書く文）：Zen Kurenaido
• 本文：Noto Sans JP 16px・行の高さ 2.0

ページの構成と演出

1. メインビジュアル（F04）：アーチ形に切り抜いた事務所の写真が、下から形が伸びて現れる。左に「手続きの『わからない』を、いっしょに。」
2. ごあいさつ（E06）：ペン先が手紙のように文を書いていき、「顔を見て話す」「最初の相談は無料」に若葉色の蛍光ペン
3. できること：社労士の仕事（雇用・社会保険・就業規則・助成金）と行政書士の仕事（許認可・相続・遺言）を2列で。丸く切り抜いた写真（F04）
4. ご依頼の流れ（B06）：お問い合わせ→無料相談→お見積り→ご契約→手続き→その後も見守り、の6枚が付箋タブのように上に積み重なる。タブの見出しは横にずれて並び、積んだ後も全部の題名が読める
5. 料金の目安
6. 事務所のこと：丸と多角形の写真、2人のひとこと
7. お問い合わせ・アクセス・フッター

動きの決まり

• JSや GSAP が無いとき：文は最初から全部書かれ、蛍光ペンも引かれている。写真は最初から形の全体が見える。付箋タブは CSS の position: sticky だけで積み重なる（JS不要）
• prefers-reduced-motion のときは、ペン・下線・形の伸びを止める（付箋の積み重なりはスクロールそのものなので残る）
• 揺れる・回る動きはしない

士業で気をつけること

• 料金・登録番号・所属会は見本の値（〇〇）。会員が本物に替える
• 社労士と行政書士で、できる仕事の範囲が違う。会員の資格に合わせて項目を消す

写真（codex）

事務所（アーチ）／相談／書類を整える手／お客様の職場／打ち合わせ／若葉、の6枚。顔は写さない。

下層ページを作るときの決まり

• 写真の切り抜きは「アーチ」「丸」「葉の形」の3つだけ
• 蛍光ペンは1区切りに2か所まで
• 緑の面（ボタン）は1画面に1つまで