La Raffinerie
2つの店舗、1つのブランド。どちらも薄めることなく、両方に応えるサイトが必要でした。
- 年
- 2026
- 制作期間
- 4週間
- 技術スタック
- React · Vite · Tailwind · Framer Motion · Vercel
- デザイン
- 開発
- 複数店舗のローカルSEO
- ライティング
Kayzen WebがVercelのアドレスで公開しているデモ版です。正式なドメインはクライアントに帰属します。

- 店舗、ドメインはひとつ
- 2
- Lighthouseパフォーマンス
- 95/100
- Lighthouseアクセシビリティ
- 100/100
解決すべき課題。
背景
La Raffinerieは、クラフトビール、タパス、カクテルを楽しめるバーです。リヨン市内に、サックス(Saxe、リヨン3区)とヴェーズ(Vaise、リヨン9区)の2店舗を構えています。
制約
2店舗あると、ローカルSEOの典型的な問題が生じます。サイトを2つ作ればドメインの評価が分散し、1つにまとめれば地区単位のクエリで見えなくなります。さらに、ビールのメニューは常に入れ替わり、客は何を選べばよいか必ずしもわかっていません。
解決策
ドメインはひとつ、店舗ごとに専用のページを設け、それぞれに完全な店舗情報と固有のマークアップを持たせました。ビールのメニューはテイスティングガイドに生まれ変わりました。各ビールにスタイル、苦味、アルコール度数、おすすめのタパスとの組み合わせを添えています。一覧を並べるのではなく、提案するのです。
納品時に計測したスコア。
本番環境のサイトのLighthouseスコアです。数値はそのまま公開しています。低いスコアがあれば、その原因と改善計画を下に記載しており、伏せることはしません。
すべての判断に、理由がある。
一覧ではなくガイドを
スタイルと苦味で絞り込むフィルター、各ビールにおすすめのタパスとの組み合わせ。40種類の銘柄を前に迷う客は、いつもと同じものを頼むか、何も頼まないかのどちらかです。
店舗ごとに個性を
共通のグラフィックを土台に、サックス店とヴェーズ店それぞれに固有の写真、雰囲気、営業時間を用意しました。瓜二つのページが2つあれば、訪問者にもGoogleにも水増しのコンテンツと受け取られていたでしょう。
素材感を引き立てる動き
表示時のアニメーションが、泡、銅、スレートといった質感を際立たせます。ユーザーが「視差効果を減らす」を設定している場合は、完全に消えます。
プロジェクトのカラーパレット
スレート
#22262B
メインの背景
カッパー
#C0763C
アクション、アクセント
フォーム
#EFE6D4
テキスト、明るい面
ホップ
#6C7A3F
スタイルのラベル
タイポグラフィ体系
見出し用書体
Bebas Neue
本文用書体
Inter 400
見出しにはクラフトビールのブルワリーらしいコンデンスの大文字書体を使い、テイスティング情報には非常に読みやすいサンセリフ体を合わせてバランスをとっています。
その裏側にある技術。
- React
- Vite
- Tailwind
- Framer Motion
- Vercel
メニューはHTMLではなくデータで
ビールとタパスは型付きのデータファイルで管理しています。銘柄を追加しても、マークアップに手を入れる必要も、レイアウトを崩す心配もありません。
抑制の効いたアニメーション
Framer Motionは、実際にアニメーションを使うページでしか読み込まれません。情報ページ(アクセス、営業時間)では1行たりともダウンロードされません。
検索で見つけてもらうための仕組み。
2つの独立したLocalBusiness
各店舗が、住所、地理座標、営業時間を備えた独自のノードを持っています。2店舗を1つのブロックにまとめると、Googleは2つのビジネスプロフィールを正しく紐付けられなくなります。
地区単位のクエリ
「バー リヨン」ではなく、「ビアバー サックス」「バー ヴェーズ リヨン9区」。地区のページは、ブランドのページでは狙えない表現で勝負できます。
インデックス可能なテイスティングコンテンツ
ビールの紹介ページは実際の検索(「苦いIPA リヨン」「アンバービール タパス 組み合わせ」)に応え、店舗情報だけでは獲得できない発見型のトラフィックを呼び込みます。
誰もが使えるように。
2025年6月から、欧州アクセシビリティ法(European Accessibility Act)により、多くのオンラインサービスにデジタルアクセシビリティが義務づけられています。当社は後から対応するのではなく、設計段階から取り組んでいます。
インタラクティブなフィルターでも100/100
フィルターは押下状態が読み上げられるネイティブのボタンで、変更のたびに結果の件数がライブリージョンで通知されます。
納品したもの。
- トップ
- サックス(リヨン3区)— 完全な店舗情報
- ヴェーズ(リヨン9区)— 完全な店舗情報
- ビールガイド
- タパスとカクテル
- お問い合わせ
プロジェクトの流れ。
複数店舗の戦略
1ドメイン・2ページという判断、店舗ごとのマークアップ。
テイスティングコンテンツ
スタイル、苦味、組み合わせ。メニューがガイドになります。
デザイン
共通の土台、店舗ごとの個性。
開発
型付きデータ、オンデマンドで読み込むアニメーション。


