税理士を探している経営者は、デザインの華やかさを見ていません。見ているのは「この人に会社の数字を全部見せて大丈夫か」という一点です。つまり税理士事務所のホームページの仕事は、かっこよさの演出ではなく、誠実さを目に見える情報のかたちに翻訳すること。この記事では、ラタトスクが制作した税理士事務所向けデモサイト「平林税理士事務所」を素材に、配色・構成・コピーをどんな意図で設計したかを具体的に解説します。
はじめにお読みください
- この記事で扱うのは、ラタトスクが技術力の証明として制作した架空のデモサイトです。実在の店舗・事務所・実際の案件ではありません。
- デモに登場する事務所名・料金・実績の数字はすべて架空の設定です。
税理士事務所のHPで一番大事なのは「誠実さの言語化」
税理士は、外から見ると「何をどこまでやってくれるのか」「結局いくらかかるのか」が非常に分かりにくい仕事です。しかも依頼する側は、売上も利益も借入も、会社の内情をすべて見せることになります。だからこそ税理士選びの判断軸は、技術や資格の比較ではなく「信頼できそうかどうか」に集約されます。
ここで多くのホームページが間違えるのが、「誠実・信頼・安心」という言葉を自分で名乗ってしまうことです。「誠実な対応を心がけています」と書いても、読み手には何も伝わりません。誠実さは宣言するものではなく、情報の出し方で示すものです。具体的には次の3つです。
- 料金を隠さない：「お見積もりします」で濁さず、目安の金額まで書く
- できること・できないことの範囲を明確にする：対応業務、訪問エリア、対応ツールまで具体的に
- 聞きにくい質問に先回りして答える：「初回相談は無料？」「顧問料はいくら？」に正面から回答する
デモサイト「平林税理士事務所」は、この3つを1ページの中でどう実装するかを示すために設計しました。
デモ「平林税理士事務所」でどう設計したか
配色：紺×ゴールドで「堅実さ」と「品格」を両立する
このデモの基本色は、濃紺（#1F3A5F）とシャンパンゴールド（#C9A66B）の2色です。紺は金融機関や士業で長く使われてきた「堅実・誠実」の色。会社の数字を預ける相手のサイトとして、まず外せない土台です。
ただし紺一色では官公庁のように無機質になるため、差し色にゴールドを加えています。ポイントは使う場所を絞ること。見出しの英字ラベル、ヒーローコピーの一語、数字、ボタンといった「ここぞ」の箇所だけに限定しています。ゴールドは面積を広げるほど安っぽく転ぶ色なので、線と文字だけに使って品格側に寄せるのが設計意図です。
もうひとつの仕掛けが書体です。英字と数字にはセリフ体（Cormorant Garamond）を使い、「SINCE 2009 ／ FUKUOKA」のようなラベルや料金表示に、老舗の名刺のような落ち着きを持たせています。本文は読みやすさ優先でNoto Sans JP。飾る場所と読ませる場所を書体で分けるのは、士業サイトで特に効く手法です。
構成：悩み → 理由 → 数字 → 料金 → FAQ → 人
ページの流れは、訪問者の心理の順番に合わせています。
| 順番 | セクション | 役割 |
|---|---|---|
| 1 | お悩み4つ | 「会計が後回し」「節税が不安」「融資・補助金」「経営の数字」──自分ごと化してもらう |
| 2 | 選ばれる3つの理由 | 毎月の対面ミーティング／融資・補助金に強い／クラウド会計対応 |
| 3 | 数字で見る実績 | 開業16年・顧問先240社・支援180件・継続率98%（いずれも架空の設定） |
| 4 | サービスと料金 | 6つのサービスすべてに料金の目安を明記 |
| 5 | アクセス・FAQ | 訪問エリアや初回相談の疑問に先回りで回答 |
| 6 | 所長の顔と言葉 | 数字を預ける「相手の顔」を最後に見せて相談へつなぐ |
このデモの核心は4番です。月次顧問「¥27,500/月〜」、確定申告「¥88,000〜」、法人決算「¥110,000〜」といった具合に、6つのサービス全部に金額の目安を入れました（金額は架空の設定です）。税理士のホームページでは料金非公開が今も珍しくありませんが、料金を書くこと自体が「隠しごとをしない事務所」というメッセージになります。これが冒頭で述べた「誠実さの言語化」の、いちばん分かりやすい実装です。
実績の数字セクションには、スクロールに合わせて数字がカウントアップする動きを付けています。派手な演出はここだけに絞り、「動きで驚かせる」のではなく「数字を記憶に残す」ためだけに使っています。
コピー：「数字と一緒に、未来を考える。」
ヒーローのメインコピーは「数字と一緒に、未来を考える。」。過去の帳簿を整理する“記帳代行の人”ではなく、これからの経営を一緒に考える伴走者というポジションを一行で示すのが狙いです。デモ内の紹介文でも「『会計の先生』ではなく『経営の伴走者』として」という言い換えを繰り返し、事務所の姿勢に一本の軸を通しています。
ボタンの文言は「初回相談 60分無料 →」。単に「お問い合わせ」とせず、無料であること・60分という具体的な時間まで書くことで、「相談したら契約させられるのでは」という心理的ハードルを下げています。リード文でも対象（中小企業・個人事業主・スタートアップ）と範囲（月次顧問から創業融資・補助金まで）を明示し、「自分が対象かどうか」を最初の画面で判断できるようにしました。
税理士事務所の集客でよくある失敗
デモの設計意図を裏返すと、そのまま「よくある失敗」のリストになります。
- 料金を一切書かない：「規模により異なります」だけでは、比較検討の土俵にすら乗れません。幅があっても「〜円から」の目安は書けます。
- 専門用語で語ってしまう：読み手は税務のプロではなく経営者です。制度の解説より「あなたのこの悩みに対応できます」が先です。
- 誰向けの事務所か書かない：法人か個人か、どの地域か、創業期か成熟期か。対象を絞るほど「うちのことだ」と刺さります。
- 人が見えない：数字を預ける相手の顔・人柄が最後まで分からないサイトは、それだけで候補から外れます。デモで所長の写真とメッセージのセクションを終盤に置いたのはこのためです。
⚠️ 順番を間違えないでください
デザインを整える前に、まず「料金・対象・範囲を書けるか」を決めることが先です。情報を出す覚悟が決まっていないままデザインだけ新しくしても、読み手の不安は残ったままになります。
まとめ｜実際のデモをご覧ください
- 税理士事務所のHPの軸は「誠実さの言語化」。誠実と名乗るのではなく、情報の出し方で示す
- 配色は紺×ゴールド。ゴールドは線と文字だけに絞って品格側に寄せる
- 構成は「悩み → 理由 → 数字 → 料金 → FAQ → 人」。核心は全サービスへの料金明記
- コピーは「伴走者」の一点に絞り、CTAは「初回相談 60分無料」まで具体的に書く
ここで解説した設計は、実際のデモページで動きも含めて確認できます。ヒーローの配色、カウントアップする数字、料金カード、FAQの開閉まで、ぜひ実物でご覧ください。
※架空の事務所です。実在の店舗・事務所ではありません。