2026年の最高レストランとフードウェブサイト20選、速度テスト済み

現在オンラインで利用できる最高のレストランとフードウェブサイト20を紹介します。レストラン、ホテルの食事処、コーヒー焙煎業者、ワイン生産者および販売業者、食品メーカー、フードフェスティバル、レシピサイト、いくつかのホスピタリティブランドが含まれています。どれも味で選ばれたわけではありません。24の実在する手動レビュー済みフードとホスピタリティサイトから、すべて20サイトをランダムに抽出し、各サイトが読み込まれることを確認してスマートフォンで測定し、レストランがコピーできることを記録しました。より鋭い発見は、モバイルLighthouseスコアの中央値が61.5であり、十分な実訪問者データを持つ13サイトのうち5サイトがGoogleのCore Web Vitalsの3つすべてに合格していることです。これは64の美しいウェブサイト、ライブで確認・速度テスト済みのフードとドリンクスポークです。

この20サイトがどのように選定およびテストされたか

最高のレストランウェブサイトのほとんどのリストは、誰かのお気に入りです。それはアイデアのためには良いですが、見栄えの良いフードサイトが通常読み込み時間でどれくらいのコストを必要とするかを隠しています。遅いサイトは静かに見えなくなるからです。そのため、代わりにランダムな抽出を使用しました。

• プール、24のライブフード、ドリンク、ホスピタリティウェブサイトは、私が保持している厳選デザインデータベースから取得されました。すべてのサイトは手動でレビューされ、デスクトップとモバイルのキャプチャを持ち、過去30日間の利用可能性チェックに合格しています。
• 抽出、固定ランダム順序の20サイト。同じスタジオから2つ以上はありません。ここに記載されているものは私のクライアント業務ではなく、掲載するために誰も支払いをしていません。
• 記載された理由ごとに3つの交換。最初の20のうち2つのサイトは年齢認証スクリーンの背後にあり、デザイン全体を隠しており、法的年齢チェックをクリックスルーしません。3番目のサイトは現在、フードまたはドリンクではなく3D製品コンフィギュレータを販売しています。各サイトは抽出で次のサイトに置き換えられました。
• ライブチェック、すべてのサイトは2026年10月31日にブラウザ(Chromium)で開かれ、リストされているのと同じサイトを読み込みました。
• ラボテスト、2026年10月12日から20日間のサイトあたり1回のモバイルLighthouseテスト。パフォーマンススコア、Largest Contentful Paint、ページ重量を記録しました。
• 実訪問者データ、スマートフォンのChrome UXレポート図。Googleは、ローリング28日間のウィンドウでリアルのChromeユーザーから収集します。すべてのサイトが表示に必要な訪問者数を取得するわけではありません(Chrome UXレポート)。そのため、20のうち5つのサイトは「データなし」と表示されます。
• ランキングではなく、以下の順序は抽出順序です。

20のレストランとフードウェブサイトが速度でかかるコスト

Googleはページの最大コンテンツフルペイント(LCP)が2.5秒以下、インタラクションから次のペイント(INP)が200ミリ秒以下、累積レイアウトシフト(CLS)が0.1以下である場合、ページ読み込みの75パーセンタイルで測定されたときに良好と評価します。ページがCore Web Vitalsに合格するのは、3つすべてを満たす場合のみです(web.dev)。

ドローで最も重いページは、合格した5つのページの1つでもある。コペンハーゲンのラーメンバー「Slurp」は53.4 MBだが、実際の訪問者はメインコンテンツを1.9秒で見ることができる。ページが何を持っていようと、ファーストスクリーンは時間内に到着する。そしてそれはまさにLCPが測定するものだ。

ラボスコアと実訪問者の結果はしばしば異なる。Qissaはラボスコアで87でStudenterkildjenと同点だが、実訪問者はメインコンテンツに2.7秒待つ必要があり、Googleの基準をわずかに上回るため不合格となる。Paul & Bohneはラボで56だが、実訪問者の3つすべてで合格する。Lighthouseはエミュレートされたスマートフォンでの単一のラボ実行であり、Chrome UX ReportはページエクスペリエンスシグナルにGoogleが使用するものである（Chrome UX Report）。

ロード速度は、ほとんどのサイトがつまずくところだ。不合格の8サイトのうち、6つは2.5秒のLCP目標を逃し、4つはレイアウトシフトが大きすぎ、タップへの反応が遅いのは1つだけ。これは食べ物サイトの典型的なパターンだ：大きなヒーロー写真またはビデオがフルサイズで配信され、それがみんなが待っているものになる。

この柱を読む場合、知る価値のある2番目の発見がある。64サイトのドローでは、8つの食べ物、飲み物、おもてなしサイトのどれもCore Web Vitalsに合格しなかった。同じプールから20を抽出すると、5つが合格する：Raw House、Woolmers Estate、Slurp、Paul & Bohne、Eatery Berlin。つまり、小さなサンプルはカテゴリ全体をそれより悪く、またはそれより良く見せることができる。

これらの20はどのように構築されているか

WordPressは20のうち7つを実行しており、他のプラットフォームより多い。Nuxtは3つ、Next.jsとShopifyとWebflowはそれぞれ2つ。AstroとGatsbyにはそれぞれ1つずつあり、スタックをHTMLから読むことができなかった2つのサイトがある。2つのShopifyサイト、Paul & BohneとBest Bean Best Cupは、オンラインでコーヒーを販売している2つだ。AstroのRaw Houseは、ドロー内で最速の実訪問者LCPを0.8秒で持っており、GatsbyのEatery Berlinは最軽量ページを0.5 MBで持っている。フレームワークを選択する場合、Astro対Next.jsはトレードオフをカバーしている。

20が共通に持つもの

データベース内のすべてのサイトはレビュー時にスタイルでタグ付けされ、スタックはライブHTMLから検出される。したがって、これらは印象ではなくカウントである。

• 食べ物の写真がリード。20のうち9つが写真的とタグ付けされており、他のスタイルより多い。それらの最高のものは、小さなものの格子ではなく、1つの大きな、近い、よく照らされた皿を使う。
• 色は選択であり、デフォルトではない。8つは色彩的とタグ付けされており、機能するものは食べ物またはブランドから1つまたは2つの強い色を選び、どこでもそれを使う。
• タイプが語る。7つは大きなディスプレイタイプを使い、6つはセリフを使う。2つはしばしば一緒に現れる：写真や平面色の上に大きく設定されたセリフ見出し。
• モーションは一般的だが問題ではない。7つはスムーズスクロールまたはアニメーションライブラリ（GASPとLenisが各4つ）をロードする。中央値のラボスコアは66で、残りは60だから、このドローではアニメーションだけでは遅いスコアを説明しない。

20のレストランと食べ物のウェブサイト

測定値を最初に、次に各々をより詳しく見る。ホームページのキャプチャ、借りる価値のあるパターン、知る必要のあるトレードオフ。実訪問者の数字はスマートフォンから；「データなし」はGoogleが報告するにはあまりに少ない訪問者を持ったことを意味する。あなたの場所については、レストランウェブサイトデザインを参照。

1. Studenterkilden

背の高いセリフ見出しがクリーンなオフホワイトのページの中央を占め、上下に十分な余白があってメッセージが映えます。温かみのある砂色のボタンが唯一の暖色で、予約アクションが見つけやすくなっており、アウトライン形式のセカンダリボタンがその横に控えめに配置されています。芝葺き屋根の木造建物の日光が当たった写真がページ下部に少し覗き、設定を暗示するのに十分です。

このテクニックを採用する: 単一の暖色の予約ボタンとメニューまたはパッケージ用の控えめなアウトラインボタンをペアにし、ヘッダーでもこのペアを繰り返して、次のステップが常に手の届く範囲にあるようにします。

注意すべき点: ラボテストでは中程度の評価でしたが、ページ自体は軽量で、Webflow上のアニメーションとスムーススクロールスクリプトはブラウザに追加の負荷を与えます。ただし、実際のゲストにおけるパフォーマンスを判断するのに十分な実訪問者データがありませんでした。

SOUR により制作。studenterkilden.dk にアクセス。

2. Meatopia

ワードマークがすべての仕事をする。太くて斜体の大文字に黒いドロップシャドウが付いており、オレンジ、ティール、オリーブの山の風景が詰め込まれている。赤いリボンのタグラインがヴィンテージポストカードのように下部を横切る。温かみのあるクリーム色の背景の中央に単独で配置され、その下に 1 つのラスト赤ボタンがあるため、ページに明確なフォーカスと自信に満ちた遊び心のあるムードをもたらす。

これを参考に：太い文字のロゴにテクスチャまたは風景写真を詰め込む習慣をコピーしてから、周囲にプレーンな色を多く残し、単一の明確なボタンを 1 つ配置する。

注意点：ページは平均よりも重く、ラボテストではまあまあのスコアしか得られず、実際のユーザーはメインコンテンツの読み込みが遅く、タップとクリックへの反応が緩い。したがって、大きなロゴアートワークは無害な装飾として扱うのではなく、圧縮する価値がある。

Arro Labs により制作。visitmeatopia.com にアクセス。

3. Pier88 Coast By MONARQ

1 枚の写真がすべての仕事をする：フォークに乗ったツヤのあるオレンジ色のエビ、穏やかなティール色の海と柔らかい青い空を背景に配置されている。温かみのあるオレンジが冷たい青に対比され、瞬間的に食欲をそそる。ヘッドラインはエビの上に薄い白い大文字で曲線を描き、プレートの縁を反響させ、ロゴとメニューはエッジで静かに配置されている。そして下部の波状の白いエッジは潮を暗示しており、その点を強調しすぎることはない。

これを参考に：シグネチャーディッシュの 1 つの自信を持った英雄的な写真を選び、会場を示唆する設定に配置し、空または背景上のヘッドラインを短く軽くする。

注意点：ページは非常に重く、ラボテストではまあまあの結果になった。これはフルブリードの写真と GSAP、Lenis、Lottie などのアニメーションライブラリに適している。したがって、遅い接続ではビジュアルの選択肢が最初に感じられる。

pier88coast.comを訪問。

4. Le Saint Georges

山の眺めの窓の隣に配置されたテーブルのフルブリード写真がほぼすべての仕事をしており、淡色のロゴタイプと細いルール線で引いたナビゲーションが重いバーなしでそれの上に配置されている。クリーム色のアナウンスパネルは温かみのあるセリフ見出しと濃い茶色のボタンを使用しており、写真の木とか銅のトーンと一致している。モバイルでは描かれた牛がページに地元的でやや遊び心のあるキャラクターをもたらす。

これを参考に：自分のダイニングルームの 1 つの誠実な写真を 1 つのクリーム色パネルと 1 つの濃い色ボタンと組み合わせて、シーズナルメニューを発表する。

注意点：ページ自体は軽いが、実際のユーザーはメインイメージ領域の読み込みが遅く、落ち着く間にレイアウトシフトが発生する。したがって、大きなヒーローとポップアップは、きれいなデスクトッププレビューだけでなく、通常の携帯電話接続で確認する価値がある。

Ludovic Dind により制作。lesaintgeorges.ch にアクセス。

5. Raw House

手曲げされた 1 本のホットピンク色のネオンサインが純粋な黒い画面の中央に配置され、他に競い合うものは何もない。グロウはいかなる写真もなくワードマークに深さをもたらす。ピンク色はピル型ナビゲーション、「今すぐ予約」ボタン、丸いロゴで繰り返されるため、ページ全体が暗い部屋の 1 つの照らされたサインのように感じられる。

これを参考に：平らなダーク背景上の 1 つの自信を持ったロゴまたはサイン周囲に最初の画面全体を構築し、ボタンに単一の色を繰り返すため、予約リンクが見落とされることは不可能になる。

注意：ページは平均より重く、ラボテストのスコアは中程度ですが、実際の訪問者は3つのCore Web Vitalsすべてで良好な体験を得ています。重さはありますが、実運用では悪影響を及ぼしていません。

webelevennによる構築。rawhouseathens.grを訪問してください。

6. Soufflet Malt

深い紺色の背景と巨大な金色の花弁型マークがページに即座のアイデンティティをもたらし、限定的なカラーパレットはすべてを落ち着かせます。見出しは太く広いキャピタル体で設定され、白からグレーにフェードアウトしながら表示されており、スクロールまたはロードアニメーションを示唆しています。ピル型のメニューバーと金色の購入ボタンは整理されており、見つけやすく保たれています。

活用しましょう：深い背景に暖色のアクセントカラーで単一の巨大なブランドマークを中心にヒーロー領域を構築することで、小規模フードブランドが写真撮影ではなくフラットな形状から印象的なファーストスクリーンを得ます。

注意：ページは平均より重く、ラボテストのスコアは中程度のみで、実際の訪問者はメインコンテンツの読み込みが遅いと感じます。したがって、大きなアニメーション化されたヒーロー領域は最後に検討する詳細ではなく、最初に確認する場所です。

Allan LE GOUILによる構築。souffletmalt.comを訪問してください。

7. Meyers

ローストしたジャガイモ、ケール、ザクロのサラダの単一の接写がスクリーン全体を埋め、深い緑色と赤い種がほとんどの役割を果たします。見出しは重く、かつ厚みのあるサンセリフの下部に配置され、奇妙なレターフォルムを持ち、暗くなった画像に対して見出しが読みやすいように、マスタード金でクリーム色です。濃い茶色のトップバーとタンのタブはパレットを暖かく保ち、食べ物に関連付けています。

活用しましょう：マスタードとクリーム色の太い見出しを、あなたの最高の料理の深くトリミングされた暗くされた写真の上に配置することで、優れた写真がページの上部を担います。

注意：ページは軽いですが、ラボテストでは遅く、実際の訪問者はレイアウトシフトを目撃します。ただし、これは素のページ重量だけでなく、読み込み時に大きな画像と見出しが動いていることを指します。

Dwarfにより構築されました。meyers.dkを訪問してください。

8. Woolmers Estate

家と野地の全幅航空写真は重い仕事をしており、下半分に暗いウォッシュがあるため白いテキストが読みやすくなります。見出しは高コントラストのセリフで設定され、最後の行はイタリック体の金色で、ロゴとタンのボタンを反映しています。上記の小さなスペースを空けたキャップスラベルと薄いルールがスタックに落ち着いた、整理された感覚をもたらし、薄い青色とタンのボタンは明確に区別されたままです。

活用しましょう：自社の敷地の幅広い写真と柔らかい暗いオーバーレイ、セリフの見出しの最後にイタリック体のアクセント行、主なアクション用の2色のボタンを組み合わせてください。

注意：ラボの結果は中程度ですが、ページは軽く、実際の訪問者はCore Web Vitalsのあらゆる測定で良好な体験を得ます。したがって、大きなヒーロー画像は単に重さを追加するのではなく、その場所を獲得しています。

YourMarketingExpertsによる構築。woolmers.com.auを訪問してください。

9. White Desert

全幅フィルムが航空機の窓を通して再生されるため、暗いフレームは自然なビネットになり、薄い氷縁はページの中央に位置します。巨大で高い凝縮キャピタル見出しが下部に沿って実行され、小さなイタリック体のセリフ行が左にたたまれています。薄い垂直ルール、ボックスナビゲーション、モバイル上の単一の暖色のオレンジボタンが、抑制を一貫して保ちます。

活用しましょう：単一の短いイタリック体のセリフ行を、自社のキッチンの循環フィルムを超える単一の巨大な凝縮見出しと組み合わせることで、誰もメニューを読む前にムードが設定されます。

注意点: ラボテストではページが遅く、平均より重いため、実際の訪問者はページ読み込み時にレイアウトのズレを目にします。フルスクリーン動画と大きなタイプフェイスは安定性に代償をもたらします。

Malvahにより構築されました。white-desert.comを訪問してください。

10. Agrumea Farm

温かみのあるクリーム色の背景があらゆる要素を支え、焦げたオレンジと紫色の小さなアクセントが明確に際立ちます。デスクトップの開始画面はシンプルで、バスケットを持つ農家の小さなコンパクトロゴ、丸みを帯びた言語切り替えボタン、メニューピルが配置され、その後に背の高いフレアキャピタルが縁に沿って湾曲した薄紫色の大きなシェイプが続きます。モバイルでは、ナスの紫、トマトの赤、レモンの黄色、緑色のフラットなカットペーパー野菜がリング状に並び、大きなオレンジ色の数字が中央からのぞいています。

参考にしてください: プレーンなクリーム色の背景に、野菜をフラットで分厚い色のシェイプとして描くことで、小規模な食品ブランドにシンプルなベクターファイルから独特の外観を与えます。

注意点: ページは軽量ですが、ラボの結果は並程度で、実際の訪問者はメインコンテンツの読み込みが遅いのを目にします。これは大きなアートワークが表示されるまでに時間がかかることを示唆していますが、ページ全体は特に重くはありません。

Studio K95 により制作されました。agrumeafarm.it を訪問してください。

11. Slurp

ページはほぼ全体が、点在した石製のボウルから持ち上げられる麺の単一のオーバーヘッド映像で、温かみのあるオレンジ色の木目に対して配置されています。競合するものは何もありません。ナビゲーションは上部の小さなクリーム色のテキストで、名前は下部に巨大で幅広くスペースが取られた幾何学的な大文字で配置されています。温かみのあるパレットと箸を持つ手が、人間らしさと食欲をそそる感じを与えます。

参考にしてください: 最も映える料理の単一のオーバーヘッドショットをプレーンな木のテーブルで撮影し、小さなメニューの後ろで画面全体を埋めます。

注意点: ページは非常に重く、ラボスコアは並程度ですが、実際の訪問者はすべてのコアウェブバイタルメジャーで良好な結果を得ます。これは重量を実際に人々が待つ最初の事柄から分離することの重要性を思い出させます。

Studio Morfar により制作されました。slurpramen.dk を訪問してください。

12. Paul & Bohne

ローストビーンズの密接にトリミングされ、やさしくぼやけた写真が画面を埋め、背の高い圧縮された白いヘッドラインが完全に中央に配置され、十分なコントラストが得られています。強い黄色のバンドが上下で濃いナビゲーションバーをフレーミングするため、パレットは黄色、ほぼ黒、コーヒー色にとどまります。タイプは大胆ですが整然としており、モバイルビューは同じヘッドラインと黄色の上に大きな黒いヘッドラインを保持しています。

参考にしてください: 豆、ペストリー、プレートのうち1つの密接にトリミングされた写真を、1つの大胆な圧縮ヘッドラインと周囲のバンドの1つの明るいブランドカラーで組み合わせてください。

注意点: ページは平均より重く、ラボテストでは並程度ですが、実際の訪問者はコアウェブバイタルの3つすべてで良好なエクスペリエンスを得ます。したがって、フルブリード画像は実際には人々に害を及ぼしていません。

ONTU により制作されました。paulundbohne.at を訪問してください。

13. Ossa Wines Tasmania

ギザギザした岩峰の全画面モノクロ写真が画面を埋め尽くし、上には厚い雲、下には暗い岩屑が広がっている。幅広の幾何学的な大文字で綴られた名前は、白い文字が斜めに段階的に配置され、グレーの反復が後ろに続いており、段階的なアニメーションを暗示している。小さな赤い「Tasmania」の単語が唯一の色彩であり、他に注意を引くものは何もない。

参考にしよう。自分の土地、キッチン、またはダイニングルームの全画面モノクロ写真を使い、その上に幅広の幾何学的な大文字でシンプルなロゴを配置し、ブランドカラーをただ1色だけ小さなラベルに留めておく。

気をつけよう。ページは軽量で、それは利点だが、ラボテストの結果は平均的で、実際の訪問者がどのように機能するかについてGoogleからの十分なリアルユーザーデータがない。

Inhouse Designによる制作。ossa.wineを訪問。

14. Don Molinico

加工肉、チーズ、瓶詰め、模様のプレートが並んだ食卓の全画面上から見た写真が画面全体を埋め尽くしており、コピーが入る前に食べ物が語りかけてくる。見出しは背の高い縮幅サンセリフ書体でクリーム色に設定されており、画像の一部として読めるほど大きく、赤いロゴブロックに金色の文字が施され、上中央に固定されている。温かみのあるテラコッタ色が写真をブランドカラーに結びつけている。

参考にしよう。自分の食卓の上から見た写真を全画面背景として始めて、その上に大きなクリーム色の見出しを配置し、ロゴの上に単色のブランドカラーブロックを乗せる。

気をつけよう。ラボテストはページが遅いと評価し、リアルユーザーはメインコンテンツの読み込みとレイアウトシフトで問題を見ている。ページ自体は軽量だが、画像処理に注力すべき場所だ。

AUGE EXPERIENCEにより構築されました。donmolinico.esを訪問してください。

15. Benvenusa Italian Wines

ロゴが端から端まで走る太く幅広いサンセリフ書体で、名前はページ上で最初で最も大きく見える。その下に、電気的な紫色のフラットバンドが古典的なセリフ体の小文字を保持し、印刷されたラベルのように見える。黒と白の丘陵写真が色を抑制し、別荘と鐘塔が紫色に穏やかな対抗要素を与えている。

参考にしよう。1つの巨大なロゴと1つの大胆なフラットカラーブロック、そして自分の場所のモノクロ写真を組み合わせて、全体的な見た目が3つの選択肢から生まれるようにし、余分なグラフィックスを避ける。

気をつけよう。ページはラボテストの結果が平均的で平均より重い。大きな写真がその重さの場所にあると考えられる。また、実際の訪問者に対してどう感じるかを言うために十分なリアルユーザーデータがなかった。

Sons & Co.により構築されました。benvenusa.comを訪問してください。

16. Monarque Événements

深いバーガンディー色の背景が、広がった高コントラストの大文字書体で設定された巨大な見出しを運び、温かみのあるオフホワイトで読みやすい。5つの正方形の写真が不均一な高さとサイズで周囲に配置されている。それぞれ温かく照らされている。ワイングラス、焼き肉、ライブバンド、チーズボード上のチーズ、装飾されたドリンク。寛大な空きスペースが散らばった写真が散乱した感じにならないようにし、見出しの下に1つの静かなリンクが配置されている。

参考にしよう。温かく照らされた正方形にトリミングされた食べ物と部屋の写真を数枚、1つのフラット背景色の巨大な見出しの周囲に配置して、スライダーをスキップする。

気をつけよう。ページは軽量で、ラボテストは平均的で、モバイルビューではまだ1つの写真がぼやけており、残りの画面が空っぽだ。ページの重量が控えめに見えても、写真は遅い接続での到着が遅れる可能性がある。

Solsticeによる制作。monarque-evenements.comを訪問。

17. Best Bean Best Cup

深い森林緑が全ページを埋め尽くし、背の高い黒い見出しが上部全体を大文字で横切るタイトなグロテスク体サンセリフで設定されている。その下に、くすんだグレー緑色のフラットな幾何学的な形が半円と四分円のロゴマークを反映して、大胆な黒いカップグラフィックの周囲で繰り返しパターンを作成している。薄いグレーの丸形ナビゲーションバーが鮮やかに目立ち、モバイルビューでは同じ大胆な見出しが整然と中央に積み重ねられている。

参考にしよう。1つの深い背景色とシンプルな形から構築されたフラットな繰り返しパターンを組み合わせて、小さなカフェが基本的なベクターアートワークから独特の外観を得られるようにする。

注意: ページは非常に重く、ラボテストでも平均的な結果です。ページから検出されたアニメーションツールもあります。ただし実際のユーザーがどう感じるかは、リアルユーザーのデータが不足しているため判断できません。

Nam Buiが制作しました。bestbeanbestcup.com.auをご覧ください。

18. Eatery Berlin

ページは電気的な紫、ターコイズ、白という限定的なパレットで構成されているため、見出し、薄いティール色のサイドストリップ、分割されたポートレートがひとつのシステムのように感じられます。重くて柔らかいエッジのセリフ見出しが、ナビゲーションと小さなラベル用の軽いモノスペースフェイスと対比され、トーンとサイズに明確なコントラストが生まれています。見出しの周りに十分なホワイトスペースがあるため、見出しがページを支配し、野菜と人間が半々のポートレートがストーリーを語ります。

参考にしましょう: 特徴的なセリフ見出しとプレーンなモノスペースフェイスをメニューとラベルに組み合わせ、すべてを2つの大胆な色に統一することで、大きな写真予算がなくても設計されたように見えるページが実現します。

注意: ラボテストは平均的な結果でしたが、ページは軽く、リアルユーザーは3つのコアウェブバイタルすべてで良好な結果を得ています。つまり、実際にユーザーが経験するものは堅牢です。

eateryberlin.com をご覧ください。

19. Cozy Eating Village

ピクセルアートスタイルがページに明確なパーソナリティを与えています: ずんぐりとした角張ったキャピタルタイプフェイス、小さなピクセル雲が散った薄い空色の背景、傾いた記念写真のように見えるクリーム色のカード。各カード内には手作り食品の実際の写真が入っているため、温かみは装飾ではなく調理から生まれています。太い茶色の枠線と小さな灰色の材料アイコンが付いたフィルタボタンがグリッドを整理し、読みやすくしています。

参考にしましょう: 各料理の写真を短いキャプションと小さな材料アイコンの列が付いたプレーンなクリーム色のカードで囲むことで、メニューやレシピグリッドがカスタム写真なしで個人的な感じになります。

注意: ページは非常に重く、主に大量の完全な写真が原因で、ラボテストの結果も平均的でした。ただし Google のリアルユーザーデータが不足しているため、実際にはどう感じるかは判断できません。

Brooke Beswick による制作。cozyeating.app をご覧ください。

20. Qissa

深い真夜中紺色の背景に、単一のメタリックゴールドアクセントがロゴ、予約ボタン、小さなスペース区切りのキャピタル文字に使用されているため、視線が予約場所に向かいます。レストラン名は高コントラストのセリフで表示され、その上に薄いサンセリフの段落があり、すべて十分な空間を持って中央に配置されています。モバイルでは、ぼんやりとしたカトラリーが放射状に並んでテキストの背後に配置され、ロゴと呼応しています。

参考にしましょう: 暗い背景と単一の温かみのあるメタリックアクセントのペアリングを予約ボタン用に限定することで、主要なアクションがスクリーン上で最も明るい要素になります。

注意: ページは平均より重く、リアルユーザーはメインコンテンツの読み込みに少し長く待つため、大きな暗いヒーローイメージを圧縮する価値があります。また、ラボスコアも平均的です。

制作:Red Dash Media。qissa.co.ukを訪問。

レストランウェブサイトに必要なこと、見栄えの良さを超えて

美しいファーストスクリーンが注目を集めます。ただし訪問が予約に変わるには、人間にもGoogleにも実用的な詳細が見つけやすい必要があります。

• メニューを独立したページに配置します。Google の飲食ビジネス向けガイダンスでは、構造化データに「メニューの完全修飾URL」を記載するよう求めているため、メニューは独自のアドレスが必要です (Google Search Central)。
• 営業時間、電話番号、住所をテキストで公開します。Google のローカルビジネスマークアップでは、営業時間、住所、国番号と市外局番を含む電話番号が必要です (Google Search Central)。
• Restaurant タイプを使用します。Google は利用可能な最も具体的なビジネスタイプを推奨し、Restaurant を例として挙げています。servesCuisine は提供する料理を示します (Google Search Central)。Schema.org の acceptsReservations は予約ページを直接指示できます (schema.org)。
• Googleビジネスプロフィールを最新の状態に保ってください。メニューエディタでは料理を説明と価格付きでリストアップでき、変更がMapsと検索に表示されるまでに24～48時間かかります(Googleビジネスプロフィール ヘルプ)。
• 予約ボタンをページ上で最も目立つ要素にしてください。Qissaは「テーブルを予約」を最初の画面で「メニューを見る」の隣に配置し、Studenterkildenはスクロール前に「テーブルを予約」を2回表示しています。
• ヒーロー写真を携帯電話向けにサイズ調整してください。ほとんどのページでこれが最大の要素であり、LCPが最も失敗しやすいメトリックでした。

レストランのサイトが古く見える場合、あるいは見た目は良いが読み込みが遅い場合は、ウェブサイトリデザインで対応すべき点です。レストランウェブサイトデザインページではメニュー、予約、ロケーションページをどのように構築するかについて説明しており、速度だけを改善する必要がある場合はウェブパフォーマンス最適化でより小規模な対応となります。

よく聞かれる質問

レストランウェブサイトを優れたものにするには何が必要ですか?

最初の画面で4つの質問に答えています。提供する料理は何か、どこに位置しているか、営業時間は何か、どのように予約するかです。これら20サイトの中で、見た目が最も良いサイトは単一の強力な食べ物の写真、または大きなセリフ体の見出しで主張し、その他のものはすべて視界から外しています。携帯電話で最も機能するサイトも、その写真をすばやく読み込みます。

レストランウェブサイトに何を含めるべきですか?

名前、住所、電話番号、営業時間、独立したウェブページ上のメニュー、および予約または注文の明確な方法です。Googleのローカルビジネスガイダンスでは、飲食店に対してメニューのURLと国番号と市外局番付きの電話番号を求めており、構造化データで飲食店タイプを推奨しています(Google Search Central)。

レストランウェブサイトはどのくらいの速度で読み込まれるべきですか?

Googleはページロードの75パーセンタイルで、LCPが2.5秒以下、INPが200ミリ秒以下、CLSが0.1以下の場合をよいと判定します(web.dev)。ここの十分なリアルユーザーデータを持つ13サイトのうち、5サイトが3つすべてを満たしています。

レストランウェブサイトはどのプラットフォームを使用していますか?

このドローではWordPressが20の中で7つを運営しており、2つのコーヒー焙煎業者はオンラインショップにShopifyを使用しています。パスするサイトもフェイルするサイトもここではWordPressで実行されているため、プラットフォーム自体が速度を決定しません。

より美しいウェブサイトはどこで見ることができますか?

64の美しいウェブサイトピラーは、スタジオから博物館まで8つのカテゴリを同じテストでカバーしています。デザイナーとスタジオについては、20の最高のポートフォリオウェブサイトを参照し、閲覧するギャラリーについては、ウェブデザイン インスピレーションサイトラウンドアップを参照してください。