佐藤会計事務所のサイトは、白を土台にしながら濃紺とゴールドを少しずつ効かせ、税務を扱う事務所らしい落ち着きと話しかけやすさを同時に表した設計です。強い装飾で目を引くのではなく、写真の切り取り方、余白の広さ、中央にそろえた見出しの型を繰り返すことで、ページ全体のトーンをまとめています。
ここではトップページのキャプチャから読み取れる範囲で、配色、ファーストビュー、レイアウト、導線、情報設計の順に見ていきます。地域名と専門分野を組み合わせて探される士業サイトの作り方として、参考にできる要素が多いページです。
白を土台に濃紺とゴールドを効かせた配色設計
このサイトの印象を決めているのは、色数を絞った配色です。白と淡いベージュで広い面を作り、そこに濃紺とゴールドという性格の異なる二色を少しずつ置いています。ここでは色の役割分担と、見出しと本文の文字組みという二つの面から見ていきます。
役割を分けた二つのアクセントカラー
濃紺はボタンとヘッダーの問い合わせ導線にほぼ限定して使われていて、押せる場所の目印として働いています。一方のゴールドは、ロゴマーク、英語のセクションラベル、質問集の装飾文字、記事一覧のバッジといった、読ませたい見出しや小さな飾りに配分されています。
背景の大部分は白かクリーム色で、彩度の高い色は最小限にとどめられています。そのため画面の中では紺のボタンが常に一番強い要素になり、どこを押せば次に進めるのかが迷わず分かる状態が保たれています。
明朝体の見出しとゴシック体の本文
見出しまわりは字間を広く取った明朝体で組まれ、本文は読みやすいゴシック体で流し込まれています。書体のコントラストがそのまま情報の階層になっているため、線や記号を足さなくても見出しと説明文の区別がつきます。
英語のセクション名にはセリフ体が使われ、その下に日本語の見出しが続く二段構えになっています。英語は雰囲気をつくる飾り、日本語は内容を伝える役目と分担できているので、飾りに引っ張られて本文が読みにくくなることがありません。
ファーストビューの作りと視線の流れ
ファーストビューは、写真とキャッチコピー、そして相談の窓口が一画面に収まる構成です。ここでは背景に使われた写真の選び方と、右下に集約された導線の置き方を取り上げます。
事務所の外観写真をそのまま主役にする
キービジュアルには、社名のサインが入った建物を正面から撮った写真が使われています。ガラス面には事務所名とともに、会計業務、税務申告、相続贈与という扱う分野を丸く囲んだ表示まで写り込んでいて、実際に訪ねる場所の雰囲気と守備範囲が来訪前から伝わります。
写真の上には、ゴールドのグラデーションをかけた明朝体の大きな一文が中央に置かれ、その下に細めの白い文字で対象となる依頼者層を説明する一行が続きます。文字にはうっすらと影が敷かれていて、背景写真の明暗が変わっても読みやすさが落ちにくい処理になっています。
右下にまとめられた相談の入口
画面の右下には、封筒のアイコンを添えた濃紺のパネルと、電話番号を大きく載せた白いパネルが横並びで重ねられています。紺のパネルには丸い矢印が添えられ、押せる要素であることが形からも分かるようになっています。
白いパネルの下端にはゴールドの帯があり、受付の時間帯が小さく添えられています。連絡の手段と対応してもらえる時間の目安が同じ場所にまとまっているので、行動を決める材料が一箇所でそろいます。なお1280ピクセル幅のキャプチャでは、このパネルがキャッチコピー下の一行と一部重なって見えています。
セクションを組み立てるレイアウトの型
トップページは、性格の違うブロックが縦に積み重なる構成です。ただし各ブロックは共通の骨組みで作られていて、写真の見せ方と背景色を変えることで単調さを避けています。ここでは繰り返しの型、写真の重ね方、区切りの作り方を順に見ます。
説明とボタンを繰り返す2カラム
紹介ブロックの多くは、片側に写真を置き、もう片側に英語ラベル、日本語見出し、短い説明、濃紺のボタンを縦に積む2カラムです。同じ並びが繰り返されるため、読み手は数ブロック目には次のボタンが現れる位置を予測しながら読み進められます。
写真はいずれも角を丸めて配置され、直線的な表組みや罫線と対比しています。硬さと柔らかさが交互に現れることで、士業のサイトにありがちな窮屈な印象が和らいでいます。
重ねとオフセットで作る奥行き
事業内容を案内するブロックでは、書類と電卓を写した写真と、打ち合わせの様子を写した写真が一部を重ねて配置されています。二枚の写真が前後にずれることで、平面的になりやすい2カラムに奥行きが生まれています。
考え方を紹介するブロックでは、写真の背後にクリーム色の四角形を少しずらして敷く手法が使われています。強い影を落とさずに立体感を出せるので、全体の穏やかなトーンを崩さずに視線を写真へ集められます。
全幅の写真帯と背景色でリズムを変える
ページの中ほどには、申告の書類と電卓を接写した写真が画面幅いっぱいに敷かれ、セクションの区切りとして働いています。文字が載っていない帯なので、読み進める途中で視線を一度休ませる役割も担っています。
背景色もブロックごとに切り替えられていて、白、ベージュ、淡い青みを帯びたグレーが順に現れます。所長の紹介は温かみのあるベージュ、所在地の案内は落ち着いた寒色というように、内容の性格と背景の印象が合わせられています。
ナビゲーションと情報設計の組み立て
このサイトは階層が浅く、トップページから各ページへ直接たどれる作りです。ここではヘッダーのグローバルナビ、トップページの役割、フッターの一覧という三つの入口を確認していきます。
役割ごとに並ぶグローバルナビ
ヘッダーは左にロゴ、右に濃紺の問い合わせボタンという並びで、画面上部にいる間は連絡先への入口が常に見えています。その下の横並びナビには、事務所を知るための項目、依頼の進め方に関する項目、訪問先の案内、読み物という具合に、性格の違う入口が一列に並びます。
項目名には日常的な言葉が選ばれていて、専門用語がほとんど使われていません。初めて税理士を探す人でも、どの言葉を選べば知りたい内容にたどり着けるのかを判断しやすくなっています。
要約と入口を束ねるトップページ
トップページの各ブロックは、下層ページの内容を数行に要約し、その下の濃紺のボタンで本編へ送り出す形に統一されています。トップだけで全体像をつかみ、気になった項目だけを深く読むという読み方ができます。
ボタンの文言には行き先のページ名がそのまま入っているため、押した先で何が読めるのかが分かります。同じ形と色のボタンが繰り返されることで、ページを下るほど操作の迷いが減っていきます。
フッターの一覧で取りこぼしを防ぐ
フッターは白地に切り替わり、ロゴの右側にリンクが三列で並びます。トップページのブロックには登場しない個別の業務ページも、ここから直接開ける形になっています。
最後まで読んだ人がもう一度別のページへ移る導線が用意されているため、ページの末尾で行き止まりになりません。会計や相続、譲渡、確定申告、記帳代行といった業務の入口が並列に置かれている点も、探し物をしている読み手には分かりやすい形です。
相談前の疑問に答えるコンテンツの並べ方
デザインの裏側では、依頼を検討する人が知りたい順番にコンテンツが並べられています。ここでは、担当者の紹介、手順の可視化、訪問情報という三つの見せ方を取り上げます。
所長の情報を表組みで開示するカード
あいさつのブロックでは、ベージュのグラデーションを敷いた帯の上に白いカードが置かれ、左に写真、右に肩書きと経歴の一覧が組まれています。所長の佐藤 肇様について、税理士として登録した時期や所長に就いた時期、所属する団体などが項目名と内容の対で並べられています。
詩吟という趣味の欄まで同じ表組みに含まれている点が特徴で、経歴だけでは伝わらない人柄が短い一語で補われています。長い文章で語らずに表形式で示しているため、確認したい項目だけを拾い読みできます。
手順と質問集で不安を減らす
相談の流れを案内するブロックは、細いゴールドの枠線で囲まれた白いカードとして、周囲から独立させて見せられています。枠線があることで、他の紹介ブロックとは性格の違う実務的な案内だと一目で分かります。
質問集のブロックでは、大きく描かれたQとAの文字とゴールドの区切り記号が左右に置かれ、質問は濃い色の明朝体、答えは小さめのグレーで組まれています。相続に関する相談の範囲、遠方からの相談方法、車で訪れるときの駐車場といった、来訪前に気になる点が短い問答でまとめられています。
所在地の案内と地図の見せ方
アクセスのブロックは、淡い青みの背景に白いカードを重ね、左右2列の表組みで情報を整理しています。住所や電話番号、営業の時間帯や休みの曜日に加えて、最寄りの目印や関連サイトの案内までが同じ表に収められています。
カードのすぐ下には地図が画面幅いっぱいに埋め込まれ、事務所の位置がピンで示されています。表で読む情報と地図で確かめる情報が上下に並ぶため、JR立花駅から徒歩約9分という説明を、地図上の距離感と結び付けて理解できます。
地域名と専門分野で探される士業サイトの考え方
ここまで見てきた作りは、税理士事務所のサイトを検討するときの物差しとしても役立ちます。地域で探される事務所のサイトに共通して求められる要素を、一般的な観点から整理します。
探している人の言葉で入口を作る
税務の相談先を探す人は、確定申告や相続、記帳といった具体的な用件と、通いやすい地域名を組み合わせて調べることが多いものです。そのため、業務ごとのページを独立させ、ナビやフッターから直接開ける形にしておくと、目的の内容へすぐ届きます。
あわせて、所在地や最寄り駅、駐車場の有無のように来訪の判断に関わる情報を一箇所へまとめておくと、比較検討の段階で候補から外れにくくなります。このサイトでも、そうした情報が地図と並べて示されています。
担当者と手順を見せて相談のハードルを下げる
初めて税理士に相談する人にとって、誰が対応するのか、どういう順番で話が進むのかが分からないことは不安の原因になります。代表者の紹介、相談から依頼までの流れ、よくある質問という三点をそろえておくと、連絡する前に大まかな見通しが立ちます。
デザインの面では、これらのコンテンツを目立たせすぎず、しかし探せば必ず見つかる位置に置くことが大切です。このサイトのように同じ形のボタンで各ページへ送り出す作りにしておくと、読み手は自分のペースで必要な情報だけを確認できます。
まとめ：佐藤会計事務所のサイトに学ぶデザインの要点
佐藤会計事務所のサイトは、色数を抑えた配色、書体のコントラスト、繰り返しのレイアウトという三つの工夫で、税務を扱う事務所に求められる落ち着きと相談しやすさを両立させています。実際の建物や打ち合わせの様子を写した写真が、言葉だけでは伝わりにくい雰囲気に具体性を与えている点も見どころです。
濃紺のボタンで下層へ送り出すハブ型のトップページ、表組みで整理された所長の紹介とアクセス情報、枠線で独立させた相談の流れなど、自分のサイトに取り入れやすい工夫が多く見つかります。士業サイトのデザインを検討している方は、実際の画面で細部を確かめてみてください。
