Maison Victoire
Halles Paul Bocuseの一店舗。地元の人にも観光客にも語りかけるサイトが必要でした。
- 年
- 2026
- 制作期間
- 3週間
- 技術スタック
- Next.js · React · Tailwind · Vercel
- デザイン
- 開発
- 2か国語対応
- ローカルSEO
- ライティング
Kayzen WebがVercelのアドレスで公開しているデモ版です。正式なドメインはクライアントに帰属します。

- 言語、実在する2つのディレクトリ構造
- 2
- Lighthouseアクセシビリティ
- 97/100
- Lighthouse SEO私たちのSEOスコアの中で最も低い2つのうちの1つです。2か国語サイトにはまだ未解決の監査項目(リンクとdescriptionタグ)が残っています。修正計画に組み込んであり、次回の改修後にスコアを再公開します。
- 92/100
解決すべき課題。
背景
Maison Victoireは、1990年からレ・アル・ド・リヨン ポール・ボキューズ(Halles de Lyon Paul Bocuse)に店を構えています。プラリーヌ入りのブリオッシュ(brioche aux pralines)は、この店の代名詞となっている名物です。
制約
共通点のない2つの客層がいます。リヨンの地元客は店を知っていて、注文のためにやって来ます。一方、観光客は初めて市場を訪れ、お土産を探していて、必ずしもフランス語が読めるわけではありません。両者に向けた1つのページでは、どちらも納得させられなかったでしょう。
解決策
2か国語のサイトを作り、看板商品を入り口として位置づけました。プラリーヌ入りのブリオッシュには専用のページがあり、その歴史、製法、保存方法、そして店頭受け取りの予約ボタンを載せています。観光客を引きつけ、常連客を安心させるのがこのページです。
納品時に計測したスコア。
本番環境のサイトのLighthouseスコアです。数値はそのまま公開しています。低いスコアがあれば、その原因と改善計画を下に記載しており、伏せることはしません。
すべての判断に、理由がある。
商品そのものの色
プラリーヌのローズ、クリーム、焼き色のブラウン。配色はデザインガイドラインから押し付けたものではなく、商品そのものから抽出しました。食の仕事では、商品こそがアイデンティティをつくります。
看板商品を入り口に
プラリーヌ入りのブリオッシュ専用のページに、その物語と保存方法を載せています。トップページでは狙えない、リヨン名物を探す検索への答えとなるページです。
目に見える言語切り替え
言語の切り替えはフッターではなくヘッダーにあります。3秒で見つけられなければ、海外からの訪問者はページを離れてしまいます。
プロジェクトのカラーパレット
プラリーヌローズ
#C4405C
アイデンティティ、アクセント
クリーム
#FBF4E9
背景
クラストブラウン
#6B4327
見出し
ソフトゴールド
#D9A441
細部
タイポグラフィ体系
見出し用書体
Cormorant Garamond
本文用書体
Karla 400
店名には優雅なセリフ体、本文にはヒューマニスト系のグロテスク体。職人の仕事らしさを、古めかしさなしに表現しています。
その裏側にある技術。
- Next.js
- React
- Tailwind
- Vercel
Cookieではなく、URLによる2か国語対応
/fr/と/en/は実在する2つのディレクトリ構造で、相互にhreflangタグを設定しています。クライアント側で切り替える方式では、インデックスされるURLが1つだけになり、検索に表示されるのも1つのバージョンだけになっていたでしょう。
店頭受け取りの予約
受け取り時間帯を選べる注文フォームで、オンライン決済はありません。店頭で受け取る注文のために、パン屋に決済の導線は必要ありません。手数料と離脱が増えるだけです。
検索で見つけてもらうための仕組み。
市場の知名度を活かす
「パン屋 ポール・ボキューズ市場」「プラリーヌ ブリオッシュ リヨン」「リヨン名物 お土産」。店名よりも強いブランドである場所そのものでポジショニングしています。
完全なhreflang
各ページが、代替言語のバージョンと自身のcanonicalを宣言しています。多くの2か国語サイトがつまずくのはここで、その結果、Googleが1つの言語しかインデックスしなくなります。
Bakeryのマークアップ
営業時間、住所、価格帯を含むBakery型。Googleはこの型を区別し、ローカル検索の結果で異なる形で表示します。
納品したもの。
- トップ(FR / EN)
- プラリーヌ入りのブリオッシュ
- 商品紹介
- 店頭受け取りの予約
- 1990年からの歩み
- 市場へのアクセス
プロジェクトの流れ。
ポジショニング
2つの客層を特定し、看板商品を入り口に選定。
2か国語対応
/fr/と/en/のディレクトリ構造、相互のhreflang。
デザイン
商品から抽出した配色、看板商品のページ。
予約
受け取り時間帯の選択、オンライン決済なし。


