パーツごとのWEBデザインの参考になるギャラリーサイトまとめ

先日、Wordpressテーマのデザインカスタマイズ参考にするため以下のような記事をまとめました。

上記にある参考サイトは、ソースコードつきのものですが、なかには「サイト要素デザインの参考になる見た目さえわかれば良い」という場合もあると思います。

前の記事を書いたときに、そういったギャラリーサイトが結構あったので、自分用にまとめてみたものを紹介したいと思います。

今回は、Wordpressテーマカスタマイズに使える手軽なものから、かなり凝ったサイトを作るときにも参考になるギャラリーサイトのまとめです。

スポンサーリンク
レクタングル(大)広告

Croppy(クロッピィ)

Webデザインや配色をサポートする新サービス  Croppy(クロッピィ)

Webデザインや配色をサポートする新サービス | Croppy(クロッピィ)

WEBデザイナーのためのパーツ別スクラップブックサービス。

以下のパーツごとにデザインを見ることができます。

  • ヘッダー
  • ロゴ
  • グローバルナビ
  • イメージ
  • 見出し
  • バナー
  • サイドバー
  • ボタン
  • フッター

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

Webデザインの“ブブン”を集めたブブンデザインアーカイブ 公式サイト

Webデザインの“ブブン”を集めたブブンデザインアーカイブ 公式サイト

デザイン性に優れたウェブサイトのパーツをアーカイブした見本集。パーツ別はもとより、業種別にもカテゴライズされています。

以下のパーツごとにデザインを見ることができます。

  • タイトルロゴ
  • プライマリナビゲーション
  • グローバルナビゲーション
  • メインビジュアル
  • 見出し
  • 文字装飾
  • アクセント
  • サイドメニュー
  • ログインフォーム
  • タブ
  • テーブル・表
  • 地図
  • 特集バナー・内部リンク
  • Twitterアイコン・バナー
  • RSSアイコン・バナー
  • フォーム
  • アイコン
  • <前へ 次へ>
  • 検索窓
  • パンくずリスト
  • トップへ戻る ボタン
  • フォントサイズ変更ボタン
  • 問合せ・送信・購入ボタン
  • 電話番号

見出しデザイン.com

見出しデザイン.com -Webデザインの“見出し”を集めたサイト-

見出しデザイン.com -Webデザインの“見出し”を集めたサイト-

見出しのデザインのみを集めたWEBデザインギャラリー。

フッターデザイン.com

フッターデザイン.com -Webデザインの“フッター”を集めたサイト-

フッターデザイン.com -Webデザインの“フッター”を集めたサイト-

主に日本国内の、いろいろなWEBサイトのフッター部分を集めたギャラリー。

Logolog-ロゴログ

Logolog-ロゴログ│カッコイイ、クール、オシャレなロゴデザインのリンク集・まとめサイト

Logolog-ロゴログ│カッコイイ、クール、オシャレなロゴデザインのリンク集

ロゴデザインやロゴ制作のためのリンク集。カッコイイ、クール、オシャレ、ポップ、3D、キュート、いろいろ目的にあわせたロゴデザインの参考に。

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

ファビコンギャラリー.com -Webサイトのファビコンを集めたサイト-

ファビコンギャラリー.com -Webサイトのファビコンを集めたサイト-

いろいろなWEBサイトのファビコンを集めたギャラリー。

レトロバナー

バナーデザイン専門ギャラリーサイト  レトロバナー

バナーデザイン専門ギャラリーサイト | レトロバナー

広告バナーのギャラリーサイト。サイズや色、業種、テイストからバナーを絞り込むことができます。

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

バナーデザインギャラリー  Banner Design Gallery

バナーデザインギャラリー | Banner Design Gallery

投稿情報を基に、かっこいいバナー、かわいいバナー、クリエイティブなバナーなどをまとめて一覧できる、バナー専門のギャラリーサイト。

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

バナーデザインアーカイブ|バナーのデザインをまとめてチェック!

バナーデザインアーカイブ|バナーのデザインをまとめてチェック!

インターネット上に存在する様々なバナーを収集するサイト。

iconDrop

iconDrop|デザインから探せるiOSアプリアイコンギャラリー

iconDrop|デザインから探せるiOSアプリアイコンギャラリー

取るはサイトのパーツではないですが。iOSアプリのアイコンギャラリーサイト。アップルタッチアイコンデザインの参考などに。

MephoBox(海外)

MephoBox  Web Design and Web Inspiration

MephoBox | Web Design and Web Inspiration

以下のパーツデザインの参考に。

  • 404ページ
  • 新着投稿一覧ページ
  • アートワーク
  • 背景
  • ボタン
  • カレンダー
  • コメント
  • フッター
  • タイポグラフィ
  • フォーム
  • ヘッダー
  • ログイン画面
  • ロゴ
  • ナビゲーションメニュー
  • ページネーション

UICloud(海外)

UICloud  User Interface Design Search Engine, UI, UX, GUI, Inspiration, Resources, Elements, User Experience, Free Downloads, Freebies

UICloud

WEBパーツの検索ができます。カテゴリ一覧からパーツを絞り込むことも可能です。

カテゴリは、以下のように細かく分けられています。

カテゴリ一覧

ZURB U(海外)

The Main Tap › PatternTap

The Main Tap › PatternTap

かなりのパーツで絞り込みが行えるギャラリーです。パーツのカテゴリ数を調べてみたら、100個以上ありました。また、デスクトップ、モバイル、タブレットなどを端末でも絞り込みが行えます。

Elements of Design(海外)

Elements of Design- Web Design Gallery

Elements of Design: Web Design Gallery

40種類以上のパーツカテゴリからデザインを絞り込むことができます。ショッピングカート、カルーセル、コードのシンタックスハイライター、言語選択ページ、クーポン、ローディングページ、引用文、ツールチップ、などの他にはないようなデザインの参考によさそうです。

UI-Patterns.com(海外)

UI-Patterns.com

UI-Patterns.com

50種類以上のパーツカテゴリからデザインを絞り込むことができます。

パーツカテゴリ

CSSbake(海外)

CSSbake » the perfect ingredients for baking a website

CSSbake » the perfect ingredients for baking a website

カテゴリーがあるパーツは以下です。

  • 404ページ
  • アーカイブページ
  • 背景
  • ボタン
  • コメント
  • フッター
  • フォーム
  • ヘッダー
  • ナビゲーション
  • ページネーション
  • ポストデータ
  • ショーケース
  • サイドバー

Ui Parade(海外)

Ui Parade – User interface design inspiration & design tools

Ui Parade – User interface design inspiration & design tools

ユーザーインターフェースを便利にするパーツデザイン集です。ダウンロードできるものもあります。

以下のようなパーツがあります。どちらかというとWEB開発者向け。

  • ボタン
  • フォーム
  • UIキット
  • アイコン
  • 音量調節などのノブ
  • プレイヤーデザイン
  • モーダルフォーム
  • ナビゲーション
  • プログレスバーなど
  • スクローラー
  • 検索ボックス
  • スライダー
  • スイッチ
  • その他インターフェイス

House of Buttons(海外)

House of Buttons

House of Buttons

いろいろなボタンデザイン集です。

その他サイトギャラリー

パーツごとではないですが、サイト全体のデザインの参考になるギャラリーサイトです。主に国内のものだけ。

通常サイト

フリーランスWebデザイナー|日本で活躍するフリーランスWebデザイナーの検索
フリーランスWebデザイナー
日本で活動しているフリーランスWebデザイナーのHP紹介

【S5-Style】Webデザインのリンク集・ポータルサイト
S5-Style
Webデザインのリンク集・ポータルサイト

縦長のwebデザインギャラリー・サイトリンク集|MUUUUU.ORG
MUUUUU.ORG
縦長のwebデザインギャラリー・サイトリンク集

WEBデザイン参考サイト bookma! v3
bookma! v3
WEBデザイン参考サイト

WONDER BOOKMARKS  WEBデザイン リンク集
WONDER BOOKMARKS
WEBデザインリンク集

I-O 3000  Webデザインギャラリー
I/O 3000
Webデザインギャラリー

ランディングページ集めました。
ランディングページ集めました。
WEBデザイナーのためのランディングページのリンク集

WEBデザインリンク集|Good Design Web
Good Design Web
WEBデザインリンク集

イケサイ ウェブデザイナーのWEBデザインデータベース
イケサイ
ウェブデザイナーのWEBデザインデータベース

Responsive Web Design JP  日本国内の秀逸なレスポンシブWebデザインを集めたギャラリーサイト
Responsive Web Design JP
日本国内の秀逸なレスポンシブWebデザインを集めたギャラリーサイト

Web Design Clip 【Webデザインクリップ】|Webデザインのクリップ・リンク集
Web Design Clip
Webデザイン制作の上で参考になるクリエイティブの高いWebデザインのリンク集

Webデザインリンク集 中面-下層ページも見られる現代デザイン
現代デザイン
技術的、デザイン性に優れたウェブサイトを掲載しているリンク集

81-web.com
81-web.com
Webサイト制作に役立つ優れたデザインの国内サイトを集めたギャラリー&リンク集

Choicely - Inspiration Gallery
Choicely
デザインの優れたWebサイトや便利なWebサービス、クオリティの高いWordPressテーマなどのインスピレーションギャラリー

STRAIGHTLINE™
STRAIGHTLINE™
WEBデザインギャラリー&リンク集

Webデザインリンク集・ソーシャルブックマーク - straightline bookmark  Web Design Bookmarking
straightline bookmark
Webデザインリンク集・ソーシャルブックマーク

WEBデザインリンク集・デザインサイト一覧(週刊ウェブデザイン)
週刊ウェブデザイン
WEBデザインや、WEB開発のためにWebサイトリンク集

ウェブセレクション - Webデザインの参考になるサイトを集めたリンク集。ホームページ制作のお供にどうぞ。
ウェブセレクション
Webデザインの参考になるサイトを集めたリンク集

WEBデザインの評価・リンク集  WEBデザイン・データベース【WEBdeDB】
WEBdeDB
WEBデザインの評価・リンク集

モバイル

優れたiPhoneサイトデザイン集 - iPhoneデザインボックス
iPhoneデザインボックス
優れたiPhoneサイトデザイン集

モバイルサイトデザイン集のモバイルデザインアーカイブ 公式サイト
モバイルデザインアーカイブ
モバイルサイトデザイン集のモバイルデザインアーカイブ

まとめ

パーツデザインを探せるサイトだけでも色々あるので、これだけあれば目当てのデザインも必ず見つかると思います。

僕のような、WEBデザインが苦手で、普段プログラムコードばかり書いているタイプの人間にとっては、サイト作成時に、これらのサイトはとてもありがたい存在です。いろいろなデザインを見てインスピレーションをもらうにはもってこいです。

ただ僕の場合、どれだけインスピレーションを得ても、そんな高度なデザインを使いこなす場面がなかったり、どうやって実現すればいいのかわからなかったりすることも多々あります。けれど、「こういうこともできるんだ!」ということを知るだけでも、大きな進歩ではないかと思います。