Grand Café du Commerce
フレームワークもCMSも使わない。街のブラスリーに工場は要りません。
- 年
- 2026
- 制作期間
- 2週間
- 技術スタック
- HTML/CSS · JavaScript · Google Analytics · Vercel
- デザイン
- 開発
- ローカルSEO
- アクセス解析
Kayzen WebがVercelのアドレスで公開しているデモ版です。正式なドメインはクライアントに帰属します。
- Lighthouseパフォーマンス
- 93/100
- 外部依存
- 0
- HTML以外のリクエスト数
- 2
- Lighthouse SEO
- 100/100
解決すべき課題。
背景
Le Grand Café du Commerceは、リヨン9区ヴェーズ（Vaise）地区にあるブラッスリーです。地元の客、昼の常連、夜のテーブル客に親しまれています。
制約
以前のサイトは、レスポンシブ対応していない1ページだけのもので、営業時間も更新されていませんでした。本当に必要なものは3行で言い表せます。メニュー、営業時間、予約の手段。それ以外はすべて、見返りのない出費になるところでした。
解決策
HTML、CSS、そして少しのJavaScript。フレームワークもCMSもデータベースもありません。結果として、サイトは瞬時に表示され、セキュリティアップデートも不要で、ホスティング費用はゼロ円です。メニューはファイルを直接書き換えるだけで更新できます。
納品時に計測したスコア。
本番環境のサイトのLighthouseスコアです。数値はそのまま公開しています。低いスコアがあれば、その原因と改善計画を下に記載しており、伏せることはしません。
すべての判断に、理由がある。
美食レストランではなく、ブラッスリーらしさを
力強いタイポグラフィ、ボルドーとクリームの配色、シンプルな料理写真。洗練されすぎたデザインにしていたら、売上の柱である昼の客を遠ざけていたでしょう。
営業時間を最初の画面に
7行の表ではなく、「22時まで営業」とリアルタイムで計算して表示します。最もよく聞かれる質問には、解釈が必要な資料ではなく、答えそのものを返すべきです。
メニューはHTMLで、PDFにはしない
PDFのメニューはスマートフォンでは読めず、インデックスされず、スクリーンリーダーでも読み上げられません。メニューは価格も含めて、構造化されたHTMLページになっています。
プロジェクトのカラーパレット
ボルドー
#6E2436
アイデンティティ、見出し
クリーム
#F6F0E4
背景
インク
#211E1C
テキスト
ブラス
#B08A4A
罫線と細部
タイポグラフィ体系
見出し用書体
Libre Baskerville
本文用書体
Source Sans 3
ブラッスリーの看板を思わせるクラシックなセリフ体は見出しだけに使い、本文は画面向けのサンセリフ体にしています。
その裏側にある技術。
- HTML/CSS
- JavaScript
- Google Analytics
- Vercel
依存関係ゼロ
更新すべきライブラリがないので、6か月後に修正すべき脆弱性もありません。毎月保守されるわけではないレストランのサイトにとって、これが最も責任ある選択です。
CSSファイルひとつ、JSファイルひとつ
HTMLのほかにリクエストは2つだけ。フレームワークで作ったサイトがバンドルの解析を終える前に、このサイトは表示を完了しています。
同意に基づくアクセス解析
Google Analyticsは、明示的に承諾された後にのみ読み込まれます。同意がなければサードパーティのスクリプトは一切呼び出されません。これは親切心による選択肢ではなく、CNIL（フランスのデータ保護機関）のルールです。
検索で見つけてもらうための仕組み。
「ブラッスリー ヴェーズ」「レストラン リヨン9区」
ローカルSEOは、市よりも先に地区を狙います。そこでは競合は10分の1、検索意図は10倍強いからです。
構造化された営業時間
JSON-LDのopeningHoursSpecification。Googleが表示する「営業中 · 22時に閉店」の情報源はこれであり、確認のための電話を減らしてくれます。
誰もが使えるように。
2025年6月から、欧州アクセシビリティ法（European Accessibility Act）により、多くのオンラインサービスにデジタルアクセシビリティが義務づけられています。当社は後から対応するのではなく、設計段階から取り組んでいます。
後付けの手間なしで97/100
シンプルなサイトは、アクセシブルにするのも簡単です。セマンティックなHTML、確認済みのコントラスト、ネイティブのキーボード操作。後から修正すべきことは何もありませんでした。
納品したもの。
- トップ
- メニュー
- 予約
- アクセスと営業時間
- お問い合わせ
プロジェクトの流れ。
要件定義
3つのニーズを特定し、それ以外はすべて除外。
デザイン
ブラッスリーらしい雰囲気、動的な営業時間表示、HTMLのメニュー。
開発
依存関係のないHTML/CSS/JS、計測前の同意取得。
