ブログBLOG

【2022年へ向けて】Webデザイン参考サイトまとめ【Web/LP/バナー/SNS広告】

更新日：2021/12/09

今年ももう年末を迎えようとしていますね。
オリンピックが開催されたり、ディズニーシーが20周年だったり、今年もいろいろありましたがあっという間でした。

デザイントレンドは年々移り変わっていて、情報収集は欠かせません。
そこで、2022年に向けて、最新のWebデザイン参考サイトを、Webサイト・レスポンシブ・LP・バナー・SNS広告で分けてまとめてみました。
上手く参考が見つからないなというときは、いくつかのギャラリーサイトをめぐって探してみると、思わぬ出会いがあるかもしれません！
ぜひトレンドのチェックにご活用ください。

また、2022年のデザイントレンド予測を知りたい方は、ぜひこちらをご覧ください！
【2022年 Web/UI】最新のデザイントレンド予測！

1 Webサイト
2 バナー
- 2.1 BANNER LIBRARY
- 2.2 レトロバナー
3 SNS広告（Instagram・Twitter・Facebook）
4 王道のギャラリーサイト
5 まとめ

Webサイト

トレンドの移り変わりが顕著なWebデザインのトレンドをチェックしましょう！
またWebデザインの勉強にもなるサイトもご紹介します。

81-web.com

更新頻度：高
業界・カラーなどの情報が見やすい
お気に入り機能

サムネをホバーすると、業界やカラー、デザインテイスト、フォントまで見る事ができます。
フォントで絞り込みのできるサイトは他にはあまりないので、フォントがどうやって使われているかを調べたいときにも役立ちます。
画面がすっきりとしていて1度に見られるサイトの数も多く、とても見やすいです！
81-web.com

I/O 3000

更新頻度：高
タグ・カテゴリー・カラーを多い順で見られる
シャッフル機能

1度に見られるサイトの数は多くないですが、3カラムのゆったりとしたレイアウトで、拡大前のサムネも大きいのでファーストビューが見やすいです。
シャッフル機能も特徴で、いい感じのが見つからないな……と思ったときはシャッフルして別カテゴリから見てみるのもアリかもしれません。
また、右下のトグルボタンをクリックすると、1ページ1スクロールの形でサイトのサムネイルを見ることができます。
I/O 3000

マネるデザイン研究所

応用点・懸念点のコメント付き
おしゃれでハイクオリティなサイト

掲載数はまださほど多くはないですが、厳選されたハイクオリティなサイトが掲載されています。
サムネをクリックすると、マネしたいポイント・応用できそうな場面・懸念点の丁寧なコメントを見ることができます。
デザインのポイントを押さえることができるので、Webデザインを勉強中！という方にもおすすめです。
マネるデザイン研究所

バナー

写真・イラストを使った場合、文字組のみの場合、情報量が多い・少ない場合……などなど、バナーデザインにはたくさんの引き出しが必要です。
どうレイアウトしたらいいだろうと迷ったときには、ギャラリーサイトで参考を探してみましょう。

BANNER LIBRARY

今のシーズンにおすすめのタグが便利
カテゴリ分けが豊富
お気に入り機能

ヘッダーのすぐ下に、「今のシーズンにおすすめのタグ（今の時期は冬、クリスマス、シズル感、セールなど）」が用意されていて、すぐに目当てのカテゴリへ移ることができてとても便利です！
また、サイズ別に絞り込みはできませんが、長方形・正方形・縦長でカテゴリ分けされています。
BANNER LIBRARY

レトロバナー

更新頻度：高
詳細ページにカラーパレット

更新頻度が高く、掲載数も現在12248と非常に多いです！
サムネをクリックして詳細ページに遷移すると、バナーに使用されている主要な色を16色集めたカラーパレットが表示され、カラーの参考にもなります。
また、バナーはサイズ別でカテゴリ分けされており、多様なサイズのバナーを見ることができます。
レトロバナー

SNS広告（Instagram・Twitter・Facebook）

近年、ますますSNSの広告の需要は高まってきています。SNS広告のデザインを見たいときには、こちらを参考にして見てください。

BANNER LIBRARY【Instagram・Twitter・Facebook】

豊富なSNSに対応

バナーで紹介したBANNER LIBRARYさんのInstagram・Twitter・Facebookに掲載されたバナーのギャラリーです。
他にも、LINE・メルマガといった豊富なSNSの広告が集まっています。

バナーではなくメルマガ自体を見たい場合は、BANNER LIBRARYさんが運営する「MAIL LIBRARY」をご覧ください。
HTMLソースは見られませんが、メルマガデザインの参考になります。
BANNER LIBRARY【Instagram】BANNER LIBRARY【Twitter】BANNER LIBRARY【Facebook】

FACEBOOK広告集めました。

実際に投稿された広告が見られる

しばらく投稿がないようですが、800件近くのFacebook広告が掲載されています。
バナーだけでなく実際の投稿の様子を見られますので、テキストなども参考になると思います。
FACEBOOK広告集めました。

インスタ広告集めました。

インスタ広告をインスタの投稿で見られる

ギャラリーサイトではありませんが、インスタの広告を投稿しているインスタアカウントです。
インスタ広告をインスタ上で見られるので、一覧や詳細で実際にどう見えるのか、デバイスによっての見え方の違いが確認できます。
ちなみに、上で紹介した「FACEBOOK広告集めました。」と同じところが運営しているようです。
インスタ広告集めました。

王道のギャラリーサイト

2020年版の記事でも紹介したギャラリーサイトを、おすすめポイント付きで改めてご紹介いたします。

Webサイト

ベーシックなコーポレートサイトからおしゃれでかっこいいサイトまで、あらゆるデザインを集めたギャラリーサイトをご紹介します。

SANKOU!

更新頻度：高
お気に入り機能

更新頻度が非常に高く、日に3サイト以上投稿されることも多いので、参考サイトを探すときはまずこちらを見に行くことが多いです。
Webサイト・LP・コンテンツページでカテゴリ分けされているので、LPのみ確認したい場合でも便利です。
また、「ステキな下層ページあり」「ステキなバナー・ボタン・メインビジュアルあり」など、デザイナー目線のピンポイントなタグも用意されています。
SANKOU!

MUUUUU.ORG（ムーオルグ）

更新頻度：高
海外サイトも多め
おしゃれでハイクオリティなサイト

サムネとタイトルのみが一覧に並び、シンプルでとても見やすいギャラリーサイトです。
5カラムで並ぶので一度に見れるサイト数が多く、ナビゲーションが邪魔にならないのも見やすいポイントの一つです。
MUUUUU.ORG

Web Design Clip

更新頻度：高
日本・国外・LP・SPの4カテゴリから閲覧可能
おしゃれでハイクオリティなサイト

こちらも更新頻度が非常に高く、日に3サイト投稿されることも多いギャラリーサイトです。
Japan・World・Landing Page・Smartphoneでカテゴリ分けされていて、目的に応じてギャラリーを見やすいのがとても便利です。
また、サイドバーがある・ウィンドウ全体を囲むバーがある・追従ヘッダーがある、などレイアウト別で絞り込めるのも特徴です。
Web Design Clip

S5-Style

更新頻度：高
おしゃれでハイクオリティなサイト
お気に入り機能

おしゃれさ・かっこよさが追求された素敵なサイトが多く掲載されている印象で、ベーシックなコーポレートサイトなどはあまり掲載されていませんが、掲載サイトを見ているととても面白いです。
タグ分けも豊富で、今流行の兆しを見せている「ニューモーフィズム」や「WebGL・canvas」といったタグも用意されています。
他にもサイトのカラー（ライトカラー・ダークカラー）を選ぶこともできて、ギャラリーサイト自体もおしゃれで先進的な印象を受けます。
S5-Style

レスポンシブ

レスポンシブは、特別な場合を除いて今やマストの対応です。
レイアウトに迷ったときはぜひ参考にしてみてください。

Responsive Web Design JP

一覧でPC・TAB・SPデザインが見られる
おしゃれでハイクオリティなサイト

一覧でPC・TAB・SPのサムネが表示されていて、とても見やすいギャラリーサイトです。
サイトに遷移しなくてもデバイス別でファーストビューを確認できて、ウィンドウ幅を変えなくてよいのが便利です！
毎日・毎週更新されるわけではありませんが、更新頻度は高めです。
Responsive Web Design JP

sps collection(エスピーエス・コレクション)

更新頻度：高
スマホサイズのファーストビューを見られる
お気に入り機能

サムネイルが縦長で、ファーストビューが高さ100vhのデザインも多く載っています。
SPデザインに迷ったときにとても参考になります。
sps collection

LP（ランディングページ）

LPでは特にターゲットや商品・サービスに合ったデザインを考える必要があります。
ギャラリーサイトを参考にして、ぴったりなLPデザインを考えましょう！

LPアーカイブ

更新頻度：高
キャッチコピーも見られる
お気に入り機能
おすすめ・お気に入りが多い順でソート

更新頻度が高く、掲載数は現在27,267と非常に多いです！
おすすめ順にソートできることと、キャッチコピーからLPを探せることが特徴です。
また、LPは時期が過ぎると下げられることが多いですが、LPアーカイブさんではページ全体のデザインのキャプチャが掲載されているため、デザインが見られなくなった……ということはありません。
LPアーカイブ

バナー

ネット上に投稿されたバナーは数多いため、見るギャラリーサイトによっては掲載されているバナーが全然違う、ということがあります。
いい参考が見つからない場合も、諦めず探してみてください。

Bannnner.com

サイズ別で絞り込み可能
縮小されたりせず、そのままのサイズで閲覧できる

一覧ページでバナーがトリミングされたりせず、元サイズのまま掲載されていてバナーが見やすいつくりになっています。
また、さまざまな大きさのバナーが掲載されているので、参考になります。
Bannnner.com

ユーザー投稿型なので投稿が途切れない
人気ワードでの絞り込みが簡単

ユーザー投稿型のまとめサイトです。
リンクでは「バナー」の検索結果になっていますが、海外の方のユーザーが多いので、英語や別の言語でも検索してみてください。
バナーだけでなく、チラシやイラスト、デザインチップスが数多く投稿されているので、引き出しを増やしたいときやインスピレーションを受けたいときなど、Pinterestを眺めてみるのもアリです。
※会員登録が必要です。
Pinterest