「聞く前に、答えておきます。」税理士事務所のホームページを帳簿のかたちにした話
名古屋・伏見の架空の税理士事務所を題材にした制作サンプル。問いと答えだけで組んだ「帳簿」のような構成、捨てた2つの方向、5ページを約2時間で公開するまでを紹介します。
この事例は、税理士事務所のホームページがどんなふうに仕上がるかをご覧いただくための制作サンプルです。「田村税理士事務所」は当スタジオが設定した架空のモデル店舗で、事務所・人物・住所・電話番号はすべて架空です。掲載している人物写真や事務所の写真も、このモデル事務所のためにAIで生成したものです。ただし、デザインの検討と決定、ページの構成、公開までの時間は、実在の店舗のホームページを作るときとまったく同じ手順で進めています。
モデル店舗の設定：名古屋・伏見の、創業支援が得意な小さな事務所
モデル店舗の設定はこうです。名古屋市中区、地下鉄伏見駅から徒歩3分のビルにある税理士事務所。代表の田村は大手税理士法人で15年働いたのち2021年に独立し、税理士2名とスタッフ2名の4人で、創業1〜3年目の会社や個人事業主の伴走、融資・補助金の相談、freee／マネーフォワードといったクラウド会計の導入を主な仕事にしています。相続は扱わず、必要のない法人成りはすすめない。「女性税理士」を売りにもしない。そういう事務所です。
ホームページの目的は、はっきりしていました。30代の創業経営者が夜11時にスマホで開いて、トップページだけで「いくらかかるのか」「いつ返事が来るのか」「断ってもいいのか」といった5つの問いの答えを60秒以内に知り、安心して「無料相談」のボタンを押せること。連絡の導線はフォームが主、LINEと電話が従。これがこのサイトの合格基準でした。
検討して、捨てた2つの方向
最初に考えたのは「便箋」という方向でした。空白を極端に広く取り、縦書きの問いと手紙のような一人称の長い文章で、まず田村という人の人柄を伝える構成です。静かで、この事務所の空気には合っていました。けれど捨てました。理由は、60秒で5つの数字が読める密度に欠けること。そして、料金より先に人柄が来てしまうこと。夜11時に「結局いくらなのか」を知りたい人にとって、それは遠回りです。
次に考えたのが、正反対の「見開き広告」でした。新聞の見開きのように問いを黒々と極大に置き、写真を画面いっぱいに断ち落とす高コントラストの構成。数字は確かに一瞬で目に入ります。でも、これも捨てました。声が大きすぎるのです。「相談のあと、断ってもいいですか？」に「もちろん」と答える事務所の静かさと合いませんし、よくある税理士サイトの「人物＋キャッチコピーの画像バナー」を裏返しただけにも見えました。
採用したのは「帳簿」。数字を扱う仕事の道具を、そのまま骨格に
最終的に選んだのは「帳簿」です。便箋の静けさと、見開き広告の文字の大きさを取り込みながら、帳簿の罫線・金額欄・合計の二重線という「数字を扱う仕事の道具」そのものを画面の骨組みにしました。サイト全体は、訪問者の言葉で書かれた大きな問いと、田村の一行の答え（数字つき）の繰り返しだけでできています。問いは明朝体（Zen Old Mincho）でページ幅いっぱいに、1pxの罫線の下に答えをゴシック体（Zen Kaku Gothic New）で。答えに数字があるときは、PCでは右側の「金額欄」に桁の揃う書体（Source Serif 4）で大きく右揃え。帳簿の金額列そのものです。色は生成りの紙と鉄紺のインクの2色だけで、差し色はありません。
帳簿の思想は「何を載せないか」にも表れています。モデル店舗の設定として、「選ばれる理由」「私たちの強み」「こんなお悩みありませんか」「業務アイコンの列」「お知らせ」「採用」「認定バッジ画像」、そして悩み→理由→料金→声→問合せと続く長いランディングページ型の構成は、すべて使わないと決めました。伝えたいことは全部、問いへの答えとして書く。代表挨拶という見出しも作らず、「田村は、どんな人ですか？」という問いの答えとして書いています。
このサイトの中心にあるのが「1年目の総額」という計算機です。個人事業主か法人か、記帳はお任せか自分でか、会社設立はあるかないか。3つを選ぶと、税込の年額が大きな数字で出ます。個人事業主で記帳お任せなら132,000円、法人で設立ありなら創業パックに国へ払う実費を足して約530,000円、という具合です。金額の下には「含まれるもの」「含まれないもの」を一行ずつ添え、合計の下だけは帳簿の二重線。切替はセグメント型で、数字が変わるときは短くフェードするだけ。跳ねたり回ったりはしません。答えの文字も、画面に入ると左から右へインクで書かれるように静かに現れるだけで、動きはそれきりです。
スマホの初画面で、料金と返事の速さが分かる
合格基準が「夜11時にスマホで」だったので、スマホの初画面は特に細かく決めました。上に田村の正面ポートレート（文字はかぶせません）、続いて問い1、答え1、「返信は1営業日以内。」の一行、そして「無料相談を申し込む」のボタン。この全部がスクロールなしで画面に収まります。画面の下には「無料相談を申し込む」と「電話」の固定バーがあり、親指の届く場所から離れません。ヘッダーはスクロールダウンで隠れ、スクロールアップで細いバーとして戻ってきます。本文は17px以上、注釈も14px以上、薄いグレーの文字は作らない。夜の暗い部屋でも読める、という意味でもあります。
納品した5ページ
納品したのは、トップ（/）、田村について（/about）、無料相談・アクセス（/contact）、料金と1年目の総額（/price）、プライバシーポリシー（/privacy）の5ページです。料金ページは金額をすべて税込・年額まで書き、顧問料の表は画像ではなく罫線の表で、スマホでも読める文字にしました。融資や補助金については「保証しません」と明記し、「節税できます」のような断言は使いません。田村についてのページでは、返事の速さ、数字を経営者の言葉に翻訳すること、そして「断ること」の3つを問答で書いています。無料相談のページでは、申込から1営業日以内の日程連絡、60分の相談、持ち帰れる3つ、他の事務所と比べて決める、という流れを帳簿の行のように並べました。
フォームは、お名前・メール・電話・いまの状況・ご相談内容の5項目だけ。会社名は聞きません。送信ボタンのすぐ上には「送信後、1営業日以内に田村本人から日程の候補をお送りします。2〜3月は2営業日。」の一文を必ず置いています。フッターには小さく「このサイトは制作サンプルです（架空の事務所です）」と入れました。
公開まで、約2時間
コンセプトの決定からデザイン、5ページの実装、公開まで、かかった時間は約2時間（実測）です。ホームページ番頭はAIがサイトを組み立て、人がチャットで方向を指示する仕組みなので、「便箋」と「見開き広告」を検討して捨て、「帳簿」に決めるところまで含めてこの時間でした。細かい調整（料金表の金額列の右揃えや、行頭の文字の折れ方など）は、公開後の編集で折り込んでいく予定です。
この事例のようなホームページを、あなたのお店にも。何を載せるか、何を載せないか、どんな空気にしたいか。チャットで話すだけで、こんなふうに形になります。hpbanto.com へどうぞ。
