出典：schlossfarrach.at ↗ 確認日 2026.10.27
Editor's note
編集部の視点
城の線画を中心に「食事」と「文化」の2つの入口を左右に分け、予約ボタンからその場で空席の日付を選べる、オーストリアの城のレストラン。
オーストリアのツェルトヴェークにある城 Schloss Farrach のサイト。城の中で Stöhr 家がレストランを営み、展示や催しの会場にもなっている。ファーストビューはベージュの面の中央に城の線画を置き、左に「ESSEN BEIM STÖHR（Stöhr の食事）」、右に「KULTUR IM SCHLOSS（城の文化）」と2つの入口を分けただけ。レストランの側には「Reservieren（予約）」のボタンがあり、押すとその場で日付を選ぶ予約画面が開く。どのページの下にも営業時間とニュースレターの登録がある。
- 01 食事と文化という2つの目的を、ファーストビューで左右に分けて選ばせる
- 02 予約ボタンを押すと、ページを移らずに日付を選ぶ予約画面が開く
- 03 営業時間をすべてのページの下に載せ、来店前の確認をすぐ済ませられる
Conversion
集客の工夫
- 予約の導線 （あり） ファーストビューの「Reservieren」からオンライン予約
- 目的別の入口 （あり） レストランと文化（展示・催し）の2つ
- 営業時間の明記 （あり） 全ページの下に曜日ごとの時間
- 受賞・評価 （あり） レストランのページに Gault Millau・Falstaff など
- メニュー （あり） 昼と夜のメニューをダウンロードで（レストランのページ）
- メール登録 （あり） 全ページの下にニュースレター
- 言語の切り替え （あり） ドイツ語・英語
- 電話番号の掲載 （なし） トップにはなし（問い合わせページへ）
入口を、左右の2つに分ける
ファーストビューは、ベージュの面の中央に城の線画を置き、左に「ESSEN BEIM STÖHR（Stöhr の食事）」、右に「KULTUR IM SCHLOSS（城の文化）」と書いただけです。食事に来る人と、展示や催しに来る人では知りたいことが違うため、最初の画面で用件ごとに入口を分けています。
予約は、その場で日付を選ぶ
レストランの側にある「Reservieren（予約）」を押すと、ページを移らずに 日付を選ぶ予約画面が開きます。予約したい人を問い合わせページや電話に回さず、思い立ったその場で済ませられます。レストランのページでは、昼と夜のメニューのダウンロードと、Gault Millau や Falstaff などの評価もまとめています。
営業時間は、どのページにも置く
どのページの下にも、曜日ごとの営業時間とニュースレターの登録があります。来店前に確かめたい営業時間を探させない作りです。問い合わせのページには、レストランと文化の催しで別々のメールアドレスを載せ、用件ごとの窓口を分けています。
チェック項目は 2026.10.27 に実ブラウザで描画したトップページ（PC 1440px・SP 375px）を確認したものです。
Colour
配色
- #E6D2B4 背景（ベージュ）
- #FFFFFF 大きな見出し・ボタンの地・ヘッダー
- #000000 本文・ボタンの文字・線画
- #828282 左右の縁の砂目模様（グレー）
背景は面積、文字は文字数で重み付けして実測した色から、役割ごとに整理しています。
Typography
フォント
| 用途 | 使用フォント | 無料で近いもの |
|---|---|---|
| 大きな見出し | Carlton | Cormorant Garamond |
| ナビ・本文・ボタン | Founders Grotesk（Light） | Inter |
| 要素 | PC サイズ / 太さ | PC 行間 | SP サイズ / 太さ |
|---|---|---|---|
| h3 | 40px / 400 | 1.10 | 40px / 400 |
| 本文（p） | 115px / 400 | 1.00 | 45px / 400 |
| ボタン | 20px / 400 | 1.10 | 20px / 400 |
実測値（PC 1440px・SP 375px、2026.10.27 計測）。同じ要素で最も多く使われている指定を表示しています。h1 をロゴや小さな見出しに使っているサイトでは、h1 の値が小さく出ます。
Structure
ページ構成（上から順に）
- 01 ヘッダー 左に「Restaurant」、中央にロゴ、右に「Kultur」と言語の切り替え。上部に固定。 ヘッダー／ロゴ＋横並びナビ型
- 02 ファーストビュー 中央に城の線画。左に「ESSEN BEIM STÖHR」と「レストランへ」「予約」、右に「KULTUR IM SCHLOSS」と「文化へ」。 ファーストビュー／文字＋画像の左右分割型
- 03 ブログと問い合わせ 画面の下の左右に「BLOG」と「KONTAKT」。 行動喚起／ボタン帯型
- 04 メール登録 「おいしい食事と特別な催しのお知らせ」の登録フォーム。 行動喚起／メール登録型
- 05 フッター 曜日ごとの営業時間、SNS、道案内（地図）、会社概要。 フッター／ナビ＋会社情報型
Download
ワイヤーフレームをダウンロード
この構成を、Figmaで編集できるワイヤーに
上のページ構成を、DevNJ のワイヤーフレーム部品で組み直したものです。元サイトの文章・画像・コードは含みません。
Figmaでの使い方
- SVGをダウンロードする
- Figmaのキャンバスにファイルをドラッグ＆ドロップする
- セクションごとにレイヤーが分かれた状態で開くので、順番の入れ替えや文言の差し替えから始める
文字はテキストレイヤーとして入ります（フォントは Noto Sans JP）。
Reproduce
このサイトを参考にするときのポイント
- 01 目的がはっきり2つある店は、最初の画面で入口を左右に分ける
- 02 予約ボタンは、ページを移らずに日付を選べる予約画面につなぐ
- 03 営業時間はトップだけでなく、すべてのページの下に置く
- 04 受賞や評価は、料理を紹介するページにまとめて載せる
FAQ
よくある質問
Schloss Farrach のサイトで使われているフォントは？
大きな見出しに飾りのあるセリフ体の Carlton、ナビや本文に細い Founders Grotesk を使っています。どちらも有料書体なので、無料で近づけるなら見出しに Cormorant Garamond、本文に Inter が候補です。
レストランと会場貸しを一つのサイトで見せるには？
Schloss Farrach は最初の画面で「食事」と「文化」を左右に分け、それぞれの入口を同じ大きさで並べています。目的が違う人が、最初の一回のクリックで自分の用件のページに進めます。
どんな業種の参考になりますか？
宴会場や会場貸しを持つ飲食店、ギャラリーを併設するカフェ、酒蔵の見学と直売所など、目的が2つある施設に向きます。
スクリーンショットは、解説に添える引用として縮小して掲載しています。デザイン・文章・画像の権利はSchloss Farrachおよび各権利者に帰属します。ワイヤーフレームは元サイトを写したものではなく、構成を DevNJ の部品で組み直したものです。権利者・制作者の方からの掲載の取り下げ・修正のご依頼はお問い合わせから承り、原則2営業日以内に対応します。 掲載ギャラリー: Httpster
