バー・飲食

La Raffinerie

2つの店舗、1つのブランド。どちらも薄めることなく、両方に応えるサイトが必要でした。

年
2026
制作期間
4週間
技術スタック
React · Vite · Tailwind · Framer Motion · Vercel
  • デザイン
  • 開発
  • 複数店舗のローカルSEO
  • ライティング

Kayzen WebがVercelのアドレスで公開しているデモ版です。正式なドメインはクライアントに帰属します。

https://la-raffinerie-lyon.vercel.app/
La RaffinerieのWebサイトのトップページ――バー・飲食、Kayzen Web制作
店舗、ドメインはひとつ
2
Lighthouseパフォーマンス
95/100
Lighthouseアクセシビリティ
100/100
出発点

解決すべき課題。

背景

La Raffinerieは、クラフトビール、タパス、カクテルを楽しめるバーです。リヨン市内に、サックス(Saxe、リヨン3区)とヴェーズ(Vaise、リヨン9区)の2店舗を構えています。

制約

2店舗あると、ローカルSEOの典型的な問題が生じます。サイトを2つ作ればドメインの評価が分散し、1つにまとめれば地区単位のクエリで見えなくなります。さらに、ビールのメニューは常に入れ替わり、客は何を選べばよいか必ずしもわかっていません。

解決策

ドメインはひとつ、店舗ごとに専用のページを設け、それぞれに完全な店舗情報と固有のマークアップを持たせました。ビールのメニューはテイスティングガイドに生まれ変わりました。各ビールにスタイル、苦味、アルコール度数、おすすめのタパスとの組み合わせを添えています。一覧を並べるのではなく、提案するのです。

自己申告ではなく、計測値

納品時に計測したスコア。

本番環境のサイトのLighthouseスコアです。数値はそのまま公開しています。低いスコアがあれば、その原因と改善計画を下に記載しており、伏せることはしません。

PageSpeed
95
パフォーマンス:100点中95点
100
アクセシビリティ:100点中100点
96
ベストプラクティス:100点中96点
100
SEO:100点中100点
デザイン・アートディレクション

すべての判断に、理由がある。

  1. 一覧ではなくガイドを

    スタイルと苦味で絞り込むフィルター、各ビールにおすすめのタパスとの組み合わせ。40種類の銘柄を前に迷う客は、いつもと同じものを頼むか、何も頼まないかのどちらかです。

  2. 店舗ごとに個性を

    共通のグラフィックを土台に、サックス店とヴェーズ店それぞれに固有の写真、雰囲気、営業時間を用意しました。瓜二つのページが2つあれば、訪問者にもGoogleにも水増しのコンテンツと受け取られていたでしょう。

  3. 素材感を引き立てる動き

    表示時のアニメーションが、泡、銅、スレートといった質感を際立たせます。ユーザーが「視差効果を減らす」を設定している場合は、完全に消えます。

プロジェクトのカラーパレット

  • スレート

    #22262B

    メインの背景

  • カッパー

    #C0763C

    アクション、アクセント

  • フォーム

    #EFE6D4

    テキスト、明るい面

  • ホップ

    #6C7A3F

    スタイルのラベル

タイポグラフィ体系

見出し用書体

Bebas Neue

本文用書体

Inter 400

見出しにはクラフトビールのブルワリーらしいコンデンスの大文字書体を使い、テイスティング情報には非常に読みやすいサンセリフ体を合わせてバランスをとっています。

エンジニアリング

その裏側にある技術。

  • React
  • Vite
  • Tailwind
  • Framer Motion
  • Vercel
  1. メニューはHTMLではなくデータで

    ビールとタパスは型付きのデータファイルで管理しています。銘柄を追加しても、マークアップに手を入れる必要も、レイアウトを崩す心配もありません。

  2. 抑制の効いたアニメーション

    Framer Motionは、実際にアニメーションを使うページでしか読み込まれません。情報ページ(アクセス、営業時間)では1行たりともダウンロードされません。

SEO対策

検索で見つけてもらうための仕組み。

  1. 2つの独立したLocalBusiness

    各店舗が、住所、地理座標、営業時間を備えた独自のノードを持っています。2店舗を1つのブロックにまとめると、Googleは2つのビジネスプロフィールを正しく紐付けられなくなります。

  2. 地区単位のクエリ

    「バー リヨン」ではなく、「ビアバー サックス」「バー ヴェーズ リヨン9区」。地区のページは、ブランドのページでは狙えない表現で勝負できます。

  3. インデックス可能なテイスティングコンテンツ

    ビールの紹介ページは実際の検索(「苦いIPA リヨン」「アンバービール タパス 組み合わせ」)に応え、店舗情報だけでは獲得できない発見型のトラフィックを呼び込みます。

アクセシビリティ

誰もが使えるように。

2025年6月から、欧州アクセシビリティ法(European Accessibility Act)により、多くのオンラインサービスにデジタルアクセシビリティが義務づけられています。当社は後から対応するのではなく、設計段階から取り組んでいます。

  1. インタラクティブなフィルターでも100/100

    フィルターは押下状態が読み上げられるネイティブのボタンで、変更のたびに結果の件数がライブリージョンで通知されます。

サイト構成

納品したもの。

  • トップ
  • サックス(リヨン3区)— 完全な店舗情報
  • ヴェーズ(リヨン9区)— 完全な店舗情報
  • ビールガイド
  • タパスとカクテル
  • お問い合わせ
進め方

プロジェクトの流れ。

  1. 複数店舗の戦略

    1ドメイン・2ページという判断、店舗ごとのマークアップ。

  2. テイスティングコンテンツ

    スタイル、苦味、組み合わせ。メニューがガイドになります。

  3. デザイン

    共通の土台、店舗ごとの個性。

  4. 開発

    型付きデータ、オンデマンドで読み込むアニメーション。

Q&A

よくいただくご質問。

ドメインは1つにして、店舗ごとに完全なページを設けます。ドメインを2つにすると評価が分散し、自分自身と競うことになります。1ページだけにすると、コンバージョンにつながる地区単位のクエリで見えなくなります。

同じ水準のこだわりを、あなたのサイトにも。

現在のサイトの無料診断、24時間以内のお見積もり、そして今お読みいただいたような書面での解説をお届けします。3回分割払い(手数料無料)に対応し、利用できる地域の補助金は契約前に確認します。

共有