Webデザインの参考になるギャラリーサイトまとめ33選


Webデザインの参考になるギャラリーサイトまとめ33選
(編集部注:2013年01月16日に公開された記事を再編集したものです。)

こんにちは、LIGの社長、ゴウです。

みなさんはウェブサイトを作るときに参考にしているサイトはありますか?
今回、LIGメンバー(主にデザイナーとディレクター)にアンケートを取り、制作する際に普段参考にしているサイトを集めてみました。

毎日仕事で使っている彼らのチョイスなので、かなり実践的で参考になるカッコイイサイトが集まったと思います。

全部で33個。それでは行ってみましょう!


【こちらもおすすめ】
「スマホサイトのデザイン時に参考になるWebサイトのギャラリーまとめ」

日本のまとめサイト16選

1. MUUUUU.ORG

muuuuu

カテゴリも産業別やデザイン別、色別などと豊富なので、検索もしやすい仕様になっています。

2. straightline bookmark

ユーザ登録をすると、「my bookmarks」「my favorits」とサイト内で保存することができるのが便利です。

3. WONDER BOOKMARKS

検索が、以下の4種別で可能となっております。

  • CATEGORY・・・サイトのカテゴリー、業種別による検索
  • COLOR・・・サイトのメイン、サブカラーによる検索
  • TECHNOLOGY・・・サイトを構築しているテクノロジー、技術タイプによる検索
  • KEYWORD・・・フリーキーワードによる検索

テクノロジーで検索できるのは珍しいので、サイトの構築まで手掛けている方にはおすすめ。

4. I/O 3000

I/O

サイトデザインがとてもシンプルなので、ギャラリーが見やすい!
頻繁に更新されているので、ブックマークに追加して定期的にチェックすることをおすすめします。

5. bookma! v3

bookma

なぜゴリラ?
こちらも検索カテゴリは豊富で、ユーザ登録をすればお気に入りを「♡」で保存することができ、使い勝手がいいです。
また、サイトを投稿することもできるので、お気に入りのサイトや自身で作ったものを掲載することもできます。

6. 81-web.com

81-web.com

Webデザインのギャラリーにはめずらしい、日本のサイトに限定したサイトです。
細かいところまでデザインされているサイトが豊富に載っています。

7. S5-Style

S5-Style

マウスオーバーしたときの動きが可愛らしい。
サイト表示の方法をタイトル/タグで選べて、タグ表示にすると一見しただけでサイトの情報を収集することができます。

8. .SG_BOOKMARK

スマートでシンプルなデザインのギャラリーサイト。
洗練されたデザインだけでなく、使いやすいインターフェイスなど、さまざまな視点で「よくできている」サイトが掲載されています。

9. ズロック

ズロック

サイトのキャプチャが小さく、1ページで比較的多くのサイトを見ることができます。大量のサイトの中から参考になるものを探したいときは、おすすめです。

10. web selection

こちらもサイトのキャプチャが小さく、大量にサイトギャラリーを閲覧したいときに便利です。ブロックのようなデザインが特徴的ですね。

11. WPデザインギャラリー

WordPressを仕様したサイトのみを取り扱っているギャラリーサイト。
サイトのキャプチャにマウスオンすると、運営者による「サイトの解説」を読むことができます。

12. WebDesignClip

webdesignclip

ユーザ登録をしなくても、お気に入りのサイトを「MyClip」として保存しておくことができます。
「LAUNCH」でリンクへ飛ぶことができ、「DETAIL」ではサイトの概要が記載されています。

13. イケサイ

毎日2〜3サイト追加されていくので、ストック量が多いです。
トップページではWebデザインが一覧で表示されていてギャラリーとなっているのですが、求人情報やWeb制作会社の検索などもできます。

14. Good Design Web

gooddesignweb

フラットなデザインで、キャプチャも大きく見やすいです。
運営している方がデザインに詳しくないそうですが、デザインの知識がなくても直感的に「いいデザイン」だと感じられるサイトを知りたいときに活用できます。

15. 週刊ウェブデザイン

毎週20サイト以上追加されているギャラリーサイト。
クオリティの高いものを集めているというよりは、とにかく量が多いという印象です。

海外のまとめサイト9選

16. THE FWA

サイト内だけで、ギャラリーサイトの画面がいくつか見ることができ、リンクへ飛ばなくても十分Webデザインを参考にすることができます。

17. AWWWARDS

ギャラリーのユーザが投票することで、掲載されているサイトの評価が決まるのが特徴的。
投票するにも、「デザイン」「ユーザビリティ」「クリエイティビティ」などに評価をつけるので、個人的な好みではなく客観的な意見で評価されそうです。

18. site inspire

気になったサイトがあれば「Stype」や「Subject」など詳しい情報を見ることができます。
くわえて、ギャラリーサイト内にある似ているWebサイトを出してくれるのも親切です。

19. CSS mania

ユーザ登録することで、サイト内にお気に入りを「☆」で保存することができます。
また、サイトを掲載したい場合は10$でできるよう。海外の方にサイトへ訪れてほしい方は、利用してみるのもいいかもしれません。

20. High Floater

上のキャプチャを見ていただければわかると思いますが、サイトのイメージ画像がズラッと一覧できるようになっています。
表示の仕方が独特で、クセになりそう。

21. WordPress Gallery

we♡wp

WordPressのテーマに特化したギャラリーサイト。
オリジナルのWPテーマを作成して販売している方は、掲載することで売上に繋がるかもしれません。

22. Minimal Exhibit

minimalexhibit

フラットなデザインのギャラリーサイト。
コメントを残したり、他のユーザが残したコメントを閲覧することもできます。

23. BEST WEB GALLERY

ユーザが「☆」で評価をつけることのできるギャラリーサイト。
☆の数が多くなれば多くなっていくほど、細かく評価されるようになるので、☆4つを超えているものは多くの人から評価されているサイトであることがわかります。

24. Siiimple

ミニマリストのCSSギャラリー。デザインの中に余計なものはなく、ギャラリーされているサイトはどれもシンプルで「最低限のもの」のみで構成されています。

モバイル・LP・パーツデザインのまとめサイト9選

25. MOBILE PATTERNS

スマホのさまざまなページのデザインが掲載されているギャラリーサイト。
アプリのUI/UXを考えるときに役立ちそう。

26. iPhoneデザインボックス

こちらは、iPhoneから見たときのスマホサイトが優れているものを集めたもの。
カテゴリも豊富で、日本だけでなく海外のスマホサイトも掲載されているので、スマホサイトを制作するときにおすすめ。

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

タイトルの通り、LPに特化したギャラリーサイト。
LPを制作する人の参考になるだけでなく、依頼する人にとってもイメージを伝える際などで参考になります。

28. LANDINGPAGE BOOKMARK

こちらもLPまとめ。特徴的なのは、商品によってカテゴリ別になっているところ。
LPのテンプレのようなものが多くまとまっています。

29. 見出しデザイン.com

さまざまなWebサイトで使われている見出しのデザインのみをまとめたギャラリーサイト。
簡単なカテゴリでも分けられています。

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

Webデザインのロゴ/見出し/問い合わせボタンなどなど、さまざまな“ブブン”を集めたギャラリーサイト。
それぞれにタグもついているので、Webデザインのアイデアにつまったらこちらがおすすめ。

31. Elements of Design

こちらもWebサイトのさまざまなパーツを集めたギャラリーサイト。トップページでは更新順になっているので、カテゴリを選んで見ることをおすすめします。

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

バナーに特化したギャラリーサイト。
サイズ/色/業種などから検索をすることができ、スクロールしていくとどんどん読み込んでいきます。

32. レトロバナー

こちらもバナーに特化したもの。サイズ/色/業種などだけでなく、フリーワードでも検索することができて便利です。
また、枠の中におさまって表示されるので、サイズのバラバラなバナーが一覧になっていても見やすい!

さいごに

いやはや、本当に色々なまとめサイトがありますね。
みなさんの制作時のご参考になれば幸いです。

 

この記事を書いた人

ゴウ
ゴウ 代表取締役 社長 2007年入社
中学校を卒業後に専業農家にて働くも、体力的な理由からわずか1年で転職。その後料理の道へ進むも体力的な理由からわずか1年で転職。その後、夏はアウトドアスクール、冬は雀荘やアダルトショップというダブルワークを精力的に続けるも、23歳で体力的な限界を感じウェブデザイナーへと転職。しかし2年後に体力的な限界を感じた事から転職を試みるも失敗。仕方がないので起業し今に至ります。今日も元気です。よろしくお願いします。

こちらもおすすめ

現場のプロが教える WEBデザイン 新・スタンダードテクニック37

現場のプロが教える WEBデザイン 新・スタンダードテクニック37

  • 著者秋元 英輔,安藤 真衣子,五十嵐 亮太,稲葉 聡,大串 肇,小見 祐介,日下部 忠之,倉持 友喜,小杉 厚太,後藤 寛一,シオミ ユタカ,菅原 のびすけ,清野 奨,高遠 和也,高橋 としゆき,中村 大騎,羽野 めぐみ,肥田 真紀子,松本 奈央,miccweb,宮崎 優太郎,森崎 嘉友
  • 価格¥ 3,024(2015/10/28 17:19時点)
  • 出版日2015/08/18
  • 商品ランキング19,144位
  • 単行本256ページ
  • ISBN-104844365185
  • ISBN-139784844365181
  • 出版社エムディエヌコーポレーション
HTML5&CSS3標準デザイン講座

HTML5&CSS3標準デザイン講座

  • 著者草野 あけみ
  • 価格¥ 2,678(2015/11/10 11:03時点)
  • 出版日2015/11/06
  • 商品ランキング7,404位
  • 単行本(ソフトカバー)384ページ
  • ISBN-104798142204
  • ISBN-139784798142203
  • 出版社翔泳社
HTML5/CSS3モダンコーディング フロントエンドエンジニアが教える3つの本格レイアウト スタンダード・グリッド・シングルページレイアウトの作り方 (WEB Engineer’s Books)

HTML5/CSS3モダンコーディング フロントエンドエンジニアが教える3つの本格レイアウト スタンダード・グリッド・シングルページレイアウトの作り方 (WEB Engineer’s Books)

  • 著者吉田 真麻
  • 価格¥ 2,894(2015/11/10 11:04時点)
  • 出版日2015/11/03
  • 商品ランキング1,529位
  • 大型本256ページ
  • ISBN-104798141577
  • ISBN-139784798141572
  • 出版社翔泳社