Les Halles de Lyon Paul Bocuse
60の店舗、1つの場所。サイトはショーケースであると同時に名鑑でもある必要がありました。
- 年
- 2026
- 制作期間
- 5週間
- 技術スタック
- Next.js · React · Tailwind · Vercel
- 情報設計
- デザイン
- 開発
- SEO
Kayzen WebがVercelのアドレスで公開しているデモ版です。正式なドメインはクライアントに帰属します。

- 掲載店舗数
- 60
- Lighthouseアクセシビリティ
- 97/100
- Lighthouseパフォーマンス目標の90を下回っています。60店舗を写真付きで掲載するディレクトリは本質的に重いものです。その重さを減らすこと(遅延読み込み、より軽量なフォーマット)が、次の改修での最優先課題です。
- 76/100
解決すべき課題。
背景
レ・アル・ド・リヨン ポール・ボキューズ(Halles de Lyon Paul Bocuse)には、精肉店、チーズ店、牡蠣・魚介店、パティスリーなど約60の店が集まり、その中には複数のフランス国家最優秀職人(MOF)がいます。Food & Wine誌では、世界で3番目に優れた市場に選ばれています。
制約
複数の店が集まる場所のサイトは、板挟みになりがちです。場所の話だけをすれば、特定の店を探す人の役に立ちません。単なる店舗一覧にすれば、訪れたくなる魅力がすべて失われます。初めて訪れる人にも、「市場のチーズ屋さん」を探している人にも応える必要がありました。
解決策
2つの層を重ねました。ひとつは、歴史、写真、雰囲気を伝える物語の層で、訪れたい気持ちを喚起します。もうひとつは、業種で絞り込めて、場所と営業時間を載せた60の店舗ページからなるディレクトリの層で、実用性を担います。前者が人を呼び込み、後者が引き留めるのです。
納品時に計測したスコア。
本番環境のサイトのLighthouseスコアです。数値はそのまま公開しています。低いスコアがあれば、その原因と改善計画を下に記載しており、伏せることはしません。
すべての判断に、理由がある。
店ごとに1ページ
業種、名物、市場内での場所、営業時間。ほとんどの場合欠けている情報で、訪問者はそのために通路をぐるぐる歩き回ることになります。
業種による絞り込み
精肉、チーズ、牡蠣・魚介、青果、ワイン、惣菜。訪問者が探しているのは店名ではなく、自分のニーズです。フィルターは、人が市場をどう捉えるかに沿っています。
全面写真、ただし節度をもって
歴史ある場所は見せるものです。画像は大きく丁寧に仕上げていますが、段階的に読み込まれます。ギャラリーが、探していたチーズ店のページの足を引っ張ることはありません。
プロジェクトのカラーパレット
マルシェレッド
#9B2C2C
アイデンティティ
タイルホワイト
#FAFAF8
背景
スレート
#2B2E33
テキスト
ブラス
#B99247
罫線とMOFのメダル
タイポグラフィ体系
見出し用書体
Playfair Display
本文用書体
Inter 400
歴史的な雰囲気にはセリフ体が、ディレクトリには詰まったサンセリフ体が必要です。両者はエリアごとに使い分け、同じブロック内で混在させることはありません。
その裏側にある技術。
- Next.js
- React
- Tailwind
- Vercel
構造化データによるディレクトリ
60の店は型付きのデータセットで管理されており、一覧、フィルター、フロアマップ、マークアップの唯一の情報源になっています。営業時間の変更は1か所で済みます。
パフォーマンス76:公言したトレードオフ
スコアは私たちの基準を下回っていますが、黙っているのではなく記録として残しています。原因は歴史的な写真のギャラリーの重さです。最初に取り組む最適化として、AVIFへの移行とギャラリーのより細かい分割を特定しています。
検索で見つけてもらうための仕組み。
業種ごとに1ページ
「チーズ店 ポール・ボキューズ市場」「牡蠣 リヨン」。各業種に店をまとめたページがあり、トップページでは狙えないクエリを獲得します。
場所と店舗のマークアップ
市場にはPlaceのノードを、各店にはそこに紐付いたLocalBusinessのノードを持たせています。検索エンジンにもAIアシスタントにも、階層構造が明確に伝わります。
誰もが使えるように。
2025年6月から、欧州アクセシビリティ法(European Accessibility Act)により、多くのオンラインサービスにデジタルアクセシビリティが義務づけられています。当社は後から対応するのではなく、設計段階から取り組んでいます。
フィルターと結果を読み上げる
フィルターを変更すると、ライブリージョン内の結果件数が更新されます。これがなければ、視覚に障害のあるユーザーは一覧が変わったことに気づけません。
納品したもの。
- トップ — 場所について
- 60の店 — 絞り込み可能なディレクトリ
- 業種別ページ
- 歴史と遺産
- アクセス、営業時間、フロアマップ
プロジェクトの流れ。
調査
60の店、業種、場所、営業時間。
アーキテクチャ
物語の層とディレクトリの層、業種別フィルター。
デザイン
歴史的な雰囲気、ギャラリー、店舗ページ。
SEO
業種別ページ、PlaceとLocalBusinessのマークアップ。


