・ギャラリーサイトから特定のパーツデザインだけを探すのが大変
・他記事の参考ギャラリーサイトが全然参考にならないんだけど...
Webデザイナーのゆーしです。
独学でWebデザインを勉強している方や、webデザイナーになって間もない方は、ヘッダー、ボタン、見出しなどのパーツデザインの引き出しが少ないことに悩みますよね。
そんな方のために、パーツデザインに特化したギャラリーサイトというのがあるのですが、残念ながら過去数年更新が止まったままのサイトだったり、デザインが古くて参考にできないものが多いです。
そう感じている方に向けて、webデザイナー2年目の僕が、実務で使っているパーツデザインに役立つサイトを5つに絞って紹介したいと思います。
パーツデザインに絞らず、webサイトのギャラリーがみたいという方は、別途ギャラリーサイトをまとめた記事がありますので合わせてご覧ください。
後半では、実務ではあまり使いませんが、世の中にあるwebデザインパーツに特化したギャラリーサイトを軽く紹介していきたいと思います。
実務でよく使うWebデザインパーツに役立つサイト5選
Headers - Webサイトのヘッダまとめ -
ヘッダーに特化したパーツデザインギャラリーサイトです。
このサイトのおすすめポイントは、なんといっても参考パーツの質が高いです。一通り新しいwebサイトを参照しているため、デザインも今風なものが多く、眺めるだけでも楽しいです。
「横幅の広さ」で並び替えができたり、webメディアやコーポレートサイトなどのタイプで絞り込みもできるので検索機能としても優れています。
参考パーツ数はまだ少ないですが、今後の更新に期待です。
関西・北陸・せとうちエリアのおでかけ＆観光情報【マイフェバ】
URL：関西・北陸・せとうちエリアのおでかけ＆観光情報【マイフェバ】
こちらはギャラリーサイトではなく、観光情報を発信しているオウンドメディアなのですが、投稿の一つひとつのサムネイル、メインビジュアルのクオリティがかなり高いので、おすすめで紹介させていただきます。
タイポグラフィーや、装飾のデザインが繊細で、デザインのバリエーションも豊富なので、どの投稿も本当に参考になります。
ポップですこし女性向けのデザインに偏ってはいますが、投稿頻度も高く、パーツデザインやバナーデザインの引き出しに困ったときによく訪れます。
Calltoidea
URL：Calltoidea
こちらは海外サイトですが、カテゴリが豊富で情報も新しいため、実務で参考にできるパーツが多いです。
特に「list」「popups（ポップアップ画面）」など、よく使うけどなかなか見つけられないパーツギャラリーが見れるので便利ですよ。
カテゴリ一覧がアイコンなので操作性もいいので、目的がなくてもついつい訪れたくなっちゃうサイトですね。
SaaS Pages
URL：SaaS Pages
こちらも海外サイトです。
カテゴリはCalltoideaより少ないですが、一つひとつのカテゴリの参考パーツ数が多いです。
お探しのパーツのカテゴリがSaaS Pagesにあればこちらで探し、SaaS PagesになければCalltoideaで探す、といった流れですね。
カテゴリに「Hero」というものがあるのですが、日本語で言えばメインビジュアルに相当するものです。日本のメインビジュアルに特化したギャラリーサイトより、数も豊富でおしゃれなものが多いので参考にしてみてください。
その他にも「FAQ」「Price（価格表）」など、定番なパーツが豊富なので愛用しています。
URL：Pinterest
みなさんご存知Pinterest。
実務では、パーツデザインのギャラリーサイトを探し回るより、なんだかんだここでさっと検索することの方が多いかもしれません。
Pinterestでみつからなかったら他を当たる、といった感じで使ってます。
日頃から眺めておくだけでも審美眼が鍛えられていいですよ！
その他のwebデザインパーツに特化したサイト
上記で紹介したサイト以外のパーツデザインに特化したサイトを以下に紹介します。
日本のwebデザインパーツに特化したサイトは少なくはないですが、更新頻度も低く、情報も古いので正直実務で役に立つ物は少ないので、最終手段で参考にするよう程度のものと考えましょう。
海外サイトは、更新頻度が高いものやカテゴリが豊富なものはいくつかありますが、あくまで海外サイトの参考パーツなので、参考になるかどうかはご自身で確かめてみてください。
ブブンデザインアーカイブ
URL：ブブンデザインアーカイブ
パンくずリストやページャーのカテゴリなど、他のパーツデザインサイトよりもカテゴリが豊富で参考パーツ数も多いです。
バナーデザインデータベース
URL：バナーデザインデータベース
タイトルにはバナーデザインと書いてますが、バナー以外にも、「ボタン」「タイトル（見出し）」「メインビジュアル」から絞り込めます。
UICloud
URL：UICloud
46608（2020年6月現在）のUIパーツから検索できるサイトです。
カテゴリからではなく、検索窓からキーワードを打つ必要がありますが、英語が拙い僕でもいくつか引っかかってくれます。
海外サイトなので参考になるパーツは少ないですが、数は豊富です。
UI-Patterns
URL：UI-Patterns
こちらも海外サイトですが、カテゴリがかなり細かく分かれています。
細かすぎて各カテゴリの参考パーツ数が少ないです。情報も少し古いです。
MephoBox
URL：MephoBox
404ページやカレンダーのあるサイトなど、独特なカテゴリでパーツが見れます。
パーツ単体というよりは、ざっくりパーツあたりをトリミングしたサムネイルが並んでいるので少しわかりづらいかもしれません。
AWWWARDS
AWWWARDSはwebサイトのギャラリーサイトですが、タグの絞り込みでパーツごとのギャラリーも閲覧できます。
例えば、以下のように「FOOTER-DESIGN」や「About pages」などのタグから絞り込みができます。
ただ、一覧として表示されるのはあくまでwebサイトなので、パーツだけを一覧でみたい場合にはあまり参考にならないでしょう。
見出しデザイン.com
URL：見出しデザイン.com
見出しデザインに特化したギャラリーサイトです。
「グラデーション」「テキストのみ」「 テキスト非画像」「上線」「下線」「丸」「四角」「囲み線」「斜線」「点線」「角丸」から検索できます。
情報が古いので参考にできるものは少ないかもしれません。
フッターデザイン.com
URL：フッターデザイン.com
フッターデザインに特化したギャラリーサイトです。
イラスト中心のフッターデザインだったり、「ページトップへ戻る」（ボタンデザイン）など、面白い切り口から絞り込みができます。
こちらも情報が古いのがもったいないですね。
Footers Design Gallery
海外のフッターデザインを紹介しているサイトです。
こちらは当然ながら参考パーツが海外のサイト、また絞り込みができないので多少不便ですが、情報の新しさ的には「フッターデザイン.com」よりも新しいので、まだ参考にしやすいのではないかと思います。
WEBデザインのメインビジュアルまとめ
メインビジュアルに特化したギャラリーサイトです。
参考サイトのギャラリーサイトのように、「業界別」や「カラー」でフィルタリングができます。1年単位で更新しています。
メインビジュアルはwebサイトギャラリーの一覧からみれるので不必要かと思いますが、一応存在するので紹介を。
MAIN VISUAL collection
こちらもメインビジュアルに特化したギャラリーサイト。タグからイメージ、カラーを選べます。
2015年から更新が止まっているので生きているか心配ですね。
HEADER LOVE
URL：HEADER LOVE
タイトルはHEADERですが、どうみてもメインビジュアルです。たしかにヘッダーもみれますが。
こちらも海外サイトで、数は豊富ですがカテゴリ分けがないので探しにくさが少々もったいないです。
ファビコンギャラリー.com
URL：ファビコンギャラリー.com
ファビコンに特化したギャラリーサイトです。
一体誰が使うのか不思議ですが、ファビコンを極めたい人は必見です。参照ファビコンの元サイトにも飛べます。
IconJ
URL：IconJ
こちらは海外のファビコンに特化したギャラリーサイトです。
一覧からファビコンのコードを見れたり、実際に.icoファイルをダウンロードできるみたいです。
なんのためにダウンロードするんでしょうね。
House of Button
URL：House of Button
海外のボタンに特化したギャラリーサイトです。
3年前から更新が止まっています。
Websites with Ghost Buttons
URL：Websites with Ghost Buttons
こちらもボタンに特化した海外サイト。
参考パーツ数は驚くほど少ないですが、ロゴがかわいい。
pttrns
URL：pttrns
アプリのパーツデザインに特化した海外サイトです。
iPhoneやAndroidなどのOSや、ログイン画面、検索窓などアプリでよく見かけるパーツデザインでカテゴリ分けれています。
webサイトでもフラットなデザインが広まっているので、参考になるのではないでしょうか。
Collect UI
URL：Collect UI
カテゴリがかなり豊富ですが、どちらかと言うとwebサイトというよりはアプリ向けのパーツデザインが多いです。
Beautiful web app screenshots | Webframe
URL：Beautiful web app screenshots | Webframe
こちらはwebサイトではなく、「プロフィール画面」「設定画面」など、タスク管理ツールや業務管理ツールの管理画面UIにおけるパーツデザイン集です。
管理画面のUIは、ユーザーの操作性を非常に考慮された設計なので、マイページやECサイトのデザインをするときは役に立つかもしれませんね。
カテゴリも参考パーツ数も多く、業界別でも絞り込みができます。
これの国内版サイトがあればかなり便利そうですね。
まとめ
たくさん紹介しましたが、実務では、最初に紹介した5つのサイトしか使わないといっても過言ではございません。
ですので最低限、僕がおすすめした5つのサイトはブックマークしておきましょう！
「神は細部に宿る」と言う言葉もある通り、小さなパーツデザインにこだわることでオリジナリティを出したり、見栄えをグッとよくすることができますよ。
最後にもう一度、実務で使っているwebデザインパーツに役立つサイト5つをまとめておきます。
パーツデザインに役立つサイト5選
ご覧いただきありがとうございました！
