Webデザインに迷っている方必見! 良く使うパーツのギャラリーサイト15選



Webデザインに迷っている方必見! 良く使うパーツのギャラリーサイト15選

Webデザイナーもアパレルデザイナー同様に、一つ一つのパーツデザインを豊富にストックしておく方が、デザインの幅を広げることができます。その結果、オリジナリティーとデザイン性の高いWebサイトをデザインすることができ、充実したデザイナー人生を歩むことができます。今回はそんな訳で、Webデザインの「パーツ」にフォーカスし、タメになる情報を集めてみました。

目次
  1. Webデザイナー向け!パーツ・デザインのネタ集
  2. header - HEADER LOVE
  3. header - Web Design Ledger
  4. ナビ - AWWWARDS
  5. ナビ - Designs Crazed
  6. footer - Footer Love
  7. footer - Footers Design Gallery
  8. footer - フッターデザイン.com
  9. 表 - fresh Designweb
  10. ファビコン - IconJ
  11. ファビコン - Real Favicon Generator.net
  12. ソーシャル - colorlib
  13. タイトル - SOUEEZE
  14. タイトル - CSSGIRL
  15. バナー - BANNERLINKS
  16. バナー - Retrobanner
  17. まとめ

Webデザイナー向け!パーツ・デザインのネタ集

header - HEADER LOVE

header-loveHEADER LOVE
デザイン・サンプル数 53点

Web デザイナー向けに参考になるヘッダーデザインを収集したサイトになります。スクロールをクリクリしてデザインを拝見していきます。

header - Web Design Ledger

header-designWeb Design Ledger
デザイン・サンプル数 28点

ヘッダーデザインの肝となる「画像」「ナビ」「インパクト」について触れながら参考となるヘッダーデザインをコレクトしたサイトになります。ご紹介しているサイトは、Web デザイナーが Web デザイナーの為に書く Web Design Ledger の 1 ページなります。

ナビ - AWWWARDS

awwwardsAWWWARDS
デザイン・サンプル数 53点

Web デザインの世界最高峰レベルをコレクトする AWWWARDS のナビゲーションに特化したサンプル集になります。ナビゲーション・デザイン特有の静的なデザインと動的なデザインの両方が美しくコラボしています。

ナビ - Designs Crazed

navi-DesignsCrazedDesigns Crazed
デザイン・サンプル数 19点

Web デザイン関連の情報を幅広く扱う DesignsCrazed。ご紹介するページには斬新なナビゲーション・ネタ以外に実際のコードファイルをダウンロードしてコーディングに活用することができます。

footer - Footer Love

footer-loveFooter Love
デザイン・サンプル数 100点

世界中のユニークなフッターデザインをコレクションしているサイトになります。気になるフッターデザインがあれば、実際の Web ページにアクセスして確認することができます。デザインに自信のある方は、Footer Love さんにご自身のデザインを投稿して、掲載してもらうこともできるみたいですよ。

footer - Footers Design Gallery

footer-design-galleryFooters Design Gallery
デザイン・サンプル数 110点

パーツ毎のデザインを集めたギャラリーサイトになります。実用性とユーザーに感動を与えられるフッターデザインが納められています。

footer - フッターデザイン.com

フッターデザインフッターデザイン.com
デザイン・サンプル数 200点以上

日本語サイトのオシャレなフッターデザインを集めたサイトになります。カラムやロゴなどカテゴリー別表示もできるので、急いでいる時に役立ちそうなサンプル収集サイトになります。

表 - fresh Designweb

fresh Designweb
デザイン・サンプル数 40点以上

Web 開発者向けにイカシタ情報をお届けする fresh Designweb さん。こちらのページではデザイン性と UI に優れた表のサンプルとソースの提供元を紹介してくれます。商用サイトのデザインには欠かせないプライスカード・デザインとして参考にすることができます。

ファビコン - IconJ

faviconjIconJ
デザイン・サンプル数 300点以上

ユーザー投稿型のファビコン・サンプル集になります。アニメーション・ファビコンなど変わったデザインもあり、気にいったファビコンをダウンロードして使うこともできます。著作権はファイルをアップしているユーザーにあり、それぞれのファビコンで確認する必要があります。

ファビコン - Real Favicon Generator.net

real-faviconReal Favicon Generator.net

ファビコン・ファイルの作成サイトになります。こちらの特徴は、PC 以外の Android や iOS、windows 8 など多様なファビコン・ファイルを一度に作成してくれる特徴があります。また既にリリースしているサイトのファビコン状況をチェックすることもできます。現在はベータ版ですが、ファビコンの作成作業を加速してくれることは間違いなさそうです。

ソーシャル - colorlib

colorlib
デザイン・サンプル数 16点

主に WordPress 関係の情報を提供する colorlib にソーシャル・デザインをまとめたページがあります。基本的に無料でダウンロードでき、Web デザインに欠かせないソーシャル・アイコンのデザイン作業を手伝ってくれます。

タイトル - SOUEEZE

SOUEEZE
デザイン・サンプル数 9点

CSS でタイトル(h1 や h2)のデザインを実装するサンプル集になります。見たら試したくなる内容です。

タイトル - CSSGIRL

cssgirlCSSGIRL
デザイン・サンプル数 28点

タイトルデザインの参考になるサイトを集めたページになります。10年以上この業界で働く女性フリーランスが厳選したデザイン・サンプル集になります。

バナー - BANNERLINKS

banner-linksBANNERLINKS
デザイン・サンプル数 200点以上

国内の主要なバナーをコレクションしているサイトになります。サイズやカテゴリー、色から検索できてバナー・デザインで悩んだ時に参考にしたいサイトです。

バナー - Retrobanner

retrobannerRetrobanner
デザイン・サンプル数 5000点以上

一昔前のバナーをコレクトしているサイトになります。検索条件が充実していて、業種やテイスト等から素材を探す事ができます。

まとめ

いかがでしたでしょうか?1つでも参考になるネタが見つかったならば、幸いです。ご承知とは思いますが、Webデザインのパーツを細分化すると、上記にご紹介した以外にも「ボタン」や「背景」などがあります。ゴーストボタンや動画背景などが海外ではトレンドとなっており、徐々に国内のサイトもこうしたトレンドを取り組んでくるものと考えられます。また近年はモバイルファーストを意識したデザインが必要となってきていて、年々高い技術力がデザイナーにも求められているように思います。時代の流れに乗り遅れない様に、半歩前をいくカッコイイデザインを提供していきたいですね。

関連記事

オシママサラ
この記事を書いた人
オシママサラ
\ 無料体験開催中!/自分のペースで確実に習得!
オンライン・プログラミングレッスンNo.1のCodeCamp