出典：volkshotel.nl ↗ 確認日 2026.10.31
Editor's note
編集部の視点
左上の「BOOK ROOM」と直接予約の割引で予約を呼び込み、レストラン・バー・コワーキング・サウナを別々の入口で見せるアムステルダムのホテル。
アムステルダム東部、ウィバウト通りにあるホテル Volkshotel のサイト（英語版）。ファーストビューは手描きのイラストに「Volks HOTEL」のロゴだけで、左上に「BOOK ROOM」、右上に「MENU」、PC では画面の下に「ROOMS / EAT & DRINK / BLOG / AGENDA / LOCATION」のナビが残る。スクロールすると、催しのお知らせ、客室への入口「GET A ROOM」、レストランの Canvas・地下のサウンドバー Doka・働く場所の Werkplaats・サウナと温浴の Badplaats の4つの入口、ブログと催しの予定、場所の案内が続く。直接予約すると全料金が7.5%引きになるプロモコードの案内もある。
- 01 予約ボタンを左上に固定し、イラストを眺めている途中でもすぐ予約に進めるようにする
- 02 直接予約の割引（7.5%）を示し、予約サイトではなく自社サイトで予約する理由をつくる
- 03 レストラン・バー・コワーキング・サウナを別々の名前と入口で見せ、泊まらない人にも使い道を伝える
Conversion
集客の工夫
- 予約ボタンの常設 （あり） 左上に「BOOK ROOM」（PC・SP）
- 直接予約の特典 （あり） 全料金7.5%引きのプロモコード
- 施設ごとの入口 （あり） Canvas・Doka・Werkplaats・Badplaats
- アクセス （あり） 「Here we are!」で周辺と交通手段、道順へのボタン
- 電話の窓口 （あり） ホテル・レストラン・催しで番号を分けて掲載
- 言語の切り替え （あり） 英語・オランダ語・ドイツ語・フランス語・スペイン語
- メール登録 （あり） フッターにニュースレター
- FAQ （なし） トップにはなし（駐車や朝食は General Info へ）
予約ボタンを、画面の角に固定する
ファーストビューは手描きのイラストとロゴだけで、説明の文章はありません。そのかわり左上には枠で囲んだ 「BOOK ROOM」が常に表示され、右上のメニューと対になっています。PC では画面の下に「ROOMS / EAT & DRINK / BLOG / AGENDA / LOCATION」の4つのナビも残り、イラストを眺めている途中でも行き先を選べます。
自社サイトで予約する理由をつくる
サイトでは、直接予約すると 全料金が7.5%引きになるプロモコード を案内しています。予約サイトにも載っている宿にとって、自社サイトで予約してもらえれば手数料がかかりません。「ここで予約すると得をする」と示すことが、予約サイトとの差になります。
泊まらない人にも、入口を用意する
客室の入口のあとには、レストランの Canvas、地下のサウンドバー Doka、働く場所の Werkplaats、サウナと温浴の Badplaats が、それぞれの名前と一文で並びます。館内の施設に名前と入口をつけることで、泊まらない人にも食事や仕事、温浴の目的で来てもらえるようにしています。電話番号もホテル・レストラン・催しで分けて書かれています。
チェック項目は 2026.10.31 に実ブラウザで描画したトップページ（PC 1440px・SP 375px）を確認したものです。
Colour
配色
- #FFFFFF 背景
- #000000 ロゴ・ボタンの枠・見出し
- #F1F1F1 淡い面
- #717171 本文
背景は面積、文字は文字数で重み付けして実測した色から、役割ごとに整理しています。
Typography
フォント
| 用途 | 使用フォント | 無料で近いもの |
|---|---|---|
| 見出し | Century Oldstyle BT Bold | Old Standard TT |
| 本文・ナビ・ボタン | Apercu | DM Sans |
| 要素 | PC サイズ / 太さ | PC 行間 | SP サイズ / 太さ |
|---|---|---|---|
| h1 | 39px / 400 | 1.08 | 32px / 400 |
| h2 | 29px / 400 | 1.03 | 29px / 400 |
| h3 | 29px / 400 | 0.97 | 29px / 400 |
| 本文（p） | 14px / 400 | 1.57 | 14px / 400 |
実測値（PC 1440px・SP 375px、2026.10.31 計測）。同じ要素で最も多く使われている指定を表示しています。h1 をロゴや小さな見出しに使っているサイトでは、h1 の値が小さく出ます。
Structure
ページ構成（上から順に）
- 01 ヘッダー 左上に「部屋を予約」、右上にメニュー。どちらも枠で囲んで上部に固定。 ヘッダー／ロゴ＋メニューボタン型
- 02 ファーストビュー カメラを提げた人とホテルの建物を描いた手描きのイラストに、ロゴだけを置く。下に4つのナビ。 ファーストビュー／全面写真＋コピー型
- 03 お知らせ 街で開かれる催し（ADE）の期間に合わせた案内と「詳しく」のボタン。 お知らせ／ニュース一覧型
- 04 ホテルの写真 建物や館内の写真を組み合わせて並べる。 コンセプト／写真＋メッセージ型
- 05 客室への入口 「GET A ROOM」の見出しと、どんな人も泊まれるという一文、「客室を見る」のボタン。 行動喚起／ボタン帯型
- 06 4つの施設 レストラン Canvas、地下のサウンドバー Doka、働く場所 Werkplaats、サウナと温浴の Badplaats。 一覧／カード並び型
- 07 ブログと催し 周辺の楽しみ方や展示作家の話のブログと、館内の催しの予定。 一覧／カード並び型
- 08 場所の案内 アムステル川や De Pijp 地区に近いことと、車・公共交通・タクシーで来られること。「道順を見る」のボタン。 コンセプト／写真＋メッセージ型
- 09 動画 館内の様子の動画を全幅で。 ファーストビュー／全面動画＋コピー型
- 10 フッター 住所、ホテル・レストラン・催しの電話番号、メール、求人、プレス、総合案内（駐車・朝食）、カード払いのみの表示、ギフトカード、法人向け、ニュースレター。 フッター／大きなフッター型
- 11 下部のナビ（PC） PC では画面下に「部屋・飲食・ブログと催し・場所」の4つが残り続ける。 行動喚起／SP追従ボタンバー型
Download
ワイヤーフレームをダウンロード
この構成を、Figmaで編集できるワイヤーに
上のページ構成を、DevNJ のワイヤーフレーム部品で組み直したものです。元サイトの文章・画像・コードは含みません。
Figmaでの使い方
- SVGをダウンロードする
- Figmaのキャンバスにファイルをドラッグ＆ドロップする
- セクションごとにレイヤーが分かれた状態で開くので、順番の入れ替えや文言の差し替えから始める
文字はテキストレイヤーとして入ります（フォントは Noto Sans JP）。
Reproduce
このサイトを参考にするときのポイント
- 01 宿や飲食店は、予約ボタンを画面の角に固定し、どこまで読んでもすぐ押せるようにする
- 02 自社サイトで予約した人だけの特典（割引・特典の内容）を、サイト上ではっきり示す
- 03 館内の飲食店や貸し会議室などは、それぞれに名前と入口をつけ、泊まらない人にも見つけてもらう
- 04 電話番号は窓口ごとに分けて書き、かけ先を迷わせない
FAQ
よくある質問
Volkshotel のサイトで使われているフォントは？
見出しに Century Oldstyle BT の太字、本文・ナビ・ボタンに Apercu を使っています。無料で近づけるなら、見出しは Old Standard TT、本文は DM Sans が候補です。
予約サイトに載っていても、自社サイトの予約ボタンは必要ですか？
予約サイト経由だと手数料がかかるため、自社サイトから予約してもらえると宿の負担が減ります。Volkshotel は予約ボタンを常に見せたうえで、直接予約なら7.5%引きになるプロモコードを案内し、自社サイトで予約する理由をつくっています。
どんな業種の参考になりますか？
レストランやカフェ、温浴施設、会議室を併設するホテルや旅館、複合施設に向きます。泊まる人と、食事や仕事に立ち寄る人の両方を集めたい施設の参考になります。
スクリーンショットは、解説に添える引用として縮小して掲載しています。デザイン・文章・画像の権利はVolkshotelおよび各権利者に帰属します。ワイヤーフレームは元サイトを写したものではなく、構成を DevNJ の部品で組み直したものです。権利者・制作者の方からの掲載の取り下げ・修正のご依頼はお問い合わせから承り、原則2営業日以内に対応します。 掲載ギャラリー: Httpster
