Webデザインの勉強をしたり、アイデアを出したり、社内外でイメージを共有したりする際、ギャラリーサイトの見本があると便利です。たくさんのサイトを知っていればその分選択肢も増えるため、勉強や業務を進めやすくなるでしょう。
とはいえ、ギャラリーサイトは無数にありますよね。どれを見れば良いか迷う方も多いのではないでしょうか。
今回は、おすすめのWebデザインのギャラリーサイトを20個ご紹介します。2020年のデザイントレンドも解説しますので、ぜひ参考にしてみてください。
まずは、Webデザインの参考になるギャラリーサイト20個をご紹介します。
※各サイトの事例の数は5月5日時点のものです。
「SANKOU!」は、高品質なWebサイト・ECサイト・LP・コンテンツページが揃うギャラリーです。更新頻度が高く、流行を追うのに重宝します。
また、業種別・目的別・色別など、いろいろな角度から検索できます。「シズル感」や「ステキなバナー」といった、デザイナー目線のカテゴリが揃っているのも特徴です。
「Web Design Clip」は、国内外の独創性の高いサイトを集めたギャラリーです。PC用だけでなく、レスポンシブデザインも多数掲載されています。
更新頻度は控えめなものの、事例が多く検索もしやすい設計です。
「I/O 3000」は更新頻度の高さが特徴で、国内外の事例が毎月20件ほど追加されています。デザインの流行を追うのに適しているでしょう。
検索にはカテゴリ・タグ・色のほかに、事例をランダム表示するシャッフル機能も実装。イメージが固まっていない段階で使うと、面白いアイデアが浮かぶかもしれません。
「81-Web.com」は、デザイン性に優れた国内サイトを集めたギャラリーです。5,000以上も事例があるので、イメージに近いものが見つかりやすいでしょう。
サムネイルの右下にあるPCマークをクリックすると、事例のサイトへ都度飛ぶことなくプレビューがすぐに表示されます。流し見したいときに便利な機能です。
「S5-Style」では、高品質なデザインのサイトが厳選されています。7,000以上の事例があるのでじっくり回遊してみるのもいいでしょう。検索の特徴として、Technicの欄からCSSやHTMLなどの技術仕様別に絞り込めます。またAND・OR検索も可能なので、調べ方の幅が広がりますね。
「bookma! v3」は、パッと目を引く特徴的なサイトを集めたギャラリーです。
PC版スマホ版の両方が掲載されてあるところがいいですね。文字検索しかないものの、独自性の高いサイトが豊富に揃っている点は魅力です。ぜひ活用してみましょう。
「MUUUUU.ORG」は、製作者の立場に立って、実務の参考にしやすいサイトのみを集めるというコンセプトのもと構築されたギャラリーです。デザイン性はもちろん、ユーザビリティやUXも重視されています。
フラットデザインやタイポグラフィなど、デザインの系統で細かく検索できる点は、Webサイト構想段階だと特に便利だと感じるでしょう。
「The Best Designs」は海外のギャラリーで、世界中から旬のデザインが集められています。Webサイトだけでなく、ハイセンスなオフィスの画像も収集しているのが特徴です。
デザイナー名で検索できるほか、運営おすすめデザインのコレクションを閲覧できます。
「straightline bookmark」は、国内外の優れたWebデザインを2万点以上も収録しているギャラリーです。検索の選択肢が豊富で、探しやすさも担保されています。ユーザーによるブックマークやいいねの数を確認でき、客観的な評価も把握できます。
「イケサイ」はその名のとおり「イケてるサイト」を集めたギャラリーです。一目見たら記憶に残るような印象的なサイトが多々あり、見識の幅を広げるのに役立ちます。検索は業種別ででき、競合リサーチなどにも有用です。
「Siiimple」はシンプル・ミニマムなデザインに特化したギャラリーです。更新頻度はあまり高くないものの、最初からシンプルさに対象を絞って調べられるのは便利ですね。
「WPデザインギャラリー」は、WordPressサイトに特化した珍しいギャラリーです。
サムネイルにポインタを当てるとデザインの解説が表示されます。流し見でも要点をすぐ把握できる点も他のサイトには無い特徴です。
「Responsive Web Design JP」は、優れたレスポンシブデザインのサイトを国内外から集めたギャラリーです。色別や業種別のほか、技術仕様ごとに検索できるのが良いですね。
サムネイルにはスマホ、タブレット、PCの表示が一覧で並びます。それぞれのデバイスでどう表示されるのか一目でチェックできて便利です。
「AGT smartphone design gallery」も、レスポンシブ特化のギャラリーです。
サムネイルをクリックするとサイト全体をスクショで確認できます。わざわざ遷移しなくて良いのは便利ですね。
「iPhoneデザインボックス」は、iPhoneでの表示をメインに扱うギャラリーです。
更新頻度はそれほど高くないものの、各事例はじっくり吟味された上で掲載されており、スマホサイト制作で参考になるポイントは多いでしょう。
「DesignAwards.Asia」はユーザー投票型のギャラリーで、世界中から高品質なWebサイトが集まっています。
検索では、ユーザー評価の高い、客観的に見て優れたデザインだけを抽出することも可能です。
「LPアーカイブ」は、LPに特化したギャラリーサイトです。事例の数が豊富で、検索機能も充実しており、目的に合った参考LPを簡単に見つけられるでしょう。
とにかく量が揃っているため、多種多様なLPをみてインスピレーションを得たい方におすすめです。
「LPadvance」もLPに特化したギャラリーサイトで、制作者の目線で参考にしやすい事例を集めています。
js技術やアニメgifのLPも掲載しているため、LPデザインのリサーチ用に幅広く利用できます。
「ブブンデザインアーカイブ」は、見出しやアイコンなど、サイトのパーツごとにアーカイブしたギャラリーです。
「全体像は決まったけど、細かいパーツをどうするか迷う…」というときに役立ちます。
「Elements of Design」は、海外サイトの見出しやアイコンなどをパーツごとにまとめたギャラリーです。
更新は長らく止まっていますが、前掲のブブンデザインアーカイブとあわせて「ここだけ調べたい」というときに使ってみてください。
ここまでご紹介したギャラリーサイトを比較表にまとめました。それぞれの特徴を把握するためにご活用ください。
| サイト名 | 事例の数 | 検索しやすさ | 更新頻度 | おすすめポイント |
|---|---|---|---|---|
| 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デザインのトレンドをご紹介します。具体的にデザインを考える際の指針に活用してみてください。
トーマツが推進するAudit Innovation | Audit Innovation | 有限責任監査法人トーマツ
トレンド1つ目はダークモード。いろいろなアプリに取り入れられているのを目にすると思います。
といったメリットがあります。
ただ、黒は重たいイメージも与えてしまいます。したがって、完全な黒にするよりは少し彩度を上げた方が良いかもしれません。
ホームページ・WEBサイト制作 大阪(スマホも対応)｜株式会社 つくし
2つ目は手書き風です。柔らかい雰囲気を醸し出すことができます。
一般的なフォントや写真ではなかなか出せないテイストで、採用しているWebサイトはまだそれほど多くないため印象に残りやすいでしょう。競合との差別化を図れます。
方向性によってはやや子供向けの雰囲気になりやすいので、自社のターゲットユーザーを鑑みて導入を検討しましょう。
3つ目は、ブロークン グリッド レイアウト。レイアウトをあえてずらす手法のことで、洗練された雰囲気やオリジナリティを演出できます。
人でいうと、あえて着崩したり、アシンメトリーな髪型にセットしたりして個性を出すイメージでしょうか。
ずらしのバランスを取るのが難しいので、全体のバランスを見ながら微調整していきましょう。
今回は、Webサイトデザインの参考になるギャラリーサイト20個と、2020年のトレンドをご紹介しました。気になるサイトはありましたか？
それぞれ特徴や掲載サイトの傾向、検索方法などが異なるため、以下のように用途や目的に合わせて各サイトを使い分けましょう。
ぜひ本記事を参考に、ユーザーが心地よく利用できる良質なWebサイトの構築に取り組んでみましょう。