2026年の美しいウェブサイト64選、ライブチェック済みとスピードテスト済み

スタジオとポートフォリオからレストラン、美術館、ヘルスケアブランドまで、8つのカテゴリー各々で64のウェブサイトを紹介します。これらを選別する際に個人の好みは基準としていません。227個のライブで手動レビューされたサイトから64個すべてをランダムに抽出し、各々が読み込まれることを確認してスマートフォンで測定し、コピーする価値がある点を記録しました。厳しい発見は速度です：十分な実ユーザーデータを持つ35サイトのうち、Googleの3つのCore Web Vitalすべてに合格したのはわずか11サイトで、モバイルLighthouseスコアの中央値は61です。

これら64個はどのように選ばれテストされたか

「最高のウェブサイト」リストの大部分は、1人の人物の好みです。それはインスピレーションとしては機能しますが、美しいページの速度コストを隠します。なぜなら遅いサンプルはショートリストから消える傾向があるからです。私は逆の方法を使いました。

• プール：私が保守するキュレートされたデザインデータベースから227個のライブウェブサイト。各々は手動でレビューされ、デスクトップとモバイルキャプチャを持ち、過去30日間の可用性チェックに合格しました。
• 抽出：8つのカテゴリー各々から8個のサイトをランダムに抽出し、同一スタジオから2個以上含まない。ここにあるものはすべて私のクライアント作品ではなく、誰も掲載のために料金を支払っていません。
• ライブチェック：各々のサイトは2026年10月31日にブラウザ（Chromium）で開かれ、掲載された同じサイトを読み込みました。元の抽出の2個のサイトは、デザイン全体を隠す年齢認証スクリーンの後ろにあったため、各カテゴリーの次のサイトと交換されました。
• ラボテスト：2026年10月12日から31日の間に1サイトあたり1回のモバイルLighthouseテストで、パフォーマンススコア、Largest Contentful Paint、総ページサイズを記録しました。
• 実ユーザーデータ：Phoneに関するChrome UXレポート数値で、Googleが実際のChromeユーザーから28日間のローリングウィンドウで収集したものです。小規模なサイトは出現するのに十分な訪問者がないことが多いため、64サイトのうち26サイトは「データなし」と表示されています。
• ランキングではありません：各カテゴリー内の順序は抽出順です。

64のウェブサイトの美しさが速度でかかるコスト

GoogleはLCP 2.5秒以下、INP 200ミリ秒以下、CLS 0.1以下を「良い」と定義しており、ページロードの75パーセンタイルで測定されます（web.devを参照）。ページはこれら3つをすべて満たす場合、Core Web Vitalに合格します。64個のサイトは次のように着地しました。

参考までに、Googleの2026年9月Chrome UXレポートリリースでは、18,376,044個のオリジンのうちコアウェブバイタルが良好なオリジンの割合は55.9%です (Chrome UXレポートリリースノート)。これらの64サイトは、その率のやや半分である35個中11個、約31%で合格しています。美しいサイトが遅い必要はありませんが、これらのほとんどは遅いです。

ラボスコアと実ユーザーの結果が一致しないことが多いです。これはLighthouseの数値でサイトを判定する場合に重要です。LighthouseはまったくINPを測定できません (web.dev)。また、制御された環境で1回実行されるのではなく、実際のデバイスとネットワーク全体で実行されます。Heron AIはラボで52のスコアを獲得しながら、実ユーザーのすべての3つのコアウェブバイタルに合格しています。Fauna Roboticsは68.6 MBの重さがありますが、ページの表示部分が素早く到着するため、合格しています。

カテゴリーは予想より差が少ないです。スタジオは中央値のラボスコアが69.5で最高であり、文化、教育、非営利のサイトは50.5で最も低いです。全画面写真とビデオに大きく依存する食品、飲料、ホスピタリティのサイトは、3つのコアウェブバイタルすべてに合格したサイトがありませんでした。

64個は何で構成されているか

Next.jsは64個中13個を実行し、Nuxtは10個です。WordPressは9個、Webflowは8個、Shopifyは3個、Framerは2個であり、Astro、Craft CMS、Gatsby、Remix、SvelteKitのそれぞれで1個のサイトがあります。14個のサイトでは、HTMLにスタックが見えませんでした。独自のビルド用にフレームワークを選択している場合、Astro対Next.jsとウェブフレームワークハブがトレードオフをカバーしています。

64個に共通していること

データベース内の各サイトはレビュー中にスタイルタグを取得し、スタックはライブHTMLから検出されるため、これらのパターンは印象ではなく数です。

• 抑制が勝つ。64サイト中23サイトが最小限というタグが付けられており、他のスタイルより多い。余白が豊富で、フォントファミリーは1つ、配色パレットは短く、これらが大部分の仕事をこなしている。
• 写真がページを支える。22サイトが写真で主導している。全幅の1つの強力な画像は、ほぼ毎回コラージュに勝つ。
• モーションは一般的で、コストがかかる。20サイトがスムーズスクロールまたはアニメーションライブラリを読み込んでおり、Lenisが14サイト、GSAPが11サイトで使用されている。それらの中央値Lighthouseスコアは56.5で、ライブラリなしのサイトの64と比較すると低い。
• ダークとカラフルは同等に人気である。14サイトはダーク、14サイトはカラフルというタグが付けられている。1つを意図的に選んで、それにコミットしよう。
• タイプがブランド。12サイトはタイポグラフィというタグが付けられており、特大見出しまたは独特なフェイスがヒーロー画像の役割を果たしている。

スタジオとエージェンシー

スタジオとエージェンシーのサイトはデザイナー自身のショーウインドウであるため、通常はタイプとモーションで最大のリスクを取る。このグループは8つのグループ中最高の中央値ラボスコア69.5を達成し、DATT Studioが0.1 MBのページで100点を獲得したことで支援された。スタジオを採用する場合、そのサイト自体が作業習慣の公正なプレビューであり、Londonウェブデザインエージェンシーのページは同じ案件にどのようにアプローチするかを説明している。

1. Little Plains

丸角の白いパネルが、ぼかしが入った空と海の写真の上に重ねられており、ページに落ち着きと整頓感をもたらしています。ボートに乗る2人を描いた緩い線画と筆記体の見出しが手作りの温かみを加え、シンプルなセリフ体の本文は可読性を保ちます。色合いは主に紺色で、柔らかいアクセントが数個入っています。

参考にするなら: 手描きのイラスト1点と筆記体の見出し、そしてシンプルなセリフ体の段落を組み合わせれば、小さなスタジオでも撮影なしに認識しやすいブランド個性を作り出せます。

注意する点: ラボテストの結果は平凡で、ページは非常に重いため、線画1点、見出し1つ、段落1つだけを配置する画面に大きな負担がかかります。Google は実際のユーザーがどのように感じるかを示すための十分なリアルユーザーデータを取得していません。

社内デザイン。littleplains.com を訪問してください。

2. DATT Studio

純黒の背景に、幅広で太さと細さの対比が鮮明な白いセリフ体の大文字 D が配置され、ロゴの役割を果たしています。下の見出しは狭くて太いグロテスク書体を使用し、最後の行にはリンクキューとして下線が引かれています。余白が十分にあるため、両方の要素に余裕が生まれています。

参考にするなら: 個性的なディスプレイ書体の文字1つと、シンプルで太いサンセリフの見出しを組み合わせ、単色の平坦な背景に残りを任せます。

注意する点: ページはラボテストで高速と判定され、軽量なため、イメージなしのレイアウトに適しています。ただし Google は実際のユーザーパフォーマンスを示すための十分なリアルユーザーデータを取得していません。

社内デザイン。dattstudio.com を訪問してください。

3. Ad Astra Marketing

地球の曲線の上に立つ宇宙飛行士の写真が全体的なアイデアを担い、見出しがそれに直接答えています。背の高い狭いセリフ体にはイタリック体の単語が1つ含まれ、黒いページに温かみをもたらし、小さなスペーシング付きモノスペースラベルが他の部分を整然としたものにします。テキストの周りに十分な余白があるため、画像が呼吸する余裕が生まれています。

参考にするなら: 強力で関連性のある写真1点と、1つの単語をイタリック体で配置する大きなセリフ体の見出しを組み合わせ、補足テキストは小さく目立たないようにします。

注意する点: ラボテストは高速と返ってきて、ページは軽量なため、大きな黒いヒーロー画像のコストは低くなりますが、Google は実際のユーザーパフォーマンスを示すための十分なリアルユーザーデータを取得していません。

社内デザイン。adastramarketing.com.au を訪問してください。

4. Hattenberger Partner

太くて幅広いサンセリフの巨大な黒い見出しが無地の白い背景に配置され、メッセージが他のすべての要素より先に伝わります。電気的な青の柔らかくぼやけた塊が左端から流れ込み、縁に文字が入った円形の青いバッジがページにスタンプのような焦点をもたらします。小さなタイプライター風の本文テキストと青いブラケットアイコンが、コーダー的な雰囲気を雑然とさせずに加えています。

これを借りる: 見出しを太いサンセリフで非常に大きいサイズで無地の白い背景に配置し、その背後に単一のぼやけた色の形状を加えて奥行きを出します。

注意点: ページは明るく、その点は良いのですが、ラボスピードテストは中程度の結果で、Googleは実際の訪問者データが少ないため、日常的な使用でどのように感じるかを示すことができません。

社内デザイン。hattenbergerpartner.deを訪問してください。

5. GM Studios

スタジオの暗い全面写真には、ソフトボックスライトの下の丸いテーブルに座る2人のプレゼンターが写っており、すぐにトーンを設定します。白い太い拡張サンセリフの見出しが深い赤黒のベースに消え、テキストの可読性が保たれます。上の細いスクリプト線がコントラストを加え、レイアウトを圧迫しません。

これを借りる: 自分のワークスペースの実際の写真を短く、非常に大きな見出しの背後に使用し、画像の下部を単色にフェードさせて、テキストが読みやすくなるようにします。

注意点: ラボテストは中程度の結果で、ページは平均より重く、これはフルスクリーンのスタジオ画像またはビデオに適しています。Googleは実際の訪問者がどのように感じるかを示すのに十分なデータを持っていません。

tonsiteweb.ioで構築。lesgmstudios.comを訪問してください。

6. Boc.Studio

飽和したオレンジのバンドが柔らかいほこりっぽいバラ色の背景を横切り、両側に小道具のような2つのガラス質の透明な球体があります。ワードマークは清潔な幾何学的サンセリフで、スペースが狭く、その横の太く、通常の線が明確な階層を設定します。大きな空きエリアが色のコントラストを活かします。

これを借りる: 強く色付けされた水平バンドを使用して、落ち着いた単色背景に自分の名前と短い説明を配置し、最初の画面に明確な焦点を持たせます。

注意点: ページは平均より重く、ラボテストで中程度のスコアですが、実際の訪問者は3つのCore Web Vitalsすべてで良い体験を得ており、重さは実際には人々を害していません。

社内デザイン。boc.studioを訪問してください。

7. LxL Creative

丸い枠の単一の肖像が深い茶色の地に対して配置され、クリーム色の広い文字とオレンジの手書き体が写真とジャケットから色を引き出します。巨大なワードマークが画像の端と重なり、写真とタイプを結び付けます。十分な空きスペースがタグラインを落ち着かせています。

これを借りる: 1つの強い肖像を太く、幅広いサンセリフのクリーム色と単一の手書きアクセントで1つの明るい色で、暗い平らな背景にすべて配置します。

注意点: ページ自体は軽いですが、実際の訪問者はメインコンテンツの読み込みが遅く、タップとクリックへの応答が鈍く見え、これはスクリプトされたアニメーションとページトランジションでレイヤー化されたサイトに適しています。

Jordan Gilroy が製作。lxlcreative.co.uk をご覧ください。

8. Outfit

1つの巨大な単語が、厚みのあるワイドなサンス・セリフで、温かみのあるオフホワイト背景に彩度の高い赤で全幅に広がっています。その他はすべて小さく、赤く、列グリッドに厳密に配置されているため、階層構造が即座に明確です。淡いグレーで撮影された黒い衣類の写真が唯一のコントラストを提供します。

これを活用しましょう: 1つの強力な色を選び、企業名をヘビーなサンス・セリフで全幅に設定し、他のすべての要素を小さく、同じ色で、シンプルな温かみのある背景に保ちます。

注意してください: このページはラボテストで高速化を確認でき、軽量性を保っています。これはタイプ、平坦な色、そして数枚の写真から構築されたレイアウトに適しています。ただし、Google は実際のユーザーに対するパフォーマンスを判定するのに十分なリアルビジタデータを持っていませんでした。

++hellohello が制作。outfit.hellohello.isをご覧ください。

ポートフォリオ

ポートフォリオは通常1人または非常に小さなチームに属し、最高のポートフォリオは作品を画面いっぱいに表示させます。合格した8サイトの中で、3つの Core Web Vitals をすべてクリアしたサイトはなく、2つのサイトは 35 MB 以上の重さがあります。これは、フル解像度の作品がページに直接配置されるときに起こることです。自分のサイト向けについては、ポートフォリオ ウェブデザイン を参照してください。

より大きなサンプルとして、同じプールから抽出され同じ方法で測定された 20 のポートフォリオについては、最高のポートフォリオ ウェブサイト 20 を参照してください。

9. Vivien's Creative

淡色の砂丘を横切る2人の人物を映した広大な写真が画面いっぱいに広がり、重厚な白いワードマークが下端に配置されている。導入行は薄いセリフ体を使い、グレーグリーンの空を背景に中央に配置されている。ナビゲーションは3つの小ぶりな大文字に縮小され、写真がほぼすべての役割を担っている。

参考にしよう: 1枚の強力なフルブリード写真と、1つの特大ワードマーク、そして短いセリフ体の導入行を組み合わせれば、小規模企業は余分なパネルなしに自社を紹介し、事業内容を説明できる。

注意しよう: ページは軽いが、ラボテストの結果は平凡で、Googleは実際のユーザーのパフォーマンスを示すのに十分なリアルビジターのデータを持っていなかった。

Christopher Doyle & Co.が制作した。vivienscreative.com.auを訪問しよう。

10. Studio K95

彩度の高い青が画面を満たし、太いブロックで構成されたペールガラス調のバラが焦点として瞬時に読み取れる。プロジェクトポスターがその周りを環状に配置され、スマートフォンではアクティブカードが画面の半分まで膨らみ、柔らかい赤いラベルピルが付く。ナビゲーションは小さくシンプルな大文字で十分な余白を保つため、アートワークが画面を主導する。

参考にしよう: バックドロップ全体に1色の大胆なブランドカラーを選び、その上に大胆な中央画像を配置し、ナビゲーションは小さく白のままにしよう。

注意しよう: ページ自体は軽いが、ラボテストの結果は平凡で、リアルビジターはメインコンテンツの読み込みが遅い(LCP)ことと、タップやクリックに対する反応が鈍い(INP)ことを報告している。これはインタラクティブなシーンを中心に構成されたページに適している。

社内で設計された。k95.itを訪問しよう。

11. Jesper Landberg

わずかなパースペクティブグリッドがある黒い空間がプロジェクトパネルすべての注目を集め、中央パネルの暖色系アンバーライトが視線を直接そこに引き寄せる。背の高い細いイタリック体セリフが光る球体とプールの上に配置され、ページに落ち着きのある触覚的な印象を与える。リンクはコーナーの小さな大文字に縮小されるため、画像と競合するものがない。

参考にしよう: 普通の暗いバックグラウンドとコーナーの小さなリンクを使い、強力な画像が少数でも全体のページを主導させよう。

注意しよう: ページは非常に重く、ラボテストで平凡なスコアを獲得し、リアルビジターはタップやクリックに対する反応が鈍い(INP)ことを報告している。これはリッチなモーションと大規模な画像の通常のコストである。

社内で設計された。jesperlandberg.comを訪問しよう。

12. ハウス・オブ・ハニー

ワードマークは太い幅広のサンセリフ体で端から端まで走っており、細いイタリック体の「of」がそれを貫いている。ヘッダーはほこりっぽいピンク色と深い茶色の2色のみで、写真がその下のすべての温かみを表現している。隅の小さいセリフ体の大文字がタグラインを静かでバランスの取れた状態に保っている。

参考にしよう：1つの非常に太いヘッドラインフェイスと1つの繊細なイタリック体のアクセント単語を組み合わせ、ヘッダーを2つのベタ色に抑えて、写真に話させる。

注意点：ページは軽いが、実際のユーザーはメインコンテンツの読み込みが遅い（LCP）ことに気付く。これはヘッダーの直下にある大きなフルワイド写真が原因であり、その画像を最初に圧縮してサイズを慎重に調整する必要がある。

Edoardo Lunardi が制作。houseofhoney.com をご覧ください。

13. Félix Péault

青からグリーンへのグラデーションが暖かみのあるオフホワイトにフェードイン。装飾的な華やかさなしにページに雰囲気を与える。巨大な黒いイニシャルは対角の隅に配置されており、背の高いコンデンスドサンセリフのヘッドラインが中央に配置され、タイトに設定されている。その他すべては空白のままで、1 つの写真だけがモバイルで重みを持つ。

参考にしよう：ストック素材のヒーロー画像の代わりに、隅に1つの過度に大きなイニシャルペアまたは短いワードマークを配置し、その背後に1つのソフトなグラデーションを使用する。

注意点：ページが軽いにもかかわらず、ラボテストの結果は平均的であり、Google に実際のユーザーのデータが不足しているため、実際のユーザーにとってどのように感じるかを示すことができなかった。

社内で設計。felixpeault.com をご覧ください。

14. Nordpixel

暗い青とスレートカラーの霧のかかった山の写真がスクリーン全体を埋め尽くし、右下に薄く光る小屋のガラス張りのキャビンがある。ワードマークは中央を横切るように広くスペースされた太い幾何学的な大文字で配置され、ボタンに呼応する青いドットで終わっている。白い丸みを帯びたナビゲーションバーは暗い画像に対して鮮明に引き立ち、モバイルビューは同じ穏やかなコンポジションを保持している。

参考にしよう：1つの大きく落ち着いた写真を使用し、その上に1つの太いワードマークを配置し、ナビゲーションバーに1つの色付きボタンをメインアクション用に配置する。

注意点：ラボテストは平均的な結果となり、ページは平均より重い。これはフルスクリーン写真のオープニングに適しており、Google に実際のユーザーのデータが不足しているため、実際のパフォーマンスを示すことができなかった。

Michael Schnyder が制作。nordpixel.ch をご覧ください。

15. Oimachi

ヘッドラインは大きな軽いグロテスク体サンセリフを使用し、1つの単語をイタリック体セリフに切り替えてコントラストをつけている。別の色を追加していない。淡いグレーのページ、暗いヒーロパネル、狭いはがきの列が明確なゾーンを作成する。モバイルでは、描かれた構造線上の黒いピクトグラムのグリッドが意図的かつ正確に見える。

参考にしよう：プレーンなサンセリフのヘッドラインに1つのイタリック体セリフ単語を混ぜて、色や余分なアセットを追加することなく、ページに差別化のポイントを与える。

注意: ラボテストでページが低速で非常に重いことが判明し、Googleが実際のユーザーの体験を示すための十分なリアルビジターデータを保有していません。

社内設計。oimachi.coをご覧ください。

16. Matthäus Jandl

薄いグレーの背景に太い黒いシンボルのグリッドがすべてを語り、その下の名前には、ページの全幅を占める巨大で幅広いグロテスク体が使用されています。すべてが単色なので、アイコンが個性を演出しています。余裕のある間隔が忙しい形状のセットを落ち着きのあるものにし、読みやすくしています。

ここから取り入れましょう: 名前またはブランドを、ページ全幅にわたる1行の大きくて太いサンセリフテキストで設定し、その上に1つの統一された単純なグラフィックスセットを配置してください。

注意: ページは平均より重く、ラボテストの成績は中程度です。これは多くの大型グラフィックスと、スクロール可能なプロジェクト画像行で構築されたヒーロー領域としては妥当なコストです。実際の使用感を示すための十分なリアルビジターデータがありませんでした。

社内設計。matthaeusjandl.comをご覧ください。

テクノロジーとファイナンス

テクノロジーとファイナンスサイトは、抽象的な内容を説明すると同時に信頼を得る必要があります。Possible FinanceとFauna Roboticsは、3つすべてのCore Web Vitalsに合格しており、Faunaは68.6 MBのページで達成しています。プロダクトサイトについては、SaaS web designおよびfinancial services website designを参照してください。

17. Possible Finance

鮮やかな電気青が左半分とナビゲーションバーを占め、白と濃いグレーの非常に大きく詰められたサンセリフのヘッドラインが一目で読めます。右半分はレンガと葉を背景に笑う女性の温かみのある写真で、冷たい青とよく対比しています。明るい緑のボタンと緑のドルアイコンが目を明確な着地点へ導きます。

ここから借りよう：フラットなブランドカラーと大きなヘッドライン、そして実際の顧客の温かみのある写真をペアにし、メインボタンだけに対比する強調色を使う。

注意点：ラボテストではページは平凡なスコアですが、ページ自体は軽く、実訪問者はCore Web Vitalsのすべてで良い体験を得るため、Framerビルドは重要な部分で成立しています。

possiblefinance.comを訪問する。

18. Linearity

ほぼ黒いページがヘッドラインに画面を支配させます。グレーの接続語がアバターとアイコンを持つ明るいピル形のチップの隣に置かれ、文が入力フォームのように読めます。温かみのあるオレンジボタンとオレンジの送信矢印が唯一の強い色で、目にクリック場所を正確に伝えます。

ここから借りよう：ヘッドラインを主要な単語が強調されたチップを持つ文に変え、単一の明るいプライマリボタンと濃いセカンダリボタンをペアにする。

注意点：ページは平均より重く、ラボテストで遅く、実訪問者は読み込み（LCP）と応答性（INP）に問題を見るため、アニメーション効果は低速接続で代償を伴います。

Konpoによる制作。linearity.ioを訪問する。

19. MagicShot.ai

ほぼ黒いページに重い幅広のサンセリフのヘッドラインが白で、最後の行が紫で強調されており、ページの上部に明確な秩序を与えます。紫はアクションのためだけに予約されています：Getをスタートボタン、Createボタン、アクティブなVideoタブ。製品の動作を示す小さなサムネイルタブの下に大きなビデオパネルがあり、等幅フォントの統計行が技術的なメモを追加します。

ここから借りよう：単一の強調色をボタンと選択状態にのみ使用し、次のステップが暗いまたはニュートラルな背景に対して目立つようにする。

注意点：ページは軽いですが、ラボテストは平凡で、実訪問者は応答性（INP）に問題を報告しているため、タップとクリックは応答が遅く感じるかもしれません。

社内デザイン。magicshot.aiを訪問する。

20. Maxima Finance

無地の白いページの中央に、灰色のローブを着た首のない彫像が切り抜き表示され、見出しがそれを横切って走っている。タイプは細身で幅広いサンセリフと斜体の高コントラストセリフを混ぜ、2つの重要な単語を際立たせている。それ以外はすべて控えめに扱われ、画像に余白を与えている。

これを参考に: 1つの強力でよくトリミングされた画像と、それと重なる見出しを組み合わせ、重要な単語を対比する斜体で設定して、メッセージが一目で読めるようにする。

注意すべき点: ページが明るいにもかかわらずラボテストの結果は平均的で、Googleは実際のユーザーのパフォーマンスを示すのに十分なリアルビジター数データを持っていなかった。

Dirty Martinが制作。maximafinance.co.ukを訪問。

21. Clarvos

クリーム色の刻み目のあるナビゲーションバーを備えた近黒パネルが、ページに自信と格調を与える。見出しは大きくクリーンな幾何学的サンセリフを使い、最後のフレーズは暖かい黄色で強調されている。右下の白いダッシュボードカード（その中に黄色いカードを含む）は製品を一度に表示し、色をしっかりと管理している。

これを参考に: 見出しの重要なフレーズを暗い背景に対する単一のアクセントカラーで強調し、そのカラーを1つのカードとメインボタンで繰り返す。

注意すべき点: ページが明るいにもかかわらずラボテストではページが遅いと評価され、モバイルビューではカードが表示される前に大きな空のダークエリアで開くことになり、これはスクリプトアニメーション（GSAPとLenisの両方が検出された）がコンテンツを保持しているのに適合している。Googleは判断するのに十分なリアルビジター数データを持っていなかった。

BRIGHTSCOUTが制作。clarvos.comを訪問。

22. Finance|able

ほぼ白に近い淡いページが見出しを活躍させ、大きく丸みを帯びたサンセリフで設定され、青いピルボタンの上に中央配置されている。その下に、灰色の金属的な三角形が光沢のあるファセット形状の周りを浮遊し、深さと動きのあるレンダリングされたシーンを示唆している。暗く丸みを帯びたメニューバーは上部エッジに確かなアンカーを与え、ボタン形状をエコーしている。

これを参考に: 短くシンプルな見出しを明るいピルボタンとほぼ白の背景と組み合わせ、装飾的な画像で下のスペースを埋める。

注意すべき点: ページは平均より重く、ラボテストでは平均的なスコアを獲得した。これはSplineとGSAPで構築されたレンダリングされたシーンの通常のコストであり、判断するのに十分なリアルビジター数データはなかった。

Outcrowdが制作。finance-able.comを訪問。

23. Fauna Robotics

暖かいクリーム色の背景と引き締まったダーク見出しタイプが、ロボットが現れる前にページをフレンドリーな感じにしている。寛大に丸みを帯びた大きな写真は、作業台の横に座ったロボットの隣にいる人を示し、製品をニュートラルな感じではなくアプローチしやすいものにしている。ピル型のナビゲーションとオレンジボタンは柔らかい形をエコーしている。

これを参考に: シンプルな見出しのテキストと、自社スタッフが働く様子を撮った大きな本物の写真を組み合わせ、色選びはクリーム色、ほぼ黒、そして温かみのあるアクセントカラー1色に絞ってください。

注意すべき点: ページは非常に重く、ラボテストの結果は中程度ですが、実際のユーザーは3つのCore Web Vitalsすべてで良好な体験を得ているため、重さは実際には支障になっていません。

faunarobotics.comにアクセスしてください。

24. Serve Robotics

フルブリードの動画がスクリーンを埋め、白とロゴと合った濃い緑のデリバリーロボットが密接にクロップされています。見出しは左下に大きくてクリーンなサンセリフフォントで配置され、文字間隔は狭いため、暗い映像の上で一目で読めます。小さな白いナビゲーションタブは上部に浮かぶように配置され、邪魔になりません。

これを参考に: 大きめの白い見出しに、その上に角括弧で囲まれた短いラベルを付け、暗くした写真または動画の上に配置して、メッセージが1秒で読めるようにしてください。

注意すべき点: ページは非常に重く、ラボテストでは速度が遅く、実際のユーザーはメイン画像または動画の読み込みが遅いのを経験します。これはフルスクリーン映像を使う際の典型的なコストです。

WILDが制作。serverobotics.comにアクセスしてください。

自社運営と洋品ファッション

ファッションと自社運営サイトはまず雰囲気を、次に商品を売ります。Ferm LivingとEMO Altar IIは3つのCore Web Vitalsをすべてパスし、RemyShootsはラボテストで93点を獲得しています。ショップについては、ヘッドレスeコマース開発とファッションウェブサイトデザインをご覧ください。

25. Miu Miu、私たちが形づくったブランド

深い紺色の平らな背景に、太い幅広サンセリフ体の白い大文字だけが配置されている。各行は狭い段落の端に寄せられ、最後の単語はレタースペーシングされて同じ幅を埋め、文全体が整った四角形になっている。薄いサウンドプロンプトとスピーカーアイコンが上部に単独で置かれている。

これを参考にしよう: 太い大文字による短い一文を狭い段落内に配置し、各行を端に合わせ、最短行をレタースペーシングして幅を揃える。

注意すること: ラボテストでページが遅く、実際の訪問者はメインコンテンツの読み込みに問題を感じている(LCP)。ページ自体は軽量なため、ページ重量は遅延の原因ではない。

制作: Merci Michel。immersivebags.miumiu.com にアクセス。

26. アイデアの海

ページは画面を中央で二分し、左側に淡い黄色のギャザースカートをはいた屈んだ人物、右側に暗い木目の彫刻と縞模様のはめ込み装飾のファンが配置されている。コントラストの高い鋭くフレアした先端を持つセリフ体の大きな白いロゴが両側の中央に正確に配置されている。ナビゲーションは白い小さなスペーシングされた大文字を使用し、写真が主役を担う。

これを参考にしよう: 二つの対照的な写真を並べて配置し、単一の中央ロゴの下に置くことで、最初の画面でコピーなしにブランドの製品を表現する。

注意すること: ページは軽量だが、ラボスコアは中程度で、実際の訪問者は最大要素の読み込みが遅いことを感じており、フルスクリーン画像が表示されるまでに時間がかかることを示唆している。

制作: Airnauts。aoiofficial.com にアクセス。

27. RemyShoots

ほぼ黒いフレームが写真に全てを託している。中央の画像はフルカラーで、隣接する画像はグレースケールに無彩色化されているため、視線は一箇所に集中する。括弧付き数字とチェックマークタイムラインを備えたモノスペース書体が、写真家のアーカイブに適した静かで技術的な秩序を加える。

これを参考にしよう: フルカラーの画像を無彩色の隣接画像に対して使い、注意を操向し、括弧付きの数字をシンプルなモノスペースキャプションの下に配置する。

注意：ラボテストではページが高速で軽量であることが示されていますが、大規模な写真にもかかわらず、実際のユーザーの訪問データがGoogleに不足しているため、実際のパフォーマンスを表示できません。

Arc Marumoが制作。remyshoots.co.zaを訪問してください。

28. Coutumes

フルブリード写真がすべての仕事をし、左側に銀色のフープピアスの緊密なクロップ、右側にブレスレットが配置されています。マスタード黄色の背の高い凝縮見出しは、写真のTシャツのプリントを取り上げているため、タイプと画像が関連しているように感じられます。トップ全体に軽いセリフのナビゲーションが静かに白で配置されています。

これを参考に：見出しの色を製品写真から直接引き出し、大胆な凝縮見出しと画像が一組として読まれるようにします。

注意：ラボテストの結果は中程度でしたが、ページ自体は軽量で、実際の顧客でのパフォーマンスを表示するのに十分なGoogleの訪問者データがありません。

coutumes.comを訪問してください。

29. Ferm Living

ヒーローはシャギーラグの上の金属製スツールの緊密で温かみのある写真で、軽いセリフ見出しと単一のアウトライン付きボタンが重ねられています。土色のブラウンは下の製品タイルを通して続いているため、ページ全体が1つのパレットとして読まれます。豊富な空白と小さく静かなナビゲーションで、注意は写真に集中します。

これを参考に：セクションごとに1つの緊密にトリミングされた温かみのある写真と単一のアウトライン付きボタンを使用し、ページの他のすべての色をその同じ写真から引き出します。

注意：ページは平均より重く、ラボテストでは中程度でしたが、実際の訪問者は3つのCore Web Vitals全体で良好なエクスペリエンスを得ているため、大規模な写真は実際に機能しています。

Signiflyが制作。fermliving.comを訪問してください。

30. Indigo Laboratory

エントリースクリーンはほぼ黒、白、柔らかいグレーから構築されています。大きなぼやけたワードマークが重いジオメトリックサンセリフで上部を埋め、ウェルカムラインがその下に軽くフレンドリーなサンセリフで中央に配置されています。エンターボタンの背後にある白いブロックは唯一のハードエッジ形状であるため、視線はすぐにそこに到達します。

これを参考に：メインボタンに単一の高コントラストブロック（ここでは白い黒）を使用して、余分な装飾なしに次のステップが明確になるようにします。

注意：ラボテストではページが低速で非常に重いことが判明し、実際の訪問者でのパフォーマンスを示すためにGoogleに十分なデータがありません。

FPTP Studio制作。indigo-laboratory.itをご覧ください。

31. EMO Altar II

真っ黒な地面の上に黒いキーボードのレンダリングが浮かぶので、製品だけが視線を集める。ロゴタイプは背の高いハイコントラストセリフ体で、隣に無地のグレーサンセリフタグラインがあり、飽和した赤いボタンが唯一の強い色になっている。価格カードは丸みを帯びた落ち着いた印象で、行動喚起が明らかだ。

これを参考に: ページに1つのヒーロー画像を暗いフラット背景に配置し、メインボタンの色を1つのアクセントカラーに絞れば、視線が他に向かう場所がなくなる。

注意すべき点: ラボテストの結果は中程度だったが、ページは軽く、実際の訪問者は3つのCore Web Vitalsすべてで良好なエクスペリエンスを得ており、これがショップにとって重要な結果だ。

Electronic Materials Office が制作。electronicmaterialsoffice.com を訪問。

32. Music Sound

ホットピンクから深紫色へのグラデーションがページを埋め、重いウェイトの白いジオメトリックサンセリフのヘッドラインを伴う。4行に積み重ねられ、3行目はインデントされている。マゼンタライトの中で笑う女性がレタリングと重なり、右側の製品タイルは清潔なペールグリーンと赤の背景に位置するので、ヘッドホンとイヤホンは読みやすく保たれる。

これを参考に: 重いサンセリフで短いヘッドラインを1色のグラデーションの上に積み重ね、1枚の写真をレタリングと重ねるようにしてページに奥行きを与える。

注意すべき点: ページは軽いが、実際の訪問者はメインコンテンツの読み込みが遅い(LCP)と報告しており、大きなライフスタイル写真と製品タイルが有力候補なので、これらの最初の画像を圧縮して優先順位をつければ役立つだろう。

Gummy Industries が制作。musicsound.com を訪問。

食品、飲料、ホスピタリティ

食品・飲料・ホスピタリティサイトは食欲を売るので、大規模な写真とビデオに頼っている。このカテゴリーでは3つのCore Web Vitalsすべてに合格したサイトがなく、ラボスコアの中央値は56.5だった。レストランとホテルについては、レストランウェブサイトデザインとホテルウェブサイトデザインを参照。

より大きなサンプルについて、同じプールから抽出した20の食品・飲料サイトを同じ方法で測定した結果は、ベストレストランおよび食品ウェブサイト20選を参照。

33. Vamvalis Foods

フラットな青のフィールドが画面全体を占め、中央に白ロゴが配置され、大きなサイズでも読みやすい明るく丸みを帯びたサンセリフ体の見出しがあります。小さな間隔を取ったキャピタルがモノスペース体でナビゲーションとイントロ行を担当しています。青から薄い灰色への遷移は柔らかい曲線の縁で分けられ、モバイル表示では色付きの葉の形がシードバーの丸い写真を枠どっています。

参考にする点：大きく明るい見出しと小さな間隔を取ったキャピタルラベルを組み合わせることで、2つのタイプスタイルと1つの背景色だけで階層構造を明確にしましょう。

注意が必要な点：ページ自体は明るいですが、実際の訪問者はメインコンテンツの読み込みが遅く、読み込み時に要素がシフトするのを見るため、空のヒーローセクションと遅延する画像の改善の余地があります。

Point Blankが制作しました。vamvalisfoods.comをご覧ください。

34. Best Bean Best Cup

飽和度の高い濃緑がページを覆い、太い黒い見出しが窮屈な大文字サンセリフ体で直接配置されています。その背後には、くすんだ灰緑色の半円と四分円の帯がヒーローセクションに印刷された風合いをもたらしています。ピル型のナビゲーションと黒いカートボタンはシンプルに保たれ、アートワークがブランドの個性を表現しています。

参考にする点：1つの大胆な背景色と単純な幾何学的形状から構成される反復パターンを使用することで、写真がなくてもブランドが認識可能に見えます。

注意が必要な点：ページは非常に重く、検出されたアニメーションツール（gaspとlottie）がそれに加わるため、ラボテストの結果は中程度で、顧客がどのように感じるかを判断するための実訪問者データが不足していました。

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

35. Benvenusa Italian Wines

太く広い黒いキャピタルのワードマークが端から端まで伸び、その後、飽和した紫のフラットバンドが小さなセリフの声明と地域のリストを表示しています。その下の黒と白の風景がそれを結び付けています。3つのフラットカラーと1つのセリフがそれを自信あり読みやすくしています。

参考にする点：ビジネス名を上部全体に1本の太い大きなラインで表示し、重要なメッセージを1つのフラットな色ブロックとプレーンなセリフキャピタルで表現しましょう。

注意: ページは平均より重く、ラボテストでは中程度の評価にとどまっています。大きな写真が含まれていることと一致していますが、Googleは実際のユーザーがどのように感じるかを示すのに十分なリアルユーザーデータを持っていません。

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

36. White Desert

飛行機の窓からの氷棚の単一の眺めが画面全体を埋め、ほぼ黒い縁で枠取られており、淡い青色が輝きます。ヘッドラインの巨大な白い狭幅キャピタル体が下部に横たわり、小さなイタリック体セリフの副見出しが静かな対比を与えます。細い縦のガイドラインは、散乱なく構造を加えます。

これを参考にしてください: 大きな狭幅ヘッドラインと小さなイタリック体セリフの行を、単一の力強い写真またはループするクリップの上に配置し、ナビゲーションはプレーンなアウトラインボタンに保ちます。

注意: ページは平均より重く、ラボテストでは遅くなっており、実際のユーザーはロード中にレイアウトがシフトすることを報告しているため、全幅フィルムと大きなタイプは安定性と速度に代償を払っています。

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

37. Don Molinico

治肉、チーズ、瓶、模様のあるプレートが置かれたテーブルの全幅オーバーヘッド写真が画面全体を埋め、製品が白い背景の上ではなく実際の食事の中に座っています。赤いロゴブロックが中央の上端から掛けられており、巨大なクリーム色の狭幅キャピタル体が忙しいイメージを明確に読みます。温かいテラコッタ、赤、マスタード色のトーンがすべて同じ方向に引きます。

これを参考にしてください: 単色のロゴブロックを全幅の使用中の製品の写真の上の上端から掛け、その上に大きなクリーム色のキャピタル体で短いヘッドラインを設定します。

注意: ラボテストはページを遅いと評価し、実際のユーザーはメインコンテンツがどれだけ速く表示されるかについての問題、およびロード中にレイアウトがシフトすることについての問題を確認しています。ページ自体は軽いにもかかわらず。

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

38. Meyers

ローストされたジャガイモ、濃いケール、ざくろの種の全幅写真が画面全体を埋め、ヘッドラインはその上に重く、広く、スラブのようなキャピタル体フェイスで座ります。マスタード色とクリーム色のタイプは暗くされたイメージに対して明確に読まれます。濃い茶色のトップバーと砂色のアカウントタブは、パレットを温かく一貫性のあるものに保ちます。

これを参考にしてください: 1つの大きく、よく照らされた食べ物の写真を使用し、柔らかい暗いオーバーレイを使用して、下部3分の1にわたってヘッドラインを設定して読みやすさを保ちます。

注意: ページは重量が軽いですが、ラボテストは遅く実行され、実際のユーザーはレイアウト安定性の問題を報告しているため、ページロード時のコンテンツシフトは最初に修正すべき問題です。

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

39. Qissa

深い紺色の背景に金属的な金色のアクセントが1つ加わり、ページは穏やかな夜間ディナーの雰囲気を持っています。ワードマークは軽く、コントラストの高いセリフフォントで、その上に幅広くスペースを取った小型大文字が使われており、中央に積み重ねたレイアウトはテキストの周りに余裕を持たせています。モバイル上では、薄いカトラリーの扇形が透かしのようにコピーの後ろに配置されています。

これを参考に: 1つのアクセントカラーを選び、それをメインアクションと小さいラベルだけに使用して、それ以外はすべてシンプルに保つことで、予約ボタンが最初に目に入るようにします。

注意点: このページは平均より読み込みが重く、実際のユーザーはメインコンテンツの読み込み(LCP)が遅いと感じます。そのため、ダークヒーローは本来より遅く表示される可能性が高く、特にモバイル接続での表示が遅くなる傾向があります。

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

40. Pier88 Coast By MONARQ

フォークの上に切り抜かれた単独のエビが穏やかな海と薄い空の上に配置され、目は暖かいオレンジ色の形が冷たい青とティールの背景に対して際立つように導かれます。見出しはデスクトップでは白い細い大文字で上部に弧を描き、モバイルでは緩い手書きスクリプトに変わります。ベースの白い波状の端が仕上がりを柔らかくしています。

これを参考に: 最高のメニューの1つの鮮明でよく照らされた写真を、シンプルで落ち着いた背景と細い白い文字の短い見出しと組み合わせます。

注意点: このページは非常に重く、ラボテストでは中程度のスコアにとどまっています。これはフルブリードの写真ヒーローにスクロールアニメーションライブラリが読み込まれているためであり、実際のユーザーデータが不足しているため、実際のユーザーがどのように感じるかを判断するには十分なデータがありません。

pier88coast.comを訪問。

文化、教育、非営利団体

博物館、学校、慈善団体、文化プロジェクトは、最も発信することが多く、予算が最も限られている傾向があります。このグループの中央値ラボスコアは50.5で最も低いですが、Musée de Rochechouartは3つのCore Web Vitalすべてを満たしています。教育機関のウェブサイトデザインと非営利団体のウェブサイトデザインを参照してください。

41. Musée de Rochechouart

左上に紺色の太いロゴブロックとスタイリッシュな城の屋根線があり、ナビゲーションは小ぶりな大文字の幾何学的サンセリフで配置されています。その下、ページを分割する2枚の画像があります。高コントラストの黒白パフォーマンス写真と、ねじれた石柱の暖かみのあるクローズアップです。淡いシアンテキストと余裕のある空白がページを落ち着いた印象にしています。

これを借りよう。対照的な2枚の写真をシンプルなヘッダーの下に並べて配置して、コピーを読む前にページがその場所の雰囲気を伝えるようにしましょう。

注意する点。ラボテストではページの速度は中程度ですが、ページは軽量で、実際のユーザーはCore Web Vitalsのすべての指標で良好な体験を得ています。

OCITOCINE制作。musee-rochechouart.comにアクセス。

42. RPA Comunicación

紺色と酸性ライムが唯一のフラットカラーなので、ホットピンクの写真が焦点として目立ちます。角度のあるトリミングと見出しの言葉をコーナーに配置することで、窮屈ではなく緩やかでエネルギッシュな感覚になります。太くて幅広いサンセリフロゴと切り取られたコーナーのメニューボタンがその角度のある幾何学を繰り返しています。

これを借りよう。ヒーロー写真を角度のある形にトリミングし、ボタンとアイコンでその角度を繰り返して、限定的なパレットと少量のCSSがページに明確なアイデンティティを与えるようにしましょう。

注意する点。ページは非常に重く、ラボテストでは中程度の成績で、Googleは実際のユーザーのデータが少なすぎるため、イントロは待機時間の価値があるかどうかを検討する価値があります。

LaNegrita制作。rpacomunicacion.comにアクセス。

43. Colonia Zacamil

背の高い狭い黒い見出しが暖かみのあるベージュの背景に端から端まで走り、丸いトリミングされた空撮映像が文章の中の言葉のように切り込まれています。小さなモノスペースボタンとセリフのキャプションが落ち着いた空間を十分に保ちます。モバイルでは、映像がスクリーンいっぱいに表示され、その下にオフホワイトのブロック的でモジュール式のロゴタイプがあります。

これを借りよう。メインの見出しの1つの単語を実在する写真の丸いトリミングで置き換え、その他はすべてシンプルで単色の背景に配置してください。

注意する点。ページは平均より重く、ラボテストで遅く、実際のユーザーはメインコンテンツの読み込みが遅く、タップへの応答が鈍い問題に直面するため、フルスクリーン映像には測定可能なコストがあります。

Adoratorio Studio制作。coloniazacamil.comにアクセス。

44. CauseHouse

濃い緑色の重厚で高コントラストなセリフ見出しが温かみのあるクリーム色の背景に配置され、1語がライムでハードなオフセットシャドウ付きで際立っている。手描きの丘、家、木、鶏のイラストがページにフレンドリーなキャラクターを与え、サイト名に合致している。ピル型ボタンとラベルは同じライムと枠線を使用しているため、ページ全体に統一感がある。

このデザインから学べること: 1つのアクセントカラーを選び、見出しの1語とメインボタンに適用し、シンプルなイラストを写真の代わりにブランド表現として使う。

注意点: ラボテストでは、写真の代わりにフラットイラストを使用したため、ページは高速で軽量だが、Googleは実際のユーザーの訪問データが不足しており、実ユーザーでのパフォーマンスを示すことができなかった。

インハウスで設計。causehouse.coにアクセス。

45. NCCER

濃紺の背景とバーントオレンジのアクセントは、ロゴに合致した安定感のある実用的なカラーパレットを作り出している。見出しは大きく丸みのあるジオメトリックサンセリフで、行間が広く設定されている。枠組み図を指す男性の写真は、ストック写真にはない職種の本来のイメージを示している。ポップアップは同じ紺からオレンジへのグラデーションを使用している。

このデザインから学べること: 濃い背景に対して1つのアクセントカラーを使用し、ロゴ、ボタン、エッジルールに繰り返し適用することで、追加グラフィックスなしにすべてのページが統一感を持つようにする。

注意点: ラボテストではページが低速で非常に重いと評価され、実際の訪問者はローディング(LCP)とレスポンシブネス(INP)の問題に直面している。大きなヒーロー画像と重ねられたオーバーレイにはコストがある。

Isadora Digital Agencyが構築。nccer.orgにアクセス。

46. CalArts Graphic Design 2026

黒い画面全体に重厚でタイトに設定された白いサンセリフが大文字で配置され、酸性黄色は年号、アクティブなタブ、リンク下線のみに使用されている。手書きの横線が見出しに人間味を加え、デスクトップとモバイルで色が変わる。余白を多めにとった黒いスペースが清潔感を保っている。

このデザインから学べること: 1つの超大型見出しを平坦な濃い背景に配置し、1つのアクセントカラーを使用する。そのアクセントカラーは年号、現在のメニュー項目、リンク下線にのみ使う。

注意点: ページが軽量にもかかわらずラボテストでは中程度の評価に終わり、Googleは実際の訪問者データが不足しており、実ユーザーでのパフォーマンスを判定できなかった。

design2026.calarts.eduにアクセス。

47. Primer

縄跳び、フープ、演壇などのアイテムを持つ子どもたち1人ずつのトリミング写真が、白いページの端から端まで走っている。細い黒いグリッド線と青、黄色、オレンジ、緑のカラーブロックが、学校のエクササイズノートのようにそれを枠組みしている。背の高く、タイトなセリフ見出しが中央に静かに配置されている。

このデザインから学べること: 平らな白い背景に1つの広いトリミング済みグループ写真を使用してから、少数のフラットカラーブロックと細いルールを追加して、ページに認識可能な構造を与える。

注意点: ページは軽量だが、ラボテストでは低速だった。実際の訪問者はメイン画像のローディングやタップ・クリックへのレスポンシブネスの問題を報告している。大きなヒーロー写真は慎重な取り扱いが必要である。

newkidが構築。primer.comをご覧ください。

48. Beyond Spacesuit

温かみのあるオフホワイトの巨大なジオメトリックサンセリフ見出しが純粋な黒の上に配置され、名前が一目で読み取れます。オレンジとミントグリーンの小さなフラットイラスト、リング惑星、4点スター、薄い軌道ラインが、クラッターなくプレイフルさを加えます。短い中央配置のコピーと単一ボタンが十分な余白を残します。

これを参考に: 1つの巨大な見出しと、単一の対照的なボタン、そして2色の数個のフラットアクセント図形を組み合わせることで、ページは明確な最初のアクションと記憶に残るルックを持ちます。

注意: ラボテストではページが遅く非常に重く、Googleには実ユーザーのデータが不足していたため、実ユーザーがどのように感じるかを示すのに十分なデータがありませんでした。アニメーション追加機能はロード時間に対して検討する価値があります。

Airnautsが構築。beyondspacesuit.orgをご覧ください。

建築、不動産、旅行

建築、不動産、旅行はビジュアルビジネスであり、このグループの最高のサイトは写真を邪魔しません。KAAN ArchitectenとColours of Istriaはコアウェブバイタルすべてに合格し、ラボで93と91のスコアを獲得しています。不動産については、不動産ウェブサイトデザインをご覧ください。

49. Storey Architecture

ガラス張りの正面にティンバースラットと淡いレンガを備えた住宅の全幅写真が、背の高い松と青く澄んだ空に囲まれて、すべてを物語っています。テキストは明るく均一なサンセリフの白色で、暗い植栽の上に配置され、視認性を保っています。はじめに上部のスリムなプログレスラインは、スライドショーで画像が変わることを示唆しています。

この手法を取り入れる：最高の完成作品の大きく照らされた写真を背景に使い、短い白いテキストをその最も暗い領域に配置し、その下にシンプルなボタンを置きます。

注意する点：ページは平均的より重く、ラボテストでは中程度の評価にとどまっていますが、これは全画面の写真スライドショーに適合しており、実際のユーザーでの使用状況を示すのに十分な実訪問者データがありません。

制作：Dirty Martini。storeyarchitecture.co.uk にアクセスしてください。

50. LPAS

レンガ壁、背の高い窓、淡いティンバースツール付きのキッチンの全幅写真が、テキストが表示される前に販売力を発揮します。モバイルでは、濃いオーバーレイにより、クリーンで幾何学的なサンセリフで設定された大きな白い見出しが読みやすくなっています。細身のワードマーク、小さなメニューボタン、1 つのアンダーライン付きプロンプトが画像のためにたっぷりのスペースを残しています。

この手法を取り入れる：自分のワークスペースまたは完成した作品の誠実な写真を全幅のオープニングとして使い、暗いティントと 1 つの大きな文を重ねます。

注意する点：ページは平均的より重く、ラボテストでも中程度の評価で、実訪問者はロード時にレイアウトシフトを見ますが、これは大規模なヒーロー画像とビデオの一般的なコストです。

制作：Studio Naam。lpas.com にアクセスしてください。

51. arcoglobal

デスクトップビューは黒と白に徹底し、下部でほぼ全幅に及ぶ特大ワードマーク用に濃いグレーを 1 色使用しています。見出しは、浮くピルシェイプのメニューバーの下に配置された、ライトで幾何学的なサンセリフを使用しており、丸い字形です。十分な余白により、メッセージがすぐに読み込まれ、巨大なロゴが写真なしでブランドの存在を与えます。

この手法を取り入れる：企業名を特大のローコントラストワードマークとしてオープニング画面の下部に使用します。これ以上のものは必要なく、テキストスタイルと濃い背景だけで十分です。

注意する点：ページは平均的より重く、ラボテストで中程度の得点を獲得しており、Google は実際のユーザーでの使用状況を示すのに十分な実訪問者データを持っていません。

制作：workattack。arcoglobal.com にアクセスしてください。

52. Warren & Mahoney Architects

フラットな青い背景がすべてを担当し、ライトで開放的なサンセリフの白い見出しが一瞬で読み込まれます。短い段落の下に、航空海の泡の写真を含む背の高い縦帯があり、それらの間のギャップはブロック字形のように上下に段階化されています。水の青が背景と一致し、ページに落ち着きと明確な形を与えています。

この手法を取り入れる：写真をフラットなブランドカラーの背の高い帯に切り取り、プレーンなテキストページがカスタムイラストなしで独特のグラフィック形状を得られるようにします。

注意: ページが非常に重く、ラボテストではスコアが中程度にとどまり、Googleは実際の訪問者のパフォーマンスを示すのに十分な実訪問者データを持っていません。

Sons & Co.が制作。wam.studioを訪問してください。

53. Lithuania Travel

白い丸みを帯びたパネルにヘッドラインと1つのボタンが配置され、全幅の秋の森林写真と木製の展望塔の上に配置されています。エッジの柔らかいライラックと紫のブロックが画像をフレーム化し、対比を避けています。温かいオレンジ色が深い緑に映え、ページに明確な雰囲気を与え、タイプは親しみやすいジオメトリックサンセリフです。

これを参考に: 大きな写真の上に単一の丸みを帯びた白いカードを配置し、ヘッドライン、1行のサポートテキスト、1つのソリッドボタンに絞ります。

注意: ラボテストではページが遅く、平均より重いことが判明し、実訪問者は主画像(LCP)の読み込みが遅いと感じているため、このサイズのヒーロー写真はより厳密な圧縮が必要です。

lithuania.travelを訪問してください。

54. GetYourGuide Trend Tracker

シュノーケリング、調理、屋内スカイダイビング、機械式牛乗りの円形写真トリミングは、テキストを読む前にトピックを明確にします。小さなパステルピンク・ブルーアイコンドットと薄いジグザグ線がデータをごちゃごちゃなく示唆します。濃い紺色の大きなヘッドラインが豊富な白いスペースに中央配置され、唯一のアクションとして1つの青いピルボタンがあります。

これを参考に: 顧客写真を円形にトリミングし、小さな色付けアイコンドットとペアにして、シンプルな白いページに親しみやすく整理された雰囲気を与えます。

注意: ラボテストではページが遅く、平均より重いことが判明し、実訪問者は読み込み(LCP)とレスポンシブ性(INP)に問題を感じているため、画像が豊富でアニメーション化されたヒーローはスピードのコストとなります。

Voviが制作。getyourguide.supplyを訪問してください。

55. イストリアの色彩

丘の上の村の暗くティントされた航空写真が、丸いジオメトリックサンセリフの大きな白いヘッドラインの背後にあるため、テキストが明確に読めます。1つの飽和青色ピルボタンが淡いネイビーに映えます。オレンジ、緑、ピンク色の4つの小さな矢アイコンが多色花びらロゴをエコーし、ヒーローに静かな色コードを与えます。

これを参考に: 単一の写真をダークオーバーレイでティントし、上に1つの大胆なヘッドラインと1つの明るいピルボタンを配置して、メインアクションが明白になるようにします。

注意: ページは平均より重いです。これは画像主導のカードとカルーセルのコストですが、ラボでは高速でテストされ、実訪問者は3つのCore Web Vitalsすべてで良好なエクスペリエンスを得ています。

ALT_digitalが制作。coloursofistria.comを訪問してください。

56. KAAN Architecten

画面全体が白いらせん階段と格子天井を下から撮影したフルブリード写真で占められており、建築物自体が語りかけます。配色は淡いグレーと白に統一され、ワードマークが唯一の他の要素です。太字の大文字サンセリフと軽いウェイトの説明文が、静かな階層を作り出しています。

これを参考にしてください。最高の完成作品のフルスクリーン写真でリードして、白いテキストでその名前をその上に置き、太いウェイトと軽いウェイトを使ってこの2つの部分を分離してください。

注意点。ページはラボテストで高速ですが、実際のビジターはすべてのCore Web Vitals指標で良好な結果を得ます。ただし、平均より重いため、これは画像主導のオープニング画面の通常のコストです。

Built by Humans & Machines. kaanarchitecten.com を訪問してください。

ビジネスと健康

ビジネスおよび健康サイトは、迅速に信頼を獲得する必要があります。これら8つのサイトのうち3つが3つのCore Web Vitalsすべてに合格しており、これはすべてのカテゴリーの中で最も多く、このグループには104.4 MBのERA Residenceという最重量のページも含まれています。クリニックと診療所については、healthcare website design をご覧ください。

57. Twelve

温かみのあるクリーム色の背景と1つの大きな丸みを帯びたサンセリフの見出しがページに落ち着きと自信のある始まりを与えます。写真は軽い傾斜でカットされ、コーラル、ミント、ブルーのゆるい色付きバーがテキスト端に重なって動きを加えます。ロゴの黒とコーラルのストライプマークは、コーラルのメニューアイコンで繰り返されます。

これを参考にしてください。温かみのあるオフホワイト背景を1つ使用して、単一のアクセントカラーをロゴとメニューアイコンで繰り返し、シンプルなページでもブランド化されたように感じるようにしてください。

注意すべき点: ラボテストの結果は中程度で、ページは平均より重く、大きな写真を使ったレイアウトになっているため、Google には実際のユーザーデータが不足しており、実際の使用感を示す十分な情報がありません。

Pixelfish が制作しました。twelvefutures.com にアクセスしてください。

58. Gielly Green

1 つの商品写真が画面全体に表示され、深いバーガンディのボトルと薔薇色の金色のキャップが温かみのある淡いグレーの背景に配置されています。色数は限定されており、パッケージが全てを語ります。ラベルの背の高い明るいセリフはモノグラムに響き、丸みのある小さなナビゲーションボタンが端に静かに配置されています。

参考にする: 自分の商品のよく照らされた写真を 1 枚選び、単色のシンプルな背景に配置し、ナビゲーションを数個の小さな丸いボタンに限定します。

注意すべき点: ラボテストの結果は中程度ですが、ページは軽く、実際のユーザーは 3 つの Core Web Vitals すべてで優れたエクスペリエンスを得ているため、重要なスピードは維持されています。

Lovelace Studio が制作しました。giellygreen.co.uk にアクセスしてください。

59. DVO

非常に大きく軽量のジオメトリック sans ヘッドラインが淡いグレーのグラデーション上の左下に配置され、上部に小さな大文字のラベルと下部に細い枠線のボタンが付いています。抑制が魅力です: 白いタイプ、広々とした余白、静かなカラーパレットが落ち着いた建築的な雰囲気を生み出します。下部のスリムなバーに番号付きスライドタイトルと小さな矢印ボタンがあり、コントロールをすっきり保ちます。

参考にする: ミュートされた背景上にライト、ワイドセット sans のショートヘッドラインを設定し、シンプルな枠線ボタンを追加して、ページ上の他の要素の前にメッセージが読めるようにします。

注意すべき点: ページは非常に重く、ラボテストの結果は中程度で、実際のユーザーはメインヒーローコンテンツの読み込み速度に問題を見ており、大きなヒーローは軽くする必要がある部分です。

Studio Idee Materia が制作しました。dvo.it にアクセスしてください。

60. Rejuvenation Health

歯科医師の大きな白黒肖像画が画面全体を占めているため、最初の印象はストック写真ではなく実在の人物です。ヘッドラインは白のクリーンでワイドな sans serif を使用し、顔全体に交互に配置されており、余分なグラフィックなしでページに動きを与えます。濃いチョコレートブラウンのメインメニューバーとマッチするボタンがカラーパレットを落ち着きと温かみのあるものに保ちます。

参考にする: 所有者の誠実でよく照らされた肖像画を暗いオーバーレイの後ろに使用し、上部に白いテキストを配置して、訪問者が誰と取引しているかがすぐにわかるようにします。

注意すべき点: ラボテストの結果は中程度ですが、ページは軽く、実際のユーザーは Core Web Vitals のすべての測定で優れたエクスペリエンスを得ているため、大きな写真は実際には悪影響を与えていません。

Studio 3 Marketing が制作しました。rejuv-health.com にアクセスしてください。

61. Enerblock

平坦で彩度の高いサンゴ赤の背景に、ほぼ黒色の重厚でタイトなグロテスク見出しが配置され、メッセージが一目で伝わります。細い罫線で構成されたグリッドが大きな角ばったロゴマークを囲み、エンジニアリング図面のような雰囲気を醸し出しています。その下にはワイヤーケージの後ろにある鋼コイルの写真が配置され、グラフィック上部を現実の産業に根ざした形にしています。

これを応用しましょう。単一の大胆な背景色、サイズの大きな見出しひとつ、そして存在感のあるグラフィックマークひとつを組み合わせ、その直下に実際の写真を配置して、その仕事が物理的なものであることを証明します。

注意点: ページが非常に重く、ラボテストの結果も平均的であり、全幅の産業用画像と移動するコンテンツがビジターの読み込み時間を消費し、実際のユーザーデータが不足しているため、実運用でどのように感じるかは判断できません。

BANILA Studioが制作。enerblock.netを訪問。

62. Seasats

静かな水面に浮かぶ小さな無人ボートの写真が全画面に表示され、柔らかいグレーブルーの空がダークネイビーへとフェードしています。見出しは白い軽いセリフで広く配置され、淡い空を背景に明確に読むことができます。右側のコラムは積み重ねられたタブが砂からセージを経てディープグリーンへシフトし、メニューに明確な階層構造を与えています。

これを応用しましょう。ひとつの大きく静寂に満ちた写真、ひとつの短い見出し、ひとつの明確なボタンを使用し、白いテキストが読める状態に空または背景を十分に空けておきます。

注意点: ページはラボテストで速度が遅く、平均より重く、実際のビジターは読み込み(LCP)とレスポンシブ性(INP)の問題に遭遇しており、これは大きな移動ヒーローイメージとスクリプト化されたスクロール効果の一般的なコストです。

Raw Materialsが制作。seasats.comを訪問。

63. ERA Residence

ディープオーベルジーヌの背景にあたたかいオフホワイトのタイプが配置され、ページに落ち着いた高級感を与えています。地域の広がりのあるキャピタル字が中央の大きな名前を挟み、その傍の傾いたスクリプト風の町の名前は手書き風のタッチを加えています。かすかな大きな署名がその全体の後ろに配置され、細いインセット枠線が印刷されたカードのようにスクリーンを囲んでいます。

これを応用しましょう。ひとつの深く単一の色を全背景として使用し、短い名前を大きな淡いキャピタル字で配置し、わずかに傾いたひとつの単語のみを装飾として加えます。

注意点: ページは非常に重く、実際のビジターはレスポンシブ性とレイアウト安定性に関する問題を報告しており、これはアニメーションライブラリと多くの読み込まれたアセットに依存したビルドに適合しています。

The First The Last が制作しました。era-residence.comをご覧ください。

64. Heron AI

ページは建築家のドローイングシートのように見えます。点描で陰影をつけたコンクリート住宅の立面図があたたかいオフホワイトペーパーの上に配置され、ヘアライン規則、ティックマーク、クロスヘアコーナーで囲まれています。見出しはタイトで重いグロテスクキャピタル字を使用し、ナビゲーションは小さなモノスペースフォントを使用し、オレンジのアクセントは控えめに連絡先リンクとボタンにのみ表示されます。

これを応用しましょう。ひとつのイラストレーション、ヘアライン枠線、あたたかいニュートラルな背景、控えめなアクセントカラーを組み合わせて、写真撮影なしでシンプルなレイアウトに特性を与えます。

注意点: ラボテスト結果は平均的ですが、ページは軽く、実際のビジターはすべてのCore Web Vitals測定項目で優れたエクスペリエンスを得ています。

Bearplus Agencyが制作。heronaiapp.comを訪問。

美しいウェブサイトは永遠ではない

デザインインスピレーションリストは時間とともに劣化します。2026年の人気のあるウェブサイトデザイン最高作リストからリンクされているすべてのサイト(合計48個)を2026年10月31日のブラウザで開いてみました。

48サイトのうち8サイトはもはやフィーチャーサイトを読み込みません。4つのドメインはもう解決しない、2つのページは404を返す、1つはサーバーエラーを返す、1つは別の企業へリダイレクトしています。キャンペーンマイクロサイトは最も脆弱です。ローンチのために構築され、注目を集め、その後メンテナンス予算は終わります。長く続くサイトは企業のメインウェブサイトで、年々手入れされています。

美しくて高速なウェブサイトを手に入れる方法

Core Web Vitalsの3つすべてに合格した11サイトは、いくつかの習慣を指しており、どれも見栄えを放棄する必要はありません。

• 最初の画面を軽くします。ページは最初に人々が見るものが素早く到着する限り重くすることができます。Fauna Roboticsはそれを68.6 MBで証明しています。
• すべてのアニメーションライブラリを費用として扱います。スムーズなスクロールは良い感じがしますが、1つを搭載しているサイトはラボでより低いスコアを獲得しました。何か説明するときにモーションを使用してください。
• 1つの素晴らしい画像は10個の良い画像を打ち負かします。ここで最速の画像主導のサイト(KAAN Architectenなど)は、1つの写真と他にほぼ何もなく開きます。
• ラボだけでなく実際の訪問者を測定します。Lighthouseスコアは出発点です。実際の訪問者データはGoogleがページエクスペリエンスに使用するものです(Chrome UX Report)。
• 長期を計画します。切り替える予定のマイクロサイトではなく、保持するサイトに努力を注ぎます。

現在のサイトが古く見える場合、または見栄えが良いが読み込みが遅い場合、それはまさにウェブサイト再設計が修正すべきことです。人々が覚えているデザイン、最初の日からCore Web Vitalsに合格するように構築されています。デザインが良好で速度だけが問題の場合、ウェブパフォーマンス最適化はより小さな仕事です。

よく聞かれる質問

ウェブサイトを美しくするものは何ですか?

これら64全体で、共通のテーマは抑制です。短いパレット、自信を持って使用される1つまたは2つのタイプフェース、寛大なスペース、画面ごとに1つの強力な画像またはヘッドライン。高価に見えるサイトは通常、最初の画面により多くの要素を持つのではなく、より少ない要素を持っています。

美しいウェブサイトも高速にできますか?

はい。KAAN Architectenはラボで93を獲得し、実際の訪問者のための3つのCore Web Vitalsすべてに合格し、Rejuvenation Healthは0.7 MBのページですべての3つに合格します。このサンプルの遅いサイトは、見栄えが良いためではなく、メディアが重い、アニメーションライブラリ、大規模なスクリプトのため遅いです。

Core Web Vitalsの良いスコアは何ですか?

Googleは2.5秒以下のLCP、200ミリ秒以下のINP、ページロードの75パーセンタイル値で測定した0.1以下のCLSを良いと評価します。ページは3つがすべて良好な場合に合格します(web.dev)。

Lighthouseスコアと実際の訪問者データが異なるのはなぜですか?

Lighthouseは制御された環境で実行されるラボテストであり、INPを測定できません。Chrome UX Reportからの実際の訪問者データは、28日間の実際のデバイスとネットワークを反映しています(web.dev)。それが、Heron AIがラボで52をスコアしながら、3つのCore Web Vitalsすべてに合格できる理由です。

ウェブサイトデザインインスピレーションをもっと見つけるにはどこで見つけられますか?

これら64はサンプルです。レイアウト、業界、またはコンポーネント別に閲覧するには、ウェブデザインインスピレーションサイトラウンドアップはブックマークする価値のあるギャラリーを一覧表示し、UXデザインの神経科学はいくつかのレイアウトがより良く感じる理由を説明しています。