ホームページ

webデザインの参考に!webサイト集・ポートフォリオ29選!【2018年版】

更新日:

webサイトのデザインを学ぶ際にとても参考になる、webサイト集、まとめサイト、ポートフォリオを一挙にご紹介します。

たくさんのwebサイトのデザインを見ることで、いいデザインが学べたりアイデアが生まれるきっかけになったり、レイアウトを考える際の参考になるはずです。

デザインの基本 〜4つの基本原則〜

突然ですが、あなたが「良いデザイン」だと思えるチラシやwebサイトを3つ挙げてみて下さい。 次にそのデザインに共通しているものを探してみて下さい。 良いと思えるデザインには、共通した「基本原則」を見つ ...

本記事では、サイト集を用途や特徴ごとにいくつかの項目に分けてご紹介します。
(なにせ数が多いので...)
気になるものをチェックしてみて下さい。

WordPressやレスポンシブデザインの参考になるwebサイト集・ポートフォリオサイト

WordPressを使用している方にオススメのwebサイト集を集めました。
WordPress以外でも、レスポンシブデザインでwebサイトを作る場合に役立つと思います。

WPデザインギャラリー


http://wpgallery.kachibito.net

WordPressを使用したwebデザインを掲載しているサイトです。
カラム数やコンテンツジャンルによってカテゴリ分けがされているため、実際のイメージがしやすいのも特徴です。
webサイトのテイストや雰囲気が決まっている場合は、「taste」から探すのも便利です。

Choicely


http://choicely.jp

デザインの参考になるwebサイトはもちろん、便利なwebツールの紹介も載っています。
また、コンテンツのひとつにWordPressのテーマギャラリーがあり、気になるデザインがあればダウンロード先にスムーズにたどり着ける便利なサイトです。

iPhoneデザインボックス


http://design.web-hon.com

レスポンシブデザインのwebサイトを掲載しているサイトです。
iPhoneで見たときのようなデザインのサムネイルが特徴的なサイトで、実際の表示画面が分かりやすいです。
特に詳細ページではiPhone、PCそれぞれで閲覧した際の表示が並べて表示されるのはありがたいですね。
スマートフォン向けのwebサイトや、レスポンシブデザインのwebサイトを制作予定の場合には、参考にしておきたいサイトです。

気に入ったデザインを登録できる便利なサイト集

「このデザイン良いな」と思ったwebサイトを毎回ブックマークして管理するのは手間ですよね。
この項で紹介するのは、気に入ったデザインを登録して、いつでも素早く確認する事が出来る便利なサイト集です。

bookma! v3


https://bookma.org

可愛いゴリラ?と直感的にソートしやすいUIが特徴のサイトです。
ユーザー登録をすると「お気に入り」保存ができます。
気に入ったサイトはどんどん登録して、見たいときにスムーズに見ることが出来ます。

straightline bookmark


http://bm.straightline.jp

こちらもユーザー登録することで「お気に入り」保存をすることができるサイトです。
サイトのレイアウトデザイン(このサイトでは「pattern」と表記されています)を始め、色やジャンルなどでもソートする事ができます。

S5-Style


http://bm.s5-style.com

サイトのモーションやUIが美しいサイト集。
シンプルなアイコンと相まって直感的にアイデアを探せます。
また、お気に入りのサイトを一時的に保存することができ、保存したものをサイトリストとしてメーラーに貼り付けることもできます。

81-web.com


http://81-web.com

国内の優れたデザインのwebサイトを集めたサイト集。
サムネイルの右下の「+」ボタンを押すことで一時的にお気に入りとして保存できます。

更新頻度の高いwebサイト集

更新頻度が高く、訪れるたびに新たなデザインに出会えるサイト集です。

週刊ウェブデザイン


http://dailywebdesign.com

「週刊」を冠するに恥じぬ更新ペースを誇るサイト。
記事作成時に計算したところ、2週間ほどで84サイトの更新(1日あたり5.25サイト)があり、今もまだ続々と新着サイトが追加されています。
webサイト以外にも、ロゴデザインや写真素材集などもあります。

I/O 3000


http://io3000.com

ほぼ毎日のように新しいサイトが追加されているサイト集。
すっきりとしたデザインで、掲載されているwebサイトのデザインが引き立ちます。
デザインに迷った時にはシャッフル表示がおすすめ。
新たな発見があるかもしれません。

イケサイ


https://ikesai.com

いけてるサイト、かっこいいサイトなどが、ほぼ毎日2〜4サイトが追加されるサイト集です。
コーポレートサイトやECサイトなどのカテゴリ、色や配色でソートができます。

ジャンルがはっきりしているwebサイト集

イラストを使ったデザインのwebサイトを集めたもの、ランディングページのみを集めたものなど、ピンポイントで探したいジャンルや雰囲気がある場合に非常に役立つサイト集です。

IllustBookmark


http://illustbookmark.info

イラストを使用したwebサイトを「世界中から」集めて掲載しているサイト集です。
イラスト特有の柔らかさや優しさ、ポップさや楽しさなどを表現したい場合におすすめです。

ランディングページ集めました。


http://lp-web.com

その名の通りランディングページを集めに集めたサイトです。
カテゴリも「スクール・資格」や「求人・転職」、「飲料・食品」などの商品やサービスごとにちゃんと分かれているのが特徴です。

ネットショップWebデザイン参考集


https://shopdesign.shop

ネットショップ(ECサイト)のサイト集です。
ファッションや家電などの販売ジャンルに加え、MakeShopやYahooショッピング、楽天ショップなどの「レンタルショッピングカート」毎にも検索ができます。
実際に導入する予定のサービスをチェックする際にもおすすめです。

MUUUUU.ORG


http://muuuuu.org

クオリティの高さ、そして「縦に長い」サイトを集めたサイト集です。
凝ったギミックや美しいデザインのwebサイトが多く掲載されています。
このサイト自体のクオリティも高いので、ぜひ一度は見て欲しいサイトです。

JWDG(Japan Web Design Gallery)


http://japan.2-wg.com

カフェやレストランの店舗、税理士事務所などのコーポレートサイトを集めたサイト集。
実店舗の写真の見せ方や構成、商品の掲載の仕方などの参考になるサイトが盛りだくさんです。
webサイトのサムネイルごとに「シングルカラム」や「ヘッダー固定」などの情報が掲載されているのも使いやすいです。

バナーや見出しなど、webサイトで使用するもののデザインの参考になるサイト集

webサイトのデザインをする上で避けては通れない、バナーや見出しなどのデザインの参考になるサイト集です。

レトロバナー


http://retrobanner.net

バナーデザインを集めたサイトです。
webサイトのデザインに合わせてテイストから探したり、バナーのサイズや業種からも探すことができます。

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


http://banner.keizine.net

こちらも様々なデザインのバナーを集めたサイトです。
キーワード入力での検索に加え、サイズや色、業種から探すことができます。

見出しデザイン.com


http://midashi-design.com

タイトル通り、とにかく見出しを集めたサイトです。
シンプルなUIで見やすく、デザインごとの特徴で探せます。

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


http://bubundesignarchive.jp

webサイトを構成する色々な「ブブン」のデザインが集まるサイト。
サイドメニューや見出し、特集バナーや検索窓、さらには問い合わせや購入のボタンなど、デザインの参考になるものがたくさん見つかります。

favicon-gallery.com/


http://favicon-gallery.com/

ファビコンを集めたサイトです。
16px × 16px や 32px × 32pxで表現しなければならないため、悩むことも多いファビコンのデザイン。
ぜひこのサイトを参考にしてください。

探しているwebデザインを見つけやすい!カテゴリ分けがしっかりしているサイト集

たくさんのwebサイトがありすぎて目的のデザインが見つけづらい。
ここで紹介するのは、カテゴリやタグが細かく設定されていて探しやすいサイト集です。

LANDINGPAGE BOOKMARK


http://landingpage-link.jp

ランディングページ(LP)を、カテゴリごとに探せるサイト集です。
「プラセンタ」や「無添加」などのピンポイントのタグでも探せるため、使いやすいです。

WEBデザインの見本帳


http://web-mihon.com

「青」や「緑」などの色や、「クール」「ポップ」などの印象、「ポータルサイト」や「旅行・交通」などなど細かいジャンルカテゴリで探せます。
さらに気に入ったデザインから「同じテーマ」でも探すことができます。

Web Design Clip


http://webdesignclip.com

カテゴリやタグ、レイアウトなどで探せます。
メインカラーやサブカラーでも探せるのは便利ですね。

WONDER BOOKMARKS


http://bm.wonderboxstudio.com

カテゴリーと色に加えて、「3D」「JS」「ムービー」などの「TECHNOLOGY」・・・サイトを構築しているテクノロジー、技術タイプによる検索もできます。

イイネ!WEBデザイン


http://ene-design.com

1500を超えるサイトが掲載されているサイト集。
サイト毎に配色パターンが表示されているのも便利です。

とにかく数が多い!総合サイト

最後は多くのwebサイトを閲覧できる総合webサイト集のご紹介です。
眺めているだけでもwebサイトのデザインに役立つアイデアが浮かびそうです。

Good Design Web


http://gooddesignweb.com

タイトルどおり「グッドなデザインのwebサイト」を集めたサイトです。
気になるデザインにカーソルを合わせると「Visit」「More」のボタンが表示され、「Visit」を押すとwebサイトに、「More」を押すと移動せずTOPページが確認できます。
複雑な機能は存在せず、シンプルなUIで使いやすいサイトです。

SG_BOOKMARK


http://bookmark.dot-sg.com

横長のスマートなサムネイルが見やすいサイト集。
掲載数が多いですが、カテゴリやジャンルなど細かく分かれているので探しやすいです。

ウェブセレクション


http://web-selection.com

コンパクトなサムネイルで、1ページあたりの情報量が多いサイト集です。
一度に多くのサイトのデザインを把握できて便利です。

ズロック


http://zzrock.net/

2700を超えるサイトが掲載されているwebサイト集。
サムネイルの大きさを3段階で調整できるため、検索や比較の際に役立ちます。

終わりに

如何でしょうか。
私自身、仕事でwebサイトのデザイン案を考える際、今回ご紹介したサイト集を使用し、参考にしたり、インスピレーションが湧く事が多々あるためこの記事を作成しました。
お役に立てれば幸いです。

人気の記事

1

ビジネスやオフ会などで必要な名刺。 名刺を作る時に手間なのがデザインや入稿データの作成です。 イラストレーターで入稿用のaiデータを作る…?? 塗り足しや裁ち落としを考慮…?? 難しい話は無しです!! ...

no image 2

チラシを使って、お店やサービスの認知度を上げたり、売上アップにつなげたい! でも… チラシってどう作れば良いの? 自分でチラシを作ってみたけど、なんか上手くいかない....。 どんな情報を載せたら良い ...

3

Canvaで作ったデザインを印刷する際のオススメの印刷屋さんの紹介と、入稿方法の説明です。

-ホームページ

Copyright© View Steal , 2019 All Rights Reserved.