webサイトのデザインを学ぶ際にとても参考になる、webサイト集、まとめサイト、ポートフォリオを一挙にご紹介します。
たくさんのwebサイトのデザインを見ることで、いいデザインが学べたり、アイデアが生まれるきっかけになったり、レイアウトを考える際の参考になるはずです。
本記事では、サイト集を用途や特徴ごとにいくつかの項目に分けてご紹介します。
(なにせ数が多いので…)
気になるものをチェックしてみて下さい。
WordPressやレスポンシブデザインの参考になるwebサイト集・ポートフォリオサイト
WordPressを使用している方にオススメのwebサイト集を集めました。
Wordpress以外でも、レスポンシブデザインでwebサイトを作る場合に役立つと思います。
WPデザインギャラリー
http://wpgallery.kachibito.net
WordPressを使用したwebデザインを掲載しているサイトです。
カラム数やコンテンツジャンルによってカテゴリ分けがされているため、実際のイメージがしやすいのも特徴です。
webサイトのテイストや雰囲気が決まっている場合は、「taste」から探すのも便利です。
Choicely
デザインの参考になるwebサイトはもちろん、便利なwebツールの紹介も載っています。
また、コンテンツのひとつにWordPressのテーマギャラリーがあり、気になるデザインがあればダウンロード先にスムーズにたどり着ける便利なサイトです。
iPhoneデザインボックス
レスポンシブデザインのwebサイトを掲載しているサイトです。
iPhoneで見たときのようなデザインのサムネイルが特徴的なサイトで、実際の表示画面が分かりやすいです。
特に詳細ページではiPhone、PCそれぞれで閲覧した際の表示が並べて表示されるのはありがたいですね。
スマートフォン向けのwebサイトや、レスポンシブデザインのwebサイトを制作予定の場合には、参考にしておきたいサイトです。
気に入ったデザインを登録できる便利なサイト集
「このデザイン良いな」と思ったwebサイトを毎回ブックマークして管理するのは手間ですよね。
この項で紹介するのは、気に入ったデザインを登録して、いつでも素早く確認する事が出来る便利なサイト集です。
bookma! v3
可愛いゴリラ？と直感的にソートしやすいUIが特徴のサイトです。
ユーザー登録をすると「お気に入り」保存ができます。
気に入ったサイトはどんどん登録して、見たいときにスムーズに見ることが出来ます。
straightline bookmark
こちらもユーザー登録することで「お気に入り」保存をすることができるサイトです。
サイトのレイアウトデザイン（このサイトでは「pattern」と表記されています）を始め、色やジャンルなどでもソートする事ができます。
S5-Style
サイトのモーションやUIが美しいサイト集。
シンプルなアイコンと相まって直感的にアイデアを探せます。
また、お気に入りのサイトを一時的に保存することができ、保存したものをサイトリストとしてメーラーに貼り付けることもできます。
81-web.com
国内の優れたデザインのwebサイトを集めたサイト集。
サムネイルの右下の「＋」ボタンを押すことで一時的にお気に入りとして保存できます。
更新頻度の高いwebサイト集
更新頻度が高く、訪れるたびに新たなデザインに出会えるサイト集です。
週刊ウェブデザイン
「週刊」を冠するに恥じぬ更新ペースを誇るサイト。
記事作成時に計算したところ、2週間ほどで84サイトの更新（1日あたり5.25サイト）があり、今もまだ続々と新着サイトが追加されています。
webサイト以外にも、ロゴデザインや写真素材集などもあります。
I/O 3000
ほぼ毎日のように新しいサイトが追加されているサイト集。
すっきりとしたデザインで、掲載されているwebサイトのデザインが引き立ちます。
デザインに迷った時にはシャッフル表示がおすすめ。
新たな発見があるかもしれません。
イケサイ
いけてるサイト、かっこいいサイトなどが、ほぼ毎日2〜4サイトが追加されるサイト集です。
コーポレートサイトやECサイトなどのカテゴリ、色や配色でソートができます。
ジャンルがはっきりしているwebサイト集
イラストを使ったデザインのwebサイトを集めたもの、ランディングページのみを集めたものなど、ピンポイントで探したいジャンルや雰囲気がある場合に非常に役立つサイト集です。
IllustBookmark
イラストを使用したwebサイトを「世界中から」集めて掲載しているサイト集です。
イラスト特有の柔らかさや優しさ、ポップさや楽しさなどを表現したい場合におすすめです。
ランディングページ集めました。
その名の通りランディングページを集めに集めたサイトです。
カテゴリも「スクール・資格」や「求人・転職」、「飲料・食品」などの商品やサービスごとにちゃんと分かれているのが特徴です。
ネットショップWebデザイン参考集
ネットショップ（ECサイト）のサイト集です。
ファッションや家電などの販売ジャンルに加え、MakeShopやYahooショッピング、楽天ショップなどの「レンタルショッピングカート」毎にも検索ができます。
実際に導入する予定のサービスをチェックする際にもおすすめです。
MUUUUU.ORG
クオリティの高さ、そして「縦に長い」サイトを集めたサイト集です。
凝ったギミックや美しいデザインのwebサイトが多く掲載されています。
このサイト自体のクオリティも高いので、ぜひ一度は見て欲しいサイトです。
JWDG(Japan Web Design Gallery)
カフェやレストランの店舗、税理士事務所などのコーポレートサイトを集めたサイト集。
実店舗の写真の見せ方や構成、商品の掲載の仕方などの参考になるサイトが盛りだくさんです。
webサイトのサムネイルごとに「シングルカラム」や「ヘッダー固定」などの情報が掲載されているのも使いやすいです。
バナーや見出しなど、webサイトで使用するもののデザインの参考になるサイト集
webサイトのデザインをする上で避けては通れない、バナーや見出しなどのデザインの参考になるサイト集です。
レトロバナー
バナーデザインを集めたサイトです。
webサイトのデザインに合わせてテイストから探したり、バナーのサイズや業種からも探すことができます。
バナーデザインアーカイブ
こちらも様々なデザインのバナーを集めたサイトです。
キーワード入力での検索に加え、サイズや色、業種から探すことができます。
見出しデザイン.com
タイトル通り、とにかく見出しを集めたサイトです。
シンプルなUIで見やすく、デザインごとの特徴で探せます。
ブブンデザインアーカイブ
webサイトを構成する色々な「ブブン」のデザインが集まるサイト。
サイドメニューや見出し、特集バナーや検索窓、さらには問い合わせや購入のボタンなど、デザインの参考になるものがたくさん見つかります。
favicon-gallery.com/
ファビコンを集めたサイトです。
16px × 16px や 32px × 32pxで表現しなければならないため、悩むことも多いファビコンのデザイン。
ぜひこのサイトを参考にしてください。
探しているwebデザインを見つけやすい！カテゴリ分けがしっかりしているサイト集
たくさんのwebサイトがありすぎて目的のデザインが見つけづらい。
ここで紹介するのは、カテゴリやタグが細かく設定されていて探しやすいサイト集です。
LANDINGPAGE BOOKMARK
ランディングページ（LP）を、カテゴリごとに探せるサイト集です。
「プラセンタ」や「無添加」などのピンポイントのタグでも探せるため、使いやすいです。
WEBデザインの見本帳
「青」や「緑」などの色や、「クール」「ポップ」などの印象、「ポータルサイト」や「旅行・交通」などなど細かいジャンルカテゴリで探せます。
さらに気に入ったデザインから「同じテーマ」でも探すことができます。
Web Design Clip
カテゴリやタグ、レイアウトなどで探せます。
メインカラーやサブカラーでも探せるのは便利ですね。
WONDER BOOKMARKS
カテゴリーと色に加えて、「3D」「JS」「ムービー」などの「TECHNOLOGY」･･･サイトを構築しているテクノロジー、技術タイプによる検索もできます。
イイネ！WEBデザイン
1500を超えるサイトが掲載されているサイト集。
サイト毎に配色パターンが表示されているのも便利です。
[pc][originalsc][/pc][nopc][adsense][/nopc]
とにかく数が多い！総合サイト
最後は多くのwebサイトを閲覧できる総合webサイト集のご紹介です。
眺めているだけでもwebサイトのデザインに役立つアイデアが浮かびそうです。
Good Design Web
タイトルどおり「グッドなデザインのwebサイト」を集めたサイトです。
気になるデザインにカーソルを合わせると「Visit」「More」のボタンが表示され、「Visit」を押すとwebサイトに、「More」を押すと移動せずTOPページが確認できます。
複雑な機能は存在せず、シンプルなUIで使いやすいサイトです。
SG_BOOKMARK
横長のスマートなサムネイルが見やすいサイト集。
掲載数が多いですが、カテゴリやジャンルなど細かく分かれているので探しやすいです。
ウェブセレクション
コンパクトなサムネイルで、1ページあたりの情報量が多いサイト集です。
一度に多くのサイトのデザインを把握できて便利です。
ズロック
2700を超えるサイトが掲載されているwebサイト集。
サムネイルの大きさを3段階で調整できるため、検索や比較の際に役立ちます。
終わりに
如何でしょうか。
私自身、仕事でwebサイトのデザイン案を考える際、今回ご紹介したサイト集を使用し、参考にしたり、インスピレーションが湧く事が多々あるためこの記事を作成しました。
お役に立てれば幸いです。