本当は教えたくないWebデザイン参考ギャラリーサイト30選

 

ウェブサイト制作には、常に新しいアイデアやインスピレーションが必要ですが、決まらずに悩んでしまうことも。

 

そんな状況を打開するには、たくさんの優れたデザインの実例を見ることで、次のアイデアを生み出してみましょう。

 

ここでは、最新ウェブデザインをいち早くチェックできるオススメWebギャラリーサイトを厳選してご紹介。

 

インスピレーションとしてはもちろん、クライアントの打ち合わせやイメージの共有にも活用できます。

 

積極的にインプットを増やし、デザインの引き出しを増やしてみましょう。


コンテンツ目次

🇯🇵 国内Webギャラリーサイト

    1. SANKOU!
    2. URAGAWA
    3. CMS Design
    4. I/O 3000
    5. Brilliant Design Collect
    6. S5 Style
    7. MUUUUU.ORG
    8. 1GUU
    9. 現代デザイン
    10. 81-web.com
    11. Web Design Clip
    12. Good Web Design
    13. マネるデザイン研究所
    14. straightline™ bookmarkサービス終了

🌎 海外Webギャラリーまとめ

    1. Land-book
    2. Site Inspire
    3. MaxiBestOf
    4. SaaS Landing Page
    5. Minimal Gallery
    6. Landingfolio

🏆 アワード系

    1. Awwwards
    2. The FWA
    3. CSS Design Awards

📱 スマホ参考ギャラリーサイト

    1. Responsive Web Design JP
    2. AGT smartphone design gallery
    3. sps collection
    4. bookma
    5. Mobbin

🍱 特別編

  1. Parts.
  2. Nice Very Nice
  3. Awwwards タグ別

 

🇯🇵 国内Webギャラリーサイト

SANKOU!

日本国内に限定したギャラリーサイト。細かくカテゴリ分けされており、複数検索ができるのも嬉しいポイント。

SANKOU!Webデザイン制作の参考になる国内のステキなサイト集

 

 

URAGAWA

「アワード受賞」など独自の視点による一覧まとめや、各シングルページでは関連記事の代わりに、「同一業界」と「同一サイトタイプ」の新着をそれぞれ表示で、イメージもより湧きやすいつくりに。

WebギャラリーサイトURAGAWAのカバー画像

 

 

CMS Design

WordPressをメインとしたCMSで構築されたサイトのみをまとめたギャラリー。国内のヴィジュアル力の高いデザインに限定されており、アイデアに困ったときにもオススメ。

CMS Designのカバー画像

 

 

I/O 3000

老舗Webギャラリーサイトのひとつで、国内外を問わず、Web制作の参考となる最新サイトがセレクトされています。

I_O_3000のカバー画像

 

 

Brilliant Design Collect

「機能的で美しい」、バランスのとれた最先端かつ実践的なトレンドデザインがほしいときに。キャリア10年以上のデザイナーがえらぶ、まさに、「ブリリアント」な刺激的なサイトがずらり。

Brilliant Design Collectのトップページ

 

 

S5 Style

右上フィルターより業種やキーワード、配色、サイトの種類などを掛け合わせて複数検索できるのが特長。たとえば、「黄色をつかったIT関連サイト」なんて絞り込みも可能です。

老舗ウェブギャラリーサイトs5-styleのホームページ

 

 

MUUUUU.ORG

豊富な掲載サイト数を誇る老舗ギャラリーサイトで、業種などの他に「TOPページにJS多用」や「斜めライン利用」など、ウェブデザイナー目線での切り口で検索できるのも特長。

デザイナー目線のWebギャラリーMUUUUU_ORG

 

 

1GUU

動きのあるサムネイルが利用されていることで、ウェブサイトの雰囲気をより考えやすい工夫が他にはないサイト。国内外から集められた、ダイナミックでクリエイティブなデザインが豊富です。

動きのあるサムネイルが利用されている1GUU

 

 

現代デザイン

ファーストビューだけでなく、下層ページのデザインを一緒に確認できるギャラリーサイト。国内を中心に、レイアウトの参考になりそうなサイトがずらり揃います。

レイアウトの参考になりそうなサイトがずらり、現代デザインのカバー画像

 

 

81-web.com

カテゴリと配色による絞り込み検索ができ、アイデアを具現化したデザインを見つけやすいのもポイント。細かくタグ分けもされています。

81webのホームページ

 

 

Web Design Clip

Webデザイナー・開発の方々などのインスピレーションを刺激するような、最新のトレンドをおさえた、おしゃれなWebデザインをクリップ。更新頻度も高く、現在3800サイト以上が掲載されています。

更新頻度の多いWeb_Design_Clip

 

 

Good Web Design

更新頻度の高さで、この記事を執筆時点で4000サイト以上が登録されており、他ではあまり見かけない、あらゆるサイトデザインが保存されており、悩んだときのアイデア出しにも重宝しています。

登録サイト数4000件以上のモンスターサイトgood-web-design

 

 

マネるデザイン研究所

「真似したいポイント」や「応用できそうな場面」、「懸念点」がウェブデザイナー目線で書かれており、実際にサイト制作するときの参考にもなりそう。

真似したくなるWebデザインを厳選した「マネるデザイン研究所」のカバー画像

 

 

straightline™ bookmarkサービス終了

クオリティの高いWebデザインが厳選されており、配色やジャンル、レイアウト別に絞り込みができたり、サムネイルサイズを変更して表示したりと、かゆいところに手が届く機能がうれしい。

straightline-bookmarkのカバー画像

 

 

🌎 海外Webギャラリーまとめ

Land-book

ランディングページやポートフォリオ、ブログ、ストアの切り替えの他、「スタイル」や「業種」別に絞り込むことも可能。縦長サイズのサムネイルが印象的です。

筆者お気に入りのギャラリーサイトLand-book

 

 

Site Inspire

クオリティの高いサイトを頻度高めで更新している老舗ギャラリーサイト、とにかく数を見たいというときにオススメ。検索機能も充実。

クオリティの高いサイトを頻度高めで更新中のSite Inspire

 

 

MaxiBestOf

ウェブデザインの最新トレンドをうまく取り入れたサイトを中心に、更新頻度高めで役立つギャラリーサイト。人気別ランキングを過去にさかのぼって見ることができ、いつの間にか時間が過ぎていることも。

MaxiBestOfは更新頻度高めで役立つギャラリーサイト

 

 

SaaS Landing Page

IT関連のランディングページのみを限定してコレクションしているサイト。その他にも「金額表」や「ブログ」、「FAQ」などコンポーネント別デザインの確認も。

クリエイティブなランディングページを多数揃えたページ

 

 

Minimal Gallery

無駄を削ぎ落とし、文字と画像を中心としたミニマルなサイトデザインのみを集めたギャラリーサイト。フォントや配色選びで困ったときにも役立ちます。

シンプルイズベストなミニマルデザインMinimarl Galleryのカバー画像

 

 

Landingfolio

2000近いランディングページデザインに加え、4000を超えるUIコンポーネント別ギャラリーも公開されており、配色やキーワード、デバイス別によるAJAX検索も可能。

Landingfolioのカバー画像

 

 

🏆 アワード系

Awwwards

世界中から応募されたWebサイトの中から、もっともクリエイティブなデザインを投票で決める、もやは説明不要の老舗アワードサイト。

世界三大アワードのひとつawwwardsのトップページ

 

 

The FWA

ウェブデザインだけでなく、スマホアプリや動画プロジェクトなどのクリエイティブにも目も向けたコレクションが特長。

世界三大アワードのひとつThe FWAのトップページ

 

 

CSS Design Awards

こちらも投票でもっとも優れたデザインを決めるアワードサイト。世界中のデザイナーが参加しており、ハイクオリティが当たり前な最先端を体験できるサイトばかり。

世界三大アワードの最後を飾る CSS Design Awards

 

 

📱 スマホ参考ギャラリーサイト

Responsive Web Design JP

PCだけでなく、タブレットとスマートフォンを合わせた3つのサムネイルを一気にチェックできる、スマホ向けデザインの制作で参考にしたいギャラリー。

レスポンシブデザインに欠かせないRWD JP

 

 

AGT smartphone design gallery

サムネイルにマウスカーソルを合わせると、するするとスクロールされ、各シングルページを確認する手間が省けるだけでなく、サイト全体の雰囲気もつかみやすいというメリットも。

するするスクロールが特長のAGTのトップページ

 

 

sps collection

スマホサイズのサムネイルで統一されており、業種と配色による絞り込みが可能で、ブックマーク機能があるのでお気に入りサイトをまとめて確認できます。

ブックマーク機能が便利なsps collection

 

 

bookma!

PCとスマホ両方のサイトデザインを一緒に確認でき、上部にあるアイコンでスマホサイトのみに切り替えも可能。

PCとスマホ両方のサイトデザインを一緒に確認できるbookma!

 

 

Mobbin

iOSとAndroid向けのスマホアプリデザインに特化したギャラリーサイト。アプリのあらゆる使い方、ページを網羅しており、まとめて確認できるのはもちろん、個別にコレクションとして保存することもできます。

mobbinのカバー画像

 

 

 

🍱 特別編

Parts.

「ヘッダー」や「CTA」、「導入事例」、「お問い合わせ」などパーツ別にウェブデザインを集めたライブラリ。国内だけでなく、海外サイトもセレクトされています。

パーツを集めたウェブギャラリーparts.のトップページ

 

 

Nice Very Nice

上記サイト同様に、UI/UXデザインコンポーネントやパターン、参考例やインスピレーションを一同に集めたライブラリ。海外サイトのみですが、日本では見かけない新鮮なレイアウトがたっぷり。

UI/UXコンポーネントのインスピレーションのお供にNice Very Niceのカバー画像

 

 

Awwwards タグ別

細かく手動入力されたタグキーワードを活用すれば、パーツごとに探すことができます。たとえば、「フッターデザイン」のみを集めたページ。

鉄板ギャラリーawwwardsの手動入力タグが超便利

 

 

ウェブデザイン制作が快適になる時短&便利ツールも活用してみてはいかがでしょう。

こんなことできるの?!ホームページ制作が楽しくなる最新オンラインツール48個まとめ