PC
SP
PC
SP
PC
SP
ワイヤーDL石川隆規税理士事務所
丸ゴシックとイラストで、堅くなりがちな相続の話を順番に読ませる。
webcan analyze aoba-kaikei.net
PROFESSIONAL SERVICES · 広島県 · PICKED 2026.11.01
あおば会計事務所士業・金融のホームページデザイン参考 — イエロー・イラスト・シンプル
出典：aoba-kaikei.net ↗確認日 2026.11.01
EDITOR'S NOTE編集部の視点
黄色一色のファーストビューと4つの約束で、「会計事務所は堅い」という印象を変える。
広島市西区の会計事務所のサイト。ファーストビューは黄色の背景に「事業に集中できる環境をつくり会社の成長を支えます。」の大きな見出しと、苗に水をやる人物のイラスト。その下で「あおば会計事務所ってどんなところ？」に4つの特長で答え、それぞれから詳しいページへボタンで案内している。
- 01ファーストビューを黄色1色にし、黒の大きな見出しと、苗に水をやる線画のイラストだけで構成している
- 02「地域密着型」「リーズナブルな料金」「経営革新等支援機関」「関連業務もワンストップ」の4つを、見出し・短い文・黄色のボタンの同じ型で並べている
- 03PCでは画面右下に、緑の「お問い合わせ」ボタンを固定している
3 VIEWPOINTS3つの視点で見る
デザインの視点
ファーストビューを黄色（#F9E621）1色にして黒の大きな見出しと線画のイラストだけを置き、問い合わせボタンだけ緑にしている。本文は薄いグレー地に「見出し・短い文・黄色のボタン」を1組ずつ並べる型で、そのまま真似しやすい。
集客の視点
「商店街の飲食店や美容院など」と対象の事業者を具体的に書き、「経営革新等支援機関」の認定と料金表への案内を特長に入れている。問い合わせは画面右下の固定ボタン（PC）と最下部の大きなボタンで受けている。
Webディレクターの視点
メニューは「私たちについて・事業内容・料金表・お知らせ・よくある質問」の5つ。トップで4つの特長を説明してそれぞれ詳細ページへ送り、お知らせは3件だけ見せる小さな構成なので、少ない予算でも作れる。
CONVERSION集客の工夫
－電話番号をヘッダーに常設PC・ファーストビュー
－タップで電話できるSP・tel:リンク 0か所
－SPの追従ボタンSP・画面下に固定
✓予約・問い合わせ導線お問い合わせ
－LINEで相談・予約LINE公式アカウント
－営業・診療時間の明記トップページ内
公的な認定を特長に入れる
「経済産業省認定の経営革新等支援機関です。」を4つの特長の1つにし、補助金や融資の相談ができることを説明している。初めて依頼先を探す事業者にとって、選ぶ根拠になる。
誰のための事務所かを書く
「商店街の飲食店や美容院など地域に根ざした事業者さま」と、対象の顧客を具体的に書いている。読んだ人が自分のことだと分かれば、問い合わせのハードルが下がる。
料金の考え方を先に伝える
代行しなくてよい作業は事業者に任せ、専門性が求められる業務に絞ることで料金を抑えている、と理由つきで説明し、料金表へ案内している。
チェック項目は 2026.11.01 に実ブラウザで描画したトップページを自動判定したものです。
COLOR配色
#F3F3F3背景 · ライトグレー
#F9E621ファーストビュー・ボタン · イエロー
#00BE28お問い合わせボタン・ロゴ · グリーン
#FFFFFFお知らせの枠
#000000見出し・本文・フッター
背景は面積、文字は文字数で重み付けして実測した色から、役割ごとに整理しています。
TYPOGRAPHYフォント
- 用途
- 英字見出し（NEWS・ACCESS）
- 使用フォント
- Montserrat
- 無料で近いもの
- Montserrat
- 用途
- 和文見出し・本文
- 使用フォント
- OS標準のゴシック体（sans-serif）
- 無料で近いもの
- Noto Sans JP
| 要素 | PC サイズ / 太さ | PC 行間 | SP サイズ / 太さ |
|---|---|---|---|
| h2 | 35px / 700 | 1.80 | 35px / 700 |
| h3 | 32px / 700 | 1.60 | 23px / 700 |
| 本文（p） | 14px / 500 | 1.80 | 13px / 500 |
実測値（PC 1440px・SP 375px、2026.11.01 計測）。同じ要素で最も多く使われている指定を表示しています。h1 をロゴや小さな見出しに使っているサイトでは、h1 の値が小さく出ます。
STRUCTUREページ構成（上から順に）
- 01
- 02
- 03
- 04
- 05
- 06
PARTSパーツ別に見る
番号は上のページ構成の順番です。部品名から、同じ部品を使っているほかのサイトの実例を見られます。スクリーンショットは 2026.11.01 以降に撮影したもので、現在の表示とは異なる場合があります。
DOWNLOADワイヤーフレームをダウンロード
この構成を、Figmaで編集できるワイヤーに
上のページ構成を、WEBCANのワイヤーフレーム部品で組み直したものです。元サイトの文章・画像・コードは含みません。
Figmaでの使い方
- SVGをダウンロードする
- Figmaのキャンバスにファイルをドラッグ＆ドロップする
- セクションごとにレイヤーが分かれた状態で開くので、順番の入れ替えや文言の差し替えから始める
文字はテキストレイヤーとして入ります（フォントは Noto Sans JP）。
REPRODUCEこのサイトを参考にするときのポイント
- 01ファーストビューはブランド色1色＋大きな見出し＋イラスト1点にしぼる
- 02選ばれる理由を「見出し・2〜4行の説明・詳しく見るボタン」の同じ型で並べる
- 03公的な認定や資格を、特長の1つとして言葉で説明する
- 04問い合わせボタンだけをブランド色と別の色にして、画面の隅に固定する
FAQよくある質問
あおば会計事務所のサイトで使われているフォントは？
英字の見出し（NEWS・ACCESS）は Montserrat、和文は OS 標準のゴシック体です。和文に Webフォントを使いたい場合は Noto Sans JP が近い印象になります。
士業のサイトで、明るい黄色を使っても大丈夫ですか？
このサイトは黄色をファーストビューとボタンに使い、本文の背景は薄いグレー、文字は黒にしています。読む部分の色を落ち着かせることで、明るい色でも読みやすさを保っています。
どんな業種の参考になりますか？
会計事務所・税理士事務所のほか、社労士・行政書士・司法書士など、「堅そう」「相談しにくそう」と思われやすい士業の事務所に応用できます。
スクリーンショットは、解説に添える引用として縮小して掲載しています。デザイン・文章・画像の権利はあおば会計事務所および各権利者に帰属します。ワイヤーフレームは元サイトを写したものではなく、構成をWEBCANの部品で組み直したものです。権利者・制作者の方からの掲載の取り下げ・修正のご依頼はお問い合わせから承り、原則2営業日以内に対応します。
MOREほかの士業・金融の参考サイト
FROM REFERENCE TO YOUR SITE
このテイストで、
御社の事務所サイトを。
「あおば会計事務所のような構成で」とお伝えいただくだけで構いません。無料相談で御社の現状サイトを拝見し、地域と業種に合わせた構成案をお持ちします。
無料相談はこちらFREE SITE CHECK（ 無料診断 ）
自社サイトの今の状態を、30秒で確かめる。
URLを入れるだけで、GoogleのSEOとAI検索の両方から見た対応度と、優先して直すべき点がわかります。会員登録・メールアドレス不要です。