出典：delice.ca ↗ 確認日 2026.10.29
Editor's note
編集部の視点
画面の下に「来店・予約・注文・ギフトカード」の4つのボタンを常に置き、曜日ごとの特典と今開いているかを見せるカナダ・レヴィの1970年創業のレストラン。
ケベック州レヴィで1970年から続くレストラン Délice のサイト。上部の帯にハッピーアワーや曜日ごとの特典が流れ、ファーストビューは赤い背景に料理の写真と「Toutes les raisons sont bonnes（どんな理由でもいい）」の大きな文字、「PIZZA DÉLICE DEPUIS 1970」。画面の下には「Venir au Délice（来店）」「Réserver（予約）」「Commander en ligne（注文）」「Carte cadeau（ギフトカード）」の4つのボタンが常に表示される。メニュー、曜日ごとの特典、スタッフ160人・創業1970年・店内700席・テラス300席の数字、ライブ演奏の予定、個室、給与つきの求人と応募フォームが続き、営業時間は曜日ごとに店内・バー・朝食・持ち帰り・宅配に分けて載っている。
- 01 画面の下に「来店・予約・注文・ギフトカード」の4つのボタンを常に置き、どこからでも次の行動に移れる
- 02 曜日ごとの特典（ハッピーアワー・ランチ・木曜のワイン半額など）を上部の帯とトップに並べ、来る日を決めるきっかけにする
- 03 営業時間を店内・バー・持ち帰り・宅配に分け、今開いているかも表示する
Conversion
集客の工夫
- 予約 （あり） 「Réserver」から予約サービスへ（常に表示）
- 持ち帰り・宅配の注文 （あり） 「Commander en ligne」から注文サイトへ
- 営業時間 （あり） 曜日ごとに店内・バー・朝食・ハッピーアワー・持ち帰り・宅配
- 今開いているか （あり） 「OUVERT ACTUELLEMENT（営業中）」と閉店時刻
- 住所・行き方 （あり） 住所と「OBTENIR L’ITINÉRAIRE（道順）」
- 電話番号 （あり） 418-833-2221 とメール
- 求人 （あり） 職種ごとに時給・勤務形態・経験と応募フォーム
- 英語版 （あり） ヘッダーに ENGLISH
次の行動を、画面の下に常に置く
どのページを開いても、画面の下に 「Venir au Délice（来店）」「Réserver（予約）」「Commander en ligne（注文）」「Carte cadeau（ギフトカード）」の4つのボタンが残ります。飲食店のサイトに来る人の目的はほぼこの4つです。メニューを読んでいる途中でも、1回押せば予約や注文に進めます。
曜日ごとの特典で、来る日を決めてもらう
上部の帯とトップには、毎日14時〜18時のハッピーアワー、11時〜15時のランチ、火曜のフィッシュ＆チップス、水曜の持ち帰り・宅配20%引き、木曜のワイン半額などが並びます。「いつか行こう」を「水曜に行こう」に変える仕掛けです。スタッフ160人・店内700席・テラス300席という数字も添え、規模の大きさを伝えています。
営業時間を細かく分け、求人まで載せる
フッターの営業時間は、曜日ごとに 店内・バー・朝食・ハッピーアワー・持ち帰り・宅配に分けて書かれ、「OUVERT ACTUELLEMENT（営業中）」と閉店時刻も出ます。祝日は Google で確かめるよう一文を添えています。トップには10の職種の求人が時給と勤務形態つきで並び、その場で応募できるフォームもあります。お客さんと働き手の両方を、同じサイトで集める作りです。
チェック項目は 2026.10.29 に実ブラウザで描画したトップページ（PC 1440px・SP 375px）を確認したものです。
Colour
配色
- #DE2B2B ファーストビューの背景・ボタンの文字
- #F8EFDC 背景・ボタンの塗り
- #7C2627 見出し・本文
- #263150 区切りの背景
- #75C2BD 区切りの背景（アクセント）
- #91964F ギフトカードの入口
背景は面積、文字は文字数で重み付けして実測した色から、役割ごとに整理しています。
Typography
フォント
| 用途 | 使用フォント | 無料で近いもの |
|---|---|---|
| 見出し | Ivy Mode | Playfair Display |
| 本文・ナビ・ボタン | Filson Soft | Nunito |
| 特典のひと言 | Miller Banner | Libre Caslon Text |
| 要素 | PC サイズ / 太さ | PC 行間 | SP サイズ / 太さ |
|---|---|---|---|
| h1 | 18px / 500 | 1.35 | 18px / 500 |
| h2 | 64px / 600 | 1.00 | 40px / 600 |
| h3 | 48px / 600 | 1.00 | 32px / 600 |
| 本文（p） | 14px / 400 | 1.40 | 16px / 400 |
実測値（PC 1440px・SP 375px、2026.10.29 計測）。同じ要素で最も多く使われている指定を表示しています。h1 をロゴや小さな見出しに使っているサイトでは、h1 の値が小さく出ます。
Structure
ページ構成（上から順に）
- 01 ヘッダー 上部に特典が流れる帯。その下に「LES MENUS」「LE RESTAURANT」、中央にロゴ、「PROGRAMMATION」「SALONS PRIVÉS」、右上に ENGLISH。 ヘッダー／ロゴ＋横並びナビ型
- 02 ファーストビュー 赤い背景に「Toutes les raisons sont bonnes」の大きな文字、「PIZZA DÉLICE DEPUIS 1970」と短い紹介。右に料理の写真。 ファーストビュー／文字＋画像の左右分割型
- 03 メニュー 「Un choix pour tous les goûts」。世界の料理と朝食があることを写真つきで。 コンセプト／写真＋メッセージ型
- 04 曜日ごとの特典 ハッピーアワー・ランチ・火曜のフィッシュ＆チップス・水曜の持ち帰り20%引き・水曜のムール貝食べ放題・木曜のワイン半額。 一覧／カード並び型
- 05 数字 スタッフ160人、創業1970年、店内700席、テラス300席。 会社情報／スペック表型
- 06 催しと演奏 ライブ演奏の予定を日付・時刻・ジャンルつきで6件と「VOIR TOUT」。 お知らせ／ニュース一覧型
- 07 個室 「Célébrez en grand dans nos espaces intimes」。集まりに使える個室の案内。 コンセプト／写真＋メッセージ型
- 08 求人 給仕・バー・調理・ピザ職人・受付など10の職種を、時給と勤務形態つきで。 事例・実績／リスト＋ラベル型
- 09 来店の呼びかけ 「Qu’attendez vous pour venir?」。持ち帰り・宅配の注文と、ギフトカードの2つの入口。 行動喚起／ボタン帯型
- 10 フッター 曜日ごとの営業時間、今開いているか、住所と道順、電話・メール。 フッター／ナビ＋会社情報型
- 11 4つのボタン（常時表示） 「来店」「予約」「注文」「ギフトカード」が画面の下に残り続ける。 行動喚起／SP追従ボタンバー型
Download
ワイヤーフレームをダウンロード
この構成を、Figmaで編集できるワイヤーに
上のページ構成を、DevNJ のワイヤーフレーム部品で組み直したものです。元サイトの文章・画像・コードは含みません。
Figmaでの使い方
- SVGをダウンロードする
- Figmaのキャンバスにファイルをドラッグ＆ドロップする
- セクションごとにレイヤーが分かれた状態で開くので、順番の入れ替えや文言の差し替えから始める
文字はテキストレイヤーとして入ります（フォントは Noto Sans JP）。
Reproduce
このサイトを参考にするときのポイント
- 01 予約・注文・来店・ギフトなど、お客さんの次の行動をボタンにして画面の下に常に置く
- 02 曜日ごとの特典を並べ、「いつ行くか」を決めるきっかけにする
- 03 営業時間は店内・持ち帰り・宅配などサービスごとに分け、祝日は確認を促す一文を添える
- 04 求人は職種ごとに時給・勤務形態・必要な経験まで書き、そのまま応募できるフォームを置く
FAQ
よくある質問
Délice のサイトで使われているフォントは？
見出しに Ivy Mode、本文・ナビ・ボタンに丸みのある Filson Soft、特典のひと言に Miller Banner を使っています。どれも有料書体なので、無料で近づけるなら Playfair Display・Nunito・Libre Caslon Text が候補です。
飲食店のサイトに、ボタンを4つも常に出して邪魔になりませんか？
Délice は4つのボタンを小さな帯にまとめ、画面の下に並べています。来店・予約・注文・ギフトカードはどれもお客さんがサイトに来る目的そのものなので、どのページにいても1回で押せることのほうが大切です。数を絞るなら、予約と電話の2つから始めるのも手です。
どんな業種の参考になりますか？
予約・持ち帰り・宅配を受ける飲食店、宴会や個室のある店、曜日ごとの特典を出している店に向きます。求人の載せ方は、人手を集めたい店舗業全般に使えます。
スクリーンショットは、解説に添える引用として縮小して掲載しています。デザイン・文章・画像の権利はDéliceおよび各権利者に帰属します。ワイヤーフレームは元サイトを写したものではなく、構成を DevNJ の部品で組み直したものです。権利者・制作者の方からの掲載の取り下げ・修正のご依頼はお問い合わせから承り、原則2営業日以内に対応します。 掲載ギャラリー: Awwwards — Honorable Mention
