COMPANY
会社HP — ふたつの光が2店を照らす
トップページは、ふたつの光が夜の画面をめぐって BUCKS と Road のパネルを照らし、社名が浮かび上がる演出から始まります。演出はCSSだけで作り、動きを減らす設定の端末では最初から完成した画面を表示します。
SHOPS
店舗サイト — 店ごとに違う夜の表情
BUCKS と Road は、それぞれのロゴと実際の店内写真を使った店舗サイトです。どちらも トップ・メニュー/料金・店内・アクセス の4ページ構成で、営業時間や設備はファーストビューにまとめています。
担当範囲
会社HP（トップ・会社概要・店舗一覧・お問い合わせ）
Cafe & BAR BUCKS 店舗サイト（トップ・メニュー/料金・店内・アクセス）
BAR Road 店舗サイト（トップ・メニュー/料金・店内・アクセス）
独自ドメインでの公開（Vercel）と、旧URLからの301リダイレクト
SEO（ページごとの title / description・構造化データ・OGP・sitemap.xml）
スマホ用のハンバーガーメニュー
設計・実装で工夫した点
初版のあと、別案3つを比べて選び直す
まず初版を作り、何度も修正を重ねました。そのうえで出発点の違う別案を3つ出して並べて比べ、店舗サイトは参考サイトを起点にした案、会社HPはコンセプトを起点にした案を採用して、そこから全ページを作り込んでいます。
スマホ優先の設計
2店舗の営業時間がスマホの1画面目で伝わるよう、会社HPのトップでは狭い画面でも2店を左右に並べています。メニューは右上のハンバーガーにまとめ、本文の邪魔をしないようにしました。
ページを移るときのアニメーション
会社HPでは View Transitions API を使い、ページを移るときに画面が途切れず切り替わるようにしました。設定は各ページの head に直接書いて遷移が確実に発火するようにし、動きを減らす設定の端末では切り替え演出を止めています。
料金の条件は、価格のすぐ隣に
飲み放題の「時間無制限」などの表示には、適用される条件を同じ枠の中に併記しています。注記を別の場所にまとめず、価格と条件が同時に目に入るようにしました。