| 業種 | 飲食・カフェ |
| テイスト | 高級感 |
| 色 | 白・黒・グレー |
| アニメーション | あり(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)
ページの構成と演出
- 開幕(A04):黒い幕の中央に「LUEUR」の文字だけ。幕の向こうから客席の写真がぼかしの中からにじみ出て、ロゴは小さくなりながらヘッダーの定位置へ移って溶け込む(2.5秒ほど。同じ訪問の2回目は出さない。押せば飛ばせる)
- メインビジュアル:夕暮れの客席の写真に、「光のかけらを、一皿に。」
- ごあいさつ:シェフの言葉。細い罫線と余白だけで
- 今宵のコース(B01):画面を止めたまま、アミューズ→魚→肉→デセールと皿が入れ替わる。皿は横からの幕で切り替わり、下に「I・II・III・IV」の目盛り
- メゾンの中(C02):客席・セラー・厨房・テーブルの縦長写真が、円柱の内側に貼られたようにたわみながら横に流れる(PCは縦スクロールで、スマホは指で)
- ご予約:コースの値段(〇〇)とご予約の決まり
- アクセス・フッター
動きの決まり
- JSや GSAP が無いとき:幕は出ない。コースの4皿は縦に並ぶ。写真の列は平らなまま指で横に送れる。全部読める
prefers-reduced-motionのときは、上と同じ「動かない版」- たわみは端の写真ほど少し回る(最大30度)だけ。画面全体は回さない
- 値段・席数は見本の値。会員が本物に替える
写真(codex)
夕暮れの客席/アミューズ・魚・肉・デセール/セラー・厨房の手・テーブル(縦長)、の8枚。顔は写さない。
下層ページを作るときの決まり
- 色は白・黒・グレーだけ。差し色を足さない
- 見出しは「Bodoni Moda の英字(イタリック)+Noto Serif JP の日本語」
- 黒の面は1ページに2回まで。演出は1ページに1つまで(開幕の幕はトップだけ)
カツプロ(ホーム)
カツプロ AI SEO
サイト診断
MoteRaku
デザインギャラリー
画像ツール
カツプロPR