Awwwards ·デンマーク（クランペンボー） ·Picked 2026.10.18
Studenterkilden
レストラン・宴会会場のサイトデザイン参考 — 飲食店・予約ボタンの常設・FAQ・老舗
出典：studenterkilden.dk ↗ 確認日 2026.10.18
Editor's note
編集部の視点
「1854年から」の一言と予約ボタンを常に見せ、駐車場や人数などの疑問にFAQで先回りして答えるデンマークの老舗レストラン。
コペンハーゲン北部、森の入口にある1854年創業のレストラン・宴会会場のサイト。ファーストビューは「Since 1854」と「結婚式・誕生日・催し・集まり・会議のための美しい場所」の一文に、「Book a table（席を予約）」と「View packages（プランを見る）」の2つのボタン。続いて夜の食事・会議・団体の3つの用途、建物の歴史、そして駐車場・人数・宿泊・食事制限・庭での結婚式・ギフトカードなど13の質問に答える FAQ。ヘッダーの予約ボタンと言語切替（da / en）は常に表示される。
- 01 「Since 1854」の一言だけで、老舗であることを最初に伝える
- 02 予約ボタンをヘッダーに固定し、どこまで読んでもすぐ予約できる
- 03 駐車場・人数・宿泊・食事制限など、電話で聞かれがちな13の質問に FAQ で先に答える
Conversion
集客の工夫
- 予約ボタンの常設 （あり） ヘッダーに「Book a table」（PC・SP）
- プランへの導線 （あり） 「View packages」をファーストビューに
- 用途別の入口 （あり） 夜の食事・会議・団体の3つ
- FAQ （あり） 駐車場・収容人数・宿泊・アレルギーなど13問
- 営業時間の明記 （あり） フッターに Opening Hours
- 言語の切り替え （あり） デンマーク語・英語
- 電話・メール （あり） tel:リンク 1か所・mailto:リンク 1か所
- メール登録 （あり） フッターにニュースレター
老舗であることを、一言で伝える
ファーストビューの一行目は「Since 1854」だけです。歴史の長さを説明する文章より先に、数字ひとつで信用を伝えています。そのすぐ下で「結婚式・誕生日・催し・集まり・会議のための美しい場所」と、何のための店かを言い切っています。
予約ボタンを、どこにいても押せる場所に
ヘッダーには言語切替（da / en）と並んで「Book a table」のボタンが固定されています。ファーストビューにも「席を予約」「プランを見る」の2つがあり、今すぐ予約したい人と、まずプランを比べたい人の両方に入口があります。
電話で聞かれる質問に、先回りして答える
FAQ には「駐車できるか」「何人まで入れるか」「泊まれるか」「食事制限に対応できるか」「庭で結婚式ができるか」「ギフトカードはあるか」など13の質問が並びます。どれも電話で聞かれがちな内容です。先に答えておくことで、迷っている人が予約まで進みやすくなります。営業時間もフッターに明記されています。
チェック項目は 2026.10.18 に実ブラウザで描画したトップページ（PC 1440px・SP 375px）を確認したものです。
Colour
配色
- #FDFDFD 背景
- #161513 見出し・本文
- #EBBF7D 予約ボタン（ゴールド）
- #F2E9CF 暗い面の上の文字・淡い背景
- #201D1D 暗いセクションの背景
背景は面積、文字は文字数で重み付けして実測した色から、役割ごとに整理しています。
Typography
フォント
| 用途 | 使用フォント | 無料で近いもの |
|---|---|---|
| 見出し・本文・ボタン（すべて） | GT Ultra Median | Fraunces |
| 要素 | PC サイズ / 太さ | PC 行間 | SP サイズ / 太さ |
|---|---|---|---|
| h1 | 16px / 400 | 0.90 | 12px / 400 |
| h2 | 69px / 400 | 0.90 | 40px / 400 |
| h3 | 24px / 400 | 1.30 | 16px / 400 |
| 本文（p） | 21px / 400 | 1.50 | 14px / 400 |
| ボタン | 24px / 400 | 1.50 | 16px / 400 |
実測値（PC 1440px・SP 375px、2026.10.18 計測）。同じ要素で最も多く使われている指定を表示しています。h1 をロゴや小さな見出しに使っているサイトでは、h1 の値が小さく出ます。
Structure
ページ構成（上から順に）
- 01 ヘッダー メニュー、言語切替（da / en）、「席を予約」のボタン。上部に固定。 ヘッダー／ロゴ＋横並びナビ型
- 02 ファーストビュー 「Since 1854」と、用途を並べた一文、「席を予約」「プランを見る」の2ボタン。 ファーストビュー／大きな文字型
- 03 建物の写真 森のそばに建つ歴史ある建物を全幅で。 ファーストビュー／全面写真＋コピー型
- 04 3つの用途 夜の食事、会議、団体のイベント。 一覧／カード並び型
- 05 私たちについて 1854年から続く建物と店の歴史。 コンセプト／写真＋メッセージ型
- 06 FAQ 駐車場・収容人数・宿泊・食事制限・庭での結婚式・ギフトカード・アクセスなど13の質問。 お知らせ／ニュース一覧型
- 07 メール登録と連絡先 ニュースレターの登録、電話・メール、営業時間。 行動喚起／メール登録型
- 08 フッター サイトマップ・SNS・営業時間。 フッター／ナビ＋会社情報型
Download
ワイヤーフレームをダウンロード
この構成を、Figmaで編集できるワイヤーに
上のページ構成を、DevNJ のワイヤーフレーム部品で組み直したものです。元サイトの文章・画像・コードは含みません。
Figmaでの使い方
- SVGをダウンロードする
- Figmaのキャンバスにファイルをドラッグ＆ドロップする
- セクションごとにレイヤーが分かれた状態で開くので、順番の入れ替えや文言の差し替えから始める
文字はテキストレイヤーとして入ります（フォントは Noto Sans JP）。
Reproduce
このサイトを参考にするときのポイント
- 01 創業年や受賞など、短い一言で伝わる信用は最初の画面に置く
- 02 予約が主な目的の店は、予約ボタンをヘッダーに固定する
- 03 電話でよく聞かれる質問（駐車場、人数、アレルギー、子ども連れなど）を FAQ にまとめる
- 04 観光客が来る店は、英語の切り替えを用意する
FAQ
よくある質問
Studenterkilden のサイトで使われているフォントは？
見出しから本文、ボタンまで GT Ultra Median 1書体で組んでいます。有料書体なので、無料で近い雰囲気にするなら Fraunces などのやわらかいセリフ体が候補です。
飲食店のサイトに FAQ は必要ですか？
予約や来店の前に確かめたいこと（駐車場、人数、アレルギー対応など）は、電話で聞かれることが多い質問です。Studenterkilden のように FAQ にまとめると、問い合わせの手間が減り、迷っている人の背中も押せます。
どんな業種の参考になりますか？
宴会や貸切に対応するレストラン、結婚式場、旅館、カフェなど、予約が来店の入口になる店に向きます。
スクリーンショットは、解説に添える引用として縮小して掲載しています。デザイン・文章・画像の権利はStudenterkildenおよび各権利者に帰属します。ワイヤーフレームは元サイトを写したものではなく、構成を DevNJ の部品で組み直したものです。権利者・制作者の方からの掲載の取り下げ・修正のご依頼はお問い合わせから承り、原則2営業日以内に対応します。 掲載ギャラリー: Awwwards — Honorable Mention
