FLOW ANATOMY #17 — 1サイトを縦に解剖する
KAMADOは、
なぜ湯気の一皿だけで予約させられるのか。
技法は『点』、サイトは『線』。SaaSのLPが論理で申込へ運ぶのに対し、飲食店のサイトは食欲という身体反応で予約へ運びます。架空の炭火割烹『KAMADO／竈』は、うんちくや文字より先に、全画面いっぱいの「湯気の立つ一皿」をぶつける。パレットは近黒の炭・琥珀の熾火・ひと差しの深紅という、暗くて暖かいシズルなダーク。主役は生成CGでも抽象でもなく、実写の料理写真そのもの。それをスクロール視差とKen-Burnsのゆっくりズームで映画のカットのように見せ、画面全体に火の粉（ember）を薄く舞わせて温度を足す。——「明るく引き算する」高明度エディトリアルの逆、暗く・暖かく・寄るという料理サイトの作法が、どうやって食欲を予約に変えるのかを章ごとに解剖します。解説をスクロールすると、実物のライブプレビューが同じ場所まで自動でついてきます。
BLUEPRINT流れの設計図 — 章の役割と緩急
ローダー→全画面フォト・ヒーロー→持続レイヤー→火の思想→お品書き→皿を追う（Ken-Burns）→料理長→ご予約→アクセス／締め。各章が、成分表やこだわりを説明するより先に「料理の写真」と「炭火の温度」で食欲を立ち上げ、その熱量のまま予約へ運ぶよう設計されています。色は近黒と琥珀、差し色は深紅だけ。動きはすべて、ゆっくり寄る・じわり昇る、遅く暖かいテンポで統一。
- 00LOADER起 — 炭が一点、赤く熾る動
- 01HERO主張 — 全画面の湯気ごと季節をぶつける動
- 02持続レイヤー常 — 熾火カーソル・進捗・舞う火の粉が全篇を包む常
- 03HEARTH思想 — 「足さない」火の哲学と巨大な『火』動
- 04COURSE導入 — お品書きを一皿ずつたどる宣言動
- 05DISHES物語 — 三皿を左右交互＋Ken-Burnsで寄る動
- 06CHEF信頼 — 暗く沈めた写真の上で料理長が語る動
- 07RESERVE誘い — 「八席だけ」の希少性で予約へ動
- 08ACCESS / FOOTER結 — 火を落とすように静かに締める常
炭が一点、赤く熾る
狙い近黒の画面の中央に、炭火の一点だけが赤く脈打つ。その下に「KAMADO」のセリフ体ワードマークと「竈／炭火割烹」が静かに灯る。スピナーもパーセントも出さず、"火が熾る"というただ一つの比喩で店の主題を先に宣言する。読み込みが終われば必ずフェードして退場し、失敗してもタイマーで確実に消えるフェイルセーフ付き——コンテンツを恒久的に隠さない。
つなぎ開幕の一点の熾火が、以降ずっと画面に舞う「火の粉」と同じ温度・同じ色。最初のワンカットで、このサイト全体を貫く"暗くて暖かい"トーンをあらかじめ決めている。
全画面の湯気ごと、季節をぶつける
狙いファーストビューは全画面の実写料理写真——漆黒の器から湯気が立ち、背後で琥珀色の蝋燭が揺れる一皿。その上に暗いスクリム（ヴェール）を重ねて文字を読みやすくし、左下に「熾火に、季節を委ねる。」の見出しを置く。"季節"だけが琥珀→深紅のグラデーションで灯り、写真自体もごく低速でゆっくりズーム（ドリフト）し続ける。うんちくより先に、料理そのものを浴びせて食欲を起動する一画面。
つなぎ飲食店の説得は理屈ではなく食欲。だから最初に文字ではなく"湯気"を見せる。この一枚が「読む前に、まず美味しそう」という体験順序を全章に敷く。
熾火カーソル・進捗・舞う火の粉が、全篇を包む
狙い既定のカーソルは消され、琥珀色に発光する細いリングが遅延しながらポインターを追い、中心の小さな火の粒だけが即応する。画面上端には炭→炎→金のグラデーションの進捗バーが常駐。そして画面全体には、Canvasで描いた火の粉がゆっくりと上へ舞い、加算合成でほのかに光る。どれも主張しすぎず、"火のそばにいる"温度だけを常に敷き続ける持続レイヤー。モバイルや reduced-motion では重い火の粉を止め、体験を軽く保つ。
つなぎ章が切り替わっても、この熾火カーソルと舞う火の粉だけは消えない。写真が変わっても店の"温度"が一定に保たれ、暗い画面に温かみと生気を絶やさない。
「足さない」火の哲学と、巨大な『火』
狙い炭色に沈んだ帯へ切り替わり、背後には巨大な漢字『火』が深紅→琥珀のグラデーションで薄く浮かぶ。この一文字はスクロールに合わせて視差でゆっくり動く。左に「料理は足すのではない」という思想、右にその補足。下端では「熾す／炙る／待つ／SEAR／SMOKE／EMBER」のマーキーが横へ流れ続ける。写真を一旦引いて、店の"考え方"を言葉で刻む章。
つなぎヒーローで食欲を起動したあと、すぐ「なぜ美味いのか」の理由（炭・遠火・引き算）を差し込むことで、感覚的な欲求に理屈の裏付けを与える。感情→論理→再び皿、という緩急の"間"になっている。
お品書きを、一皿ずつたどる宣言
狙い「火を、一皿ずつたどる。」という大見出しと短いリード（"湯気ごと季節をお運びします"）で、続くコース章の読み方を宣言する。ここは写真を出さず、余白と見出しだけの短い導入セクション。次に来る三皿を"順に味わっていく"という時間の流れを、読み手の頭にセットする。
つなぎいきなり料理を並べず、まず「これから一皿ずつ見せます」という枠を渡す。この宣言があるおかげで、続くDishesが単なる写真の羅列ではなく"コース＝物語"として読まれる。
三皿を、左右交互＋Ken-Burnsで寄る
狙いコースの核。三皿（焼物・強肴・主菜）を、写真と品書きの2カラムで左右交互に配置する。各写真はスクロールで画面に入るあいだ、Ken-Burnsの要領でゆっくり拡大（scale 1.12→1.0）し、料理が"目の前へ寄ってくる"ように見える。皿の脇には「一・二・三」の巨大な漢数字が金の輪郭で置かれ、これも視差で遅れて動く。品名・使う炭・合わせる一杯までを短く添える。
つなぎ左右交互のジグザグはスクロールにリズムを生み、Ken-Burnsのズームは静止画に"動画のような寄り"を与える。写真一枚ごとに視線が近づくので、コースが進むほど食欲が積み上がっていく。
暗く沈めた写真の上で、料理長が語る
狙いヒーローと同じ料理写真を、今度はぐっと暗く沈め、深紅のグローを重ねた全画面背景として再利用する（背景はゆっくり視差でスクロール）。その上に「炭の前に立つと、手数は減る」という料理長の引用と、経歴・献立の考え方、署名を左寄せで置く。料理そのものではなく、"誰が焼くのか"という人への信頼を積む章。
つなぎ同じ一枚を明るいヒーローと暗いチェフ背景で二度使うことで、サイト全体が一皿の"温度"で貫かれる。皿→人と信頼の対象を移し、予約直前に「ここなら間違いない」を用意する。
「八席だけ」の希少性で、予約へ
狙い中央上から広がる琥珀のソフトなグローを背に、「その夜は、八席だけ。」の見出しと営業情報、そしてガラスパネル調の予約フォーム（名前・希望日・人数）を2カラムで置く。送信すると「一日二席・八席のうち空席をお調べしております…（デモ）」と静かに応える。カウントダウンで煽らず、"カウンター八席・一日二席"という数字の希少性だけで背中を押す。
つなぎ食欲（Hero〜Dishes）と信頼（Chef）を積んだ最後に、初めて行動を求める。煽らず、数字と暖かいグローだけで誘うことで、全篇の"上質な暗さ"を崩さずにコンバージョンへ運ぶ。
火を落とすように、静かに締める
狙い予約セクションの続きにアクセス（所在地・営業時間・連絡先）を三列で並べ、最後のフッターはブランドマーク、控えめなリンク、そして「wedelab ショーケースの架空デモ」という誠実な免責で締める。背景はほぼ真っ黒まで落ち、上端の進捗バーがちょうど100%に届く。舞う火の粉と熾火カーソルだけを残して、来たときと同じ暗く暖かいトーンで幕を引く。
つなぎ締めでも派手さを足さない。開幕の"一点の熾火"と同じ静けさへ戻ることで、サイト全体が「暗く・暖かく・寄る」で首尾一貫していたことが最後に腑に落ちる。
TAKEAWAY写真主体のダイニングで食欲を設計する5原則
KAMADOから取り出せる、飲食・食品・ホテルなど"シズルで売る"サイト全般に持ち帰れる設計則。#13 SUIREN の明るく引き算する高明度エディトリアルと読み比べると、同じ「写真主体・視差・リビール」という技法が、明暗の方向づけひとつで正反対の食感になることが分かります。
文字より先に、皿を出す
飲食の説得は理屈ではなく食欲。ファーストビューはコピーやロゴより、湯気の立つ料理写真そのものを全画面でぶつける。「読む前に、まず美味しそう」という体験順序を最初に作る。
暗さは"隠す"ではなく"照らす"
近黒の背景は手抜きの黒ではない。暗く落とすほど、料理に当たる一点の光と湯気、蝋燭の琥珀が際立つ。闇はスポットライトの舞台装置。写真の温度を最大化するために画面を沈める。
静止画に"寄り"を与える
Ken-Burnsのゆっくりズームと視差で、一枚の写真に動画のような接近を宿す。スクロールするほど料理が目の前へ寄ってくる感覚が、静的な品書きを"食べに行く"衝動へ変える。
色数を絞り、温度で統一する
近黒・琥珀・深紅の三色だけ。パレットを絞るほど、写真ごとに色が暴れず店の"温度"が一定になる。舞う火の粉や熾火カーソルという持続レイヤーが、暗い画面に温かみを絶やさない。
煽らず、数字で誘う
カウントダウンや割引で急かさず、「カウンター八席・一日二席」という希少性の数字だけで予約へ運ぶ。上質な暗さを崩さないためには、最後の一歩も静かな温度で設計する。