士業サイト（Next.js・21ページ・料金シミュレーター・コラム付き）のデモ「ことわり税理士事務所」
法人顧問・確定申告・創業・相続を扱う税理士事務所を想定した、Next.jsの高速なサイト。料金シミュレーターと税のコラムを軸に、検索から相談予約につなげる構成にしました。
レスポンシブ表示
PC（1440px）
タブレット（820px）
スマートフォン（390px）
このデモで目指したこと
- 「いくらかかるのか」を、問い合わせる前に自分で確かめられる
- コラム記事で、検索から見つけてもらえる入口を増やす
- 専門用語を使わない文章と、落ち着いた配色で信頼感を出す
- スマートフォンで、どのページからでも相談予約までたどり着ける
ページ構成（7ページ）
- トップ →写真に頼らない文字組みのファーストビューと、その場で月額が出る簡易シミュレーター
- サービス（4種） →法人顧問・確定申告・創業支援・相続税。対応内容・料金表・相談の例・FAQ
- 料金・シミュレーター →形態・年商・記帳・面談・年末調整の人数から、月額・年額と内訳の棒グラフを計算
- 税のコラム →記事6本をカテゴリで絞り込み。記事には目次・関連記事・相談への導線
- 事務所案内 →代表挨拶・事務所概要・経歴・オンライン対応
- よくある質問 →全16問をひとつのFAQ構造化データにまとめて出力
- 無料相談の予約 →空き枠から日時を選び、オンライン／来所を選べる予約フォーム
制作のポイント
料金シミュレーター
事業形態・年商・記帳を任せるか・面談の頻度・年末調整の人数を選ぶと、月額と年間の目安、その内訳がその場で計算されます。料金をはっきり見せることが、士業サイトでいちばん問い合わせにつながる要素です。
コラムで検索から集客
「法人成り 目安」「青色申告 65万円 条件」など、実際に検索される悩みに答える記事を6本。記事ごとに目次と関連記事、相談予約への導線を置き、Article の構造化データを出力しています。
Next.jsで、速く・軽く
全21ページを静的に書き出し、サーバーを持たずに配信。和文は端末のフォントを使い、Webフォントは英数字だけに絞ったことで、最初の表示はモバイル想定で約0.9秒です。
PCとスマートフォンで、違う骨組み
PCでは左にメニューを固定したサイドバー型、スマートフォンでは画面下に「料金・コラム・相談予約」のタブバー。よく使う操作に、どこからでも片手で届きます。