Chez Mounier
1985年から続くブション。サイトもまた、同じだけ昔からそこにあるように見える必要がありました。
- 年
- 2026
- 制作期間
- 2週間
- 技術スタック
- React · Vite · Tailwind · Vercel
- デザイン
- 開発
- ローカルSEO
- ライティング
Kayzen WebがVercelのアドレスで公開しているデモ版です。正式なドメインはクライアントに帰属します。

- 開業年
- 1985
- 代にわたる家族経営
- 3
- Lighthouseアクセシビリティ・SEO
- 100/100
解決すべき課題。
背景
Chez Mounierは、リヨン2区のマロニエ通り(rue des Marronniers)にある家族経営のブション(リヨンの伝統的な大衆食堂)です。1985年に開業し、3代にわたって受け継がれてきました。クネル、タブリエ・ド・サプール(牛の胃袋のフライ)、リヨン風サラダなど、料理はすべて自家製です。
制約
ブションは型の決まったジャンルであり、その客層は新しいものを警戒します。現代的すぎるサイトは嘘っぽく響き、料理の本物らしさまで疑わせてしまったでしょう。求められたのは、技術は現代的で、見た目は時代を超えたサイトでした。
解決策
本物であることは細部で証明されます。メニューには自家製の料理を一皿ずつ明記し、「お店について」のページでは3代の歩みを年号とともに語ります。そして予約は電話のままにしました。このレストランはそうやって営業しているからです。電話に出てくれる店に、フォームを押し付けることはしません。
納品時に計測したスコア。
本番環境のサイトのLighthouseスコアです。数値はそのまま公開しています。低いスコアがあれば、その原因と改善計画を下に記載しており、伏せることはしません。
すべての判断に、理由がある。
ギンガムチェックのテーブルクロス、ただし模倣はしない
深い赤、オフホワイト、セクションの背景に控えめな模様。ブションの記号は引用するにとどめ、文字どおりに模倣することはしません。模倣は見透かされ、逆効果になるからです。
自家製であることを、一皿ずつ
店内で調理される料理にはすべて、その旨が記されています。温め直すだけの店に対するブションの最大の強みであり、1行ずつ確かめられるものでなければなりませんでした。
電話を主要なアクションに
電話ボタンを最初に置き、モバイルでは常に表示しています。オンライン予約のモジュールを加えていたら、店が確認しないチャネルが生まれていたでしょう。お客様にとって最悪のシナリオです。
プロジェクトのカラーパレット
ブションレッド
#8C2E2E
アイデンティティ
オフホワイト
#F7F3EC
背景
インク
#231F1D
テキスト
オリーブグリーン
#5E6440
サブセクション
タイポグラフィ体系
見出し用書体
Bitter 700
本文用書体
Inter 400
見出しには、黒板のメニューのような読みやすさを持つ温かみのあるスラブセリフ体を、メニューにはニュートラルなサンセリフ体を使っています。
その裏側にある技術。
- React
- Vite
- Tailwind
- Vercel
静的サイト、無料のホスティング
アプリケーションサーバーもデータベースもありません。年間の運用コストはドメイン名の費用だけです。
型付きのメニュー
料理、価格、「自家製」の表記はデータファイルで管理しています。季節ごとの更新で、HTMLに手を入れる必要はありません。
検索で見つけてもらうための仕組み。
「リヨンのブション マロニエ通り」
マロニエ通りは、それ自体が目的地です。市ではなく通りでポジショニングすることで、半径200メートル以内で今すぐ店を選ぼうとしている検索意図を捉えます。
名物料理をインデックス対象に
「自家製クネル リヨン」「タブリエ・ド・サプール」。各名物料理を構造化されたコンテンツの中で名指ししています。食事の計画を立てる観光客が検索するクエリです。
誰もが使えるように。
2025年6月から、欧州アクセシビリティ法(European Accessibility Act)により、多くのオンラインサービスにデジタルアクセシビリティが義務づけられています。当社は後から対応するのではなく、設計段階から取り組んでいます。
テクスチャのある背景でも100/100
背景の模様は十分に淡くし、すべてのテキストが4.5:1を保てるようにしています。装飾のための模様が、コントラストを1ポイントでも犠牲にしてはなりません。
納品したもの。
- トップ
- メニュー
- 1985年からの歩み
- アクセスと営業時間
- 予約(電話)
プロジェクトの流れ。
トーン
模倣せずに引用したブションの記号、店独自の言葉遣い。
コンテンツ
自家製の表記を付けたメニュー、3代の物語。
開発
静的サイト、型付きのメニュー、電話を主要アクションに。


