税理士事務所（信頼感・誠実／シンプル）

だれに向けたページか

はじめて税理士を探す個人事業主・創業したての社長、相続を控えた家族。 「難しい話を、わかる言葉で」。青と白だけの清潔な画面に、1本の帯がページ全体を導く。

色

文字

• 見出し：Zen Kaku Gothic New（700）
• 数字・英字：Inter
• 本文：Noto Sans JP 16px

ページの構成と演出

1. メインビジュアル：左に「数字のことは、ぜんぶ任せて。」、右に事務所の写真。写真の下から太い青のリボン（F06）が描かれ始める
2. ごあいさつ（E02）：大きな文。読み進めると灰色の字が1字ずつ紺に染まり、「わかる言葉で」「毎月会って」だけ青になる
3. サービス（B02）：画面を止めたまま、記帳代行→確定申告→創業支援→給与計算→相続の5つが切り替わる。左に写真、右に説明、上に「1／5」と進み具合の線
4. リボン（F06）：区切りの境目をまたいで、1本の帯が左右に蛇行しながら下へ伸びる（スクロールに合わせて描かれる）
5. 顧問料の目安：3つの料金カード
6. ご相談の流れ
7. ご相談・アクセス・フッター

動きの決まり

• JSや GSAP が無いとき：文字は最初から紺、サービスは5つが縦に並ぶ、リボンは最初から描かれた状態。全部読める
• prefers-reduced-motion のときは、上と同じ「動かない版」
• 灰色から染める文字は、ごあいさつの1か所だけ（読みにくくなるので広げない）

士業で気をつけること

• 料金・税理士登録番号・所属税理士会は見本の値（〇〇）。会員が本物に替える
• 「必ず節税」など結果を約束する言葉は使わない

写真（codex）

事務所／相談／記帳／申告／創業／給与計算／相続、の7枚。顔は写さない。

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

• リボンは1ページに1本。画面の端から端へ、見出しの後ろを通す
• 青の面（ボタン）は1画面に1つまで
• 数字は Inter、単位は日本語で小さく