NTTドコモ様_dカーシェア
NTTドコモ様_dカーシェア
2018.10.15
#32
デザインのトレンド

Webデザインの参考になるギャラリーサイト30選【保存版】

ミライ

こんにちは。

ジャスの意味がわかるやつは大体友達、デザイナーのミライです。

突然ですが、ギャラリーサイトで今日掲載されたサイトを見て、学ぶことがあったり燃えることがあったりしませんか?

あなたが刺激と戦う心、学びを得るために、知りうる限りのギャラリーサイト、30サイト押し売りします。

(このサイト載ってない……って感じた方はぜひそのサイト教えてください! 僕にも刺激をください!)

多すぎ! って思った方安心してください。

目次と、僕の評価軸を駆使すれば快適にこの記事を見れるはず……。
(それでも読むのめんどっちいという方は、「ミライが毎日見ているサイト」をまとめたセクションがあるので、目次から飛んでそこを見ていただければ。)

あなたの日々の時間に、刺激と戦う心と学びを与えられますように。

Webデザインのギャラリーサイトまとめ、はじまるよ。

閲覧していての評価軸は、

  • 更新頻度
  • 見やすさ
  • 検索しやすさ

に絞っています。

ちなみに、時間があればですが、ただのサイトウォッチャーにならないために拡張機能でサイトを解剖しながら見るとすごく楽しいです。

僕のつたない記事でデザイナー向けですがよろしければ見てみてください。

前置きめちゃんこ長くなってすみません……。
ではではご覧ください。


毎日の相棒になってくれるやつ

更新率が高いものをまとめました。

MUUUUU.ORG


http://muuuuu.org/

更新頻度   : ★★★★☆
見やすさ   : ★★★★★
検索しやすさ : ★★★☆☆

ポイント

  • とにかく見やすい
  • 他サイトにないカテゴライズ
  • ここ見れば何かあるだろうという安心感がある
ずーっとそばにいて、業界の潮流を教えてくれているような、頼りになるサイトです。
僕が参考サイトを探すときは必ず見るギャラリーのひとつです。
専門学校のときからお世話になってて、勝手に勉強させてもらい育てていただきました。ありがとうございます。

81-web.com


http://81-web.com/

更新頻度   : ★★★★★
見やすさ   : ★★★★★
検索しやすさ : ★★★☆☆

ポイント

  • サムネイル(ファーストビュー)重視
  • SNS上で盛り上がっているサイトがわかる
  • いいなと思ったサイトをまとめられる
平日1日1サイト、コンスタントに上がります。
サムネイルをホバーするまでは、見えている情報が最低限のものなので、情報よりも見た目で見たい! 流し見でざっと見たい! という方にぴったりです。
favorite機能(サムネイル右下の「+」ボタンで保存)を使って、必要なサイトをまとめていくことができます。

I/O 3000


https://io3000.com/

更新頻度   : ★★★★★︎
見やすさ   : ★★★★☆
検索しやすさ : ★★★★★

ポイント

  • ほかのサイトでは見ないようなサイトもよく掲載される
  • 表現的にイケてるサイトがよく掲載される
このサイトはテキスト検索ができるので非常に便利です。
また掲載されているものも、見栄えや設計が良いものが多いので「ここ見れば大丈夫!」という安心感がすごいです。

Web Design Clip


https://www.webdesignclip.com/

更新頻度   : ★★★★☆
見やすさ   : ★★★☆☆
検索しやすさ : ★★★★★

ポイント

  • 日本サイトが多い印象
  • 検索で「レイアウト」「採用サイト特集」とユニークなものがある
レイアウトから検索したい! 日本サイトで参考を探している! という方にオススメなギャラリーです。
詳細ページでは、類似サイトが提示されるので、探し物中の方に優しいサイトになっています。
サイドバーには、SPサイトのまとめWeb Design Clip [s]、LPのまとめWeb Design Clip [L]へのリンクがあるのでカバー範囲も広いと感じます。

bookma! v3


https://bookma.org/

更新頻度   : ★★★★★︎
見やすさ   : ★★★★︎☆
検索しやすさ : ★★★★︎☆

ポイント

  • 更新頻度がめちゃくちゃ高い
  • フィルターで、海外と日本それぞれに絞れる
  • ゴリラが新着を教えてくれる。かわいい。
このサイトは高クオリティのサイトがものすごい数更新されます。1日5〜6サイト更新されることも少なくないです。
ホバーするまでサイト情報がサムネイルのみなので、流し見できます。

straightline bookmark


http://bm.straightline.jp/

更新頻度   : ★★★★☆
見やすさ   : ★★★★★
検索しやすさ : ★★★☆☆

ポイント

  • 表現的にイケてるサイトが多い(ミニマルより)
  • 1日2〜3サイト掲載される
  • サムネイルサイズをいじくれる
表現にこだわったサイトが多いなあという印象です。
「ホーム(editor picks)」でも、結構な掲載数ですが、メニューから「all」にいくことで件数がもっと増えます。
表現のアイデア探しなら是非一度ご訪問あれ。

ikesai.com


https://www.ikesai.com/

更新頻度   : ★★★★★
見やすさ   : ★★☆︎☆☆
検索しやすさ : ★★☆☆☆

ポイント

  • 掲載数がいい感じ
  • 飾った感じのないサイトも掲載している

S5-Style


http://bm.s5-style.com/

更新頻度   : ★★☆☆☆
見やすさ   : ★★★★★
検索しやすさ : ★★★☆☆

ポイント

  • おしゃれ……! っていうサイトが掲載される
  • 動きの多いサイトが掲載される印象
  • 毎日更新されるわけではない
このサイトに載っているサイトはとりあえずおしゃれです。ゴリゴリ系のものも多く感じるので、おしゃれさを充電したい方にオススメ。

Webデザインリンク集 中面/下層ページも見られる現代デザイン


https://gendaidesign.com/

更新頻度   : ★★★★︎☆
見やすさ   : ★★★︎︎☆︎☆
検索しやすさ : ★★︎︎☆☆☆

ポイント

  • 情報をまず見てからサムネイルをみるスタイル
  • サイトに行かなくても下層が見れる
  • 検索がイマイチ(でも掲載された時間で絞れるのはたまに重宝します)
一番の特徴は、下層もチラ見できること。サイトに飛んでから「あれ……思ったのと違かった……」という時間ロスが軽減できます。
ほかのギャラリーでピックアップされていないサイトもここにはありました。

siteInspire

https://www.siteinspire.com/

更新頻度   : ★★★☆☆
見やすさ   : ★★★★☆
検索しやすさ : ★★★★★

ポイント

  • 一度に上がる量が多い
  • そのぶん表現のクオリティは掲載されるサイトにムラがある
掲載される量がほかを圧倒しています。とにかく量を見たい! という方にオススメです。
検索フィルターが結構細かく用意されているので、検索はしやすそうです。

The Best Designs


https://www.thebestdesigns.com/

更新頻度   : ★★★★☆
見やすさ   : ★★★☆☆
検索しやすさ : ★★★★︎☆

ポイント

  • Collectionからの検索が便利
  • detailから、下層ページなど細かな画面がサイト上で閲覧できる

独特な雰囲気を醸し出してるやつ

なにかに特化しているものをまとめました。

Grids


http://grids.qoopu.net/

更新頻度   : ★☆☆☆☆
見やすさ   : ★★★★☆
検索しやすさ : ★★★★︎☆

ポイント

  • グリッドが引いてある神仕様
  • 更新が止まっている……残念※
このサイトすごく好きです。自分でトレースとかサイト解剖しなくても、ガイドがすでに引いてあるのです! 新人デザイナーの強い味方でした……。
しかし残念すぎることに更新が止まっています……。できれば復活してほしい……。

※2018年9月時点で更新がありました!

Hover States


https://hoverstat.es/

更新頻度   : ★★☆☆☆
見やすさ   : ★★★★︎☆
検索しやすさ : ★★★☆☆

ポイント

  • 鬼のように動くサイトばかり
  • サイト訪問しなくてもホバーで動きを確認できる
日本サイトはないですが、ゴリゴリ動くサイトが集まっているのでみているだけで楽しいです。更新はまちまちな印象。

Competitors


http://competitors.site/

更新頻度   : ★★★★☆
見やすさ   : ★★★★★
検索しやすさ : ★★★★★︎

ポイント

  • サイトをスーパー部位検索
  • ちょっと古め
このサイトは結構推しメンです。
一応日本サイトも含めて、サイトの部位ごとに閲覧できます。
たとえば、メガメニューなどの参考を探すときいちいちサイトに飛んでーとしていたら大変ではないですか? それはこのサイトで解決できます。
ヘッダー / フッター / ホバー後(メニューなど) / リスト / 詳細ページ などなど……サイトのジャンルによってさまざまな部位でフィルタリングできます。

LPアーカイブ


https://rdlp.jp/lp-archive

更新頻度   : ★★★★★
見やすさ   : ★★★︎☆︎☆
検索しやすさ : ★★★☆☆

ポイント

  • LP特化
  • 1日に10サイト前後更新される
  • サイトキャッチコピーの一覧表示ができる
LPに特化したギャラリーです。更新頻度がすばらしい。検索の条件指定も魅力的ですね。
LPの重要な要素であるキャッチコピーを一覧で見れる機能はほかにはありません。

IllustBookmark


http://www.illustbookmark.info/

更新頻度   : ★★★︎☆☆
見やすさ   : ★★︎☆☆☆
検索しやすさ : ★☆☆☆☆

ポイント

  • イラストが使用されているサイトに特化したギャラリー
  • 日本サイトのみ
イラストのデザインに迷ったときにお世話になるサイト。

モバイルも見てねっていうやつ

モバイル対応もしっかり確認できるサイトをまとめました。

AGT


http://agtsmartphonedesign.com/

更新頻度   : ★★★★☆
見やすさ   : ★★★★☆
検索しやすさ : ★★★☆☆

ポイント

  • スマホビューの画像が貼ってあるので、ブラウザの機能をいちいち使わなくていい
  • TOPでもスクロールで広い範囲を確認できる
新しく、高クオリティのサイトのスマホビューを見れるサイト。PCと並べて見ることはできませんが、SPビューの広い範囲をサイト内で確認することができます。

Responsive Web Design JP


http://responsive-jp.com/

更新頻度   : ★★★★☆
見やすさ   : ★★★★☆
検索しやすさ : ★★★☆☆

ポイント

  • スマホ / タブレット / パソコンそれぞれのビューを並べて見れる
  • けっこう頻繁に更新される
デザインをブレイクポイントごとに並べて表示してくれるギャラリーです。
クオリティの高いものが多く、趣向もさまざまなので、参考サイトを見つけやすいです。
項目ごとの「+MORE」を押すと、サイトの概要などを表示してくれます。

更新はそんなにしてないけど、いいサイト載ってるよってやつ

マメにサイトを見に行くには頼りないけど、たまにサイトを探しに行くときは力強い相棒になってくれるやつ

Siiimple


https://siiimple.com/

更新頻度   : ★★︎☆☆☆
見やすさ   : ★★★★★
検索しやすさ : ★★★☆☆

ポイント

  • シンプルな見ため
  • ミニマルよりサイトが多く掲載されている
  • 量を見たい、検索しながら見たいという方には見にくいかもです
すっきりとした見た目で、すっきりとした見た目のサイトを見れるサイト。
ミニマルなサイトやレイアウトの参考を探している方にオススメです。海外サイトのみ。

SiteSee


https://sitesee.co/

更新頻度   : ★★︎☆☆☆
見やすさ   : ★★★★☆
検索しやすさ : ★★★★★

ポイント

  • Collectionページなど検索しやすいコンテンツが嬉しい
  • Webサービスなども掲載されている
  • 魅力的なファーストビューのものが多い
このサイトは、上がっているサイトのクオリティが高いのはもちろんですが、検索するときに、メニューにある「search」「filter」「Collection」が支えてくれるところが魅力です。
Collectionは数こそ少ないですが、嬉しいコンテンツですね。

Flat design gallery


https://flattrendz.com/

更新頻度   : ★★★☆☆
見やすさ   : ★★★★★
検索しやすさ : ★★★☆☆

ポイント

  • フラットデザインを採用したサイトが掲載されている
  • 更新は止まっている……?

ウェブ・ファインダー

http://w-finder.com/

更新頻度   : ★★☆☆☆
見やすさ   : ★★★☆☆
検索しやすさ : ★★★★︎☆

綺麗なサイトが並ぶギャラリーです。
コーポレートサイトなど、多少お硬めのサイトが多い印象を受けます。

Landingfolio


https://www.landingfolio.com/

更新頻度   : ★★︎☆☆☆
見やすさ   : ★★★★★
検索しやすさ : ★★★★︎☆

海外サイトのLPが並ぶギャラリーです。
サービスのLPやデザインツールのLPなどが多く、海外サイトの、独特なレイアウトのサイトが閲覧できるので、見ていてワクワクします。

TAU MAGAZINE


http://www.tau-magazine.com/

更新頻度   : ★★☆☆☆
見やすさ   : ★★★☆☆
検索しやすさ : ★★★☆☆

サイトタイトルの説明はお堅い印象を受けてしまいますが、実際に掲載されているサイトは、必ずどこかにユニークさを感じるものが多い印象です。

アワード系のやつ

ここはもう説明/評価軸なしで行きます。
トレンドを追いたい。表現の参考を探しているという方は、ぜんぶ見てみてください。

DesignAwards.Asia


https://www.designawards.asia/ja/

Awwwards


https://www.awwwards.com/

Digital Design Award


https://award.ddd.it/

CSS Design Awards


https://www.cssdesignawards.com/

CSSREEL


http://cssreel.com/

The FWA

https://thefwa.com/awards

ミライが毎日見ているサイト

いままで出てきたなかで、僕がオススメするサイトをまとめました。海外と日本のさまざまなジャンルを網羅できるようにしています。

12サイトをチョイスしました。

Awwwards


https://www.awwwards.com/

CSS Design Awards


https://www.cssdesignawards.com/

CSSREEL


http://cssreel.com/

The FWA


https://thefwa.com/

I/O 3000


https://io3000.com/

MUUUUU.ORG


http://muuuuu.org/

S5-Style


http://bm.s5-style.com/

bookma! v3


https://bookma.org/

straightline bookmark


http://bm.straightline.jp/

Webデザインリンク集 中面/下層ページも見られる現代デザイン


https://gendaidesign.com/

Responsive Web Design JP


http://responsive-jp.com/

The Best Designs


https://www.thebestdesigns.com/

おまけ

1GUU


http://1guu.jp/

こちらけんてぃさんから紹介していただいたサイトです。

以下けんてぃさんのコメントです。

更新頻度   : ★★★★★︎
見やすさ   : ★★★★★︎
検索しやすさ : ★★★★★

ポイント

  • ほかのサイトでは見ないようなサイトもよく掲載される
  • 国別でフィルターできる
  • アニメーションのサムネもある
  • 1日2〜3サイト掲載される
「最近知ったのですが、おしゃれかつあまりほかのまとめサイトに掲載されていないサイトが載っているので非常に重宝しています。
とくに国別フィルターとアニメーションするサムネが斬新ですので試しに見てみてください!」

まとめ

長々とお付き合いいただきありがとうございました!

どうでしょうか刺激受けられましたか?

みなさんが、刺激的なクリエイティブライフを送れますように。

P.S. デザインに自信のない方へ

僕は毎日見ているサイトのなかで気になるものをじっくり見てみたりトレースして、刺激と学びをもらっています。

騙されたと思ってはじめてみてください! けっこう身になります。
わりとこのメッセージのためにこの記事を書きました(笑)。

こちらの記事もどうぞ ↓↓↓