【20サイトを徹底比較】実務でwebデザインの参考に役立つギャラリーサイト4選

悩んでいる人

・ポートフォリオや架空サイトの参考になるギャラリーサイトを探したい
・おすすめのギャラリーサイトが多すぎる！どれを参考にしたらいいの？

こんな疑問にお答えします。

googleで「Webデザイン　参考サイト」と調べると、参考になりそうなギャラリーサイトがたくさんでてきますね。

また、おすすめのギャラリーサイト集のような記事では、「おすすめ30選」とか「国内・国外から集めました」などなどで、ちょっと多すぎない？単純に並べてるだけじゃない？って思いませんでしたか？

そこで本記事では、webデザイナー2年目の僕が、ただギャラリーサイトだらだらとを並べるのではなく、20のギャラリーサイトの掲載数・カテゴリを徹底比較した上で、実務で最も役に立ちそうなギャラリーサイトを4つだけ紹介させていただきます。

参考サイト探しに時間をかけたくないと思っている方はぜひご覧ください。

後半では、あなたがデキるwebデザイナーとして活躍するために、ギャラリーサイトは毎日チェックすべき、ということを理由と実践方法も交えてお伝えしたいと思いますので、こちらも合わせてご覧ください。

webデザインの参考で本当に役立つギャラリーサイトの基準

まず、どのようギャラリーサイトがwebデザインの参考に役立つのか、以下の3つの指標から20サイトを選別・比較しました。

掲載数が多いか

単純に、掲載数が多いということはそれだけ参考にできるwebサイトが多いということです。

また、掲載数が多いギャラリーサイトは、更新頻度も高いので、最新のトレンドもキャッチアップできていることが多いです。

カテゴリが豊富か

そもそも、何のためにギャラリーサイトを見るのかというと、制作しようとしているwebサイトとイメージの近いものを探すときですよね。

例えば、「車メーカー」のwebサイトを作ろうと思ったとき、近いイメージを探すためにまず思い浮かぶのは「車」に関連するwebサイトですよね。そういったときに「車」というカテゴリがあるギャラリーサイトであれば、一発で一覧をみることができますよね。

カテゴリが豊富かどうかは、参考サイトの探しやすさを決める指標となります。

実務で参考にしやすそうなサイトが多いか

webデザイナーが実務でどんなwebサイトを制作するかというと、もちろん会社によって異なりますが、制作会社であれば、物流や製造業などのコーポレートサイト、toC向けであれば建築業やメーカーのサービスページなどが多いです。

webサイト制作会社で有名な株式会社baigieの制作実績

URL：BtoB向けのweb制作会社Baigieの制作実績

未経験者が架空サイトとしてよく作っているおしゃれなカフェサイトや美容院のサイトは、実務では滅多に作りません。

ゆーし

僕が実務経験で制作したのは、BtoB：BtoC=8：2の割合でかっちりめのサイトが多かったです。

このように考えたとき、見た目重視のデザインというよりも、日本人にわかりやすく、見やすく情報を伝えられるよう設計されたwebサイトがたくさん載っているギャラリーサイトの方が実務の役に立ちそうですよね。

今回の比較では、海外サイトを省き、実務で参考にしやすそうなサイトが多い＝質の高い参考サイトとして考えさせていただきました。

実務でwebデザインの参考に役立つギャラリーサイト4選

前置きが長くなりましたが、上記の3つの指標から、20のギャラリーサイトを比較した結果、最も実務でwebデザインの参考に役立つギャラリーサイト4選は以下の通りです。

それではひとつずつ詳しく紹介させていただきます。

【S5-Style】Webデザインギャラリー / Web Design Inspiration

URL：【S5-Style】Webデザインギャラリー / Web Design Inspiration

サイト掲載数は7,400と、20のギャラリーサイトの平均サイト掲載数がおよそ3,000であるのに対し、2倍以上の掲載数があります。これは20サイトの中でもTOP2の掲載数です。

また、カテゴリも豊富で統一性があり、きれいに情報整理がされています。

海外サイトもややあるため、サイトの質としては惜しいところもありますが、掲載数でかなりカバーできているので、webデザイナーとして必ずチェックすべきギャラリーサイトといえるでしょう。

SANKOU! | Webデザインギャラリー･参考サイト集

URL：SANKOU! | Webデザインギャラリー･参考サイト集

サイト掲載数は2,300と平均数よりも少なめですが、日本のサイトの割合が多いため、参考にしやすいサイトが多いです。

カテゴリがかなり豊富で、見やすく整理されています。特に「デザインイメージ」（かっこいい、清潔感）のカテゴリが多いので、直感的な絞り込みがしやすいです。

カテゴリの豊富さならこのサイトが最もおすすめできます。

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

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

サイト掲載数は2,900で平均的な数です。

しかし、タイトルにもあるように「日本国内」に絞った参考サイトだけを掲載しており、一つひとつのサイトの質がかなり高いので、この質に対してはかなり掲載数は多いといっていいでしょう。

また、ほかのギャラリーサイトと違い、一覧からスマホ・タブレットのデザインも同時に見れるので、気になるスマホデザインがあれば実機ですぐにチェックしようと行動を促してくれます。

カテゴリに関しては、「デザインイメージ」で絞り込めないのが残念ですが、その他の情報は申し分なく、きれいに整えられています。

URAGAWA | Webデザインギャラリー・参考サイト集

URL：URAGAWA | Webデザインギャラリー・参考サイト集

こちらは最近公開されたギャラリーサイトですが、機能性がかなり高いです。このサイトにしかない特徴は以下の2つ。

参考サイトの制作会社がわかると、制作会社の実績から似たようなテイストのデザインを探すことが可能です。

また、このギャラリーサイトの運営会社が「MORE WOEKS」というクリエイター求人事業がメインのところなので、制作会社の求人情報も掲載されています。

転職先の制作会社を実績から探すという使い方もできますので、就職・転職活動の際にも便利です。

その他16のギャラリーサイト

もしおすすめしたギャラリーサイトをあさっても、イメージにあったwebサイトを見つけられなかった場合は、今回比較させていただいたギャラリーサイトでおすすめできなかったものを参考にしてみてください。

参考になるか、一度自分の目で確かめてみるのもいいですね。

WebDesignClip

URL：WebDesignClip

サイト掲載数は2,400とまずまずですが、比較的日本のサイトの割合が多いです。

カテゴリの分類としては大雑把な部分はありますが、以下のような検索のしやすさを考慮した設計なので、おすすめにさせていただきました。

検索のしやすさにかなり考慮された設計

MUUUUU.ORG　縦長のwebデザインギャラリー

URL：MUUUUU.ORG　縦長のwebデザインギャラリー

.SG_BOOKMARK WEB DESIGN ARCHIES SITE

URL：.SG_BOOKMARK WEB DESIGN ARCHIES SITE

straightline bookmark

URL：straightline bookmark

81-web.com

URL：81-web.com

CHOICELY

URL：CHOICELY

Good Design WEB

URL：Good Design WEB

bookma!

URL：bookma!

ズロック

URL：ズロック

I/O 3000

URL：I/O 3000

webデザイナーのためのギャラリー・サイトリンク集 / 1GUU

URL：webデザイナーのためのギャラリー・サイトリンク集 / 1GUU

イケサイ

URL：イケサイ

現代デザイン

URL：現代デザイン

Design-trigger

URL：Design-trigger

週刊ウェブデザイン｜ロゴデザイン・ウェブサイトリンク集

URL：週刊ウェブデザイン｜ロゴデザイン・ウェブサイトリンク集

デザインや構造の参考になるWebサイトのリンク集｜Tau Magazine

URL：デザインや構造の参考になるWebサイトのリンク集｜Tau Magazine

Grids - デザインルールがひと目で分かる 実例まとめ

URL：Grids - デザインルールがひと目で分かる 実例まとめ

また、各ギャラリーサイトの掲載数・実際のカテゴリ・おすすめ度を全て記載した比較表を、以下のnoteにもまとめていますので、おすすめだけじゃなく全部見たいよ！という方はご活用ください。

特化型のギャラリーサイト

特定の業界やデザインイメージなどで参考サイトを探したいときなどは、特化型のギャラリーサイトから探すと効率が良いかもしれません。
以下にデザインイメージを絞ったギャラリーサイトを紹介いたいします。

女性向け

女性向けホームページ・Webデザインのギャラリー リンク集 - umeboshi

URL：女性向けホームページ・Webデザインのギャラリー リンク集 - umeboshi

女性向けに特化しているにもかかわらず、カテゴリがかなり細分化されています。
女性らしいデザインを探す時は、おすすめした4選よりこちらで探す方がいいものが見つかるかもしれません。

デザインのこと - Web design gallery

URL：デザインのこと - Web design gallery

ギャラリーサイトがガーリーでかなりおしゃれです。
一覧で各参考サイトの配色が見れるので、配色から探したい人にもおすすめです。

アニメ・サブカルチャー

{iro}2 Bookmark｜アニメウェブデザインまとめサイト

URL：{iro}2 Bookmark｜アニメウェブデザインまとめサイト

アニメやサブカルに特化しためずらしいギャラリーサイトです。
目を引く動きが特徴的なサイトが多いので、アニメーションまでイメージしたデザインを探すにはおすすめです。

パーツデザイン

見出しやボタンなど、特定のパーツに特化したサイトも存在します。
こちらに関しては、別記事の「【2020年版】実務で使うパーツデザインに役立つサイト5選」にて詳しく紹介していますのでご覧いただけると幸いです。

【2020年版】実務でよく使うパーツデザインに役立つサイト5選

ギャラリーサイトは毎日チェックしよう

前半でもお伝えしましたが、webデザイナーがギャラリーサイトを見るときは、「制作しようとしているwebサイトとイメージの近いものを探すとき」が多いと思います。
未経験でこれからwebデザインを学ぶ方であれば、ポートフォリオや架空サイトを制作するときですね。

しかし、僕が紹介した4つのギャラリーサイトは毎日チェックすることをおすすめします。
毎日チェックすることで以下のメリットがあるからです。

1,2に関しては、毎日更新されるギャラリーサイトを逐一チェックするわけですから、必然的に最新のwebデザインをたくさんインプットできます。
これだけでも感性が磨かれますので、1日1時間だけ、やってみてください。

最後の3に関しては、参考サイトをただ見るだけでなく、後から検索して引っ張り出せるようにブックマークしておくことで、参考サイトをすばやく、正確に探し出せるということです。

悩んでいる人

ブックマークから参考サイトを探すってこと？
大変そうじゃない？

そこで、僕が一年間毎日続けた効率の良いブックマーク方法を以下に紹介します。

step
1webサイトを見て感じたことを言語化してキーワードにする

「このデザインいつか参考になりそうだな」と思ったサイトを見て、感じたこと、サイトの特徴を言語化しましょう。できるだけひと単語で、箇条書きで大丈夫です。

step
2キーワードをブックマーク名に書き込んで保存する

ステップ1で言語化したキーワードをブックマークの名前に書き込みましょう。
webサイトのタイトルは消した方が後々検索した時に見やすいですよ。

step
3ブックマーク検索ツールを使ってキーワードで検索する

「いつか参考になりそうだな」の「いつか」が訪れた時、保存したキーワードで参考サイトを速攻で探し出しましょう。
僕が使っているおすすめのブックマーク検索ツールはこちらです。

Bookmark Sidebar

URL：Bookmark Sidebar

つまり、もしあなたが制作しようとしているwebサイトのイメージが「スタイリッシュ」である場合、ブックマーク検索ツールを使って「スタイリッシュ」と検索すると、あなたが今まで「スタイリッシュ」と名前をつけて保存してきた参考サイトを一覧で見ることができるというからくりです。
まさにブックマークがオリジナルのギャラリーサイトになるって感じですね！

ゆーし

僕は制作会社で勤務した1年間、これを続けていると、気付いたらブックマーク数1,500を超えてました笑

まとめ

いかがでしたでしょうか。

ギャラリーサイトは必要なときに見るだけでなく、毎日チェックし、感じたことを言語化しブックマークすることで、デザインの引き出しをさらに増やすことができます。

独学で勉強を頑張っている方は、こういった無料の情報をなるべく賢く使って、しかるべきところにお金を使ってwebデザインのスキルを身につけていけると最高ですね。

ご覧いただきありがとうございました。