siteInspire ·イギリス（カートメル） ·Picked 2026.10.18
L'Enclume
レストラン（宿泊つき）のサイトデザイン参考 — 飲食店・料理の映像・縦書きタブ・店名の読み方
出典：lenclume.co.uk ↗ 確認日 2026.10.18
Editor's note
編集部の視点
料理の映像と店名だけのファーストビューに、画面の端の縦書きタブで予約への入口を添えるイギリスのレストラン。
イングランド北西部カンブリア州の村カートメルにある、シェフ Simon Rogan のレストラン L'Enclume のサイト。ファーストビューは料理の映像に大きな店名を重ねただけで、画面の左端に「SIMON ROGAN」、右端に「RESERVATION（予約）」の縦書きタブがある。メニューは食事・宿泊・FAQ・ショップ・農場・連絡先。本文は店名の読み方と意味（フランス語で「金床」）の説明、写真、ニュースと短くまとめ、フッターに住所・緯度経度・電話・メールと系列店の一覧を置いている。
- 01 ファーストビューは料理の映像と店名だけ。言葉で説明する前に、料理そのものを見せる
- 02 予約への入口を、画面の端の縦書きタブにしてファーストビューの写真を邪魔しない
- 03 店名の読み方（発音記号）と意味を添え、初めての人が店名を口にしやすくしている
Conversion
集客の工夫
- 予約への入口 （あり） 画面右端の縦書きタブ「RESERVATION」
- 料理の映像 （あり） ファーストビュー全面
- 宿泊への導線 （あり） メニューに STAY
- 物販・農場 （あり） SHOP と OUR FARM（食材の産地）
- 営業時間のお知らせ （あり） 年末年始の営業時間をニュースで告知
- 住所・電話・メール （あり） フッターに住所・緯度経度・tel:・mailto:
- メール登録 （あり） ファーストビュー直下の帯
- 言語の切り替え （なし） なし（英語のみ）
料理そのものを、最初に見せる
ファーストビューは料理の映像と、大きな店名だけです。キャッチコピーも説明文もありません。言葉で「こだわり」を語るより、料理を見せたほうが早いという判断です。メール登録の帯がそのすぐ下にあり、次の一歩もすぐ見つかります。
予約の入口を、画面の端に
画面の右端には縦書きで「RESERVATION」、左端には「SIMON ROGAN」のタブがあります。大きな予約ボタンをファーストビューの中央に置くと写真の邪魔になりますが、端の縦書きタブなら写真を守ったまま、どこを見ていても予約の場所が分かります。
店名の読み方を、教えてあげる
本文には「L'Enclume（[lã.klym]）、フランス語で『金床』」と、発音記号と意味が添えられています。読めない店名は、口コミでも予約の電話でも口にしにくいものです。外国語の店名を持つ店ほど、読み方を一行添えるだけで覚えてもらいやすくなります。フッターには住所・緯度経度・電話・メールが揃い、年末年始の営業時間もニュースで告知されています。
チェック項目は 2026.10.18 に実ブラウザで描画したトップページ（PC 1440px・SP 375px）を確認したものです。
Colour
配色
- #FFFFFF 背景
- #000000 店名・本文
- #8FA482 縦書きタブ（セージグリーン）
- #3C3A37 暗い面・補足
- #F4F4EC 映像の上の文字・淡い背景
背景は面積、文字は文字数で重み付けして実測した色から、役割ごとに整理しています。
Typography
フォント
| 用途 | 使用フォント | 無料で近いもの |
|---|---|---|
| 本文・メニュー・ニュース | Maison Neue | Inter |
| 要素 | PC サイズ / 太さ | PC 行間 | SP サイズ / 太さ |
|---|---|---|---|
| h2 | 20px / 400 | 1.20 | 14px / 400 |
| h3 | 20px / 400 | 1.20 | 14px / 400 |
| 本文（p） | 15px / 400 | 1.07 | 12px / 400 |
実測値（PC 1440px・SP 375px、2026.10.18 計測）。同じ要素で最も多く使われている指定を表示しています。h1 をロゴや小さな見出しに使っているサイトでは、h1 の値が小さく出ます。
Structure
ページ構成（上から順に）
- 01 ヘッダー 中央に店名、下に食事・宿泊・FAQ・ショップ・農場・連絡先。上部に固定。 ヘッダー／ロゴ＋横並びナビ型
- 02 ファーストビュー 料理の映像に大きな店名。左端に「SIMON ROGAN」、右端に「RESERVATION」の縦書きタブ。 ファーストビュー／全面動画＋コピー型
- 03 メール登録 ファーストビューのすぐ下に、特別な案内やイベントを受け取る登録の帯。 行動喚起／メール登録型
- 04 店名の読み方 「L'Enclume（発音記号）、フランス語で金床」という店名の説明。 メッセージ／大きな一文型
- 05 写真 料理と店の写真を大きく。 コンセプト／写真＋メッセージ型
- 06 ニュース 季節のメニュー、ギフト、営業時間のお知らせなど7件。 お知らせ／ニュース一覧型
- 07 フッター 住所・緯度経度・電話・メールと、系列店の一覧。 フッター／ナビ＋会社情報型
Download
ワイヤーフレームをダウンロード
この構成を、Figmaで編集できるワイヤーに
上のページ構成を、DevNJ のワイヤーフレーム部品で組み直したものです。元サイトの文章・画像・コードは含みません。
Figmaでの使い方
- SVGをダウンロードする
- Figmaのキャンバスにファイルをドラッグ＆ドロップする
- セクションごとにレイヤーが分かれた状態で開くので、順番の入れ替えや文言の差し替えから始める
文字はテキストレイヤーとして入ります（フォントは Noto Sans JP）。
Reproduce
このサイトを参考にするときのポイント
- 01 料理や商品に自信がある店は、ファーストビューを写真や映像と店名だけにする
- 02 予約ボタンは画面の端に縦書きで置くと、写真を邪魔せず常に見せられる
- 03 読みにくい店名には読み方を添える（外国語の店名なら特に）
- 04 営業時間の変更は、ニュースとして告知してトップから見えるようにする
FAQ
よくある質問
L'Enclume のサイトで使われているフォントは？
本文やメニューは Maison Neue で組んでいます。大きな店名はロゴとして別に用意されたものです。無料で近づけるなら、本文は Inter が候補です。
ファーストビューに予約ボタンを大きく置かなくても、予約は入りますか？
L'Enclume は画面右端の縦書きタブで予約への入口を常に見せています。写真を主役にしたまま、どこを見ていても予約の場所が分かる作りです。ボタンの大きさより、常に同じ場所にあることのほうが大切です。
どんな業種の参考になりますか？
レストラン、オーベルジュ（宿泊つきの飲食店）、和食店、菓子店など、料理や商品の写真が強みの店に向きます。
スクリーンショットは、解説に添える引用として縮小して掲載しています。デザイン・文章・画像の権利はL'Enclumeおよび各権利者に帰属します。ワイヤーフレームは元サイトを写したものではなく、構成を DevNJ の部品で組み直したものです。権利者・制作者の方からの掲載の取り下げ・修正のご依頼はお問い合わせから承り、原則2営業日以内に対応します。 掲載ギャラリー: siteInspire
