この記事は2015年10月22日に公開された記事を再編集したものです。

デザイン作業に慣れてくると、どうしても自分の癖が出てしまい、似たようなデザインばかりになってしまいがちです。特にWebデザインのパーツは、毎回同じようなデザインを作ってしまうことも少なくありません。しかし、自分が持っているアイデアだけでは、なかなか新しいデザインは浮かんでこないものです。

そこでオススメしたいのがギャラリーサイトです。その中でもパーツごとに収集したギャラリーサイトは、デザインの「部分」だけでも参考にすることができるため非常に便利です。デザインアイデアが欲しい時こそ、多くのヒントが詰まっている素材サイトを活用しましょう。

今回は、Webデザインのパーツをまとめたギャラリーサイトを37個まとめてご紹介します。

※サイトによっては素材やソースコードなどを配布・掲載しているものもあります。ご利用の際は、必ず利用条件等をご確認いただき、ルール厳守の上でご利用ください
  

Webデザインのパーツを収集したギャラリーサイトまとめ

1. Freebies Booth

Freebies Booth
http://freebiesbooth.com/

「Freebies Booth」では、Webデザイナーに向けて様々な素材を提供しています。ギャラリーサイトとしてデザインの参考に活用するのはもちろん、気に入ったデザインがあればデータのダウンロードもできます。

デザインは最新のものから一覧表示してありますが、右側メニューから順番を並び替えたり、キーワードタグで絞り込むことが可能です。最近は更新していないものの、保管数は多いので参考にしてみてはいかがでしょうか。
  

2. バナーデザインアーカイブ

バナーデザインアーカイブ
http://banner.keizine.net/

バナーを作る際、いつも似たようなデザインになりがち……という方も少なくないはずです。そうしたバナーデザインの悩みを解決したい時にオススメしたいのが、「バナーデザインアーカイブ」です。

2,129個(2017年10月4日確認時点)ものバナーを公開しているバナー専門ギャラリーサイトで様々なバナーを見ることが可能で、ページ右手からサイズ・色・業種・キーワード絞り込みができて素早くバナーデザインを見付けることができます。
  

3. bannergallery

bannergallery
https://bannergallery.net/

バナー広告デザインのインスピレーションが欲しい、という時に活躍するギャラリーサイトです。掲載数は3,024個(2017年10月4日確認時点)と豊富で、幅広いサイズのバナーをバランス良く取り揃えています。

サイズだけでも33個のカテゴリを用意していますので、定番サイズから少し変わったサイズのデザインもすぐに見付かるのではないでしょうか。とりあえず、たくさんのデザインをチェックしたい、探しているサイズが見付からない、という方は必見です。
  

4. Web Design Ledger

webdesignledger.com.png
https://webdesignledger.com/large-website-headers/#sthash.f413UjhN.dpbs

「Web Design Ledger」では、Webデザイナーがインスピレーションを得ることができる様々な情報を発信しています。そのほかのギャラリーサイトと形態は異なるものの、Webデザインのアイデア収集に役立つのではないでしょうか。

リンク先のページでは、海外のホームページヘッダーデザインを見ることが可能です。
  

5. バナーデザインギャラリー

バナーデザインギャラリー
http://www.banner-design-gallery.com/

バナーデザインギャラリー」は、ユーザーからの投稿をもとにバナーを収集掲載しているバナー専門ギャラリーサイトです。

最大の特徴は5点満点の評価機能で、ほかのユーザーが各バナーをどれくらい評価しているかがわかります。単にデザインを見たいだけではなく、デザインに対する反応・評価を知りたい方にぴったりなのではないでしょうか。

バナー掲載数は558個(2017年10月4日確認時点)で多くは国内のものとなっていますが、海外のバナーも一部見ることができます。
  

6. IconJ

IconJ
http://www.iconj.com/

ファビコンのデザインがいまいち決まらない、そもそも作り方がわからない……という方にオススメしたいのが「IconJ」です。ファビコンのデザインギャラリーとジェネレーターが一体化したサービスで、画像をもとにファビコンを自動生成することができます。

デザインのアイデア探しからファビコン作成まで1つで完結できるので、ファビコンが必要になった時にはぜひ使ってみてください。
  

7. バナーデザインまとめ

バナーデザインまとめ。
http://bannermatome.com/

可愛いバナー、カッコいいバナーをサイズ別や業種別で検索できるギャラリーサイトです。掲載はバナーに特化しており、19,600個ものバナーを掲載しています。(2017年10月4日確認時点)

バナーを「テキスト風」「手書き風」などの表現別に探せるのも特徴的で、欲しいデザインをいち早く見付けることができるのではないでしょうか。

バナーのサイズ、形式などについての解説ページもあり参考になります。
  

8. Favicon & App Icon Generator

Favicon & App Icon Generator
https://www.favicon-generator.org/

ファビコンジェネレータとアイコンギャラリーが一体化したサービスです。ギャラリーには様々なファビコンが掲載してあり、文字・色・キーワードで絞込検索することができます。

意外と決まらないファビコンデザイン制作の参考にしてみてはいかがでしょうか。
  

9. AWWWARDS

AWWWARDS
https://www.awwwards.com/websites/navigation/

有名ギャラリーサイト「AWWWARDS」のナビゲーションに特化した紹介ページです。優れたナビゲーションデザインが揃っていますので、デザインネタ収集に活用してみてください。
  

10. UI Movement

UI Movement
https://uimovement.com/

UIのアニメーションを収集したギャラリーサイトで、様々なアプリやホームページの秀逸なUIを見ることができます。

ボタン・カレンダー・グラフ・ナビゲーション・タブなどパーツごとにタグを設定しているので、探したいパーツのデザインがすぐに見付かります。画像をクリックすると、参照元にリンクすることも可能です。
  

11. UIDB.io

UIDB.io
https://uidb.io/

UIDB.io」は、多種多様なパーツごとのデザインを収集しているギャラリーサイトです。キーワード検索、タグ検索を利用してデザインの検索を行うことができます。

検索フィルタや価格表、サインアップ画面、チーム紹介など、多くのホームページには欠かせないパーツデザインが揃っています。また、退会ページなど、ほかのギャラリーサイトではあまり扱っていないデザインも豊富です。総合的にパーツデザインを収集しているギャラリーサイトをお探しの方は、ぜひ参考にしてみてください。
  

12. Calltoidea

Calltoidea
http://calltoidea.com/

「Calltoidea」は、わかりやすいカテゴリわけと豊富な収集ジャンルが特徴的なギャラリーサイトです。トップページにカテゴリごとにアイコンを配置しており、好きなアイコンをクリックするとデザインの絞り込みができます。

掲載しているパーツは、ログイン画面・ポップアップ・アラート・カレンダー・フッター・ナビ・スライダーなど様々です。ここだけでホームページに必要なパーツは全て揃うのではないか、というくらい豊富に揃っています。
  

13. Designs Crazed

Designs Crazed
https://dcrazed.com/jquery-navigation-plugins-menus/

Webデザインに関する様々な情報を発信する「Designs Crazed」内の、ナビゲーションメニュー紹介ページです。斬新なアイデアのナビゲーションメニューを多数掲載してあり、デモ・ソースも確認することができます。
  

14. Collect UI

Collect UI
http://collectui.com/

10,000個以上(2017年10月4日確認時点)のパーツを掲載し、とにかく豊富にデザインチェックができるギャラリーサイトです。掲載カテゴリーも159種類と多いため、ほかのギャラリーサイトでは見付からないようなパーツも楽に探すことができるのではないでしょうか。

デザイン画像をクリックするとページを移動することなく拡大できるため、時間をかけずにサクッとたくさんのデザインを見ることができます。
  

15.Patternry

Patternry
http://patternry.com/patterns/

デザインパーツ、カラースキーム、タイポグラフィ……とホームページのあらゆる要素をコレクションしているギャラリーサイトです。デザインによっては、ソースコードを確認することもできます。

デザインのアイデア収集はもちろん、どのようにコードを書くのか参考にしたい、という方にもオススメです。
  

16. inspirationui

inspirationui
http://inspirationui.com/

デザインパーツのカテゴリが豊富な点が魅力的なギャラリーサイトです。フッター・フォーム・ボタン・メニューをはじめ、ついデザインに迷ってしまいがちなパーツが多数揃っています。リンクアイコンからすぐに引用元のページに移動できるのが便利です。
  

17. Websites with Ghost Buttons

Websites with Ghost Buttons
http://websiteswithghostbuttons.tumblr.com/

その名のとおり、様々なホームページのゴーストボタンだけを収集しているユニークなギャラリーサイトです。ゴーストボタンを設置しようと考えた際、参考になるのではないでしょうか。
  

18. WEBデザインのメインビジュアルまとめ

WEBデザインのメインビジュアルまとめ
http://mainvisual.net-king.com/

ホームページを開いた時に一番最初に目にとまるのは、メインビジュアルではないでしょうか。WEBデザインのメインビジュアルまとめでは、コンバーションに直結しそうなものを中心にメインビジュアルデザインを収集・掲載しています。
  

19.MAIN VISUAL collection

MAIN VISUAL collection
http://mvisual-collection.dslrs-journal.info/

メインビジュアルに特化したギャラリーサイトです。スタイリッシュ・ポップ・可愛い……などイメージごとに絞り込みができますので、ホームページのデザインにぴったりな参考画像が見付かります。色ごとの絞り込みや表示回数でランキング表示することも可能です。
  

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

ブブンデザインアーカイブ
http://bubundesignarchive.jp/

Webデザイナーによる、優れたパーツを集めてアーカイブしたギャラリーサイトです。「Webデザイナーのアイデアインスピレーションを加速化する」をコンセプトに、デザインのヒントになるパーツを多数収録しています。

気になる部分のデザインをそのままデザインソフトにドラッグすることで、新しいアイデアを創出することができます。ブブン別、業界別の分類で探しやすくなっていますので、必要な時にすぐにデザインを見付け出すことが可能です。
  

21. PATTERN TAP

PATTERN TAP
http://zurb.com/patterntap

様々なデザインパターンを豊富に収録したギャラリーサイトです。タグクラウド、キーワードで絞り込みができるので、膨大な量の中からでも探しているものを見付けることができます。たくさんのデザインを見ることができますので、デザインのヒントをお探しの際にオススメです。
  

22. UI-Patterns

UI-Patterns
http://ui-patterns.com/

掲載量、カテゴリわけが豊富なギャラリーサイトです。例えば、フォームだけでも12種類に分類されていて、収集しているパーツの種類が多く、ほかではあまりないパーツも探すことが魅力です。
  

23. UICloud

UICloud
http://ui-cloud.com/

数々の良質なUIを検索することができるギャラリーサイトです。現在46,000以上の要素を揃えています。(2015年9月11日時点)

キーワード、カテゴリ検索でサクッと探し出すことができ、素材のダウンロードも可能です。海外ギャラリーではありますがわかりやすいアイコンが付いていますので、英語が苦手という方にも使いやすくなっています。
  

24. フッターデザイン.com

フッターデザイン.com
http://footer-design.com/

ホームページのフッターだけを収集したギャラリーサイトです。イラスト、横並びメニュー、カラムメニューといった全部で6つのカテゴリで分類されています。

収集しているのは、ほとんどが日本国内のもので、日本人に使いやすく、参考にしやすいのもポイントです。フッターのデザインに悩んだ時には、ぜひ目をとおしておくことをオススメします。
  

25. pttrns

pttrns
http://pttrns.com/

iPhoneやAndroid向けのデザインパターンを豊富に収集したギャラリーサイトです。

計算機、チャート、チェックインといったお馴染みの画面の様々なデザインを揃えています。アプリデザイン、スマートフォン向けのデザインを行う際、特に参考になります。
  

26. ui parade

ui parade
http://www.uiparade.com/

ボタン、フォーム、スライダーといった要素を、シンプルにまとめたギャラリーサイトです。ページ自体もすっきりとしていて美しく、見やすいデザインとなっています。

任意のデザインをクリックすると、デザイナー、関連パーツの情報も閲覧可能です。
  

27. House of Buttons

House of Buttons
http://houseofbuttons.tumblr.com/

素敵なデザインのボタンだけを収集したギャラリーサイトです。あらゆるボタンがとにかく数多く揃います。

細かい分類はしていませんので、たくさんのデザインをサクサク一気に見たいという時にオススメです。
  

28. Croppy

Croppy
http://croppy.org/

パーツ別にわかりやすく分類したギャラリーサイトです。ヘッダー、ロゴ、イメージ、見出しほか全部で9カテゴリの部分パーツを見ることができます。タグでさらに絞り込むことができる上に、色彩分析をしてある点もユニークです。また、元のホームページも掲載してあり、使用イメージをリアルに確認できます。本格的にデザインを検討したい場合に便利です。
  

29. 見出しデザイン.com

見出しデザイン.com
http://midashi-design.com/

ホームページの見出しデザインに特化したギャラリーサイトです。グラデーション、テキストのみ、角丸、四角という風にデザインのテイストごとにわけてありますので、好みの見出しを容易に探すことができます。サムネイルをクリックすると、デザイン元のページリンクすることも可能です。

見出しのデザインが浮かばない時に見ると、アイデアが浮かびます。
  

30. ファビコンギャラリー.com

ファビコンギャラリー.com
http://favicon-gallery.com/

様々なホームページから、ファビコンだけを集めたギャラリーサイトです。カテゴリ、カラーごとに絞り込み検索することができますので、自社の業種やホームページのデザインに合うファビコンを探し出すことができます。ギャラリーとあわせて、ファビコンの作り方も丁寧に紹介しています。
  

31. Elements of Design | Smiley Cat

Elements of Design
http://www.smileycat.com/design_elements/

色々なデザインパーツをまとめたギャラリーサイトです。

シンプルなページ設計となっていて、無駄が無いのが特徴的です。パーツのカテゴリも40種類以上が揃っていて、あらゆるデザインを閲覧することが可能です。
  

32. HEADER LOVE

HEADER LOVE
https://headerlove.com/

参考になる素敵なヘッダーだけを収集した、ヘッダーデザインに特化したギャラリーサイトです。様々なパーツを収集したギャラリーとは違って1つひとつの画像が大きいので、デザインをしっかりと見ることが可能です。

数は少なめですが、ヘッダーをデザインする際には参考にしたいギャラリーです。
  

33. WEBサイトカッコイイ

WEBサイトカッコイイ
http://fukuoka-web.hustle.ne.jp/

カッコいいホームページだけに絞って集めたギャラリーサイトです。パーツに特化したページではないものの、背景画像、ヘッダー、見出しほか要素ごとに見ることができます。

サムネイル下に出典元を表記してありますので、どこのデザインかがすぐにわかります。様々なジャンルのホームページを対象にしていますので、色々なデザインに出会えるのが魅力です。
  

34. BANNER LINKS

BANNER LINKS
http://nonamedesign.info/banner/

バナーデザインに特化したギャラリーサイトです。業種別、サイズ別、色別に分類してあり、探しているバナーをいち早く見付けることができます。

カテゴリも多く、バナーの数も大量に揃っています。
  

35. バナーデザインデータベース

バナーデザインデータベース
http://aka-design.sub.jp/bd/

バナーを中心に、メインビジュアルパーツ、ボタンを収集したギャラリーサイトです。タイプ、カラー、テイストで絞り込むことができます。

キュート、クール、和風といったテイストに分類してありますので、イメージどおりのデザインがすぐに見付かります。
  

36. Web Banner Gallery

Web Banner Gallery
http://web-banner-gallery.com/

海外のハイセンスなバナーをたくさん見ることができるギャラリーサイトです。サイズの分類が非常に細かく、全部で15サイズを指定して絞り込みができます。

ユーザーからのコメントが見れるほか、評価も付けることも可能です。
  

37. Retrobanner

Retrobanner
http://retrobanner.net/

少しレトロなバナーをコレクションしているギャラリーサイトです。検索機能が充実していて、サイズ、業種、色、テイストで条件を指定して絞り込みできます。

とにかくあらゆるデザインのバナーが大量に揃っている点も大きな魅力です。
  

まとめ

以上、Webデザインのパーツをまとめたギャラリーサイトをご紹介しました。Webデザインを行っていれば、誰でもアイデアに行き詰まる経験をしていることでしょう。特に、ちょっとしたパーツが上手くデザインできない時ほど、もどかしく感じてしまいます。

デザインがパターン化してしまう、新しいアイデアが欲しいという時は、ギャラリーサイトでヒントを探してみてください。全体のデザインは参考にするのが難しくとも、パーツごとのデザインであれば参考にしやすいのではないでしょうか。

何かしらWebデザインのヒントが欲しい時に、ぜひ活用してみてください。