出典：m3-pg.de ↗ 確認日 2026.10.25
Editor's note
編集部の視点
大事にする3つの言葉を最初に言い切り、実績6件を番号つきで切り替え、フッターに問い合わせフォームを置くドイツの建築設計・計画事務所。
ドイツ・ノルトハイムの建築設計・計画事務所 M3 Planungsgruppe のサイト。ファーストビューは「M3」のロゴの動画だけ。続いて「Drei Prinzipien, eine Haltung（3つの原則、ひとつの姿勢）」として「持続可能性。美しさ。経済性。」の3語を大きく言い切り、「信じていること」「考え方」「進め方」の3つの段落を並べる。実績はゲッティンゲンのオフィス・研究棟「Labwerk」を写真と説明で大きく見せ、残り5件を番号つきの縦のタブで切り替える。その後に BIM を使った進め方の一文、黒いフッターに問い合わせフォームと住所・電話・メールが続く。ドイツ語と英語を切り替えられる。
- 01 事務所が大事にすることを3つの単語で言い切り、どんな設計をするかを最初の文字で伝える
- 02 実績を1件だけ大きく見せ、残りを番号つきのタブにして、ページを長くせずに数を見せる
- 03 問い合わせフォームをフッターに組み込み、どのページの最後からでも相談に進めるようにする
Conversion
集客の工夫
- 問い合わせフォーム （あり） フッターに名前・メール・会社名・電話・メッセージ
- 住所・連絡先 （あり） フッターに住所・電話番号・メール
- 実績の見せ方 （あり） 6件を番号つきのタブで切り替え
- 対応する建物 （あり） 工場・商業施設から個人の住宅まで、新築と既存の建物
- 進め方の説明 （あり） 「考え方」「進め方」の段落と、BIM を使った進め方
- 業務の範囲と割合 （あり） 業務のページで、報酬規程（HOAI）の9段階ごとに内容と割合
- 言語の切り替え （あり） ドイツ語・英語
- 電話のタップ発信 （なし） 番号は文字のみ（tel:リンクなし）
大事にすることを、3つの単語で
ファーストビューは「M3」のロゴの動画だけで、そのすぐ下に 「持続可能性。美しさ。経済性。」 の3語が大きく並びます。説明より先に、どんな基準で設計するのかを言い切っています。続く「信じていること」「考え方」「進め方」の3つの段落で、依頼主との対話から始めること、工程を透明にすることを短く補っています。
実績は、1件を大きく、残りはタブで
実績の欄では、ゲッティンゲンの3,000m²の敷地に建てたオフィス・研究棟と倉庫「Labwerk」を写真と説明で大きく見せ、残りの5件を番号つきの縦のタブにしています。工場・商業施設から個人の住宅まで幅があることを、ページを長くせずに伝えています。業務のページでは、ドイツの報酬規程（HOAI）の9つの段階ごとに、内容と成果、割合を一覧にしています。
問い合わせフォームを、フッターに組み込む
黒いフッターには「大きくても小さくても、簡単でも複雑でも、計画について話しましょう」という一文と、名前・メール・会社名・電話・メッセージの問い合わせフォームがそのまま置かれています。住所・電話・メールも並び、どのページを読み終えても、別のページに移らずに相談できます。
チェック項目は 2026.10.25 に実ブラウザで描画したトップページ（PC 1440px・SP 375px）を確認したものです。
Colour
配色
- #FFFFFF 背景
- #202020 見出し・本文・フッターの背景
- #909090 見出しの前半・副題（灰色）
- #6B6B6B 補足テキスト
背景は面積、文字は文字数で重み付けして実測した色から、役割ごとに整理しています。
Typography
フォント
| 用途 | 使用フォント | 無料で近いもの |
|---|---|---|
| 見出し・本文・ナビ（すべて） | Inter | Inter（Google Fonts） |
| 要素 | PC サイズ / 太さ | PC 行間 | SP サイズ / 太さ |
|---|---|---|---|
| h1 | 155px / 700 | 1.00 | 40px / 700 |
| h2 | 64px / 600 | 1.16 | 34px / 600 |
| h3 | 40px / 400 | 1.20 | 24px / 400 |
| 本文（p） | 16px / 400 | 1.50 | 16px / 400 |
実測値（PC 1440px・SP 375px、2026.10.25 計測）。同じ要素で最も多く使われている指定を表示しています。h1 をロゴや小さな見出しに使っているサイトでは、h1 の値が小さく出ます。
Structure
ページ構成（上から順に）
- 01 ヘッダー 事務所名と、業務・実績・事務所について・ブログ・問い合わせ、言語の切り替え（EN）。上部に固定。 ヘッダー／ロゴ＋横並びナビ型
- 02 ファーストビュー 「M3」のロゴの動画だけを画面いっぱいに。 ファーストビュー／大きな文字型
- 03 3つの原則 「持続可能性。美しさ。経済性。」と「長く持つ計画」の一文。 メッセージ／大きな一文型
- 04 信じていること・考え方・進め方 3つの段落を横に並べ、それぞれ「詳しく」へ。 一覧／カード並び型
- 05 実績 Labwerk を写真と説明で大きく見せ、残り5件を番号つきの縦のタブで切り替え。「すべての実績」へ。 事例・実績／大きな写真の切り替え型
- 06 進め方 建築を「システムとして」考え、BIM で設計を調整するという一文と説明。 メッセージ／大きな一文型
- 07 フッター（問い合わせ） 黒い面に相談をうながす一文と問い合わせフォーム、住所・電話・メール・SNS、大きな事務所名。 フッター／大きなフッター型
Download
ワイヤーフレームをダウンロード
この構成を、Figmaで編集できるワイヤーに
上のページ構成を、DevNJ のワイヤーフレーム部品で組み直したものです。元サイトの文章・画像・コードは含みません。
Figmaでの使い方
- SVGをダウンロードする
- Figmaのキャンバスにファイルをドラッグ＆ドロップする
- セクションごとにレイヤーが分かれた状態で開くので、順番の入れ替えや文言の差し替えから始める
文字はテキストレイヤーとして入ります（フォントは Noto Sans JP）。
Reproduce
このサイトを参考にするときのポイント
- 01 事務所や会社が大事にすることを、3つほどの単語で言い切って最初に置く
- 02 実績が多いときは代表の1件を大きく見せ、残りは番号やタブで切り替えられるようにする
- 03 問い合わせフォームはフッターに組み込み、どのページを読み終えても相談に進めるようにする
- 04 業務の流れと範囲を段階ごとに書き、何をどこまで頼めるかを示す
FAQ
よくある質問
M3 Planungsgruppe のサイトで使われているフォントは？
見出しから本文、ナビまで Inter 1書体です。Google Fonts で無料で使えるので、同じ書体でそのまま組めます。
設計事務所のサイトに、実績は何件くらい載せればよいですか？
件数より見せ方が大事です。M3 はトップでは6件だけを選び、1件を大きく、残りを番号つきのタブにしています。代表作を写真と説明で見せ、ほかは「すべての実績」に送る形は、件数が少ない事務所でも使えます。
どんな業種の参考になりますか？
設計事務所・工務店・建設会社・不動産開発など、実績と相談の窓口が集客の中心になる BtoB の業種に向きます。
スクリーンショットは、解説に添える引用として縮小して掲載しています。デザイン・文章・画像の権利はM3 Planungsgruppeおよび各権利者に帰属します。ワイヤーフレームは元サイトを写したものではなく、構成を DevNJ の部品で組み直したものです。権利者・制作者の方からの掲載の取り下げ・修正のご依頼はお問い合わせから承り、原則2営業日以内に対応します。 掲載ギャラリー: Awwwards — Honorable Mention
