士業向けのホームページを作るなら参考にしたい。Webサイトデザイン20選！

士業のホームページを作成する際に参考にしたいサイトデザインを20個ほどご紹介します。

税理士や弁護士、社会保険労務士など士業と呼ばれる職業は、信頼感や安心感が大切です。
WEBサイトを作成する際にも、その点には注意して作る必要があります。

しかし、そこにこだわりすぎてしまうとオリジナリティに欠けてしまい、読者の目に留まりづらくなってしまうことも。
他とは被らないオリジナリティのあるサイトを作成することは、依頼先を探している企業や個人の方へのアピールにもなりますので、ぜひ力を入れてWEBサイトを作成してみてください。

シンプルなサイトやユニークで遊び心あふれるサイトなど、様々な雰囲気のサイトを掲載しています。色や写真、イラストの使い方、アニメーションの活用法など、サイトによって特徴が異なりますので、様々な視点でチェックしてみてくださいね。

1．あおば会計事務所

(出典：あおば会計事務所)

広島県広島市にある、あおば会計事務所のサイトです。読み込む時間を感じさせないアニメーションの使い方、黄色1色の映えるデザインにキャッチコピーと合わせたイラストが目を惹きます。スクロールすると浮き出てくるかわいいイラストは、士業ならではの硬いイメージを除き、優しい印象を与えてくれます。サイドにメニューバーを固定しているため、読者の利便性も高いでしょう。

2．インフィニティ法律事務所

(出典：インフィニティ法律事務所)

茨城県水戸市にあるインフィニティ法律事務所のサイトです。赤系で統一されたインパクトのあるデザインにかわいい鴨のイラストは愛嬌があり、不安な気持ちを持つ読者に安心感を与えられるようなデザインになっています。

右下に出てくる鴨のイラストをクリックすると次のコンテンツに移動する仕組みはお茶目ですね。トップページに相談の多い事件がまとめてあり、個人と法人ごとに事例が見れるようになっているため、読者は迷わず自身の悩みについて調べることができるでしょう。

3．TMI総合法律事務所

(出典：TMI総合法律事務所)

東京都港区にあるTMI総合法律事務所のサイトです。キャッチコピーなどが無く、和を感じさせるイラストが一面に広がる特徴的なデザインです。事務所のコンセプトにもある「国際化」にも対応するため、サイト全体が日本語だけでなく英語での表記も可能になっています。

また、代表である田中さん(代表挨拶ページに写真あり)がかけられているゴールドの眼鏡とサイトカラーとの統一感も感じられます。在籍するパートナー1人1人を写真付きで紹介している点は、相談しようか悩んでいる読者にとって安心材料の1つになるでしょう。

4．株式会社MyHR

(出典：MyHR)

東京都文京区にある、社会保険労務士さん数名で構成されている株式会社MyHRのサイトです。TOPには会社のコンセプトをキャッチコピーで提示し、ファーストビューで主な業務内容が分かるようなデザインになっています。

士業は堅いイメージがありますが、優しい笑顔の写真やどこまでも続くような安心感のある青空の背景を使用することで、柔らかく温かみのあるサイトになっています。

5．おおたか総合法律事務所

(出典：おおたか総合法律事務所)

東京都新宿区にある、おおたか総合法律事務所のサイトです。スクロールをすると文字やコンテンツがふんわり出てくるアニメーションは、柔らかい雰囲気を出しています。ファーストビューの「私たちは導き出す」で読者に生まれる「何を？」の疑問に対し、TOP下すぐのメッセージで説明＆回答をしているため、事務所の理念が理解しやすくなっているのが特徴です。

また、相談から契約までの流れが記載されているため、読者がその後の行動をイメージしやすい作りになっています。

6．横浜パートナー法律事務所

(出典：横浜パートナー法律事務所)

神奈川県横浜市にある、横浜パートナー法律事務所のサイトです。「専属担当制」という事務所の特徴が、ファーストビューのキャッチコピーでしっかりと伝わります。刑事事件専門の法律事務所のため、事件別に事例や弁護の流れなどがまとめてあり、急いで弁護士を探している方でも迷わずに欲しい情報にたどり着けるような作りになっています。

また、サイト全体において文字サイズが小さすぎず、フォントもハッキリと太めのものを使用しているので読みやすいです。

7．渋谷大橋公認会計士事務所

(出典：渋谷大橋公認会計士事務所)

東京都渋谷区にある、渋谷大橋公認会計士事務所のサイトです。事務所のイメージカラーであるオレンジと、その補色にあたるネイビーを使ったメリハリのあるサイトカラーが特徴です。コンテンツメニューと写真をマスで配置し、まるでパズルのようなユニークなデザインは目を惹きますね。写真がアニメーションを使用して切り替わる様子も面白いです。

8．荻野鷹也税理士事務所

(出典：荻野鷹也税理士事務所)

東京都渋谷区にある荻野鷹也税理士事務所のサイトです。ファーストビューでは人情味あふれる写真がアニメーションで次々と展開され、士業ならではの堅さのない柔らかい雰囲気のデザインになっています。

また、キャッチコピーと写真がマッチしているので、より説得力を感じることができます。サイト全体を見るとシンプルなデザインですが、動きの柔らかいアニメーションを使用してクールになりすぎないといった点も魅力的です。

9．税理士法人ブラザシップ（株式会社ブラザシップコンサルティング）

(出典：税理士法人ブラザシップ)

愛知県名古屋市に本社を構える、税理士法人ブラザシップのサイトです。白と紺の2色で統一されたサイトは、シンプルですが誠実な印象を受けます。マウスオーバーすることで色が変わるデザインや、ボタンだけでなく画像全体がクリックできるデザインが特徴的です。

また、事例では、実際に利用した方との写真と簡単な業務内容がみられるようになっています。利用者と税理士が笑顔で写っている写真は、信頼度の高さがうかがえますね。

10．タカギ税理士事務所

(出典：タカギ税理士事務所)

愛知県小牧市にあるタカギ税理士事務所のサイトです。税理士事務所では珍しいナチュラルで温かみのあるデザインが特徴です。かわいいイラストやアイコン、ポップな書体を使用しているところもあり、より柔らかさを感じられます。WEBサイトを堅い雰囲気にしたくないと考える方に参考にしていただきたいデザインです。

11．税理士法人Soogol、すばる会計事務所

(出典：税理士法人スーゴル/すばる会計事務所)

東京都台東区にある税理士法人スーゴル/すばる会計事務所のサイトです。枠にとらわれないロゴの配置の仕方や、メッセージ性の高いリード文をホワイトの背景に赤文字を乗せてより強調されたデザインはとても目を惹きますね。

サイトカラーは白黒赤の3色で統一されていますが、見出しや強調したい部分の文字サイズを極端に変えることでメリハリを出し見ていて飽きない工夫がされています。伝えたいことが分かりやすいデザインです。

12．小林ノブヒロ事務所

(出典：小林ノブヒロ事務所)

東京都千代田区にある税理士小林ノブヒロ事務所のサイトです。税理士の堅い雰囲気とは真逆ともいえるイメージが印象的で、「ページ上部へ戻る」ボタンや、要所要所に出てくるアイコンは遊び心にあふれ、楽しさを感じられるサイトになっています。代表の趣味がスポーツということもあり、スポ根を感じさせるような熱いキャッチコピーや見出しはインパクトがあります。

下層ページを含め、サイト全体が読者の導線をしっかりと考えた設計になっているため、ユニークさと堅実さを兼ね備えたサイトです。遊び心が欲しいと考える方はぜひ参考にしてみてください。

13． 税理士法人TAXGYM

(出典： 税理士法人TAXGYM)

東京都渋谷区にある 税理士法人TAXGYMのサイトです。まるでアメコミのような強烈なインパクトのあるファーストビューは読者を一気に惹きつけますね。スクロールをしていくと、モノクロで統一されたコンテンツがアニメーションを使用して出てきますが、代表写真はマウスオーバーすることで色が付くようになっています。

背景の人物イラストも代表者ごとに切り替わるので、だれをイメージしたイラストなのかが分かり、見ていて面白いです。インパクトが欲しい！そのような考えている方に参考にしていただければと思います。

14．城田行政書士事務所

(出典：城田行政書士事務所)

長野県上田市にある、城田行政書士事務所のサイトです。シンプルなデザインと設計でとても見やすいのが印象的。悩みに合わせてコンテンツが選べるようになっているので、サイト内で迷うことなく読者の見たいコンテンツにたどり着くことができます。

また、それぞれのアイコンにマウスオーバーをすると、アイコンから吹き出しが登場し悩みの例が出てくるデザインがとてもユニークです。シンプルなサイトでもアイコンやイラストの使い方で印象が変わる、ということがよく分かるサイトではないでしょうか。

15．代官山綜合法律事務所

(出典：代官山綜合法律事務所)

東京都渋谷区にある代官山綜合法律事務所のサイトです。事務所の風景がまるで動画のように順番に映し出されるファーストビューは、落ち着いた雰囲気で安心感を感じることができます。サイトの要所には図形のようなイラストが配置されており、アニメーションを使用することで、シンプルなデザインの中にお洒落さを演出。

コンテンツ部分は、背景が白になっていることでブラウンに統一された文字が強調されて読みやすいです。お洒落なサイトを作成したいと考えている方の参考になるサイトです。

16．永井司法書士合同事務所

(出典：永井司法書士合同事務所)

大阪府を拠点に、西日本に展開している永井司法書士合同事務所のサイトです。「永きにわたるパートナーをめざして」というキャッチコピーと力強く握手する写真は、信頼してお付き合いできるパートナーを探す読者に響くものがあります。

シンプルなサイトですが、無駄がないだけでなく、情報を簡潔にわかりやすくまとめてあるため、読者も理解しやすいはずです。事務所紹介には社内の写真も掲載されているため、利用したいと考えている方の安心感にも繋がります。

17．ハピネス行政書士事務所

(出典：ハピネス行政書士事務所)

東京都江戸川区にある、ハピネス行政書士事務所のサイトです。サイトに訪れてまず目に入る「心を込めてサポートします」のキャッチコピーとスタッフの顔が分かる写真は温かさと安心感がありますね。コンテンツはかわいいアイコンでわかりやすいだけでなく、柔らかい印象のフォントを使用。サイトの印象を優しくしてくれています。

また、アイコンにマウスオーバーした際にイラストに色が入るようなデザインは遊び心が感じられます。

18．国本司法書士事務所

(出典：国本司法書士事務所)

兵庫県神戸市にある国本司法書士事務所のサイトです。鍵のイラストから扉が開くようなアニメーションでTOPページが表示され、ファーストビューはオシャレなブーケがメインの写真。女性の司法書士さんならではの優しく華やかな雰囲気のサイトになっています。

使用されている色がすくないため写真が良く映えていますし、ボタンデザインやフォントがサイト全体で統一しているため、見やすいのも特徴です。

19．岐阜県弁護士会

(出典：岐阜県弁護士会)

岐阜県岐阜市を拠点としている岐阜県弁護士会のサイトです。イラストを中心としたカラフルで温かい雰囲気のデザインが特徴で、敷居が高いイメージを払拭するような明るいサイトになっています。デザインが華やかなためごちゃごちゃしてそうにも感じますが、大事なポイントはオレンジに統一する工夫がされています。

サイト全体の文字サイズを変えることができるのは利便性が高く、幅広い層の方が利用しやすいアイディアと言えます。

20．東京新宿法律事務所

(出典：東京新宿法律事務所)

東京都新宿区にある東京新宿法律事務所のサイトです。日差しが差し込む自然豊かな温かさに「えがおでいよう」のキャッチコピーは、優しい雰囲気を演出していますね。サイト内のカラーはグリーン系で統一されていますが、相談予約フォームのボタンだけは埋もれてしまわないように反対色であるピンクを使用し目立たせています。

文字のサイズや太さにもメリハリがあるため、必要な情報を見極めやすいのも特徴です。

まとめ：事務所の特色あふれる素敵なサイトを作成していきましょう

士業のWebサイトを作成する際に参考にしたいデザインをご紹介させていただきました。

同じ士業であってもサイトのイメージは事務所によって異なり、それぞれ特色が出ていたかと思います。

誠実さが求められる職業ですので、Webサイトでも真面目・信頼といったどちらかと言えば堅いイメージを連想しやすいですが、必ずしもそうである必要はありません。

事務所の特長が伝わり、他とは少し違ったオリジナルのサイトを作成してみてはいかがでしょうか。

Web制作会社コンタ(Conta)では、お客様の抱くイメージを共に想像し、ご提案から構築までワンストップで形にしております。Webサイトを作りたいけどモヤモヤとしたイメージしかない、相談しながら決めたいといったお客様のご相談をお待ちしております。