ウェブサイトブログ | HubSpot(ハブスポット)

Webデザインの参考になるギャラリーサイト20選&2020年のトレンド解説

作成者: 水落 絵理香(みずおち えりか)|May 26, 2020 3:01:56 AM

Webデザインの勉強をしたり、アイデアを出したり、社内外でイメージを共有したりする際、ギャラリーサイトの見本があると便利です。たくさんのサイトを知っていればその分選択肢も増えるため、勉強や業務を進めやすくなるでしょう。

とはいえ、ギャラリーサイトは無数にありますよね。どれを見れば良いか迷う方も多いのではないでしょうか。

今回は、おすすめのWebデザインのギャラリーサイトを20個ご紹介します。2020年のデザイントレンドも解説しますので、ぜひ参考にしてみてください。

Webデザインのギャラリーサイト20選

まずは、Webデザインの参考になるギャラリーサイト20個をご紹介します。

※各サイトの事例の数は5月5日時点のものです。
 

1. SANKOU!

  • 事例の数:2,278
  • 検索しやすさ:◎
  • 更新頻度:◎

SANKOU!」は、高品質なWebサイト・ECサイト・LP・コンテンツページが揃うギャラリーです。更新頻度が高く、流行を追うのに重宝します。

また、業種別・目的別・色別など、いろいろな角度から検索できます。「シズル感」や「ステキなバナー」といった、デザイナー目線のカテゴリが揃っているのも特徴です。
 

2. Web Design Clip

  • 事例の数:2,409
  • 検索しやすさ:◎
  • 更新頻度:◯

Web Design Clip」は、国内外の独創性の高いサイトを集めたギャラリーです。PC用だけでなく、レスポンシブデザインも多数掲載されています。

更新頻度は控えめなものの、事例が多く検索もしやすい設計です。
 

3. I/O 3000

  • 事例の数:5,583
  • 検索しやすさ:◯
  • 更新頻度:◎

I/O 3000」は更新頻度の高さが特徴で、国内外の事例が毎月20件ほど追加されています。デザインの流行を追うのに適しているでしょう。

検索にはカテゴリ・タグ・色のほかに、事例をランダム表示するシャッフル機能も実装。イメージが固まっていない段階で使うと、面白いアイデアが浮かぶかもしれません。
 

4. 81-web.com

  • 事例の数:5,144
  • 検索しやすさ:◯
  • 更新頻度:◎

81-Web.com」は、デザイン性に優れた国内サイトを集めたギャラリーです。5,000以上も事例があるので、イメージに近いものが見つかりやすいでしょう。

サムネイルの右下にあるPCマークをクリックすると、事例のサイトへ都度飛ぶことなくプレビューがすぐに表示されます。流し見したいときに便利な機能です。
 

5. S5-Style

  • 事例の数:7,419
  • 検索しやすさ:◎
  • 更新頻度:◎

S5-Style」では、高品質なデザインのサイトが厳選されています。7,000以上の事例があるのでじっくり回遊してみるのもいいでしょう。検索の特徴として、Technicの欄からCSSやHTMLなどの技術仕様別に絞り込めます。またAND・OR検索も可能なので、調べ方の幅が広がりますね。
 

6. bookma! v3

  • 事例の数:783
  • 検索しやすさ:△
  • 更新頻度:△

bookma! v3」は、パッと目を引く特徴的なサイトを集めたギャラリーです。

PC版スマホ版の両方が掲載されてあるところがいいですね。文字検索しかないものの、独自性の高いサイトが豊富に揃っている点は魅力です。ぜひ活用してみましょう。
 

7. MUUUUU.ORG

  • 事例の数:4,821
  • 検索しやすさ:◯
  • 更新頻度:◎

MUUUUU.ORG」は、製作者の立場に立って、実務の参考にしやすいサイトのみを集めるというコンセプトのもと構築されたギャラリーです。デザイン性はもちろん、ユーザビリティやUXも重視されています。

フラットデザインやタイポグラフィなど、デザインの系統で細かく検索できる点は、Webサイト構想段階だと特に便利だと感じるでしょう。
 

8. The Best Designs

  • 事例の数:1,242
  • 検索しやすさ:◯
  • 更新頻度:◎

The Best Designs」は海外のギャラリーで、世界中から旬のデザインが集められています。Webサイトだけでなく、ハイセンスなオフィスの画像も収集しているのが特徴です。

デザイナー名で検索できるほか、運営おすすめデザインのコレクションを閲覧できます。
 

9. straightline bookmark

  • 事例の数:24,785
  • 検索しやすさ:◎
  • 更新頻度:◎

straightline bookmark」は、国内外の優れたWebデザインを2万点以上も収録しているギャラリーです。検索の選択肢が豊富で、探しやすさも担保されています。ユーザーによるブックマークやいいねの数を確認でき、客観的な評価も把握できます。
 

10. イケサイ

  • 事例の数:1,480
  • 検索しやすさ:△
  • 更新頻度:◎

イケサイ」はその名のとおり「イケてるサイト」を集めたギャラリーです。一目見たら記憶に残るような印象的なサイトが多々あり、見識の幅を広げるのに役立ちます。検索は業種別ででき、競合リサーチなどにも有用です。
 

11. Siiimple

  • 事例の数:1,620
  • 検索しやすさ:◯
  • 更新頻度:△

Siiimple」はシンプル・ミニマムなデザインに特化したギャラリーです。更新頻度はあまり高くないものの、最初からシンプルさに対象を絞って調べられるのは便利ですね。
 

12. WPデザインギャラリー

  • 事例の数:443
  • 検索しやすさ:◎
  • 更新頻度:◯

WPデザインギャラリー」は、WordPressサイトに特化した珍しいギャラリーです。

サムネイルにポインタを当てるとデザインの解説が表示されます。流し見でも要点をすぐ把握できる点も他のサイトには無い特徴です。
 

13. Responsive Web Design JP

  • 事例の数:5,200
  • 検索しやすさ:◎
  • 更新頻度:◎

Responsive Web Design JP」は、優れたレスポンシブデザインのサイトを国内外から集めたギャラリーです。色別や業種別のほか、技術仕様ごとに検索できるのが良いですね。

サムネイルにはスマホ、タブレット、PCの表示が一覧で並びます。それぞれのデバイスでどう表示されるのか一目でチェックできて便利です。
 

14. AGT

  • 事例の数:696
  • 検索しやすさ:△
  • 更新頻度:◯

AGT smartphone design gallery」も、レスポンシブ特化のギャラリーです。

サムネイルをクリックするとサイト全体をスクショで確認できます。わざわざ遷移しなくて良いのは便利ですね。
 

15. iPhoneデザインボックス

  • 事例の数:540
  • 検索しやすさ:◯
  • 更新頻度:△

iPhoneデザインボックス」は、iPhoneでの表示をメインに扱うギャラリーです。

更新頻度はそれほど高くないものの、各事例はじっくり吟味された上で掲載されており、スマホサイト制作で参考になるポイントは多いでしょう。
 

16. DesignAwards.Asia

  • 事例の数:1,020
  • 検索しやすさ:◯
  • 更新頻度:△

DesignAwards.Asia」はユーザー投票型のギャラリーで、世界中から高品質なWebサイトが集まっています。

検索では、ユーザー評価の高い、客観的に見て優れたデザインだけを抽出することも可能です。
 

17. LPアーカイブ

  • 事例の数:18,516
  • 検索しやすさ:◎
  • 更新頻度:◎

LPアーカイブ」は、LPに特化したギャラリーサイトです。事例の数が豊富で、検索機能も充実しており、目的に合った参考LPを簡単に見つけられるでしょう。

とにかく量が揃っているため、多種多様なLPをみてインスピレーションを得たい方におすすめです。
 

18. LPadvance

  • 事例の数:1,585
  • 検索しやすさ:◯
  • 更新頻度:◎

LPadvance」もLPに特化したギャラリーサイトで、制作者の目線で参考にしやすい事例を集めています。

js技術やアニメgifのLPも掲載しているため、LPデザインのリサーチ用に幅広く利用できます。
 

19. ブブンデザインアーカイブ

  • 事例の数:2,511
  • 検索しやすさ:◯
  • 更新頻度:◯

ブブンデザインアーカイブ」は、見出しやアイコンなど、サイトのパーツごとにアーカイブしたギャラリーです。

「全体像は決まったけど、細かいパーツをどうするか迷う…」というときに役立ちます。
 

20. Elements of Design

  • 事例の数:886
  • 検索しやすさ:△
  • 更新頻度:△

Elements of Design」は、海外サイトの見出しやアイコンなどをパーツごとにまとめたギャラリーです。

更新は長らく止まっていますが、前掲のブブンデザインアーカイブとあわせて「ここだけ調べたい」というときに使ってみてください。
 

Webデザインのギャラリーサイト比較表

ここまでご紹介したギャラリーサイトを比較表にまとめました。それぞれの特徴を把握するためにご活用ください。

サイト名 事例の数 検索しやすさ 更新頻度 おすすめポイント
SANKOU! 2,278 更新頻度が高い
Web Design Clip 2,409 創造性が高い
I/O 3000 5,583 多様なテイスト
81-web.com 5,144 事例が見やすい
S5-Style 7,419 オシャレ
bookma! v3 783 印象に残る
MUUUUU.ORG 4,821 実務重視
The Best Designs 1,242 世界のトレンドが分かる
straightline bookmark 24,785 デザイン性が高い
イケサイ 1,480 多様なデザイン

 

サイト名 事例の数 検索しやすさ 更新頻度 おすすめポイント
Siiimple 1,620 シンプルさ重視
WPデザインギャラリー 443 Wordpress特化
Responsive Web Design JP 5,200 フレームワークごとに検索可能
AGT 696 UI業務向け
iPhoneデザインボックス 540 iPhone表示特化
DesignAwards.Asia 1,020 ユーザー投票型
LPアーカイブ 18,516 膨大な量のLP
LPadvance 1,585 jsやgifのLPも
ブブンデザインアーカイブ 2,511 パーツが豊富
Elements of Design 886 解説あり

 

2020年のWebサイトデザインのトレンド

 

最後に、各ギャラリーの傾向から見える2020年のWebデザインのトレンドをご紹介します。具体的にデザインを考える際の指針に活用してみてください。
 

ダークモード

トーマツが推進するAudit Innovation | Audit Innovation | 有限責任監査法人トーマツ

トレンド1つ目はダークモード。いろいろなアプリに取り入れられているのを目にすると思います。

  • シックで洗練されたイメージを与えられる
  • 光に敏感な人でも見やすくなる
  • バッテリー消費量を削減できる

といったメリットがあります。

ただ、黒は重たいイメージも与えてしまいます。したがって、完全な黒にするよりは少し彩度を上げた方が良いかもしれません。
 

手書き風

ホームページ・WEBサイト制作 大阪(スマホも対応)|株式会社 つくし

2つ目は手書き風です。柔らかい雰囲気を醸し出すことができます。

一般的なフォントや写真ではなかなか出せないテイストで、採用しているWebサイトはまだそれほど多くないため印象に残りやすいでしょう。競合との差別化を図れます。

方向性によってはやや子供向けの雰囲気になりやすいので、自社のターゲットユーザーを鑑みて導入を検討しましょう。
 

ブロークン グリッド レイアウト

アソビュー株式会社

3つ目は、ブロークン グリッド レイアウト。レイアウトをあえてずらす手法のことで、洗練された雰囲気やオリジナリティを演出できます。

人でいうと、あえて着崩したり、アシンメトリーな髪型にセットしたりして個性を出すイメージでしょうか。

ずらしのバランスを取るのが難しいので、全体のバランスを見ながら微調整していきましょう。
 

目的に合わせてギャラリーサイトを使い分けよう

今回は、Webサイトデザインの参考になるギャラリーサイト20個と、2020年のトレンドをご紹介しました。気になるサイトはありましたか?

それぞれ特徴や掲載サイトの傾向、検索方法などが異なるため、以下のように用途や目的に合わせて各サイトを使い分けましょう。

  • 多くの事例の中から選びたいなら「SANKOU!」をはじめとした総合型のサイト
  • 日本のサイトだけを見たいなら「81-web.com」
  • 客観的評価と人気を参考にしたいのなら「MUUUUU.ORG」「DesignAwards.Asia」
  • レスポンシブもしっかり確認したいなら「Responsive Web Design JP」「AGT」「iPhoneデザインボックス」

ぜひ本記事を参考に、ユーザーが心地よく利用できる良質なWebサイトの構築に取り組んでみましょう。