計算・変換・診断・あそび
季節の一皿と席の予約に最短で届く、レストランサイト
既定: 静
季節の一皿 ― 9月
三陸の浅蜊を白ワインで開き、その煮汁だけで手打ちのリングイネを和えます。仕上げはイタリアンパセリと、薪火で焼いたレモンをひと搾り。
¥2,60010月中旬までの提供・数量限定
今月のメニューを見るStory
2016年、下北沢の路地裏で、料理人の堀内がトスカーナの山村から持ち帰った薪窯ひとつで店を始めました。ガスは置かず、火加減は薪の量と置き方だけ。同じ料理でも、その日の薪と天気で焼き上がりが変わります。
メニューは月ごと。市場で会った生産者の野菜や、猟師から届く肉をもとに、「いま一番おいしいもの」から逆算して組み立てます。カウンター8席と4卓、席数を増やさないのは、窯の前に立つ人間がひとりだからです。
樫と桜の薪だけ。火を起こすのは開店の3時間前。窯の温度は温度計ではなく、粉を落として測ります。
野菜は世田谷と千葉の畑から週2回。魚は市場の朝の電話で決めます。冷凍庫は小さいまま。
メニューは月初に入れ替え。「季節の一皿」は旬の3週間だけ。同じ皿は翌年まで出しません。
Reservation
カウンター8席と4卓の小さな店です。ご来店日と人数を選んでお申し込みください。当日中に、こちらから確定のご連絡を差し上げます。
当日のご予約と6名以上の貸切は、営業時間内に店頭でご相談ください。
Hours & Access
| 火〜金 | 18:00〜22:30L.O. 21:00 |
|---|---|
| 土・日・祝 | 11:30〜14:30L.O. 13:30 18:00〜22:30L.O. 21:00 |
| 定休日 | 月曜・第3火曜 |
年末年始（12/30〜1/4）と8月中旬に夏季休業があります。
下北沢駅 南西口から徒歩7分。茶沢通りを三軒茶屋方面へ、二つ目の角を右に入った突き当たりです。駐車場はありません。
番号は「解説を重ねる」で画面に出る番号と同じ。各カードの見本はそのまま触れます。
縮小ヘッダーShrinking Sticky Header
どこで 透過→縮小するヘッダー
上端ではヒーローの炎を邪魔しない透明、読み進めたら地色と影を付けて「手前にある」ことを示す。高さはほぼ変えず本文をガタつかせない
図鑑で見る（仕様書・コード）→ハンバーガーメニューHamburger Menu
どこで スマホのメニュー
390px 幅ではナビ5項目が収まらない。ロゴと予約ボタンだけ常設し、ナビは右から出るドロワーへ退かせる
図鑑で見る（仕様書・コード）→1画面1メッセージのヒーローOne Message Per Screen Hero
どこで ヒーローの構成
店名・一言・主ボタン1つ以外を置かない。3秒で「薪火のイタリアン」「予約してほしい」が伝わる状態を作る
図鑑で見る（仕様書・コード）→スプリットスクリーンSplit Screen
どこで 季節の一皿
皿の面と言葉を半々に置き、狭い幅では皿を上に積む。写真主役の店で「一皿を大きく」を最も素直に叶える構図
図鑑で見る（仕様書・コード）→画像ズーム＋タイトルImage Zoom on Hover
どこで 皿の写真のホバー
ホバーで皿がわずかに寄り、料理名が現れる。写真が「押せる」ことを動きで伝え、メニューへ送る
図鑑で見る（仕様書・コード）→下線スライドタブAnimated Tabs
どこで コース／アラカルト
同列の2種類を1画面で切り替える。下線の横移動で今どちらを見ているかが分かり、パネルは display:none で読み上げからも外す
図鑑で見る（仕様書・コード）→スタッガー出現Staggered Reveal
どこで 3つの柱の登場
薪火・素材・季節の3枚を順に出して読み順を示す。動モードだけで、静では最初から並んでいる
図鑑で見る（仕様書・コード）→フェードイン出現Scroll Reveal (Fade In Up)
どこで 物語の本文の出現
スクロールで来歴の本文が下から浮かぶ。1回だけの出現に留め、読んでいる最中に動くものを作らない
図鑑で見る（仕様書・コード）→メイソンリーMasonry Layout
どこで ギャラリーの格子
縦長と正方形の「写真」を隙間なく積む。Instagram の投稿を並べる面として、読み順が厳密でなくてよい
図鑑で見る（仕様書・コード）→ライトボックスLightbox
どこで 写真をタップで拡大
ページを離れずその場で1枚を大きく見せる。閉じたら開いたタイルへフォーカスを戻し、Esc と暗幕クリックでも閉じる
図鑑で見る（仕様書・コード）→日付ピッカーDate Picker
どこで ご来店日の入力
日付の書式を覚えさせず、今日以降だけを押せるカレンダーで選ばせる。矢印キーで日を移動できる
図鑑で見る（仕様書・コード）→セグメンテッドコントロールSegmented Control
どこで 人数の選択
1〜5名以上の4択を横一列で。ピルが滑って選択の移動を伝え、Tab 1回で通り抜けられる
図鑑で見る（仕様書・コード）→安心の一言つき CTA 帯CTA Band with Reassurance
どこで 予約の主ボタン
押す前の不安（キャンセル料・返信の速さ・アレルギー）に一言ずつ答え、主ボタンは1つだけにする
図鑑で見る（仕様書・コード）→スクロールで現れる固定CTAScroll-Revealed Sticky CTA
どこで スマホの下部の予約帯
ヒーローの予約ボタンが画面から消えたら下から帯を出す。予約セクションとフッターが見えている間は引っ込める
図鑑で見る（仕様書・コード）→アコーディオンAccordion
どこで よくある質問
子ども連れ・アレルギー・貸切の3問を閉じた状態で並べ、必要な人だけ開く。開閉の高さ変化は動モードだけ
図鑑で見る（仕様書・コード）→サイトマップ型フッターSitemap Footer
どこで フッター
メニュー・店について・ご予約の3列に整理し、法務リンクと © を最下段に。ページ内の全導線をここでもう一度示す
図鑑で見る（仕様書・コード）→見た目を真似た先ではなく、型の使われ方を観察した先。コード・写真・文章は転載していません。
調査した8サイトのうち5サイトが、予約や注文の導線を外部サービスへの1つのボタンに集約していた。電話番号・予約サイト・問い合わせフォームを並べると「どれで予約すればいいのか」を客に考えさせる。そこでこのサンプルでは、ヘッダー常設・ヒーロー・スマホの下部帯・フッターの4か所すべてが同じ予約セクションへ送る構成にし、予約セクション自体も日付・人数・時間・名前の4項目に留めた。主ボタンの周りに置いた「前日までキャンセル無料」などの3つの一言は、押す直前の不安に先回りして答えるためのもので、装飾ではない。
レストランのサイトは料理の写真を見に来る場所で、動きは写真の邪魔になりやすい。既定を静にし、動モードでも足したのは①スクロールで一度だけ現れる出現、②皿のホバーで少し寄る応答、③ヘッダーの縮小、④ヒーローの炎の揺らぎ、の4つだけ。炎だけは店の名前（Fuoco＝火）そのものなので唯一のループ装飾として残したが、prefers-reduced-motion では止まる。タブの下線やピルの移動は「意味のある動き」だが、静モードでは250ms以内に収めて、動いたことより「切り替わったこと」が先に分かるようにした。
このサンプルは外部画像を読み込めないので、皿や炎は CSS のグラデーションと inline SVG で描いた。雑にすると素人っぽさが一気に出るため、皿は「リム・影・具材の色面3色・ソースの線」の5要素に絞り、ギャラリーの8枚も1枚ごとに地色と形を1〜2個だけ置いて「何の写真か」が読めるようにした。実サイトで写真に差し替えるときは、この面がそのまま aspect-ratio 付きの img に置き換わる想定で、レイアウトは写真の縦横比（皿は1:1、格子は1:1と4:5）を前提に組んである。
Burrito Madre や NELU は料理名を h2/h3 の見出しとして本文に持たせていた。画像のメニュー表や PDF は検索エンジンにも読み上げにも届かないし、スマホでは拡大しないと読めない。ここでは料理名を h3、説明と価格を本文にして、コース／アラカルトの切替だけタブに任せた。タブは非選択側を display:none にして、見えない料理名に Tab が入る事故を構造で防いでいる。「本日の」と銘打つ以上は日付を明記し、入荷で変わる旨も添えた。
見本の写真は商用利用できるライセンス（CC0・パブリックドメイン・CC BY）の作品です。リサイズと WebP への変換を施しています。 店名・価格・文章は架空で、写真の作者とは関係ありません。
