飲食・ナイトライフ

Au P'tit Zinc

写真が主役のサイトで、パフォーマンス95、アクセシビリティ100。それが課題でした。

年
2026
制作期間
3週間
技術スタック
Next.js · React · Tailwind · Vercel
  • デザイン
  • 開発
  • ローカルSEO
  • 写真(ディレクション)

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

https://au-ptit-zinc.vercel.app/
Au P'tit ZincのWebサイトのトップページ――飲食・ナイトライフ、Kayzen Web制作
Lighthouseパフォーマンス
95/100
Lighthouseアクセシビリティ
100/100
Lighthouse SEO
100/100
モバイルで常に表示されるアクション
3
出発点

解決すべき課題。

背景

Au P'tit Zincは、リヨン5区のピエール・シーズ河岸(quai Pierre-Scize)にある、1992年創業のビストロです。料理と同じくらい、夜更けの雰囲気で知られる地元の名店です。

制約

この店の魅力は雰囲気、つまり写真で伝わります。温かな光、カウンター、満席の客席。ところが写真を多用したレストランのサイトは、ほぼ例外なく遅くなります。しかも訪問の半数は、夜7時半に外出先のスマートフォンから、住所を調べて予約するためにやって来ます。

解決策

没入感と速さを両立させること。最初の画面では大きな画像を最優先で読み込み、それ以外はすべて遅延させています。本当に必要な3つのアクション、つまり予約、電話、ルート案内には、ページのどこからでもワンアクションでアクセスできます。

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

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

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

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

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

  1. 温かみのあるダークテーマ

    チャコールの背景、銅色のアクセント、琥珀色を基調とした写真。ここでのダークテーマは流行ではありません。行こうかと決める時間帯の、店の光を再現しているのです。

  2. 3つのアクションを常に手の届くところに

    予約、電話、ルート案内。モバイルでは画面に固定されたアクションバーが、スクロール中もこれらを押せる状態に保ちます。訪問者の80%は、このためだけに来ています。

  3. 罠のないカルーセル

    自動再生はデフォルトで無効、キーボードで操作でき、ホバー時には一時停止し、ユーザーが「視差効果を減らす」を設定していれば完全に停止します。勝手に進むカルーセルは、Webで最も広く嫌われているコンポーネントです。

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

  • チャコール

    #171412

    背景

  • カッパー

    #B4763A

    アクセント、アクション

  • アイボリー

    #F3EDE4

    テキスト

  • ボトルグリーン

    #2E4034

    サブセクション

タイポグラフィ体系

見出し用書体

Playfair Display

本文用書体

Inter 400

店名と見出しには、ビストロのカウンターの雰囲気を持つコントラストの強いセリフ体を。一瞬で読めなければならないメニューには、ニュートラルなサンセリフ体を使っています。

エンジニアリング

その裏側にある技術。

  • Next.js
  • React
  • Tailwind
  • Vercel
  1. 優先する画像はひとつだけ

    最初の画面の画像はプリロードし、属性でサイズを指定しています。それ以外の画像はすべて遅延読み込みです。写真主体のサイトでパフォーマンス95を実現できたのは、このためです。

  2. モダンなフォーマットと適切なサイズでの配信

    各写真を複数の幅で用意し、srcsetで配信しています。スマートフォンがデスクトップ用の画像をダウンロードすることはありません。これはレストランのサイトで最も多い無駄の原因です。

  3. 予約は外部に委託、ただし遅延読み込み

    外部事業者の予約モジュールは数百キロバイトあります。ページの読み込み時ではなく、「予約する」をクリックしたときに初めて読み込まれます。

SEO対策

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

  1. 近隣検索のクエリ

    「ビストロ リヨン5区」「レストラン ピエール・シーズ河岸」「旧市街(Vieux Lyon)夜 どこで食べる」。いずれもすぐに決断するためのクエリで、多くはレストランから1キロ以内で検索されています。

  2. 完全なRestaurantマークアップ

    住所、座標、営業時間、価格帯、料理のジャンル、メニューへのリンクを含むJSON-LDのRestaurant。Googleがローカルパネルに取り込むのは、このブロックです。

  3. Googleのビジネスプロフィールとの一貫性

    店名、住所、電話番号を、サイトとビジネスプロフィールとで一字一句まったく同じにしています。句読点ひとつの違いでも、ローカルSEOは弱まります。

アクセシビリティ

誰もが使えるように。

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

  1. 暗い背景で100/100

    ダークテーマの落とし穴は、チャコールの上のグレーの文字です。すべての組み合わせを4.5:1以上に引き上げ、写真の上に置くテキストには、どの画像でも基準を満たせるだけの濃さのオーバーレイを敷いています。

サイト構成

納品したもの。

  • トップ
  • メニュー
  • お店について
  • 予約
  • アクセスと営業時間
  • お問い合わせ
進め方

プロジェクトの流れ。

  1. 写真ディレクション

    選定とレタッチ。サイトの価値は、その写真の価値で決まります。

  2. デザイン

    ダークテーマ、アクションバー、制御されたカルーセル。

  3. 開発

    優先画像、srcset、予約モジュールの遅延読み込み。

  4. ローカルSEO

    Restaurantマークアップ、Googleのビジネスプロフィールとの一貫性。

Q&A

よくいただくご質問。

はい。最初に読み込む写真を1枚だけにすることが条件です。パフォーマンススコアが測るのはページ全体の重さではなく、最初の有用なコンテンツが表示されるまでの時間です。適切なサイズの優先画像を1枚置き、残りを遅延させるだけで、95に届きます。

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

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

共有