カウンターの寿司店（カッコイイ系）のWebデザイン見本

接待や記念日に、ちゃんとした寿司店を探している30〜50代。初めての店で「値段が分かるか」「堅苦しくないか」を気にする人。ひと目で店の気配（黒・橙・筆の文字）が伝わり、おまかせの流れと値段がはっきり読める。


業種	飲食・カフェ（寿司店）
系統	カッコイイ系（黒地・巨大な筆の文字・強いコントラスト・直線・切れのいい動き）
テイスト	スタイリッシュ／信頼感・誠実
色	オレンジ・黄（黒地に橙と金）
形	スマホのまま横に延長（PCでも1列。写真と帯は画面の端まで、文字の列だけ読みやすい幅）
スライド	CSSだけ（scroll-snap）（おまかせのコース3つ。矢印は `scrollBy` だけの JS）
メインビジュアル	文字が主役（タイポ）（画面いっぱいの「鮨」「橙」の2文字。写真は文字の上に乗る握り1貫だけ）
アニメーション	あり（GSAP＋ScrollTrigger）
演出の型	A08 巨大な文字に切り抜き写真が重なり、スクロールで左右に割れる／B08 PCでは左右を固定し、中央だけスマホ幅で流す／F01 写真が区切りの境目をまたいで置かれる
架空の店	「鮨橙（すしだいだい）」— カウンター7席、おまかせだけの寿司店

だれに向けたページか

接待や記念日に、ちゃんとした寿司店を探している30〜50代。初めての店で「値段が分かるか」「堅苦しくないか」を気にする人。 ひと目で店の気配（黒・橙・筆の文字）が伝わり、おまかせの流れと値段がはっきり読める。

メインビジュアル（タイポ＋A08）：画面いっぱいに橙の筆文字「鮨」「橙」が左右に並び、真ん中に切り抜きの握り1貫が重なる。スクロールすると2文字が左右に割れて、握りが少し大きくなり、割れ目から「握る、それだけ。」のコピーが出る
ごあいさつ（F01）：黒地の言葉の区切りと、生成りの紙の区切りの境目をまたいで職人の手の縦写真が置かれる
おまかせの流れ（B08）：PCでは画面を3列に分け、左右を固定、中央だけスマホ幅（440px）で流れる。左の舞台は巨大な数字（いま読んでいる品の番号）と品名、右の舞台は予約の案内。中央は一〜十の品を1つずつ。スマホでは中央の列だけ
コース（scroll-snap）：3つのコースの札を横に送る（値段は〇〇）
炭と酒（F01）：炭の写真が紙と黒の境目をまたぐ
カウンター：画面の端まで広がる店内の写真に、席数と時間
ご予約・店の情報：橙の帯に大きなボタン
フッター

JSや GSAP が無いとき：2文字は割れずに並んだまま、握りもその上に乗ったまま、コピーは下に見える。B08 は CSS の grid と sticky だけで成立する。全部読める
prefers-reduced-motion のときは、上と同じ「動かない版」
割れる動きはスクロールに合わせるだけ。画面は揺らさない
値段・席数・住所は見本の値（〇〇）。会員が本物に替える

CSSだけ：overflow-x: auto; scroll-snap-type: x mandatory。矢印は scrollBy だけの JS。

新しく作る：握り1貫（切り抜き）・職人の手・カウンター。写真庫から：会席の器（006）・炭（011）。