Au P'tit Zinc
写真が主役のサイトで、パフォーマンス95、アクセシビリティ100。それが課題でした。
- 年
- 2026
- 制作期間
- 3週間
- 技術スタック
- Next.js · React · Tailwind · Vercel
- デザイン
- 開発
- ローカルSEO
- 写真(ディレクション)
Kayzen WebがVercelのアドレスで公開しているデモ版です。正式なドメインはクライアントに帰属します。

- Lighthouseパフォーマンス
- 95/100
- Lighthouseアクセシビリティ
- 100/100
- Lighthouse SEO
- 100/100
- モバイルで常に表示されるアクション
- 3
解決すべき課題。
背景
Au P'tit Zincは、リヨン5区のピエール・シーズ河岸(quai Pierre-Scize)にある、1992年創業のビストロです。料理と同じくらい、夜更けの雰囲気で知られる地元の名店です。
制約
この店の魅力は雰囲気、つまり写真で伝わります。温かな光、カウンター、満席の客席。ところが写真を多用したレストランのサイトは、ほぼ例外なく遅くなります。しかも訪問の半数は、夜7時半に外出先のスマートフォンから、住所を調べて予約するためにやって来ます。
解決策
没入感と速さを両立させること。最初の画面では大きな画像を最優先で読み込み、それ以外はすべて遅延させています。本当に必要な3つのアクション、つまり予約、電話、ルート案内には、ページのどこからでもワンアクションでアクセスできます。
納品時に計測したスコア。
本番環境のサイトのLighthouseスコアです。数値はそのまま公開しています。低いスコアがあれば、その原因と改善計画を下に記載しており、伏せることはしません。
すべての判断に、理由がある。
温かみのあるダークテーマ
チャコールの背景、銅色のアクセント、琥珀色を基調とした写真。ここでのダークテーマは流行ではありません。行こうかと決める時間帯の、店の光を再現しているのです。
3つのアクションを常に手の届くところに
予約、電話、ルート案内。モバイルでは画面に固定されたアクションバーが、スクロール中もこれらを押せる状態に保ちます。訪問者の80%は、このためだけに来ています。
罠のないカルーセル
自動再生はデフォルトで無効、キーボードで操作でき、ホバー時には一時停止し、ユーザーが「視差効果を減らす」を設定していれば完全に停止します。勝手に進むカルーセルは、Webで最も広く嫌われているコンポーネントです。
プロジェクトのカラーパレット
チャコール
#171412
背景
カッパー
#B4763A
アクセント、アクション
アイボリー
#F3EDE4
テキスト
ボトルグリーン
#2E4034
サブセクション
タイポグラフィ体系
見出し用書体
Playfair Display
本文用書体
Inter 400
店名と見出しには、ビストロのカウンターの雰囲気を持つコントラストの強いセリフ体を。一瞬で読めなければならないメニューには、ニュートラルなサンセリフ体を使っています。
その裏側にある技術。
- Next.js
- React
- Tailwind
- Vercel
優先する画像はひとつだけ
最初の画面の画像はプリロードし、属性でサイズを指定しています。それ以外の画像はすべて遅延読み込みです。写真主体のサイトでパフォーマンス95を実現できたのは、このためです。
モダンなフォーマットと適切なサイズでの配信
各写真を複数の幅で用意し、srcsetで配信しています。スマートフォンがデスクトップ用の画像をダウンロードすることはありません。これはレストランのサイトで最も多い無駄の原因です。
予約は外部に委託、ただし遅延読み込み
外部事業者の予約モジュールは数百キロバイトあります。ページの読み込み時ではなく、「予約する」をクリックしたときに初めて読み込まれます。
検索で見つけてもらうための仕組み。
近隣検索のクエリ
「ビストロ リヨン5区」「レストラン ピエール・シーズ河岸」「旧市街(Vieux Lyon)夜 どこで食べる」。いずれもすぐに決断するためのクエリで、多くはレストランから1キロ以内で検索されています。
完全なRestaurantマークアップ
住所、座標、営業時間、価格帯、料理のジャンル、メニューへのリンクを含むJSON-LDのRestaurant。Googleがローカルパネルに取り込むのは、このブロックです。
Googleのビジネスプロフィールとの一貫性
店名、住所、電話番号を、サイトとビジネスプロフィールとで一字一句まったく同じにしています。句読点ひとつの違いでも、ローカルSEOは弱まります。
誰もが使えるように。
2025年6月から、欧州アクセシビリティ法(European Accessibility Act)により、多くのオンラインサービスにデジタルアクセシビリティが義務づけられています。当社は後から対応するのではなく、設計段階から取り組んでいます。
暗い背景で100/100
ダークテーマの落とし穴は、チャコールの上のグレーの文字です。すべての組み合わせを4.5:1以上に引き上げ、写真の上に置くテキストには、どの画像でも基準を満たせるだけの濃さのオーバーレイを敷いています。
納品したもの。
- トップ
- メニュー
- お店について
- 予約
- アクセスと営業時間
- お問い合わせ
プロジェクトの流れ。
写真ディレクション
選定とレタッチ。サイトの価値は、その写真の価値で決まります。
デザイン
ダークテーマ、アクションバー、制御されたカルーセル。
開発
優先画像、srcset、予約モジュールの遅延読み込み。
ローカルSEO
Restaurantマークアップ、Googleのビジネスプロフィールとの一貫性。


