Awwwards ·オランダ（ブッスム） ·Picked 2026.10.18
De Groene Afslag
レストラン・ホテル・会議施設のサイトデザイン参考 — 飲食店・複合施設・遊びのあるロゴ・イベント告知
出典：degroeneafslag.nl ↗ 確認日 2026.10.18
Editor's note
編集部の視点
レストラン・ホテル・会議室・学校・工房を、写真と一言のコピーとボタンの同じ型で順に見せる、オランダの複合施設のサイト。
アムステルダム近郊のブッスムにある、レストラン・ホテル・会議室・学校・工房を備えた「オランダの変化の家（Veranderhuis）」のサイト。建物の写真に、上下を反転させたり色の帯で区切ったりしたロゴの文字を重ねたファーストビューから始まり、5つの事業が写真・一言のコピー・ボタンという同じ型で順に現れる。その後はイベントの予定、ニュース、メール登録と続き、ヘッダーには「Agenda（予定）」のボタンが常に出ている。
- 01 5つの事業を、写真・一言のコピー・ボタンという同じ型で並べ、どこから読んでも迷わせない
- 02 ボタンの文言を事業ごとに変える（レストランは「味わいに来て」、ホテルは「どこで夢を見る？」）
- 03 ロゴの文字を反転させたり色の帯で区切ったりして、「普通の会議施設ではない」ことを最初の画面で伝える
Conversion
集客の工夫
- ヘッダーに予定（Agenda） （あり） PC・SP とも上部に固定
- 事業ごとの入口 （あり） レストラン・ホテル・会議室・学校・工房の5つ
- イベントの予定 （あり） 講演・上映・ワークショップを日付つきで
- ニュース （あり） 施設の話題や受賞・認証の知らせ
- メール登録 （あり） 「Anders in je mailbox（いつもと違うメールを）」
- 電話番号の掲載 （あり） tel:リンク 1か所
- Cookie の拒否 （なし） 最初の画面は「すべて許可」と「設定」のみ
- 言語の切り替え （なし） なし（オランダ語のみ）
5つの事業を、同じ型で並べる
レストラン、ホテル、会議室、学校、工房。性格の違う5つの事業が、写真・一言のコピー・ボタンという同じ型で順に現れます。見た目が揃っているので、読み手は自分に関係する事業だけを拾って読めます。複数の事業を1つのサイトで伝えるとき、事業ごとにデザインを変えるより、型を揃えるほうが分かりやすくなります。
ボタンの言葉で、事業の性格を伝える
ボタンの文言は「詳しくはこちら」で揃えていません。レストランは「Kom het proeven（味わいに来て）」、ホテルは「Waar blijf jij dromen?（どこで夢を見る？）」、会議室は「Bekijk de ruimtes（部屋を見る）」。押したくなる一言が、そのまま事業の紹介になっています。
予定を、ヘッダーに常に置く
講演・上映・ワークショップなどの催しが多い施設なので、ヘッダーには「Agenda（予定）」のボタンが常にあります。催しを集客の柱にしている店なら、メニューの奥に「イベント」を置くより、いちばん目につく場所に入口を出すほうが効きます。なお Cookie の同意画面は最初に「すべて許可」と「設定」しかなく、拒否するには設定画面に進む必要があります。
チェック項目は 2026.10.18 に実ブラウザで描画したトップページ（PC 1440px・SP 375px）を確認したものです。
Colour
配色
- #E6E2DA 背景（グレージュ）
- #1A1A1A 見出し・本文・ボタン
- #FF8AC4 ロゴの帯・強調（ピンク）
- #F9C314 事業ブロックのアクセント（黄）
- #81C5E2 事業ブロックのアクセント（水色）
- #FFFFFF カード・ボタンの背景
背景は面積、文字は文字数で重み付けして実測した色から、役割ごとに整理しています。
Typography
フォント
| 用途 | 使用フォント | 無料で近いもの |
|---|---|---|
| 本文・小見出し | Helvetica Neue | Inter |
| 事業名の大きな見出し | Times New Roman | Instrument Serif |
| ラベル・補足 | Courier | IBM Plex Mono |
| 要素 | PC サイズ / 太さ | PC 行間 | SP サイズ / 太さ |
|---|---|---|---|
| h1 | 40px / 400 | 1.20 | 24px / 400 |
| h2 | 72px / 400 | 1.00 | 40px / 400 |
| h3 | 24px / 400 | 1.00 | 18px / 400 |
| 本文（p） | 14px / 400 | 1.40 | 14px / 400 |
| ボタン | 15px / 700 | 1.50 | 15px / 700 |
実測値（PC 1440px・SP 375px、2026.10.18 計測）。同じ要素で最も多く使われている指定を表示しています。h1 をロゴや小さな見出しに使っているサイトでは、h1 の値が小さく出ます。
Structure
ページ構成（上から順に）
- 01 ヘッダー 左にロゴ、右に「Agenda（予定）」・検索・メニュー。上部に固定。 ヘッダー／ロゴ＋横並びナビ型
- 02 ファーストビュー 建物の写真に、反転させた文字や色の帯で組んだロゴを重ねる。 ファーストビュー／全面写真＋コピー型
- 03 自己紹介 「会議室・レストラン・ホテル・プログラム・新しい経済の工房・学校を持つ、オランダの変化の家」という一文。 メッセージ／大きな一文型
- 04 レストラン 写真と「頭とお腹のごちそう」のコピー、「味わいに来て」のボタン。 コンセプト／写真＋メッセージ型
- 05 ホテル 「眠りの技術」と「どこで夢を見る？」。 コンセプト／写真＋メッセージ型
- 06 会議室 「ブレストから一杯まで」と「部屋を見る」。 コンセプト／写真＋メッセージ型
- 07 学校・工房 「違う学び方、違うやり方」「変化が働く場所」と、それぞれのボタン。 コンセプト／写真＋メッセージ型
- 08 予定（Agenda） 講演・上映・ワークショップの予定。 お知らせ／ニュース一覧型
- 09 ニュース 施設の話題、アート作品、受賞・認証の知らせ。 一覧／カード並び型
- 10 メール登録 「いつもと違うメールを」と登録フォーム。 行動喚起／メール登録型
- 11 フッター 会社概要・求人・アクセス・建物の話と、連絡先。 フッター／ナビ＋会社情報型
Download
ワイヤーフレームをダウンロード
この構成を、Figmaで編集できるワイヤーに
上のページ構成を、DevNJ のワイヤーフレーム部品で組み直したものです。元サイトの文章・画像・コードは含みません。
Figmaでの使い方
- SVGをダウンロードする
- Figmaのキャンバスにファイルをドラッグ＆ドロップする
- セクションごとにレイヤーが分かれた状態で開くので、順番の入れ替えや文言の差し替えから始める
文字はテキストレイヤーとして入ります（フォントは Noto Sans JP）。
Reproduce
このサイトを参考にするときのポイント
- 01 事業や店舗が複数あるなら、写真・一言・ボタンの同じ型で並べて比べやすくする
- 02 ボタンの文言は「詳しくはこちら」で揃えず、その事業らしい一言にする
- 03 イベントや季節の催しがある店は、ヘッダーに「予定」の入口を常に置く
- 04 Cookie の同意画面には、最初から「拒否」も同じ大きさで用意する（欧州では特に）
FAQ
よくある質問
De Groene Afslag のサイトで使われているフォントは？
本文は Helvetica Neue、事業名の大きな見出しは Times New Roman、ラベルは Courier と、どれも定番の書体を組み合わせています。無料で近づけるなら Inter・Instrument Serif・IBM Plex Mono が候補です。
飲食店のサイトに、ホテルや会議室の情報まで載せると分かりにくくなりませんか？
このサイトは5つの事業を同じ型（写真・一言・ボタン）で順に並べているので、読み手は自分に関係する事業だけを拾えます。事業ごとに見た目を変えず、型を揃えることが分かりやすさの鍵です。
どんな業種の参考になりますか？
カフェとギャラリー、宿とレストランなど、複数の事業を持つ店や施設に向きます。イベントの予定を前面に出す型は、ワークショップや催しを集客の柱にしている店にも使えます。
スクリーンショットは、解説に添える引用として縮小して掲載しています。デザイン・文章・画像の権利はDe Groene Afslagおよび各権利者に帰属します。ワイヤーフレームは元サイトを写したものではなく、構成を DevNJ の部品で組み直したものです。権利者・制作者の方からの掲載の取り下げ・修正のご依頼はお問い合わせから承り、原則2営業日以内に対応します。 掲載ギャラリー: Awwwards — Honorable Mention
