無料会員なら、見本とパーツの3分の2を何件でも持ち帰れます。

無料登録 →

・飲食・カフェ

フレンチレストラン(高級感)

記念日・接待・特別な夜の食事先を探している30〜60代。値段より「どんな夜になるか」で選ぶ人に、静けさと緊張感を伝える。色を使わず、光と影だけで見せる。

1280px

この見本の特徴

業種
飲食・カフェ(フレンチレストラン)
系統
テイスト
高級感
色
白・黒・グレー
ページの形
メイン画像
スライド
業種 飲食・カフェ
テイスト 高級感
色 白・黒・グレー
アニメーション あり(GSAP+ScrollTrigger)
演出の型 A04 ロゴだけの幕から写真がにじみ出て、ロゴが定位置に溶け込む/B01 画面を止めたまま場面が入れ替わる+目盛り(コースの皿)/C02 写真が円柱の内側に貼られたようにたわんで横に流れる
架空の店 「Maison Lueur(メゾン・リュウール)」— 夜だけ12席、おまかせのコース一本のフランス料理店

だれに向けたページか

記念日・接待・特別な夜の食事先を探している30〜60代。 値段より「どんな夜になるか」で選ぶ人に、静けさと緊張感を伝える。色を使わず、光と影だけで見せる。

色

変数 値 使う所
--c-bg #f6f6f4 背景(白いクロス)
--c-ink #0e0e0e 黒の面・見出し
--c-accent #b9b9b9 銀の線・黒の上の小さな文字(9.84)
--c-accent-text #5c5c5c 白の上のグレーの文字(6.18)
--c-light #e5e5e3 黒の上の本文
--c-line #d4d4d2 罫線
--c-text #374151 本文
--c-sub #4b5563 補足

文字

  • 英字の見出し・ロゴ:Bodoni Moda(細身のイタリックも)
  • 日本語:Noto Serif JP(見出し 500・本文 400)

ページの構成と演出

  1. 開幕(A04):黒い幕の中央に「LUEUR」の文字だけ。幕の向こうから客席の写真がぼかしの中からにじみ出て、ロゴは小さくなりながらヘッダーの定位置へ移って溶け込む(2.5秒ほど。同じ訪問の2回目は出さない。押せば飛ばせる)
  2. メインビジュアル:夕暮れの客席の写真に、「光のかけらを、一皿に。」
  3. ごあいさつ:シェフの言葉。細い罫線と余白だけで
  4. 今宵のコース(B01):画面を止めたまま、アミューズ→魚→肉→デセールと皿が入れ替わる。皿は横からの幕で切り替わり、下に「I・II・III・IV」の目盛り
  5. メゾンの中(C02):客席・セラー・厨房・テーブルの縦長写真が、円柱の内側に貼られたようにたわみながら横に流れる(PCは縦スクロールで、スマホは指で)
  6. ご予約:コースの値段(〇〇)とご予約の決まり
  7. アクセス・フッター

動きの決まり

  • JSや GSAP が無いとき:幕は出ない。コースの4皿は縦に並ぶ。写真の列は平らなまま指で横に送れる。全部読める
  • prefers-reduced-motion のときは、上と同じ「動かない版」
  • たわみは端の写真ほど少し回る(最大30度)だけ。画面全体は回さない
  • 値段・席数は見本の値。会員が本物に替える

写真(codex)

夕暮れの客席/アミューズ・魚・肉・デセール/セラー・厨房の手・テーブル(縦長)、の8枚。顔は写さない。

下層ページを作るときの決まり

  • 色は白・黒・グレーだけ。差し色を足さない
  • 見出しは「Bodoni Moda の英字(イタリック)+Noto Serif JP の日本語」
  • 黒の面は1ページに2回まで。演出は1ページに1つまで(開幕の幕はトップだけ)

同じ業種の見本

もっと見る