美食・文化遺産

Les Halles de Lyon Paul Bocuse

60の店舗、1つの場所。サイトはショーケースであると同時に名鑑でもある必要がありました。

年
2026
制作期間
5週間
技術スタック
Next.js · React · Tailwind · Vercel
  • 情報設計
  • デザイン
  • 開発
  • SEO

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

https://halles-paul-bocuse-master.vercel.app/
Les Halles de Lyon Paul BocuseのWebサイトのトップページ――美食・文化遺産、Kayzen Web制作
掲載店舗数
60
Lighthouseアクセシビリティ
97/100
Lighthouseパフォーマンス目標の90を下回っています。60店舗を写真付きで掲載するディレクトリは本質的に重いものです。その重さを減らすこと(遅延読み込み、より軽量なフォーマット)が、次の改修での最優先課題です。
76/100
出発点

解決すべき課題。

背景

レ・アル・ド・リヨン ポール・ボキューズ(Halles de Lyon Paul Bocuse)には、精肉店、チーズ店、牡蠣・魚介店、パティスリーなど約60の店が集まり、その中には複数のフランス国家最優秀職人(MOF)がいます。Food & Wine誌では、世界で3番目に優れた市場に選ばれています。

制約

複数の店が集まる場所のサイトは、板挟みになりがちです。場所の話だけをすれば、特定の店を探す人の役に立ちません。単なる店舗一覧にすれば、訪れたくなる魅力がすべて失われます。初めて訪れる人にも、「市場のチーズ屋さん」を探している人にも応える必要がありました。

解決策

2つの層を重ねました。ひとつは、歴史、写真、雰囲気を伝える物語の層で、訪れたい気持ちを喚起します。もうひとつは、業種で絞り込めて、場所と営業時間を載せた60の店舗ページからなるディレクトリの層で、実用性を担います。前者が人を呼び込み、後者が引き留めるのです。

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

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

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

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

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

  1. 店ごとに1ページ

    業種、名物、市場内での場所、営業時間。ほとんどの場合欠けている情報で、訪問者はそのために通路をぐるぐる歩き回ることになります。

  2. 業種による絞り込み

    精肉、チーズ、牡蠣・魚介、青果、ワイン、惣菜。訪問者が探しているのは店名ではなく、自分のニーズです。フィルターは、人が市場をどう捉えるかに沿っています。

  3. 全面写真、ただし節度をもって

    歴史ある場所は見せるものです。画像は大きく丁寧に仕上げていますが、段階的に読み込まれます。ギャラリーが、探していたチーズ店のページの足を引っ張ることはありません。

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

  • マルシェレッド

    #9B2C2C

    アイデンティティ

  • タイルホワイト

    #FAFAF8

    背景

  • スレート

    #2B2E33

    テキスト

  • ブラス

    #B99247

    罫線とMOFのメダル

タイポグラフィ体系

見出し用書体

Playfair Display

本文用書体

Inter 400

歴史的な雰囲気にはセリフ体が、ディレクトリには詰まったサンセリフ体が必要です。両者はエリアごとに使い分け、同じブロック内で混在させることはありません。

エンジニアリング

その裏側にある技術。

  • Next.js
  • React
  • Tailwind
  • Vercel
  1. 構造化データによるディレクトリ

    60の店は型付きのデータセットで管理されており、一覧、フィルター、フロアマップ、マークアップの唯一の情報源になっています。営業時間の変更は1か所で済みます。

  2. パフォーマンス76:公言したトレードオフ

    スコアは私たちの基準を下回っていますが、黙っているのではなく記録として残しています。原因は歴史的な写真のギャラリーの重さです。最初に取り組む最適化として、AVIFへの移行とギャラリーのより細かい分割を特定しています。

SEO対策

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

  1. 業種ごとに1ページ

    「チーズ店 ポール・ボキューズ市場」「牡蠣 リヨン」。各業種に店をまとめたページがあり、トップページでは狙えないクエリを獲得します。

  2. 場所と店舗のマークアップ

    市場にはPlaceのノードを、各店にはそこに紐付いたLocalBusinessのノードを持たせています。検索エンジンにもAIアシスタントにも、階層構造が明確に伝わります。

アクセシビリティ

誰もが使えるように。

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

  1. フィルターと結果を読み上げる

    フィルターを変更すると、ライブリージョン内の結果件数が更新されます。これがなければ、視覚に障害のあるユーザーは一覧が変わったことに気づけません。

サイト構成

納品したもの。

  • トップ — 場所について
  • 60の店 — 絞り込み可能なディレクトリ
  • 業種別ページ
  • 歴史と遺産
  • アクセス、営業時間、フロアマップ
進め方

プロジェクトの流れ。

  1. 調査

    60の店、業種、場所、営業時間。

  2. アーキテクチャ

    物語の層とディレクトリの層、業種別フィルター。

  3. デザイン

    歴史的な雰囲気、ギャラリー、店舗ページ。

  4. SEO

    業種別ページ、PlaceとLocalBusinessのマークアップ。

Q&A

よくいただくご質問。

隠してもサイトはよくならないからです。このスコアは大容量の歴史的写真ギャラリーによるもので、原因は特定済みであり、最適化の計画も書き上げてあります。95点ばかりを見せるポートフォリオからは、誰も何も学べません。

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

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

共有