出典：krogerus.com ↗ 確認日 2026.10.19
Editor's note
編集部の視点
「ビジネス法務を、わかりやすく」と一文で言い切り、最新の案件実績を分野と日付つきでトップに並べるフィンランドの法律事務所。
ヘルシンキに事務所を置く企業法務の法律事務所 Krogerus のサイト。ファーストビューは螺旋階段を見下ろす写真に「Leading the way in complex matters（複雑な案件を先導する）」と「Business law in a straightforward way（ビジネス法務を、わかりやすく）」、右下に「Get to know us」。ヘッダーには専門分野・人・採用・実績・イベント・インサイト・事務所紹介と、黒く塗った「Contact」ボタン。続いて最新の案件実績3件（分野と日付つき）、19の専門分野のカード、インサイト、採用、弁護士の紹介、イベントとインサイトのメール登録、SNS、所在地と連絡先。
- 01 何をどう扱う事務所かを「ビジネス法務を、わかりやすく」の一文で言い切る
- 02 最新の案件実績を分野と日付つきでトップに並べ、いま動いている事務所だと見せる
- 03 19の専門分野をカードで一覧にし、相談したい分野から入れるようにする
Conversion
集客の工夫
- 問い合わせボタン （あり） ヘッダーに黒塗りの「Contact」
- ヘッダーの追従 （なし） PC は上部に固定、SP は固定なし
- 実績の掲載 （あり） 最新の案件3件を分野・日付つきで
- 専門分野の一覧 （あり） M&A・紛争解決・税務など19分野のカード
- 人の紹介 （あり） 「Meet the people behind our advice」から弁護士紹介へ
- 第三者の評価 （あり） インサイトに「IFLR1000 で Tier 1」の記事
- メール登録 （あり） イベントとインサイトの購読フォーム
- 電話・メール （あり） tel:リンク 1か所・mailto:リンク 1か所（フッター）
何をどう扱う事務所かを、一文で言い切る
ファーストビューの大きな文字は「Business law in a straightforward way（ビジネス法務を、わかりやすく）」だけです。その上に「Leading the way in complex matters（複雑な案件を先導する）」を小さく添えています。扱う領域（ビジネス法務）と姿勢（わかりやすく）を、専門用語を使わずに言い切っているのが要点です。写真の上に置くのは文字とリンク1つだけで、余計な説明はありません。
実績を、日付つきでトップに置く
ファーストビューのすぐ下は「See how we make an impact」。案件実績が3件、それぞれ「エネルギー」「事業再生・倒産」などの分野と日付つきで並びます。どれも直近の日付で、事務所が今まさに案件を手がけていることが伝わります。インサイト欄には「IFLR1000 で Tier 1」の記事もあり、第三者の評価をお知らせの形で見せています。
専門分野から入れる入口を用意する
「Find the right expertise for complex matters」では、M&A・紛争解決・テクノロジーとデータ・税務・雇用など19の専門分野を、短い説明つきのカードで一覧にしています。相談したい人が、自分の悩みに近い分野から入れる作りです。ヘッダーの「Contact」は黒く塗ったボタンで、ほかのナビと見分けがつきます。弁護士紹介の欄にも問い合わせへのボタンが置かれています。
チェック項目は 2026.10.19 に実ブラウザで描画したトップページ（PC 1440px・SP 375px）を確認したものです。
Colour
配色
- #FFFFFF 背景
- #F6F4F2 専門分野カードの背景
- #000000 見出し・本文・ボタン
- #E3E1DE 罫線
背景は面積、文字は文字数で重み付けして実測した色から、役割ごとに整理しています。
Typography
フォント
| 用途 | 使用フォント | 無料で近いもの |
|---|---|---|
| 見出し・本文・ナビ（すべて） | Founders Grotesk Text | Hanken Grotesk |
| 要素 | PC サイズ / 太さ | PC 行間 | SP サイズ / 太さ |
|---|---|---|---|
| h1 | 88px / 300 | 1.00 | 48px / 300 |
| h2 | 40px / 300 | 1.15 | 32px / 300 |
| h3 | 24px / 300 | 1.40 | 24px / 300 |
| 本文（p） | 18px / 300 | 1.60 | 16px / 300 |
| ボタン | 16px / 300 | 1.60 | 14px / 300 |
実測値（PC 1440px・SP 375px、2026.10.19 計測）。同じ要素で最も多く使われている指定を表示しています。h1 をロゴや小さな見出しに使っているサイトでは、h1 の値が小さく出ます。
Structure
ページ構成（上から順に）
- 01 ヘッダー 専門分野・人・採用・実績・イベント・インサイト・事務所紹介、検索、黒塗りの「Contact」。PC は上部に固定。 ヘッダー／ロゴ＋横並びナビ型
- 02 ファーストビュー 螺旋階段を見下ろす写真に、事務所を言い表す2つの文と「Get to know us」。 ファーストビュー／全面写真＋コピー型
- 03 最新の実績 「See how we make an impact」。最新の案件3件を、分野と日付つきで。 お知らせ／ニュース一覧型
- 04 専門分野 M&A、紛争解決、テクノロジーとデータ、税務、雇用など19分野を、短い説明つきのカードで。 一覧／カード並び型
- 05 インサイト セミナーの報告、IFLR1000 の評価、新しい専門チームの立ち上げなど。 お知らせ／ニュース一覧型
- 06 採用 「Be a part of the work that defines outcomes」と写真、採用ページへのボタン。 コンセプト／写真＋メッセージ型
- 07 人の紹介 「Meet the people behind our advice」と写真、弁護士紹介と問い合わせへのボタン。 コンセプト／写真＋メッセージ型
- 08 メール登録 イベントとインサイトの購読フォーム。 行動喚起／メール登録型
- 09 フッター SNS、所在地（ヘルシンキ）、電話・メール、利用規約。 フッター／ナビ＋会社情報型
Download
ワイヤーフレームをダウンロード
この構成を、Figmaで編集できるワイヤーに
上のページ構成を、DevNJ のワイヤーフレーム部品で組み直したものです。元サイトの文章・画像・コードは含みません。
Figmaでの使い方
- SVGをダウンロードする
- Figmaのキャンバスにファイルをドラッグ＆ドロップする
- セクションごとにレイヤーが分かれた状態で開くので、順番の入れ替えや文言の差し替えから始める
文字はテキストレイヤーとして入ります（フォントは Noto Sans JP）。
Reproduce
このサイトを参考にするときのポイント
- 01 事務所の方針は、専門用語を使わない一文にしてファーストビューに置く
- 02 解決した案件やお知らせを、分野と日付つきでトップに出す（守秘義務の範囲で）
- 03 取り扱い分野は一覧にして、相談者が自分の悩みに近い入口を選べるようにする
- 04 問い合わせボタンは塗りのある色にして、ほかのナビと見分けがつくようにする
FAQ
よくある質問
Krogerus のサイトで使われているフォントは？
見出しから本文、ナビまで Founders Grotesk Text の細いウェイト（300）1書体で組んでいます。有料書体なので、無料で近づけるなら Hanken Grotesk などのグロテスク体が候補です。
士業のサイトで、実績はどう見せればいいですか？
Krogerus は案件ごとに、どの分野の案件か・いつの案件かを添えて、トップに新しい順で3件並べています。事務所が今も案件を手がけていることが一目で伝わります。日本の士業でも、守秘義務に触れない範囲で「分野」と「時期」を添えた実績やお知らせを出すと、同じ効果が見込めます。
どんな業種の参考になりますか？
法律事務所のほか、税理士・社労士・行政書士・コンサルティング会社など、取り扱い分野が多く、相談者が自分に合う専門家を探す必要がある業種に向きます。
スクリーンショットは、解説に添える引用として縮小して掲載しています。デザイン・文章・画像の権利はKrogerusおよび各権利者に帰属します。ワイヤーフレームは元サイトを写したものではなく、構成を DevNJ の部品で組み直したものです。権利者・制作者の方からの掲載の取り下げ・修正のご依頼はお問い合わせから承り、原則2営業日以内に対応します。 掲載ギャラリー: Httpster
