ウェブサイト構築の前に必要なすべてをカバーする単一のサイトはありません。以下の14サイトは4つの役割に分かれます：アイデア探し、ページ構造の研究、実証済みのインターフェースパターンの参考、洗練された実行例の確認です。DribbbleとBehanceはビジュアル方向性に優れています。Awwwards、CSS Design Awards、The FWAは審査員が野心的と考えるものを示します。Land-bookとLapa Ninjaはランディングページの構造に特化し、Mbbinは製品フローに対応しています。各サイトの最適な使い方、上手に使うためのヒント、正直な限界、比較表、そしてブックマークの山をブリーフに変える4段階の方法をお伝えします。
構築前に参考資料が重要な理由
空白のブリーフはあいまいな成果物を生み出します。「モダン、クリーン、信頼できる」はピッチされるあらゆるウェブサイトに当てはまり、デザイナーはそれを読むと、あなたの好みではなく自分の習慣でギャップを埋めます。
参考資料がそれを解決します。10枚のスクリーンショットは、形容詞1ページ分よりも、スペーシング、トーン、密度について多くを語ります。また、意見の相違を早期に明らかにします。創業者がダーク＆モーション多めのサイトを保存し続け、マーケティングリーダーが淡色エディトリアル系のサイトを保存し続けている場合、誰かがFigmaを開く前に知りたいですよね。
ただし、落とし穴があります。サイトが異なれば、異なる質問に答えます。ヒーローセクションに優れたギャラリーも、チェックアウトについては何も言いません。素晴らしいUI画像でいっぱいのフィードは、サイト全体がまとまっているかどうかはあまり教えてくれません。役に立つ質問は「どのサイトが最高か」ではなく、「今日何を見つけ出したいのか」です。
この記事の範囲：インスピレーション探しについてです。自分の作品を公開する場所を探している場合は、Dribbbleの代替サイトのこのまとめの方が参考になり、Dribbble vs Behanceはポートフォリオプラットフォームを選ぶのに役立ちます。
ギャラリー vs アワードサイト：何が掲載されるかを決める者
キュレーションされたギャラリーは趣味です。誰か（編集者、小さなチーム、ときには1人）が好きなサイトを選んで投稿します。Godly、SiteInspire、Land-book、Minimal Gallery、httpsterがこの方法で運営されています。あなたは視点を借りているわけで、それが魅力であり、同時に限界でもあります。
アワードサイトはプロセスを加えます。サイトが投稿され、審査員がレビューし、受賞者にラベルが付きます。Awwardsの受賞ウェブサイトページでは、語彙を確認できます：Site of the Day、Developer Award、Product、Portfolio、Business & Services などのカテゴリーオナー。AIDesignerの2026年のまとめはAwwardsのデザイン、ユーザビリティ、クリエイティビティ、コンテンツ全体のスコアリングについて説明しています。CSS Design Awardsもスコアリングカテゴリー（UI、UX、イノベーション）を使用しています。
アワードスコアの読み方
スコアを、サイト全体への判定ではなく、特定の基準に関する審査員の意見として捉えてください。スコアが高かったカテゴリーを確認してください。クリエイティビティスコアが優れていて、ユーザビリティスコアが平均的なサイトは、何か有用なことを言っています：それはショーケース的なもので、製品ページのモデルではないということです。
ラベルも確認してください。Developer Awardは制作品質を示します。Site of the Dayはその日の選定です。異なる質問に答えています。
受賞サイトがテンプレートではない理由
受賞サイトは賞を獲得するために制作されます。プランを売る、予約を取る、ニュースレター登録を獲得するという目標とは異なります。
スクロール駆動のアニメーションは美しくても、中程度のスマートフォンではゆっくり読み込まれます。珍しいナビゲーションは審査員を感動させ、初回訪問者を混乱させることができます。低コントラストの文字はスクリーンショットでは洗練されて見えても、アクセシビリティチェックに落ちます。どのスコアもコンバージョンについて何も教えません。審査員はサイトのアナリティクスを見ることができないからです。
アイデアを盗む、制作を盗まない。ペーシング、タイプスケール、セクションが自分を表す方法を取ってください。その後、速度、キーボード使用、コントラストについて自分のバージョンをテストしてからコミットしてください。
14のサイト、順番に
下記の順序は編集的なものです。品質や人気度の測定ではなく、トラフィックやオーディエンスでサイトをランク付けしようとしていません。
1. Dribbble (dribbble.com)
最適な用途：UIの詳細、モーション、ビジュアルディレクション。
dribbble.comにアクセス
Dribbbleは、ショットと短いケーススタディを投稿するデザイナーの大規模コミュニティです。タグで参照してください（「ランディングページ」や「ダッシュボード」のようなタグはメインフィードを常に上回ります）。進むにつれてショットをコレクションに保存します。モーションショットは、デベロッパーに記述したいマイクロインタラクションに特に便利です。
制限：ショットはフラグメントです。何かがどのように見えるかは示しますが、完全なサイト全体で機能するかどうか、または小さな画面で機能するかどうかは示しません。
2. Behance（behance.net）
最適な用途：デザインの背景にある理由を見る。
behance.netにアクセス
Behanceはアドビのポートフォリオネットワークで、その強みは完全なプロジェクトケーススタディです。ヒーロー画像だけでなく、プロセススライドを読んでください。要件、制約、および却下された代替案があります。キュレートされたギャラリーは、何を検索すべきか分からない場合の適切なショートカットです。
制限：プロジェクトは深さと分野で大きく異なります。ウェブデザインはブランディング、写真、イラストと並んでいるため、フィルタリングを期待してください。
3. Awwwards（awwwards.com）
最適な用途：野心的でインタラクティブなサイト。
awwwards.comにアクセス
Awwardsは、Site of the Day、Honorable Mention、Developer賞を含む審査員賞を実施しています。受賞ラベルをフィルタとして使用してください。Developer Award受賞者は、トランジションがどのように構築されたかを確認するためにdev toolsで開く価値があります。AIDesignerはテクノロジーでのフィルタリングと業界別のコレクションもメモしています。
制限：受賞サイトはしばしばショーピースです。アイデアに最適で、コンテンツが豊富なビジネスサイトの直接的なモデルとしてはリスクがあります。
4. CSS Design Awards（cssdesignawards.com）
最適な用途：洗練されたエージェンシーとスタジオサイト。
cssdesignawards.comにアクセス
ここのWebsites of the Dayは、UI、UX、イノベーションなどのカテゴリ全体でスコアを持っています。ヘッドラインではなく個別のカテゴリスコアを見て、優先順位に合わせてください。サイトがリード生成ページの場合、UXスコアはイノベーションスコアよりも多くを教えます。
制限：受賞者はエージェンシーとスタジオワークに傾いているため、より小さく、より通常のビジネスサイトは地面が薄いです。
5. The FWA (thefwa.com)
最適な用途：実験的でモーション主導、キャンペーン関連の案件。
thefwa.comにアクセス
FWAは最も長く続いているウェブアワードの1つであり、冒険的な作品を重視しています。モーション、3D、ストーリーテリングで何ができるかを見たいとき、また案件がキャンペーンやローンチのときにここを訪れてください。気に入ったインタラクションを1つ選んで、それがストーリーに何をもたらすかをメモしておきましょう。
制限：多くの作品がキャンペーン型です。ページが数十ページあり、テキストが多いサイトに応用しづらいことがあります。
6. Godly（godly.website）
最適な用途：スクロールとモーションのアイデア。
godly.websiteにアクセス
Godlyは厳選されたサイトをビデオプレビューで表示するギャラリーで、これが本質です。ページを読み込むのを待たずにスクロール挙動を確認できます。これを使ってモーションリファレンスを素早く集め、気に入ったライブサイトを開いてスマートフォンで実際にどう動くかを確認しましょう。
制限：ビデオプレビューはモーションは表示しますが、構造やコピーは表示されません。ページの判断のため、クリックして確認する必要があります。
7. SiteInspire（siteinspire.com）
最適な用途：特定の業界向けのリファレンスを探すこと。
siteinspire.comにアクセス
SiteInspireはスタイル、タイプ、サブジェクトでフィルタリングできるショーケースです。クライアントが「うちは法律事務所です」「家具を販売しています」と言った場合、10分で関連例を見つけるのに最適な出発点です。サブジェクトフィルターとスタイルフィルターを組み合わせて、的確に絞り込みましょう。
制限：カテゴリーはサイト独自のものです。いくつかのサイトは無理やり当てはめられることがあり、品質判断には自分の目利きが必要です。
8. Land-book（land-book.com）
最適な用途：ヒーローセクションとページ構造。
land-book.comにアクセス
Land-bookはランディングページギャラリーです。同じカテゴリーから複数ページを並べて開き、各ページがセクションをどう配列しているか比較してみてください：ヒーローの後に何が来るか、証拠がどこに現れるか、CTA（行動喚起）がどう繰り返されるか。その配列順は、ビジュアルスタイルより再利用しやすいことが多いです。
制限：完成したページを見ていますが、背景にある成果は見えません。整然とした構造がコンバージョンの証拠とは限りません。
9. Lapa Ninja（lapa.ninja）
最適な用途：SaaSとスタートアップのランディングページ。
lapa.ninja にアクセス
Lapa Ninjaはカテゴリ別に整理された大規模なランディングページライブラリです。SaaS Landing Pageの2026リストはフォント、セクション、OG画像の専用ギャラリーもポイントしており、ページの1つの部分だけが必要な場合に便利です。
制限：規模は両刃の剣です。大きなライブラリは明確な質問を報いてくれますが、目的のないスクロールを罰します。
10. One Page Love（onepagelove.com）
最適な用途：シングルページのローンチ、ポートフォリオ、イベント。
onepagelove.com にアクセス
One Page Loveはシングルページウェブサイトとテンプレートを集めています。製品ローンチ、カンファレンスページ、個人ポートフォリオに向いており、ストーリー全体が1スクロールに収まります。各ページがセクションの順序をどう処理しているか研究してください。シングルページではその順序がナビゲーションになるからです。
制限：デザイン上シングルページ形式なので、より大きなサイトのアーキテクチャには役立たないでしょう。
11. Minimal Gallery（minimal.gallery）
最適な用途：編集的でスタジオライクなデザイン。
minimal.gallery にアクセス
Minimal Galleryは抑制的でタイポグラフィ主導です。削除できる要素の量を調整するのに使いましょう。スペーシング、フォントサイズ、少数の色がほぼすべての仕事をします。クライアントが「もっと」と言い続けるときに、少なさがどう見えるかを示す良い参考になります。
制限：美学が狭い。密度、商品グリッド、大量の情報が必要なブランドには、マッチするものが少なくなります。
12. Mobbin (mobbin.com)
最適な用途：オンボーディングやチェックアウトのような商品UIパターン。
mobbin.com にアクセス
Mabbinはリアルなアプリとウェブ UI フローのスクリーンショットライブラリです。その価値はシーケンスにあります。オンボーディングフローを5つ続けて見ると、共通パターンが浮かぶとともに、疑問の余地のある選択肢も見えてきます。Colorlibのガイドではリアル商品のUXリサーチとして特に推奨しています。
制限：商品インターフェースに焦点を当てています。ブランド主導の表現的なマーケティングページが必要なら、このリストの他の場所を見てください。
13. httpster (httpster.net)
最適な用途：タイポグラフィとレイアウトのリスク。
httpster.net にアクセス
httpsterは特徴的なサイトの長年のショーケースです。珍しいタイプペアリングや、意図的にグリッドを外すレイアウトを見つけるのに良い場所です。サイト全体を保存するのではなく、サイト1つあたり1つのもの（見出しスタイル、メニューアイデア）を保存します。
制限：特徴的なサイトはより大きなギャンブルです。大胆なレイアウトの一部は、可読性やアクセシビリティのために調整が必要になります。
14. Pinterest (pinterest.com)
最適な用途：1つのボード上で色、タイプ、写真の方向性を収集する。
pinterest.com にアクセス
Pinterestはウェブサイトのスクリーンショットを、写真、パッケージング、インテリア、ポスターと1つのムードボードで混ぜることができます。ビジュアル方向性がウェブの外から来るべき時に便利です。チーム全体が同じ素材に反応するよう、単一のボードを共有します。
制限：ウェブ固有ではなく、ピンはしばしば元のサイトではなく再投稿に戻ります。参考にする前に元を確認してください。
インスピレーションからブリーフへ
60枚のスクリーンショットフォルダはブリーフではありません。それはムードです。私がそれを変換するために使う方法はこちらです。
- 15～20個の参考資料を集めます。5つではなく、パターンを示すには狭すぎます。80でもなく、誰も読まない蓄積です。ソースを混ぜます。ギャラリーから数個、アワードサイトから数個、商品フローから数個。
- それぞれについて何が好きかをタグ付けします。具体的に。「見出しサイズと本文コピー。」「価格表の見せ方。」「落ち着いた写真。」何が好きか言えなければ、その参考資料を削除します。
- 好み機能を分ける。好みは色、タイプ、ムード。機能はナビゲーション、セクション順、フォーム、チェックアウト。タグを2つの列に分類します。好みは大胆であってもいい。機能はつまらなく、実証的であるべき。
- デザイナーへのブリーフに書き込みます。参考資料、タグ付きのメモ、欲しくないものの簡潔なリスト（多くの場合、欲しいものより役に立つ）を含めます。ビジュアル目標の隣にビジネス目標を述べて、デザイナーが参考資料に従うべき時と無視すべき時を知ります。
完成したクライアント向けウェブデザイン業務のプレゼンテーション方法を見たければ、ポートフォリオウェブデザインページに例があり、自分のブリーフにどのくらい詳細が必要かを判断するのに役立ちます。
比較表
| サイト | 最適な用途 | タイプ |
|---|---|---|
| Dribbble | UI詳細、モーション、ビジュアルディレクション | コミュニティ |
| Behance | ケーススタディとデザイン理論 | コミュニティ |
| Awwwards | 野心的でインタラクティブなサイト | アワード |
| CSS Design Awards | 洗練されたエージェンシーとスタジオサイト | アワード |
| The FWA | 実験的でモーション主導のキャンペーンワーク | アワード |
| Godly | スクロールとモーションのアイデア | ギャラリー |
| SiteInspire | 業界別リファレンス | ギャラリー |
| Land-book | ヒーローセクションとページ構造 | ギャラリー |
| Lapa Ninja | SaaSとスタートアップランディングページ | ギャラリー |
| One Page Love | ワンページランチ、ポートフォリオ、イベント | ギャラリー |
| Minimal Gallery | ミニマルな編集とスタジオデザイン | ギャラリー |
| Mobbin | オンボーディング、チェックアウト、プロダクトフロー | パターンライブラリ |
| httpster | タイポグラフィとレイアウトのリスク | ギャラリー |
| カラー、タイプ、フォトグラフィボード | コミュニティ |
FAQ
時間がない場合、どのサイトから始めればいいですか？
Colorlibのガイドは単純な分け方を提案しています。実際の製品のUXリサーチはMobbin（およびRefero）で、ビジュアルインスピレーションはAwwardsまたはGodlyで、ランディングページの参考はLapa Ninjaで、より広い創造的な方向性についてはDribbbleとBehanceで。ほとんどのプロジェクトにとって、これは合理的な3ステップのルートです。
ナビゲーションバーやフッターなど、個別のページパーツを探せる場所はありますか？
はい。Toools Design listには、サイトの優れたパーツに関するセクションがあり、ヒーローセクション、ナビゲーションバー、フッター、OG画像、404ページ、プライシングページ、ソーシャルプルーフのギャラリーがあります。それらは限定的ですが、それが狙いです。
これら14個のギャラリー以外に、より新しいギャラリーはありますか？
たくさんあります。毎年新しいものが立ち上がります。新しいギャラリーには同じテストを適用してください。誰がサイトを選んでいて、何を基準に選んでいるのか。両方に対する明確な答えは、コレクションのサイズよりも信頼できるシグナルです。
気に入ったレイアウトをコピーしてもいいですか？
ページではなく、原則を取ってください。セクションの順序、スペーシングの論理、タイプコントラストはあなたが再活用できるアイデアです。サイトのアートワーク、コード、独特のビジュアルアイデンティティをコピーするのは別の問題ですし、忘れられやすいウェブサイトになります。
あなたが問いかけている質問のサイトを選んでください。フロー用にはMobbin、ページの順序用にはLand-book、ディテール用にはDribbble。最も鋭い注意点は、これらのギャラリーやアワードスコアはサイトのパフォーマンス、アクセシビリティ、コンバージョン率を示さないことです。公開前に自分のバージョンをそれらに対してチェックしてください。
ギャラリーは単一のスクリーンを表示します。各サイトが読み込み時間でどのくらいのコストがかかるかを並べて表示された完成したサイトを確認するには、64の美しいウェブサイト、ライブチェックおよび速度テスト済みを読んでください。