実務でよく使うパーツデザインに 役立つサイト5選

デザインスキル

【2020年版】実務でよく使うパーツデザインに役立つサイト5選

悩んでいる人

・ギャラリーサイトから特定のパーツデザインだけを探すのが大変
・他記事の参考ギャラリーサイトが全然参考にならないんだけど...

 

Webデザイナーのゆーしです。

 

独学でWebデザインを勉強している方や、webデザイナーになって間もない方は、ヘッダー、ボタン、見出しなどのパーツデザインの引き出しが少ないことに悩みますよね。

 

そんな方のために、パーツデザインに特化したギャラリーサイトというのがあるのですが、残念ながら過去数年更新が止まったままのサイトだったり、デザインが古くて参考にできないものが多いです。

 

そう感じている方に向けて、webデザイナー2年目の僕が、実務で使っているパーツデザインに役立つサイトを5つに絞って紹介したいと思います。

パーツデザインに絞らず、webサイトのギャラリーがみたいという方は、別途ギャラリーサイトをまとめた記事がありますので合わせてご覧ください。

 

【20サイトを徹底比較】実務でwebデザインの参考に役立つギャラリーサイト4選

 

後半では、実務ではあまり使いませんが、世の中にあるwebデザインパーツに特化したギャラリーサイトを軽く紹介していきたいと思います。

 

 

実務でよく使うWebデザインパーツに役立つサイト5選

Headers - Webサイトのヘッダまとめ -

 

Headers - Webサイトのヘッダまとめ -

URL:Headers - Webサイトのヘッダまとめ -

 

ヘッダーに特化したパーツデザインギャラリーサイトです。

 

このサイトのおすすめポイントは、なんといっても参考パーツの質が高いです。一通り新しいwebサイトを参照しているため、デザインも今風なものが多く、眺めるだけでも楽しいです。

「横幅の広さ」で並び替えができたり、webメディアやコーポレートサイトなどのタイプで絞り込みもできるので検索機能としても優れています。

 

参考パーツ数はまだ少ないですが、今後の更新に期待です。

 

 

関西・北陸・せとうちエリアのおでかけ&観光情報【マイフェバ】

 

関西・北陸・せとうちエリアのおでかけ&観光情報【マイフェバ】

URL:関西・北陸・せとうちエリアのおでかけ&観光情報【マイフェバ】

 

ちらはギャラリーサイトではなく、観光情報を発信しているオウンドメディアなのですが、投稿の一つひとつのサムネイル、メインビジュアルのクオリティがかなり高いので、おすすめで紹介させていただきます。

タイポグラフィーや、装飾のデザインが繊細で、デザインのバリエーションも豊富なので、どの投稿も本当に参考になります。

 

ポップですこし女性向けのデザインに偏ってはいますが、投稿頻度も高く、パーツデザインやバナーデザインの引き出しに困ったときによく訪れます。

 

 

Calltoidea

 

Calltoidea

URL:Calltoidea

 

こちらは海外サイトですが、カテゴリが豊富で情報も新しいため、実務で参考にできるパーツが多いです。

特に「list」「popups(ポップアップ画面)」など、よく使うけどなかなか見つけられないパーツギャラリーが見れるので便利ですよ。

 

カテゴリ一覧がアイコンなので操作性もいいので、目的がなくてもついつい訪れたくなっちゃうサイトですね。

 

 

SaaS Pages

 

SaaS Pages

URL:SaaS Pages

 

こちらも海外サイトです。

カテゴリはCalltoideaより少ないですが、一つひとつのカテゴリの参考パーツ数が多いです。


お探しのパーツのカテゴリがSaaS Pagesにあればこちらで探し、SaaS PagesになければCalltoideaで探す、といった流れですね。

 

カテゴリに「Hero」というものがあるのですが、日本語で言えばメインビジュアルに相当するものです。日本のメインビジュアルに特化したギャラリーサイトより、数も豊富でおしゃれなものが多いので参考にしてみてください。

その他にも「FAQ」「Price(価格表)」など、定番なパーツが豊富なので愛用しています。

 

 

Pinterest

 

Pinterest

URL:Pinterest

 

みなさんご存知Pinterest。

実務では、パーツデザインのギャラリーサイトを探し回るより、なんだかんだここでさっと検索することの方が多いかもしれません。

Pinterestでみつからなかったら他を当たる、といった感じで使ってます。

日頃から眺めておくだけでも審美眼が鍛えられていいですよ!

 

 

その他のwebデザインパーツに特化したサイト

 

上記で紹介したサイト以外のパーツデザインに特化したサイトを以下に紹介します。

 

日本のwebデザインパーツに特化したサイトは少なくはないですが、更新頻度も低く、情報も古いので正直実務で役に立つ物は少ないので、最終手段で参考にするよう程度のものと考えましょう。

 

海外サイトは、更新頻度が高いものやカテゴリが豊富なものはいくつかありますが、あくまで海外サイトの参考パーツなので、参考になるかどうかはご自身で確かめてみてください。

 

 

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

 

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

URL:ブブンデザインアーカイブ

 

パンくずリストやページャーのカテゴリなど、他のパーツデザインサイトよりもカテゴリが豊富で参考パーツ数も多いです。

 

 

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

 

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

URL:バナーデザインデータベース

 

タイトルにはバナーデザインと書いてますが、バナー以外にも、「ボタン」「タイトル(見出し)」「メインビジュアル」から絞り込めます。

 

 

UICloud

 

UICloud

URL:UICloud

 

46608(2020年6月現在)のUIパーツから検索できるサイトです。

カテゴリからではなく、検索窓からキーワードを打つ必要がありますが、英語が拙い僕でもいくつか引っかかってくれます。

 

海外サイトなので参考になるパーツは少ないですが、数は豊富です。

 

 

UI-Patterns

 

UI-Patterns

URL:UI-Patterns

 

こちらも海外サイトですが、カテゴリがかなり細かく分かれています。

細かすぎて各カテゴリの参考パーツ数が少ないです。情報も少し古いです。

 

 

MephoBox

 

MephoBox

URL:MephoBox

 

404ページやカレンダーのあるサイトなど、独特なカテゴリでパーツが見れます。

パーツ単体というよりは、ざっくりパーツあたりをトリミングしたサムネイルが並んでいるので少しわかりづらいかもしれません。

 

 

AWWWARDS

 

AWWWARDS

 

AWWWARDSはwebサイトのギャラリーサイトですが、タグの絞り込みでパーツごとのギャラリーも閲覧できます。

例えば、以下のように「FOOTER-DESIGN」や「About pages」などのタグから絞り込みができます。

 

URL:AWWWARDSのフッターデザイン

URL:AWWWARDSのアバウトデザイン

 

ただ、一覧として表示されるのはあくまでwebサイトなので、パーツだけを一覧でみたい場合にはあまり参考にならないでしょう。

 

 

見出しデザイン.com

 

見出しデザイン.com

URL:見出しデザイン.com

 

見出しデザインに特化したギャラリーサイトです。

「グラデーション」「テキストのみ」「 テキスト非画像」「上線」「下線」「丸」「四角」「囲み線」「斜線」「点線」「角丸」から検索できます。

 

情報が古いので参考にできるものは少ないかもしれません。

 

 

フッターデザイン.com

 

フッターデザイン.com

URL:フッターデザイン.com

 

フッターデザインに特化したギャラリーサイトです。

イラスト中心のフッターデザインだったり、「ページトップへ戻る」(ボタンデザイン)など、面白い切り口から絞り込みができます。

 

こちらも情報が古いのがもったいないですね。

 

 

Footers Design Gallery

 

Footers Design Gallery

URL:Footers Design Gallery

 

海外のフッターデザインを紹介しているサイトです。

こちらは当然ながら参考パーツが海外のサイト、また絞り込みができないので多少不便ですが、情報の新しさ的には「フッターデザイン.com」よりも新しいので、まだ参考にしやすいのではないかと思います。

 

 

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

 

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

URL:WEBデザインのメインビジュアルまとめ

 

メインビジュアルに特化したギャラリーサイトです。

参考サイトのギャラリーサイトのように、「業界別」や「カラー」でフィルタリングができます。1年単位で更新しています。

 

メインビジュアルはwebサイトギャラリーの一覧からみれるので不必要かと思いますが、一応存在するので紹介を。

 

 

MAIN VISUAL collection

 

MAIN VISUAL collection

URL:MAIN VISUAL collection

 

こちらもメインビジュアルに特化したギャラリーサイト。タグからイメージ、カラーを選べます。

 

2015年から更新が止まっているので生きているか心配ですね。

 

 

HEADER LOVE

 

HEADER LOVE

URL:HEADER LOVE

 

タイトルはHEADERですが、どうみてもメインビジュアルです。たしかにヘッダーもみれますが。

こちらも海外サイトで、数は豊富ですがカテゴリ分けがないので探しにくさが少々もったいないです。

 

 

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

 

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

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

 

ファビコンに特化したギャラリーサイトです。

一体誰が使うのか不思議ですが、ファビコンを極めたい人は必見です。参照ファビコンの元サイトにも飛べます。

 

 

IconJ

 

IconJ

URL:IconJ

 

こちらは海外のファビコンに特化したギャラリーサイトです。

一覧からファビコンのコードを見れたり、実際に.icoファイルをダウンロードできるみたいです。

 

なんのためにダウンロードするんでしょうね。

 

 

House of Button

 

House of Button

URL:House of Button

 

海外のボタンに特化したギャラリーサイトです。

3年前から更新が止まっています。

 

 

Websites with Ghost Buttons

 

Websites with Ghost Buttons

URL:Websites with Ghost Buttons

 

こちらもボタンに特化した海外サイト。

参考パーツ数は驚くほど少ないですが、ロゴがかわいい。

 

 

pttrns

 

pttrns

URL:pttrns

 

アプリのパーツデザインに特化した海外サイトです。

iPhoneやAndroidなどのOSや、ログイン画面、検索窓などアプリでよく見かけるパーツデザインでカテゴリ分けれています。

webサイトでもフラットなデザインが広まっているので、参考になるのではないでしょうか。

 

 

Collect UI

 

Collect UI

URL:Collect UI

 

カテゴリがかなり豊富ですが、どちらかと言うとwebサイトというよりはアプリ向けのパーツデザインが多いです。

 

 

Beautiful web app screenshots | Webframe

 

Beautiful web app screenshots | Webframe

URL:Beautiful web app screenshots | Webframe

 

こちらはwebサイトではなく、「プロフィール画面」「設定画面」など、タスク管理ツールや業務管理ツールの管理画面UIにおけるパーツデザイン集です。

 

管理画面のUIは、ユーザーの操作性を非常に考慮された設計なので、マイページやECサイトのデザインをするときは役に立つかもしれませんね。

カテゴリも参考パーツ数も多く、業界別でも絞り込みができます。

 

これの国内版サイトがあればかなり便利そうですね。

 

 

まとめ

 

たくさん紹介しましたが、実務では、最初に紹介した5つのサイトしか使わないといっても過言ではございません。

ですので最低限、僕がおすすめした5つのサイトはブックマークしておきましょう!

 

「神は細部に宿る」と言う言葉もある通り、小さなパーツデザインにこだわることでオリジナリティを出したり、見栄えをグッとよくすることができますよ。

 

最後にもう一度、実務で使っているwebデザインパーツに役立つサイト5つをまとめておきます。

 

 

ご覧いただきありがとうございました!

人気記事

独学でwebデザイナーになるための完全ロードマップ【行動できない人へ】 1

ゆーし 新卒でweb制作会社のディレクターとして入社し、8ヶ月でwebデザイナーへ転職。 webデザイナー歴2年目 2019年12月からWebデザインの副業を始め、5ヶ月で100万円達成。 悩んでいる ...

【見本あり】デザインカンプの作り方とコツを現役webデザイナーの解説 2

未経験者からすると、デザインカンプはいわばあなたのデザインスキルをアピールする実績そのものです。 ポートフォリオに載せるものになるので、的外れなものを作りたくないですし、あわよくばいけてるデザインを作 ...

webデザインスキルを爆速で上げるトレースのやり方 3

悩んでいる人・Webデザインのトレースって意味あるの? ・デザイン力を効率よくスキルアップできるトレースの方法ってあるの? webデザインのトレースは、やり方次第でその効果は大きく変わります。 デザイ ...

-デザインスキル

Copyright© これだけデザイン , 2020 All Rights Reserved.