ワイヤーDLあおば会計事務所
黄色一色のファーストビューと4つの約束で、「会計事務所は堅い」という印象を変える。
webcan analyze i-taxoffice.jp
PROFESSIONAL SERVICES · 東京都 · PICKED 2026.10.29
石川隆規税理士事務所士業・金融のホームページデザイン参考 — 相続専門・イラスト・丸ゴシック
出典：i-taxoffice.jp ↗確認日 2026.10.29
EDITOR'S NOTE編集部の視点
丸ゴシックとイラストで、堅くなりがちな相続の話を順番に読ませる。
東京都中野区の、相続を専門にする税理士事務所のサイト。ファーストビューは生成りの背景に丸ゴシックの大きなコピーと説明文を置き、左に角の丸いロゴとナビ、右に「相続専門」の4文字を丸で囲んで縦に並べ、税理士登録番号を添えている。「大切にしていること」3つを番号と丸い枠のイラストで縦につなぎ、「私たちにできること」の3つのカード、紹介の方のみ相談を受けている旨の案内、住所と営業時間の順に続く。
- 01丸ゴシックと黄・青のイラストで、相続という堅い題材をやわらかく見せている
- 02「大切にしていること」を、黄色の番号・丸い枠のイラスト・縦書きの見出しで3つ縦につないでいる
- 03ファーストビューに「東京・中野区の相続専門税理士事務所」と税理士登録番号を明記している
3 VIEWPOINTS3つの視点で見る
デザインの視点
生成り色の背景に、黄色の太い数字01〜03と丸い枠のイラストを縦にそろえて、「大切にしていること」を順に見せている。「私たちにできること」は青い3つの丸みのある縦長カードで、全体を丸ゴシック1書体と少ない配色で統一している。
集客の視点
「大切にしていること」を3点に絞り、イラストと短い文で並べてから「事務所紹介へ」のボタンを置いている。住所と営業時間を末尾に明記し、紹介者経由のみ受け付ける旨も書いている。専門を相続に限定して伝える構成が参考になる。
Webディレクターの視点
大切にしている3点を番号つきで順に示し、続けて「私たちにできること」を3つに絞っている。ページ数が少なく、説明を3項目に収める構成は中小の士業サイトでも作りやすい。紹介者経由のみ相談を受ける旨も明記している。
CONVERSION集客の工夫
－電話番号をヘッダーに常設PC・ファーストビュー
－タップで電話できるSP・tel:リンク 0か所
－SPの追従ボタンSP・画面下に固定
✓予約・問い合わせ導線ご相談の流れ
－LINEで相談・予約LINE公式アカウント
✓営業・診療時間の明記トップページ内
専門分野を1つに絞って名乗る
ページタイトル・ファーストビュー・フッターのすべてで「相続専門」と名乗り、所在地の中野区も添えている。何の専門家なのかが最初に分かり、相続で困っている人が自分の相談先かどうかを判断しやすい。
考え方を3つに絞って並べる
「財産の分け方」「納税資金の準備」「適正な納税額」の3つを、番号とイラストつきで順に説明し、それぞれに詳細へのボタンを付けている。読み手は順番に読むだけで、事務所が何を大事にしているかをつかめる。
相談の受け方を正直に書く
紹介の方のみ相談を受けていること、直接の問い合わせには答えられないことを、ページの下で背景色を変えて案内している。受け付けの条件をはっきり書いておくと、合わない問い合わせを減らせる。
チェック項目は 2026.10.29 に実ブラウザで描画したトップページを自動判定したものです。
COLOR配色
#F7F2E9背景 · 生成り
#FFFFFFロゴ・イラストの枠・フッター · ホワイト
#E7C905差し色（ロゴ・番号） · イエロー
#73A7E8「私たちにできること」のカード · ブルー
#EAE0CE紹介制の案内の背景 · ベージュ
#111111本文テキスト・枠線 · ブラック
背景は面積、文字は文字数で重み付けして実測した色から、役割ごとに整理しています。
TYPOGRAPHYフォント
- 用途
- 和文見出し・本文・ボタン
- 使用フォント
- Zen Maru Gothic
- 無料で近いもの
- Zen Maru Gothic
| 要素 | PC サイズ / 太さ | PC 行間 | SP サイズ / 太さ |
|---|---|---|---|
| h2 | 16px / 700 | 1.50 | 14px / 700 |
| h3 | 16px / 700 | 1.50 | 14px / 700 |
| 本文（p） | 16px / 500 | 2.00 | 14px / 500 |
| ボタン | 20px / 700 | 1.00 | 12px / 700 |
実測値（PC 1440px・SP 375px、2026.10.29 計測）。同じ要素で最も多く使われている指定を表示しています。h1 をロゴや小さな見出しに使っているサイトでは、h1 の値が小さく出ます。
STRUCTUREページ構成（上から順に）
- 01
- 02
- 03
- 04
- 05
- 06
PARTSパーツ別に見る
PC
PC
PC
PC番号は上のページ構成の順番です。部品名から、同じ部品を使っているほかのサイトの実例を見られます。スクリーンショットは 2026.10.29 以降に撮影したもので、現在の表示とは異なる場合があります。
DOWNLOADワイヤーフレームをダウンロード
この構成を、Figmaで編集できるワイヤーに
上のページ構成を、WEBCANのワイヤーフレーム部品で組み直したものです。元サイトの文章・画像・コードは含みません。
Figmaでの使い方
- SVGをダウンロードする
- Figmaのキャンバスにファイルをドラッグ＆ドロップする
- セクションごとにレイヤーが分かれた状態で開くので、順番の入れ替えや文言の差し替えから始める
文字はテキストレイヤーとして入ります（フォントは Noto Sans JP）。
REPRODUCEこのサイトを参考にするときのポイント
- 01専門分野を1つに決めたら、タイトル・ファーストビュー・フッターで同じ言葉をくり返す
- 02書体を丸ゴシック1つにそろえ、イラストの色を2色に絞ると、やわらかくてもまとまる
- 03考え方や強みは3つにして、番号をつけて順に並べる
- 04相談を受ける条件があるなら、トップページではっきり書いておく
FAQよくある質問
石川隆規税理士事務所のサイトで使われているフォントは？
見出し・本文・ボタンのすべてに Zen Maru Gothic を使っています。Google Fonts で無料で使える丸ゴシックです。
士業のサイトにイラストを使っても大丈夫ですか？
内容が堅い分野ほど、イラストでやわらかさを出す方法は使えます。このサイトのように色とタッチをそろえ、専門分野や登録番号などの情報をきちんと載せておくと、軽く見えにくくなります。
どんな業種の参考になりますか？
税理士・司法書士・行政書士・社会保険労務士など、専門分野を絞って発信したい士業事務所に応用できます。紹介や予約制で受け付けている事務所にも向いています。
スクリーンショットは、解説に添える引用として縮小して掲載しています。デザイン・文章・画像の権利は石川隆規税理士事務所および各権利者に帰属します。ワイヤーフレームは元サイトを写したものではなく、構成をWEBCANの部品で組み直したものです。権利者・制作者の方からの掲載の取り下げ・修正のご依頼はお問い合わせから承り、原則2営業日以内に対応します。
MOREほかの士業・金融の参考サイト
FROM REFERENCE TO YOUR SITE
このテイストで、
御社の事務所サイトを。
「石川隆規税理士事務所のような構成で」とお伝えいただくだけで構いません。無料相談で御社の現状サイトを拝見し、地域と業種に合わせた構成案をお持ちします。
無料相談はこちらFREE SITE CHECK（ 無料診断 ）
自社サイトの今の状態を、30秒で確かめる。
URLを入れるだけで、GoogleのSEOとAI検索の両方から見た対応度と、優先して直すべき点がわかります。会員登録・メールアドレス不要です。