WEBCAN.
Free Check無料診断URLを入れるだけ・30秒でSEOとAI検索対応をチェックFree Consultation無料相談
  1. TOP
  2. デザイン参考集
  3. 士業・金融
  4. こやま法務事務所

webcan analyze koyama-houmu.com

PROFESSIONAL SERVICES · 奈良県 · PICKED 2026.10.25

こやま法務事務所士業・金融のホームページデザイン参考 — ネイビー・縦書き・角丸

こやま法務事務所のトップページ（PC）
PC（1440px）
こやま法務事務所のトップページ（スマホ）
スマホ（375px）
出典：koyama-houmu.com ↗確認日 2026.10.24
こやま法務事務所士業・金融 · 奈良県
サイトを見る ↗ワイヤーDL

EDITOR'S NOTE編集部の視点

代表本人の写真と「元自治体職員」という経歴を最初に見せ、相談相手の顔が分かる司法書士サイトにしている。

奈良県生駒市の司法書士・行政書士事務所のサイト。ファーストビューは並木道で代表と女性が笑顔で話す写真に、縦書きの「身近な法律家として〝お客様の想い〟にそっと寄り添う。」を重ねている。続いて自治体職員としての経歴、5つの業務、3つの強み、クライアントの声、お知らせと並べ、最後にネイビーの帯で無料相談会と電話番号を案内している。

  1. 01ファーストビューに代表本人の写真を大きく置き、書類に記入する手元の写真を斜めに重ねている
  2. 02PCではナビを右端に縦書きで固定し、その下にメールと「報酬等の目安」の丸いボタンを置いている
  3. 03業務を角丸の写真カード5枚（不動産登記・会社・法人登記・内容証明作成代行・遺言・相続・官公署の許可・認可）で並べている

CONVERSION集客の工夫

－電話番号をヘッダーに常設PC・ファーストビュー
✓タップで電話できるSP・tel:リンク 1か所
－SPの追従ボタンSP・画面下に固定
✓予約・問い合わせ導線遺言公正証書のご相談及び作成T.F様 / 無料相談・お問い合わせはこちら
－LINEで相談・予約LINE公式アカウント
－営業・診療時間の明記トップページ内

経歴を相談の理由にする

ファーストビュー直下で「自治体職員としての豊富な行政経験」と、市役所勤務中に資格を取って開業したことを紹介している。強みの1つにも「豊富な公務員経験」を挙げ、許認可の申請を考えている人に相談先として選ぶ理由を示している。

報酬の目安への入口を常に出す

PCでは右下に「報酬等の目安」のボタンを固定している。費用が分からないことは士業への相談をためらう理由になりやすいので、どのページからも目安を確かめられるようにしている。

無料相談会の条件を具体的に書く

ページの最後に「随時、無料相談会を開催中」の帯を置き、開催日（毎週月曜日～金曜日・要予約）と時間（9:00～17:00）、電話番号、お問い合わせボタンをまとめている。いつ・どう申し込めばよいかが一目で分かる。

チェック項目は 2026.10.24 に実ブラウザで描画したトップページを自動判定したものです。

COLOR配色

#FFFFFF背景
#1A3B56無料相談の帯・丸ボタン · ネイビー
#13334E本文テキスト

背景は面積、文字は文字数で重み付けして実測した色から、役割ごとに整理しています。

TYPOGRAPHYフォント

用途
和文見出し・ナビ
使用フォント
見出ゴMB31（TypeSquare）
無料で近いもの
Zen Kaku Gothic New
用途
約物
使用フォント
YakuHanJP
無料で近いもの
YakuHanJP
用途
英字見出し（OUR SERVICE など）
使用フォント
europa（Adobe Fonts）
無料で近いもの
Jost
要素PC サイズ / 太さPC 行間SP サイズ / 太さ
h116px / 4001.0010.9px / 400
h222px / 4001.0019.8px / 400
h322px / 7001.0017.8px / 700
本文（p）16px / 4001.8012.2px / 400
ボタン16px / 4001.0013px / 400

実測値（PC 1440px・SP 375px、2026.10.24 計測）。同じ要素で最も多く使われている指定を表示しています。h1 をロゴや小さな見出しに使っているサイトでは、h1 の値が小さく出ます。

STRUCTUREページ構成（上から順に）

  1. 01

    ヘッダー

    PCは右端に縦書きのナビ（ホーム・業務について・事業所案内・クライアントの声）を固定し、下にメールと「報酬等の目安」の丸いボタン。スマホは三本線のメニュー。

    ヘッダー／左固定サイドナビ型
  2. 02

    ファーストビュー

    左に英字のロゴと縦書きのコピー、右に並木道で代表と女性が話す写真。書類に記入する手元の写真を斜めに重ねる。

    ファーストビュー／左コピー・右写真の分割型
  3. 03

    こやま法律事務所について

    見出し「自治体職員としての豊富な行政経験」と代表のあいさつ、「事務所について」のボタン。

    コンセプト／写真＋メッセージ型
  4. 04

    OUR SERVICE（業務について）

    角丸の写真カードに業務名と説明を重ねる。PCは上段2枚・下段3枚、スマホは横にスライド。

    メニュー・サービス／アイコン／写真グリッド型
  5. 05

    OUR STRENGTHS（3つの強み）

    丸いイラストと縦書きの見出し（他士業との連携・豊富な公務員経験・相談しやすい環境）。

    強み・選ばれる理由／番号つき3〜4項目型
  6. 06

    クライアントの声

    横幅いっぱいの写真のスライドに、相談内容と地域・名前（奈良県田原本町 - 生駒様 など）を重ねる。

    お客様の声／カード型
  7. 07
  8. 08

    無料相談会

    ネイビーの帯に開催日・時間、電話番号、「無料相談・お問い合わせはこちら」のボタン。

    行動喚起／電話＋Web予約の2ボタン帯型
  9. 09
こやま法務事務所の構成をWEBCANの部品で組んだワイヤーフレーム（PC）

PARTSパーツ別に見る

02ファーストビューファーストビュー／左コピー・右写真の分割型
こやま法務事務所のファーストビュー（PC）PC
こやま法務事務所のファーストビュー（スマホ）SP
04OUR SERVICE（業務について）メニュー・サービス／アイコン／写真グリッド型
こやま法務事務所のOUR SERVICE（業務について）（PC）PC
こやま法務事務所のOUR SERVICE（業務について）（スマホ）SP
05OUR STRENGTHS（3つの強み）強み・選ばれる理由／番号つき3〜4項目型
こやま法務事務所のOUR STRENGTHS（3つの強み）（PC）PC
こやま法務事務所のOUR STRENGTHS（3つの強み）（スマホ）SP
06クライアントの声お客様の声／カード型
こやま法務事務所のクライアントの声（PC）PC
こやま法務事務所のクライアントの声（スマホ）SP
08無料相談会行動喚起／電話＋Web予約の2ボタン帯型
こやま法務事務所の無料相談会（PC）PC
こやま法務事務所の無料相談会（スマホ）SP

番号は上のページ構成の順番です。部品名から、同じ部品を使っているほかのサイトの実例を見られます。スクリーンショットは 2026.10.24 以降に撮影したもので、現在の表示とは異なる場合があります。

DOWNLOADワイヤーフレームをダウンロード

この構成を、Figmaで編集できるワイヤーに

上のページ構成を、WEBCANのワイヤーフレーム部品で組み直したものです。元サイトの文章・画像・コードは含みません。

PC版（1440px）SVG スマホ版（375px）SVG

Figmaでの使い方

  1. SVGをダウンロードする
  2. Figmaのキャンバスにファイルをドラッグ＆ドロップする
  3. セクションごとにレイヤーが分かれた状態で開くので、順番の入れ替えや文言の差し替えから始める

文字はテキストレイヤーとして入ります（フォントは Noto Sans JP）。

REPRODUCEこのサイトを参考にするときのポイント

  1. 01代表本人の写真をファーストビューに使い、相談する相手の顔を最初に見せる
  2. 02前職や経歴を、その事務所に相談する理由として言葉にする
  3. 03報酬の目安への入口を、どのページからも押せる位置に置く
  4. 04無料相談の日時と申し込み方法を、ページの最後に具体的に書く

FAQよくある質問

こやま法務事務所のサイトで使われているフォントは？

和文の見出しとナビは TypeSquare の見出ゴMB31、約物は YakuHanJP、英字の見出しは Adobe Fonts の europa です。無料で近づけるなら、和文に Zen Kaku Gothic New、英字に Jost が使えます。

士業のサイトに代表の写真は必要ですか？

このサイトは、代表本人の写真をファーストビューに大きく使い、あいさつで経歴も紹介しています。誰に相談するのかが分かると、初めての人も問い合わせの判断がしやすくなります。

どんな業種の参考になりますか？

司法書士・行政書士のほか、税理士・社会保険労務士・土地家屋調査士など、代表の経歴や人柄が選ばれる理由になる少人数の事務所に応用できます。

スクリーンショットは、解説に添える引用として縮小して掲載しています。デザイン・文章・画像の権利はこやま法務事務所および各権利者に帰属します。ワイヤーフレームは元サイトを写したものではなく、構成をWEBCANの部品で組み直したものです。権利者・制作者の方からの掲載の取り下げ・修正のご依頼はお問い合わせから承り、原則2営業日以内に対応します。

MOREほかの士業・金融の参考サイト

士業・金融のすべてを見る6件
webcan design --sitemap koyama-houmu.com

こやま法務事務所のサイトマップ

  • 16ページ
  • トップページ/
  • 業務について/service/
  • 事業所案内/about/
  • クライアントの声/clients/
    • 土地や建物、田・畑についての相続登記サポート/clients/c001/
    • 相続財産の管理サポート・支援及びご相談/clients/c002/
    • 遺言公正証書のご相談及び作成/clients/c003/
  • 無料相談・お問い合わせはこちら/contact/
  • information お知らせ/information/
    • 記事ページ/information/<各ページ>/7件

2026.10.27 に公開中の sitemap.xmlと、トップページのヘッダー・メニュー・フッターのリンクから整理したものです。記事や事例などの個別ページは1件ずつではなく、件数つきの1項目にまとめています。サイトの更新で現在の構成とは異なる場合があります。

FROM REFERENCE TO YOUR SITE

このテイストで、
御社の事務所サイトを。

「こやま法務事務所のような構成で」とお伝えいただくだけで構いません。無料相談で御社の現状サイトを拝見し、地域と業種に合わせた構成案をお持ちします。

無料相談はこちら