本文へスキップ

Tax accountant website demo

専門性を、伝わる形に。
税理士事務所サイトの17ページ作例。

中小企業の経営支援に強い、架空の税理士事務所「ひらく税理士事務所」のWebサイトを制作しました。

企画、情報設計、コピー、デザイン、WordPress実装までを一貫して設計した、営業用のデモサイトです。

  • 17 PAGES
  • PLANNING
  • COPY
  • DESIGN
  • WORDPRESS

このページで紹介するサイトは、言の葉+が制作した架空の作例です。掲載している事務所、人物、事例、数値は実在のものではありません。

ひらく税理士事務所トップページのPC表示。左に事務所名のパネル、中央に打ち合わせの写真、右に「経営のそばに、数字を話せる人を。」の縦組みコピーが並ぶ画面。
同じトップページのスマートフォン表示。写真とコピーが縦に積まれ、下にスライドの説明文が続く画面。

完成したデモサイトのトップページ(PC 1440px/スマートフォン 390px)

Project overview

税理士サイトを、
「なんとなく信頼できそう」で終わらせないために。

士業サイトでは、提供しているサービス自体は似ていても、違いが伝わりにくいことがあります。「税務顧問」「創業支援」「相談しやすさ」といった言葉だけでは、その事務所がどんな考え方で、どこまで支援し、何を判断材料として渡してくれるのかが見えにくいからです。

そこで今回の作例では、単なるサービス紹介ではなく、経営者が数字をどう理解し、どう判断できるようになるかまで含めて設計しました。目指したのは、専門性の高さと相談しやすさが、同時に伝わる税理士事務所サイトです。

想定クライアント
中小企業の経営支援に強い税理士事務所
サイト種別
架空の営業用デモサイト
ページ数
17ページ
制作範囲
企画 / 情報設計 / コピー / デザイン / WordPress実装

01 Background

課題は、
「いい税理士かどうか」がWebだけでは見えにくいこと。

税理士事務所のサイトでは、料金やサービス名は載っていても、支援の中身までは見えにくいことがあります。

たとえば、相談しやすいのか。数字をどこまで噛み砕いて説明してくれるのか。経営判断まで一緒に整理してくれるのか。創業や税理士変更など、状況ごとの相談にどう応えるのか。

こうした違いは、ただ項目を並べるだけでは伝わりません。この作例では、税務の専門性をそのまま提示するのではなく、経営者が「ここなら話せそう」「ここなら判断できそう」と感じられる構造を目指しました。

  1. 専門用語だけでは、相談のきっかけになりにくい
  2. 事務所ごとの差が、サービス名だけでは見えにくい
  3. 相談前の不安を減らす情報が必要
「私たちについて」ページのPC表示。事務所の考え方を伝える見出しとリード文が並ぶ画面。
考え方から伝える「私たちについて」。サービス名より先に、姿勢を読める構成にしました。
「サービス」ページのPC表示。3つの支援メニューが番号付きで整理されている画面。
サービス一覧は、業務の羅列ではなく相談者の状況から選べる並びにしています。

02 Target

想定したのは、
数字に困っている人ではなく、数字で判断したい経営者。

このサイトでは、従業員5〜30名程度の法人経営者を主な読み手に設定しました。

日々の経営判断のなかで、採用、設備投資、資金繰り、顧問税理士の変更、創業時の体制づくりなどに向き合っている人たちです。

読み手の関心は、「申告をしてもらえるか」だけではありません。いまの数字をどう見るか、次の一手をどう決めるかを相談できる相手かどうかが重要です。

税務顧問・経営支援

月次の数字を、次の判断につなげたい企業

顧問税理士の変更

相談のしにくさや支援範囲に迷いがある企業

創業・会社設立支援

手続きだけでなく、数字の整え方まで相談したい企業

03 Information design

17ページを、
「サービス説明」ではなく「判断の流れ」で設計しました。

この作例では、トップページだけで完結させず、17ページ構成で情報を整理しました。理由は、税理士事務所の価値が、1ページの印象だけでは伝わりきらないからです。

事務所の考え方を知る。自分に近い相談テーマを見つける。事例や人物、料金で不安を減らす。コラムで専門性を確認する。そのうえで、問い合わせを検討する。

この順番で情報に触れられるよう、ページ構成と導線を設計しました。

サイトマップ(全17ページ)

TOPひらく税理士事務所

About私たちについて
Serviceサービス
  • 税務顧問・経営支援
  • 顧問税理士の変更
  • 創業・会社設立支援
Caseお客様事例
  • 株式会社青嶺建装
  • 株式会社ノースノート
Memberメンバー
Price料金・ご相談の流れ
Office事務所案内
Columnコラム
  • 開業したら、まず出す3つの届出
  • 「そろそろ法人化?」の見きわめ方
  • 試算表を見るとき、最初に確認したい3つの数字
Privacyプライバシーポリシー

トップ1+下層16=全17ページ

「お客様事例」一覧ページのPC表示。2件の架空事例が写真つきで並ぶ画面。
事例一覧
「料金・ご相談の流れ」ページのPC表示。料金プランと相談の流れが整理されている画面。
料金・ご相談の流れ
「コラム」一覧ページのPC表示。3本の記事がカテゴリと日付つきで並ぶ画面。
コラム一覧

04 Concept & copy

「数字を説明する」ではなく、
「数字をひらく」という言葉を軸に。

このサイトのコンセプトは、「現場の話を、数字の話へ。」です。

経営の変化は、いつも試算表の上だけで起きるわけではありません。現場で起きていること、経営者が感じている迷い、これから起こりそうな変化を聞いたうえで、数字と結びつけていく。そんな支援のあり方を、一言で表せる言葉として設計しました。

あわせて、ブランドの核となる言葉として「わからない数字を、ひとつずつ、ひらく。」を置いています。専門性の高さを誇示するのではなく、わからないことをわからないままにしない姿勢を伝えるためのコピーです。

現場の話を、数字の話へ。

わからない数字を、ひとつずつ、ひらく。

  • 専門的だが威圧感がない
  • 上から教えるのではなく、判断を支える
  • 相談のしやすさと実務の強さを両立する

05 Content design

専門性を、
読める・比べられる・相談しやすいコンテンツへ。

税理士事務所のサイトでは、専門性を伝えようとするほど、情報が難しくなりやすいという課題があります。

そこで今回は、専門情報そのものだけでなく、「どう見せれば相談者が理解できるか」まで含めて設計しました。

01 Service

サービス名ではなく、
「何を判断できるようになるか」を伝える。

税務顧問、税理士変更、創業支援を、単なる業務一覧として見せるのではなく、相談者が抱えている状況から選べる構成にしました。

税務顧問・経営支援では、数字の確認を報告で終わらせず、採用や投資、資金の使い方など、次の判断につながるところまで見せています。

「税務顧問・経営支援」ページのPC表示。支援内容と月次の流れが整理されている画面。
税務顧問・経営支援ページ。月次レポートの実物イメージまで見せています。

02 Client stories

「何をしたか」ではなく、
「判断がどう変わったか」を事例に。

事例では、支援内容の羅列ではなく、導入前の課題、数字の整理方法、支援後に変わった判断を順番に見せています。

サービスページだけでは想像しにくい支援の具体像を、架空の企業事例として可視化しました。

事例01「株式会社青嶺建装」ページのPC表示。課題と支援後の変化が見出しと写真で示された画面。
事例詳細では、判断の前後をひとつの流れとして読めるようにしています。

03 People & price

「誰と、どんな流れで話すのか」まで見せる。

士業への問い合わせでは、専門性だけでなく、誰が対応するのか、どのくらいの距離感で相談できるのかも重要です。

メンバー、担当体制、料金、相談の流れを独立して見せることで、問い合わせ前の不安を減らす設計にしています。

「メンバー」ページのPC表示。担当者の紹介が写真とテキストで並ぶ画面。
メンバーページ。誰が担当するのかを、役割とあわせて紹介しています。

04 Column

コラムも、知識の披露ではなく
判断の入口として設計する。

コラムでは、専門用語を並べるのではなく、経営者が「自分の場合はどう考えるか」を整理できるテーマと構成を意識しました。

検索からの入口であると同時に、相談前に事務所の考え方や説明のわかりやすさを確認できるコンテンツとして位置づけています。

「コラム」一覧ページのPC表示。3本の記事タイトルとカテゴリが並ぶ画面。
コラムは3本とも本文まで制作し、記事ページとして完成させています。

06 Visual direction

士業らしい信頼感を残しつつ、
「相談できる距離感」をつくる。

ビジュアル面では、一般的な士業サイトに見られる「堅さ」だけに寄りすぎないことを意識しました。

深いグリーン、生成り、落ち着いたブラウンを中心に、安心感と上品さをベースにしながら、写真主導・余白重視・非対称レイアウトで編集的な雰囲気を加えています。

また、別の作例である採用サイトと同じヒーロー構成にはせず、「ひらく税理士事務所」独自のデザイン文法を設計しました。

  • DEEP GREEN 深いグリーン
  • WARM IVORY 生成り
  • MUTED TERRACOTTA 落ち着いたブラウン
  • EDITORIAL
  • PHOTOGRAPHY
  • ASYMMETRY
  • WHITE SPACE
トップページのPC表示。深緑のパネルと写真、縦組みコピーによる非対称のレイアウト。
写真を主役に、深緑のパネルと縦組みコピーで非対称に構成したトップ。
「私たちについて」ページのPC表示。余白を広くとった編集的なレイアウト。
下層ページでも余白と細い罫線のリズムを共通させています。

07 Responsive

PCでもスマホでも、
情報の順番が崩れないように。

税理士事務所のサイトは、PCで比較されることもあれば、スマートフォンから初めて見つけられることもあります。

そのため、PCレイアウトをそのまま縮めるのではなく、重要な情報の順番と読みやすさを保ったまま再構成しました。

トップページのPC表示(幅1440px)。写真と縦組みコピーが横並びになった画面。
PC 1440px
同じトップページのタブレット表示(幅834px)。写真の下に説明が続く画面。
Tablet 834px
同じトップページのスマートフォン表示(幅390px)。見出し、写真、説明の順に縦へ積まれた画面。
Mobile 390px

08 Production scope

企画から実装まで、
サイト全体を一貫して設計。

この作例では、デザインだけではなく、サイトの土台となる企画・構成・言葉まで含めて設計しています。

  • 企画設計
  • 課題整理
  • ターゲット設計
  • サイトマップ設計
  • コピーライティング
  • 全ページ原稿制作
  • 事例コンテンツ設計
  • コラム設計
  • 写真ディレクション方針
  • Webデザイン
  • WordPress実装
  • レスポンシブ対応

士業サイトに必要なのは、見た目を整えることだけではありません。

どんな強みを、誰に、どの順番で伝えるかを整理し、相談前の不安を減らす情報設計まで含めて考えることが重要です。

このデモサイトは、その一連の制作プロセスを見せるために制作しました。

この作例について

このページで紹介している「ひらく税理士事務所」は、言の葉+が営業用作例として制作した架空のWebサイトです。

掲載されている事務所情報、人物、企業、事例、料金、実績、コメント、数値はすべて架空の設定であり、実在の事務所・企業・人物とは関係ありません。

成果数値を作って見せるのではなく、どのように情報を設計し、どのように専門性を表現したかを示すためのケーススタディとして公開しています。

Next

完成したデモサイトも、
あわせてご覧ください。

制作意図だけでなく、実際の17ページ構成や画面の流れを見ると、全体像がより伝わりやすくなります。士業サイト制作の考え方や、言の葉+の対応範囲が気になる方は、サービスページもあわせてご覧ください。

サイト制作について問い合わせる