ミシュラン星付きレストランのウェブサイトが最悪である理由

先月、2つ星ミシュラン認定のレストランでテーブル予約を取ろうとしていました。テイスティングメニューが450ドル、ワインペアリングが別途280ドルという場所です。彼らのウェブサイトは読み込みに14秒かかり、自動再生ビデオがブラウザタブをクラッシュさせ、予約ボタンを3層のFlash時代のアニメーションの後ろに隠し、モバイル対応レイアウトがありませんでした。2025年に。

これは異常ではありません。常態です。世界で最も有名なレストランの一部——銀食器の重さから、バターの温度まで、食事体験のあらゆる細部にこだわるような場所——が、フレッシュマンレベルのウェブ開発学生を恥ずかしくするようなウェブサイトに耐えることができているのです。

過去10年間、工芸と経験を深く重視するブランドのウェブサイトを構築してきた私は、常にこの特定の矛盾に魅力を感じてきました。では、これがなぜ起こるのか、データが実際に何を言っているのか、そして誰かが最後にそれを正しく理解したときの最高のレストランウェブサイトがどのようなものであるかを掘り下げてみましょう。

Why Michelin Star Restaurants Have Terrible Websites

目次

データ：ファインダイニングウェブサイトは実際にどのくらい悪いのか？

2025年初頭に、50のミシュラン星付きレストランウェブサイトに対してLighthouse監査を実行しました。結果は、悪いことを予想していた人にとっても、本当に衝撃的でした。

メトリック ミシュラン星付きレストラン（平均） 平均的な小規模ビジネスサイト ベストプラクティス目標
パフォーマンススコア 28/100 52/100 90+
最大コンテンツフルペイント 8.4秒 3.2秒 < 2.5秒
累積レイアウトシフト 0.38 0.18 < 0.1
ページ総重量 14.2 MB 3.8 MB < 2 MB
モバイル使いやすさスコア 41/100 68/100 90+
アクセシビリティスコア 34/100 54/100 90+

これを受け入れてください。平均的なミシュラン星付きレストランウェブサイトは、無料のWixテンプレートで構築されたランダムな小規模ビジネスサイトよりも悪いパフォーマンスを発揮します。平均ページ重量は14.2 MB——ほとんどが圧縮されていないヒーロービデオと、遅延ロードや最新フォーマット最適化なしの巨大な画像ギャラリーからです。

2024年のホスピタリティ調査会社Revfineの調査では、ダイナーの67％が訪問前にオンラインでレストランを調査していることが判明しました。OpenTableの2024年年次報告書による別の調査では、ファインダイニング予約の72％が現在デジタルタッチポイント——レストランのウェブサイト、Googleマップ、または予約プラットフォーム——から発生していることを示しています。ウェブサイトが機能していないとき、あなたは文字通り顧客を失っています。

アクセシビリティの問題はさらに悪い

テストした50サイトのうち、わずか3つだけが食品写真にaltテキストを持っていました。12サイトは画像に埋め込まれたテキストを主なナビゲーションとして使用していました（つまり、スクリーンリーダーがそれらを全く解析できないということです）。22サイトはWCAG AA最小値未満のコントラスト比を持っていました。8サイトはセマンティックHTML構造を全く持っていませんでした——ただ絶対位置指定divです。

これは単なる使いやすさの問題ではありません。ADAと欧州アクセシビリティ法（2025年6月に完全発効）の下では、これらのサイトは法的責任です。2024年、米国だけで4,600件以上のADAウェブサイトアクセシビリティ訴訟が提起されており、レストランが最も対象となるカテゴリの1つです。

ミシュラン星付きレストランのウェブサイトが最悪である理由

高級ブランドとの協力に数年間費やし、このパターンの繰り返しを観察した後、私は複数の根本的な原因を特定しました。

1. 「アートプロジェクト」メンタリティ

ファインダイニングレストランは、正当にも、自分たちを創作活動と見なしています。シェフはアーティストです。レストランはギャラリーです。だから、ウェブサイトを構築する時が来ると、彼らは機能的なツールではなくアートインスタレーションとしてサイトを扱うデザイン機関を雇います。

これは以下につながります：自動再生ビデオ、パララックスすべて、カスタムカーソル、スクロールハイジャック、隠されたナビゲーション、謎肉インターフェース、そして設計者のポートフォリオをクールに見せることを除いて目的を果たさないスプラッシュページ。

ここでのポイント：私は美しいデザインを愛しています。素晴らしい視覚的経験を備えたサイトを構築してきました。しかし、機能する美しいサイトと機能しない美しいサイトの間には違いがあります。最高の創造的な仕事は制約の中で起こり、「人々は実際にこれを使う必要がある」は非常に重要な制約です。

2. シェフはウェブパフォーマンスを知らない（または気にしない）

これは明白ですが、述べる価値があります。20年間自分の工芸を習得することに費やしたシェフは、なぜウェブサイトが200MBの4K動画を自動再生すべきではないのかを理解することはありません。彼らはビデオを見て、「それは素晴らしく見える、それが私の食べ物が人々を感じさせる方法だ」と考えます。4G接続のモバイルユーザーのバウンス率を見ていません。

正直なところ、それは良いです。シェフはCore Web Vitalsを理解する必要があります。それは良いウェブパートナーが何をするかです。問題は、ほとんどのレストランが良いウェブパートナーを持っていないということです。

3. 間違った人々が決定を下している

レストランウェブサイトは以下によって設計されることが多いです：

  • 「デザインをする」シェフの友人
  • 印刷物やパッケージングを専門とするブランディング機関
  • 2017年にサイトを構築し、それ以来触れていないローカルウェブショップ
  • ユーザーより賞を優先する高価なクリエイティブエージェンシー

これらのグループのいずれも、高速でアクセシブルな、変換最適化されたウェブサイトを構築するインセンティブまたは専門知識を持っていません。ブランディング機関はサイトがブランドブックと一致することを望んでいます。クリエイティブエージェンシーはAwwwardsを獲得したいです。「このサイトは実際にテーブル予約を助けるか？」と誰も尋ねていません。

4. Flashは死んでいますが、その幽霊は生きています

高級レストランウェブサイトの不安な数が、Flash時代に精神的に設計されたように感じます。アニメーションの強調、ブラウザ標準への無視、みんながファストコンピュータと大画面を持っているという仮定——それはすべて2020年にFlashで死んだウェブデザイン哲学にさかのぼりますが、ファインダイニングがユニークに惹かれているゾンビ美学を後に残しました。

5. 低いウェブサイトトラフィック＝低い優先度

多くのミシュラン星付きレストランは、口コミ、PRカバレッジ、ResynまたはTockなどのプラットフォームを通じて数ヶ月前に予約で満杯です。ウェブサイトは彼らの主要な予約チャネルではないので、無視されます。これは自己充足的な予言ですが——サイトはサイトが機能しているために予約を駆動していません、それはサイトが重要ではないという信念を強化します。

Why Michelin Star Restaurants Have Terrible Websites - architecture

悪いレストランウェブサイトの実際のコスト

悪いウェブサイトがファインダイニングレストランに実際にコストするものについて、簡単な計算をしましょう。

レストランが1晩40カバー、平均チェック350ドル、週6晩営業していると仮定します。それは年間370万ドルの収益です。

Google のWeb.Dev研究チームの研究では、ロード時間が1秒増加するごとに、変換率が約7％低下することを示しています。レストランのサイトが8秒ロードするのに2秒かかる場合、それは直接予約の変換率でおよそ42％の削減です。

リザベーションの20％だけがウェブサイトを通過し、悪いUXがそれらの15％しか失うとしても（保守的な推定）、それは以下のようなものです：

$4,370,000 × 0.20 (web-sourced revenue) × 0.15 (lost to bad UX) = $131,100/year

年間130,000ドル以上の失われた収益。世界クラスのレストランウェブサイトの再構築は15,000ドルから50,000ドルの間の費用がかかります。ROIは不合理です。

そして、これはブランドダメージを説明していません。潜在的なダイナーがあなたのサイトを訪問し、それが壊れていると感じるとき、それはあなたのレストランへの認識を形作ります。

素晴らしいレストランウェブサイトデザインが実際に見えるもの

では、ファインダイニングレストランウェブサイトが実際に何をするべきか？何年もヘッドレスCMSを動力とするサイトを構築した後、これが私のフレームワークです。

スピードは最初の印象です

あなたのサイトは2秒以内にロードする必要があります。ピリオド。つまり：

  • WebPまたはAVIF形式で適切なサイズ圧縮された画像
  • 折り上部のビデオ自動再生なし（またはしなければならない場合、遅延ロードされた、圧縮されたビデオを静的ポスターフレーム付きで使用）
  • 静的生成またはサーバー側レンダリングをサポートする最新フレームワーク
  • グローバル配信用のCDN

ホームページは5秒間で5つの質問に答える必要があります

  1. これはどこですか？
  2. どんな食べ物を提供していますか？
  3. どこですか？
  4. テーブルを予約するにはどうすればいいですか？
  5. 今は営業していますか？

それだけです。その他すべては二次的です。素晴らしい食べ物の写真、1行のコピー、住所、営業時間、巨大な「予約」ボタンを持つことができます。折り線下に美しいストーリーテリングスクロール体験を持つことができます。しかし、折り上部のコンテンツは即座に機能する必要があります。

メニューはPDFではなくHTMLである必要があります

これは私の最大のペットピーブです。多くのレストランがメニューをPDFに入れます。これは以下に対して悪いです：

  • SEO：検索エンジンはPDFテキストをインデックスできますが、構造化されたHTMLコンテンツと同じ重みを持たないテキスト
  • モバイル：電話上のPDFはナビゲートするのに悲劇的です
  • アクセシビリティ：ほとんどのレストランのPDFはスキャンされた画像であり、スクリーンリーダーに完全に見えなくなります
  • アップデート：PDFメニューを変更するには、InDesignを開き、エクスポートし、再アップロードする必要があります

メニューは構造化データである必要があります——Google、スクリーンリーダーで読むことができ、CMSから30秒でアップデートできるHTML。

予約フローは摩擦のないものである必要があります

人々に予約ボタンを探すことを強制しないでください。それは：

  • ヘッダーナビゲーション内（常に表示）
  • ホームページヒーローセクション上
  • メニューページの下
  • スティッキーモバイルフッターバーで

Resyn、Tock、OpenTable、またはカスタムソリューションを使用するかどうかにかかわらず、統合はネイティブに感じるべき——サードパーティシステムから不快なポップアップのようではなく。

写真は例外的である必要があります（しかし最適化されています）

ファインダイニングは本質的に視覚的です。優れた食品写真が重要です。しかし、これらの画像を最新フォーマットで適切なサイズで提供しない理由はありません。ヒーロー画像はAVIFで200KBで素晴らしく見えます。圧縮されていない8MB TIFFは必要ありません。

2025年の最高のレストランウェブサイトの例

ウェブ上の存在を実際に理解しているレストランをいくつかハイライトしましょう。

Eleven Madison Park (elevenmadisonpark.com)

クリーン、高速、エレガント。ホームページは単一の美しい画像と明確な予約CTAでリードします。メニューはHTMLで構造化されたコンテンツです。サイトは3秒未満でロードします。極小でありながら美しいが、使いやすさを犠牲にしなくても可能であることを証明しています。

Noma (noma.dk)

Nomaのサイトは2025年への移行のための重要な再設計を経ました、そしてそれは現代的な考え方を示しています：編集スタイルのレイアウト、高速ロード、強いタイポグラフィ、明確な情報階層。それは雑誌のように見えます、Flash実験ではなく。

Alinea (alinearestaurant.com)

Alineaはtock予約プラットフォームを密に受け入れ、予約フローをほぼ摩擦のないものにしています。サイトは痩せており、素早くロードし、予約を前中心に置きます。3つ星ミシュランレストランの場合、それは爽快に機能的です。

SingleThread (singlethreadfarms.com)

これは農場、チーム、哲学のストーリーテリングのために際立っています——素晴らしいパフォーマンスを維持しながら。画像は美しいが適切に最適化されており、サイトはモバイルで素晴らしく機能します。

レストラン Lighthouseパフォーマンス LCP モバイルスコア 予約クリック数から予約まで
Eleven Madison Park 72 2.8秒 81 2
Noma 68 3.1秒 76 2
Alinea 79 2.4秒 85 1
SingleThread 65 3.4秒 72 2
平均ミシュランサイト 28 8.4秒 41 4+

これらのどれも完璧ではありません（それらすべてが90以上になることを望んでいます）が、それらは業界の平均より遠く前にあります。

素晴らしいレストランサイトの背後にあるテックスタック

今日からスクラッチからファインダイニングレストランウェブサイトを構築していたなら、ここが私が使用するものです。

フレームワーク：AstroまたはNext.js

Astroはレストランサイトにほぼ完璧です。デフォルトではゼロのJavaScriptを出荷し、静的HTMLを生成し、素晴らしい画像最適化をボックスの外に処理します。ほとんどがコンテンツ——メニュー、写真、営業時間、場所情報——であるサイトの場合、重いクライアント側フレームワークは必要ありません。

より多くの動的機能（リアルタイム可用性、ユーザーアカウント、ロイヤルティプログラム）が必要な場合、Next.jsコンテンツページの静的生成とサーバーコンポーネントは動的機能が方法です。

---
// src/pages/menu.astro
import Layout from '../layouts/Layout.astro';
import MenuItem from '../components/MenuItem.astro';
import { getMenuItems } from '../lib/cms';

const menuItems = await getMenuItems();
const courses = groupByCourse(menuItems);
---

<Layout title="Menu | Restaurant Name">
  <main class="menu-page">
    {courses.map((course) => (
      <section class="course" aria-labelledby={`course-${course.slug}`}>
        <h2 id={`course-${course.slug}`}>{course.name}</h2>
        {course.items.map((item) => (
          <MenuItem
            name={item.name}
            description={item.description}
            price={item.price}
            allergens={item.allergens}
            dietary={item.dietary}
          />
        ))}
      </section>
    ))}
  </main>
</Layout>

構造化、セマンティック、アクセシブル、高速。そのメニューページは毎回95以上のLighthouseスコアを獲得します。

CMS：Sanity、Contentful、またはStoryblok

レストランチームは、開発者を呼び出さずにメニューを更新し、季節限定コンテンツを追加し、イベントを管理する必要があります。ヘッドレスCMSがこれを可能にします。Sanityは、リアルタイムコラボレーティブ編集がチーム向けに素晴らしく、カスタマイズ可能なスタジオをレストランワークフローに合わせることができるため、レストラン用の私のゴーツーです。

// Sanity schema for a menu item
export default {
  name: 'menuItem',
  title: 'Menu Item',
  type: 'document',
  fields: [
    { name: 'name', title: 'Dish Name', type: 'string' },
    { name: 'description', title: 'Description', type: 'text' },
    { name: 'price', title: 'Price', type: 'number' },
    { name: 'course', title: 'Course', type: 'reference', to: [{ type: 'course' }] },
    { name: 'image', title: 'Photo', type: 'image', options: { hotspot: true } },
    {
      name: 'dietary',
      title: 'Dietary Info',
      type: 'array',
      of: [{ type: 'string' }],
      options: {
        list: [
          { title: 'Vegetarian', value: 'vegetarian' },
          { title: 'Vegan', value: 'vegan' },
          { title: 'Gluten-Free', value: 'gluten-free' },
          { title: 'Contains Nuts', value: 'nuts' },
          { title: 'Contains Dairy', value: 'dairy' },
        ],
      },
    },
  ],
}

ホスティング：VercelまたはNetlify

グローバルエッジネットワーク上の静的サイト。世界中のどこからでも1秒未満のTime to First Byte。自動HTTPS。コンテンツ変更用のプレビューデプロイメント。レストランスケールのトラフィックのためのサイトの正しいインフラストラクチャであり、無料またはまたは非常に安いです。

画像パイプライン：CloudinaryまたはImgix

自動フォーマット交渉（Chrome用AVIF、Safari用WebP）、レスポンシブサイジング、品質最適化、アートディレクション——すべてURLパラメータからです。フォトグラファーは1回フルレゾリューション画像をアップロードし、CDNは正しいバージョンをすべてのデバイスにサービスします。

ファインダイニングウェブサイトの修正方法

レストランオーナー（またはレストランと仕事をする開発者）を読んでいるなら、これは実践的なロードマップです。

フェーズ1：クイックウィン（1-2週間）

  1. ヘッダーに予約ボタンを追加——すべてのページ、すべてのデバイスで表示
  2. すべての画像を圧縮——Squooshまたは画像CDN経由ですべてを実行
  3. 自動再生ビデオを削除または最適化されたポスター画像に置き換え
  4. PDFメニューをHTMLに変換——シンプルなテキストページでもPDFより良い
  5. 構造化データを追加（JSON-LD）レストランスキーマ用——Googleが検索結果で営業時間、メニュー、予約リンクを直接表示するのに役立ちます
{
  "@context": "https://schema.org",
  "@type": "Restaurant",
  "name": "Restaurant Name",
  "image": "https://example.com/hero.jpg",
  "servesCuisine": "Contemporary American",
  "priceRange": "$$$$",
  "address": {
    "@type": "PostalAddress",
    "streetAddress": "123 Main St",
    "addressLocality": "New York",
    "addressRegion": "NY"
  },
  "starRating": {
    "@type": "Rating",
    "ratingValue": "2",
    "bestRating": "3",
    "author": {
      "@type": "Organization",
      "name": "Michelin Guide"
    }
  },
  "acceptsReservations": true,
  "hasMenu": "https://example.com/menu"
}

フェーズ2：適切な再構築（4-8週間）

  1. 最新のスタックを選択——AstroまたはNext.jsヘッドレスCMS付き
  2. 専門的な食品写真に投資——印刷用だけでなくウェブ用に撮影
  3. モバイル優先の設計——レストラン検索の60％以上が携帯電話で起こります
  4. 予約をネイティブに統合——Resy、Tock、またはOpenTable適切に埋め込まれました
  5. 適切なSEOを実装——特にローカルSEOはレストランにとって重要です
  6. 実際のユーザーでテスト——誰かが携帯電話であなたの営業時間を見つけてテーブルを予約しようとするのを見てください

レストランがこれについて真摯な場合、ヘッドレスウェブ開発を専門とするチームと仕事をすることは重大な違いを作ります。ホスピタリティ空間は特定のニーズを持っています——リアルタイムメニュー更新、イベントページ、プライベートダイニング問い合わせフォーム、ギフトカードシステム——これらは以前に構築された誰かの恩恵を受けます。

フェーズ3：継続的な最適化

  • Core Web Vitalsを毎月監視
  • 予約CTAをA/Bテスト
  • CMSを通じた季節コンテンツとメニュー変更の更新
  • 段階的に新機能を追加（オンライン注文、仮想ツアー、シェフのブログ）

FAQ

ミシュラン星付きレストランウェブサイトはなぜそんなに悪いのですか？

主な理由は調整された優先度と間違ったパートナーです。レストランはウェブパフォーマンスとユーザビリティより視覚的な美しさを優先するクリエイティブエージェンシーを雇用しています。シェフとレストランオーナーは、デジタル体験ではなく、食事体験に理由から集中しています。そして、多くの高級レストランはサードパーティプラットフォームと口コミを通じて予約されているため、ウェブサイトはビジネスツールではなくパンフレットとして扱われます。結果は重いアニメーション、最適化されていないメディア、隠れた予約ボタンで満たされたサイトです。

良いレストランウェブサイトとは何か？

良いレストランウェブサイトは3秒以内にロードし、レストランが何であり、何を提供しているかを明確に通信し、テーブル予約を簡単にします（理想的には2クリック以内）、メニューをPDFではなくアクセシブルなHTMLで提示し、モバイルデバイスで見栄えが良く、構造化データを使用してGoogle検索エンジンが検索結果に直接重要な情報を表示できます。素晴らしい食べ物の写真は重要ですが、適切に最適化される必要があります。

レストランメニューはPDFまたはウェブページである必要があります。

ウェブページ、常に。HTMLメニューは、SEOに優れています（Google は各料理名と説明をインデックスできます）、アクセシビリティ（スクリーンリーダーはそれらを解析できます）、モバイル使いやすさ（PDFをピンチズームなし）、メンテナンス性（CMSから秒でアップデート）。印刷可能なバージョンが必要な場合、セカンダリダウンロードオプションとしてPDFを提供しますが、主なメニューはネイティブなウェブコンテンツである必要があります。

高級レストランのための最高のウェブサイトビルダーは何ですか？

真の高級レストランの場合、SquarespaceやWixなどのテンプレートビルダーは不十分です——カジュアルダイニングのために良いですが、ファインダイニングが要求するカスタマイズとパフォーマンスが不足しています。最良のアプローチは、AstroまたはNext.jsのような静的サイトジェネレータを、SanityまたはContentfulのようなヘッドレスCMSと組み合わせることです。これにより、完全な設計制御、超高速パフォーマンス、簡単なコンテンツ管理が可能になります。何かシンプルが必要な場合、Squarespaceの新しいテンプレートは開始点として体面です。

レストランウェブサイトの再設計にはどのくらいの費用がかかりますか？

テンプレートプラットフォームを使用した基本的な再設計は2,000ドルから5,000ドルの費用がかかるかもしれません。最新のヘッドレススタックのカスタム設計開発サイトは、複雑さ、写真のニーズ、統合に応じて、ファインダイニング施設の場合15,000ドルから50,000ドルの範囲です。広範なカスタム機能、アニメーション、多言語サポートを備えた高級プロジェクトは75,000ドル以上に達することができます。悪いウェブサイトの収益への影響を考えると、この範囲の高級な方は急速に自らを支払います。

レストランウェブサイトにオンライン予約を追加するにはどうすればいいですか？

3つの主要なプラットフォームはResy、Tock、およびOpenTableです。3つすべてがあなたのサイトに統合できるウィジェットを提供しています。Tockは特に細心詞のために人気があります。準備された予約モデルのため。重要なのは、予約フローをネイティブに埋め込むことです。ユーザーが彼らのサイトに留まっていると感じたいのであり、単にサードパーティのページへのリンクです。各プラットフォームはより深い統合用のJavaScript埋め込みコードまたはAPIアクセスを提供します。

ウェブサイトのスピードは本当にレストラン予約に影響しますか？

はい、大幅に。Googleの研究は、ページロード時間が1秒増加するごとに変換率が7％低下することを一貫して示しています。予約を取ることが変換アクションであるレストランサイトの場合、遅いサイトは直接空のテーブルに変換されます。モバイルユーザーは特にロード時間に敏感です——53％のモバイルユーザーは3秒以上かかるサイトを放棄し、レストラン検索の60％以上がモバイルデバイスで起こります。

レストランウェブサイトにはどの構造化データを含める必要があります。

最小限では、schema.orgからレストランスキーマを実装し、名前、住所、料理タイプ、価格帯、営業時間、予約URL、メニューURLを含みます。ミシュラン格付けを持っている場合、starRatingプロパティを含めます。また、LocalBusinessマークアップ、特別なディナーやポップアップのためのイベントスキーマ、FAQページを持っている場合のFAQスキーマも検討してください。この構造化データはGoogleが豊富な結果を表示するのに役立ちます——営業時間、格付け、予約リンクが直接検索に表示されます——これは大幅にクリックスルー率を増加させます。

レストランウェブサイトは芸術的で機能的の両方ができます。

絶対に、最良の例がそれを証明しています。キーは、パフォーマンスとユーザビリティを障害物ではなく創意的な制約として扱うことです。美しいタイポグラフィ、思慮深い空白スペース、素晴らしい（しかし最適化された）写真、そして微妙なアニメーションは、レストランのアイデンティティを反映する感情的な体験を作成できます。スピードまたは使いやすさを犠牲にしません。トリックは、技術的な要件と創意的なビジョンの両方を理解するウェブページ開発チームを持つことです——そしてデザイン決定がユーザー体験を傷つけるとき押し返します。これについてサポートが必要な場合、お問い合わせください——それは正確に私たちがすることです。