無料で使えるWebデザイン参考サイト
ギャラリーまとめ【国内・海外・目的別】
目次
「こんな雰囲気のサイトを作りたい」「業種に合ったデザインの事例が見たい」──ホームページ制作を進めるうえで、参考サイトの存在はとても重要です。
しかし、どこで探せばいいか分からず、なんとなく検索して終わっている、という方も多いのではないでしょうか。
今回は、国内・海外・目的別のカテゴリに分けて、おすすめのWebデザイン参考サイト・ギャラリーサイトを厳選してご紹介します!
そもそもギャラリーサイトとは?
ギャラリーサイトとは、優れたデザインのWebサイトやランディングページ(LP)、バナーなどを一覧で閲覧できるサービスのことです。
業種・カラー・サイト種別などで絞り込み検索ができるものも多く、「飲食店向けのシンプルなデザイン」「採用サイトの青系でモダンなデザイン」といった具体的な条件でイメージに近い事例を探せます。
制作会社やデザイナーが参考サイトを探す際に使うのはもちろん、ホームページ制作を依頼するお客様との打ち合わせでイメージを共有するツールとしても非常に有用です。
【国内】日本語サイトのデザイン参考に
日本語サイトを制作する際は、フォントの見え方や情報量のバランスが海外サイトとは異なります。
まずは国内サイトのギャラリーを参考にするのがおすすめです。
① SANKOU!(サンコウ)

国内の高品質なWebサイト・LP・ECサイトを豊富に掲載。業種・テイスト・カラー・サイト種別など多彩な検索軸で絞り込みが可能。更新頻度が高く最新トレンドを追いやすい。「シズル感」「ステキなバナー」などデザイナー目線のカテゴリも充実。
② 81-web.com

日本国内のWebサイトのみを掲載したギャラリーサイト。ほぼ毎日更新され、カテゴリ・カラー・使用フォント別での検索が可能。お気に入り登録機能もあり、気に入ったデザインをストックしやすい。
③ MUUUUU.ORG(ムー)

「縦に長くオーソドックスなレイアウトで、かつデザインが優れたサイト」を厳選して掲載するギャラリー。実務の参考にしやすいことをコンセプトにしており、デザイン性だけでなくユーザビリティやUXも重視されたサイトが揃う。カテゴリ別の検索が便利。
④ Web Design Garden

毎日更新されるWebデザインギャラリーサイト。サイト種別(コーポレート・採用・EC・LP・キャンペーンサイトなど)と業種・業界の両軸から絞り込みができ、目的に合った参考事例を効率よく見つけられる。
【海外】グローバルなトレンドを掴む
海外のギャラリーサイトは、最先端のデザイントレンドや実験的な表現を数多く掲載しています。国内サイトとは異なる発想やレイアウトに触れることで、デザインの幅が広がります。
① Awwwards(アワーズ)

2009年設立のスペイン発、世界最高峰のWebデザインアワードサイト。審査員がデザイン・ユーザビリティ・クリエイティビティ・コンテンツの4軸で採点し、毎日・毎月・毎年の最優秀サイトを選出。詳細ページでは使用フォントやカラーパレット・技術情報も確認できる。無料でブックマーク機能も利用可能。
② Dribbble(ドリブル)

世界中のデザイナーが自身の作品を投稿するポートフォリオ型コミュニティ。UI/UXデザイン・モバイルアプリ・ロゴ・アイコンなど幅広いカテゴリの作品が集まる。カラーパレットや余白感など、現代的なデザインの傾向を探るのに最適。
③ Siteinspire(サイトインスパイア)

スタッフが厳選した世界の優れたWebデザインを掲載するギャラリーサイト。掲載数はAwwwardsより絞られているが、その分質が高く、ミニマルで洗練されたデザインが中心。業種・スタイルの掛け合わせ検索が可能で、類似サイトも同時に表示される。
【目的別】用途に合わせた専門ギャラリー
ランディングページやバナーなど、特定の制作物に特化したギャラリーサイトも活用すると、より的確な参考事例が見つかります。
① Responsive Web Design JP(レスポンシブデザイン専門)

日本国内の優れたレスポンシブWebデザインを集めたギャラリー。PC・タブレット・スマートフォンの3画面を並べて一覧表示できるため、デバイス間でのレイアウトの違いが一目で分かる。スマホ対応サイト制作時の参考に最適。
② BANNER LIBRARY(バナー専門)

Web広告バナーのデザインを専門に集めたギャラリーサイト。7,000件以上のバナーを掲載しており、サイズ・業種・色・デザインテイストで絞り込み可能。文字の大きさ・写真の使い方・キャッチコピーの構造など、バナー特有の要素を研究するのに最適。
ギャラリーサイトを効果的に使うコツ
ギャラリーサイトをただ眺めているだけでは、制作の参考になりにくい場合があります。
以下のポイントを意識して活用しましょう。
目的を明確にしてから検索する
「とにかく参考を探す」ではなく、「飲食店向けのシンプルで温かみのあるデザイン」のように、業種・テイスト・カラーをある程度絞ってから検索するほうが、実用的な事例が見つかります。
複数のサイトを組み合わせて使う
「国内ギャラリーで構成を参考にしつつ、海外ギャラリーでカラーやフォントのアイデアを得る」という使い方が効果的です。
1つのサイトだけに頼らず、複数を組み合わせて活用しましょう。
良いと思ったサイトをストックしておく
ギャラリーサイトのお気に入り機能やブックマーク、Notionやスプレッドシートなどを活用して、気に入ったデザインを定期的にストックしておくと、クライアントへの提案や次回制作時にすぐ参照できます。
まとめ
Webデザインの参考サイト・ギャラリーサイトは、制作者だけでなく、ホームページ制作を依頼する担当者の方にも役立つツールです。
「こんな雰囲気にしたい」というイメージを具体的に言語化する際にも、ギャラリーサイトで見つけた事例を活用すると、制作会社との認識合わせがスムーズになります。
まずは今回ご紹介したサイトを2〜3つブックマークして、実際にデザインを探してみてください!