Httpster ·ノルウェー ·Picked 2026.10.18
Snøhetta
建築・ランドスケープ・デザインのサイトデザイン参考 — 建築・一文で定義・プロジェクト一覧・ニュース
出典：snohetta.com ↗ 確認日 2026.10.18
Editor's note
編集部の視点
冒頭の一文で「何をする組織か」を定義し、あとはプロジェクトを淡々と並べる設計事務所のサイト。
ノルウェー発の国際的な設計事務所 Snøhetta のサイト。ページの先頭は「あらゆる規模のプロジェクトに取り組む、領域横断の国際的な事務所」という一文だけで、すぐ下にプロジェクトの写真が名前と一行説明つきで並ぶ。その後は扱う領域、最新ニュース、今後のイベント、進め方とサステナビリティ、注目のプロジェクト、問い合わせと続き、フッターにはサイト内検索がある。書体は独自書体 Dovre の1種類だけ。
- 01 業種名ではなく「どう働く組織か」で、自分たちを一文で定義する
- 02 プロジェクトは名前だけでなく、必ず一行の説明とセットで並べる
- 03 ニュースとイベントをトップに置き、活動が続いていることを見せる
Conversion
集客の工夫
- ヘッダーの追従 （あり） PC・SP とも上部に固定（ロゴと Menu）
- 一文での自己紹介 （あり） ページ先頭に大きく
- 分野別の入口 （あり） 建築・ランドスケープ・インテリア・プロダクトなど
- ニュース・イベント （あり） 最新ニュース5件と今後のイベント
- 進め方・方針の説明 （あり） プロセス、サステナビリティと責任
- 問い合わせへの導線 （あり） 「Get in touch」
- サイト内検索 （あり） フッターに検索欄
- 電話・メールの掲載 （なし） トップにはなし（Contact ページへ）
業種名ではなく、働き方で名乗る
ページの先頭は「Snøhetta is a global transdisciplinary practice, working on projects of all scales.」という一文だけです。「建築設計事務所」と名乗らず、領域を横断して、規模を問わず取り組むという働き方で自分たちを定義しています。扱う領域が広い会社ほど、業種名より働き方で名乗るほうが正確に伝わります。
プロジェクトに、必ず一行の説明を
プロジェクトは「Laerdal Medical — New life to the home of the world's leading provider of first aid training gear」のように、名前と一行説明がセットで並びます。日本の実績一覧は「○○ビル新築工事」で止まりがちで、ここが最も真似しやすい差です。一行あるだけで、知らない相手にも何をした仕事かが伝わります。
活動が続いていることを、トップで見せる
最新ニュース（竣工・着工など）と今後のイベントがトップの中盤にあります。更新の止まった「お知らせ」は逆効果ですが、動いている証拠をトップに置くことは、規模の大小を問わず信用につながります。
チェック項目は 2026.10.18 に実ブラウザで描画したトップページ（PC 1440px・SP 375px）を確認したものです。
Colour
配色
- #FFFFFF 背景
- #F2F2F2 セクション背景
- #000000 見出し・本文
- #757575 補足テキスト（一行説明など）
- #949494 日付・ラベル
背景は面積、文字は文字数で重み付けして実測した色から、役割ごとに整理しています。
Typography
フォント
| 用途 | 使用フォント | 無料で近いもの |
|---|---|---|
| 見出し・本文・メニュー（すべて） | Dovre（独自書体） | Inter（Light） |
| 要素 | PC サイズ / 太さ | PC 行間 | SP サイズ / 太さ |
|---|---|---|---|
| h1 | 60px / 300 | 1.03 | 24px / 300 |
| h2 | 22px / 300 | 1.45 | 18px / 300 |
| h3 | 22px / 300 | 1.45 | 18px / 300 |
| 本文（p） | 18px / 300 | 1.33 | 14px / 300 |
| ボタン | 22px / 300 | 1.45 | 18px / 300 |
実測値（PC 1440px・SP 375px、2026.10.18 計測）。同じ要素で最も多く使われている指定を表示しています。h1 をロゴや小さな見出しに使っているサイトでは、h1 の値が小さく出ます。
Structure
ページ構成（上から順に）
- 01 ヘッダー 左にロゴ、中央に Menu、右に山のアイコン。上部に固定。 ヘッダー／ロゴ＋メニューボタン型
- 02 自己紹介 「あらゆる規模のプロジェクトに取り組む、領域横断の国際的な事務所」の一文。 メッセージ／大きな一文型
- 03 プロジェクト 写真に、プロジェクト名と一行説明を添えて横に並べる。 一覧／カード並び型
- 04 扱う領域 建築・ランドスケープ・インテリア・プロダクトデザインなどの一覧。 一覧／種類で絞るタブ型
- 05 最新ニュース 竣工・着工・受賞などのニュースを5件。 お知らせ／ニュース一覧型
- 06 今後のイベント 講演や展示などの予定。 一覧／カード並び型
- 07 進め方とサステナビリティ 仕事の進め方と、サステナビリティ・責任への考え方。 機能・強み／左右交互型
- 08 注目のプロジェクト 代表的なプロジェクトを写真と一行説明で。 一覧／カード並び型
- 09 問い合わせ 「Get in touch」と、方針・ガバナンスのページ。 行動喚起／ボタン帯型
- 10 フッター 全ページへのリンクとサイト内検索。 フッター／ナビ＋会社情報型
Download
ワイヤーフレームをダウンロード
この構成を、Figmaで編集できるワイヤーに
上のページ構成を、DevNJ のワイヤーフレーム部品で組み直したものです。元サイトの文章・画像・コードは含みません。
Figmaでの使い方
- SVGをダウンロードする
- Figmaのキャンバスにファイルをドラッグ＆ドロップする
- セクションごとにレイヤーが分かれた状態で開くので、順番の入れ替えや文言の差し替えから始める
文字はテキストレイヤーとして入ります（フォントは Noto Sans JP）。
Reproduce
このサイトを参考にするときのポイント
- 01 業種名で名乗る代わりに、「どんな仕事の仕方をする組織か」を一文で書く
- 02 実績一覧は「○○ビル新築工事」で止めず、何をした仕事かを一行添える
- 03 ニュースやイベントをトップに出し、更新が続いていることを見せる
- 04 書体を1種類に絞ると、写真の多いサイトでも落ち着いて見える
FAQ
よくある質問
Snøhetta のサイトで使われているフォントは？
すべての文字を独自書体の Dovre（細めのウェイト）で組んでいます。無料で近づけるなら Inter の Light が候補です。
実績の一行説明は、どのくらいの長さがよいですか？
Snøhetta は「世界的な救急訓練用品メーカーの、75年前の本社に新しい命を」のように、何を・誰のためにしたかが分かる20〜40字程度で書いています。工事名や場所だけで終わらせないことが大切です。
どんな業種の参考になりますか？
設計事務所・建設会社・デザイン会社のほか、実績の数が多い BtoB 企業全般に向きます。ニュースとイベントをトップに置く型は、活動量で信用を得たい団体にも使えます。
スクリーンショットは、解説に添える引用として縮小して掲載しています。デザイン・文章・画像の権利はSnøhettaおよび各権利者に帰属します。ワイヤーフレームは元サイトを写したものではなく、構成を DevNJ の部品で組み直したものです。権利者・制作者の方からの掲載の取り下げ・修正のご依頼はお問い合わせから承り、原則2営業日以内に対応します。 掲載ギャラリー: Httpster
