TOP
デザイン参考集
士業・金融
内藤・大塚法律事務所

webcan analyze naito-otsuka.com

PROFESSIONAL SERVICES · 東京都 · PICKED 2026.10.20

内藤・大塚法律事務所士業・金融のホームページデザイン参考 — モノクロ写真・英字の大見出し・ベージュ

出典：naito-otsuka.com ↗確認日 2026.10.20

内藤・大塚法律事務所士業・金融 · 東京都

サイトを見る ↗ワイヤーDL

EDITOR'S NOTE編集部の視点

英字の大きなコピーとモノクロ写真で、企業法と消費者法の2つの専門を打ち出す。

東京都港区南麻布の法律事務所のサイト。ファーストビューはベージュの地に「DECIPHERING THE NOISE. DEFINING THE TRUTH.」の英字コピーを大きく置き、打ち合わせの手元と窓辺の人物のモノクロ写真を重ねている。同じ画面にTOPICSを置き、続くSERVICEで企業法・消費者法・その他の業務の3つに分けて取扱分野を示したあと、LAW OFFICEで事務所の体制を、LAWYERで弁護士2名の経歴を紹介している。

01ファーストビューの英字コピーは、一部の語にノイズのような加工をかけている
02TOPICSを「すべて」「お知らせ」「書籍・文献」のタブで切り替えられる
03SERVICEの白いカードに、企業法・消費者法・その他の業務の3つの目次を置いている

CONVERSION集客の工夫

－電話番号をヘッダーに常設PC・ファーストビュー

－タップで電話できるSP・tel:リンク 0か所

－SPの追従ボタンSP・画面下に固定

－予約・問い合わせ導線—

－LINEで相談・予約LINE公式アカウント

－営業・診療時間の明記トップページ内

専門分野を最初に絞って見せる

SERVICEの冒頭で「企業法務と消費者法を主軸とした専門特化型」と書き、続けて企業法・消費者法の取扱分野を項目ごとに並べている。相談したい内容が事務所の得意分野かどうかを、トップページで確かめられる。

書籍・文献を実績として見せる

TOPICSに「書籍・文献」のカテゴリを設け、出版物をお知らせと並べて載せている。専門分野での執筆は、相談先を選ぶ人にとって分かりやすい判断材料になる。

担当する弁護士と体制を見せる

LAW OFFICEで「受任から解決まで担当弁護士が一貫して遂行する責任担当制」を説明し、LAWYERで弁護士2名を写真と経歴で紹介している。誰がどう担当するのかが分かることは、相談をためらう人の安心材料になる。

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

COLOR配色

#F2F2E9背景 · ベージュ

#40403DSERVICE・フッターの背景 · チャコール

#212836見出し・本文テキスト · ネイビー

#B7B7B1暗い背景の上の文字・罫線 · グレー

#D3030F差し色（TOPICSの印など） · レッド

#FFFFFFカードの背景

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

TYPOGRAPHYフォント

用途: 和文見出し
使用フォント: Zen Kaku Gothic New
無料で近いもの: Zen Kaku Gothic New

用途: 英字・本文・ナビ
使用フォント: Heebo
無料で近いもの: Heebo

要素	PC サイズ / 太さ	PC 行間	SP サイズ / 太さ
h1	16px / 700	1.50	16px / 700
h2	19.9px / 500	1.50	18px / 500
本文（p）	14px / 500	1.10	12px / 500
ボタン	18px / 500	1.10	17px / 500

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

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

01
ヘッダー
左に事務所名、右に英字のナビ（SERVICE・LAW OFFICE・LAWYER・RECRUIT・TOPICS・ACCESS）。上部に固定。
ヘッダー／ロゴ＋ナビ＋1ボタン型
02
ファーストビュー
英字の大きなコピーに、打ち合わせの手元と窓辺の人物のモノクロ写真を重ねる。
ファーストビュー／左コピー・右写真の分割型
03
TOPICS
すべて・お知らせ・書籍・文献のタブと、日付つきの一覧。
お知らせ／お知らせ一覧型
04
PROLOGUE
赤い面と書斎・机のモノクロ写真に、英文の短い文章。
コンセプト／写真＋メッセージ型
05
SERVICE
流れる英字の帯の上に白いカード。事務所の方針と、企業法・消費者法・その他の業務の目次。
メニュー・サービス／アイコン／写真グリッド型
06
取扱分野（企業法・消費者法）
濃い背景に英字の分野名・写真・取扱業務のリストとMOREボタン。
強み・選ばれる理由／写真とテキストの交互型
07
LAW OFFICE
濃い背景に会議室・エントランスの写真のスライド（01 / 02）と、「一貫した責任体制と機動力のあるリーガルサービス」の文章。
コンセプト／写真＋メッセージ型
08
LAWYER
弁護士2名を、写真・名前・経歴とMOREボタンで左右にずらして並べる。
人・代表／代表・院長あいさつ型
09
フッター
事務所名・所在地・Google Mapsへのリンクと、ナビの一覧。
フッター／店舗情報＋ナビ型

PARTSパーツ別に見る

内藤・大塚法律事務所のPROLOGUE（PC） — 04PROLOGUEコンセプト／写真＋メッセージ型

内藤・大塚法律事務所のPROLOGUE（スマホ） — 04PROLOGUEコンセプト／写真＋メッセージ型

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

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

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

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

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

Figmaでの使い方

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

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

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

01ファーストビューでは英字のコピーとモノクロ写真で、事務所の姿勢をひと目で伝える
02取扱分野は「分野名」と「具体的な業務名」の2段で並べる
03執筆や講演などの実績を、お知らせとは別のカテゴリで整理する
04ベージュとチャコールの2色で、落ち着いた印象をつくる

FAQよくある質問

内藤・大塚法律事務所のサイトで使われているフォントは？

和文の見出しは Zen Kaku Gothic New、英字と本文・ナビは Heebo です。どちらも Google Fonts で無料で使えます。

法律事務所のサイトで、取扱分野はどう書けばよいですか？

このサイトのように、企業法・消費者法などの大きな分野の下に、コンプライアンスや広告・表示規制対応といった具体的な業務名を並べると、相談したい人が自分の悩みに当たる項目を見つけやすくなります。

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

法律事務所のほか、特許事務所・税理士法人・コンサルティング会社など、専門分野をはっきり示して選ばれたい事務所に応用できます。

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

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

ワイヤーDL

PROFESSIONAL SERVICES · 広島県 · 2026.11.01

あおば会計事務所

黄色一色のファーストビューと4つの約束で、「会計事務所は堅い」という印象を変える。

#イエロー#イラスト#シンプル#1ページ完結に近い

士業・金融のすべてを見る6件

FROM REFERENCE TO YOUR SITE

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

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

無料相談はこちら

内藤・大塚法律事務所士業・金融のホームページデザイン参考 — モノクロ写真・英字の大見出し・ベージュ

EDITOR'S NOTE編集部の視点