WEBデザイナーが知らないと恥ずかしい！WEBデザイン参考ギャラリーサイト

2019年6月1日

WEBデザインのイメージが湧かないので、参考になるギャラリーサイトを知って、効率よくデザインのインプットがしたい！

こんな要望に、WEBデザインの参考になるギャラリーサイトを厳選してお届けしたい！

ただ、ギャラリーサイトは星の数ほどあるので、あまり沢山見てもキリがない上、国内サイトであれば、どこも同じような参考サイトを掲載している場合が多い！

そこで今回は、プロのWEBデザイナーなら知らないと恥ずかしい！知っていて当たり前の「有名ギャラリーサイト」を厳選して紹介していこう！

また、WEBデザインの模写を上手にやる方法についても触れるので、参考にして頂きたい！

「SANKOU!」Webデザインの参考サイト集

https://sankoudesign.com/

「パソコン版」「スマホ版」「バナー」のデザインを、別々に探すことができるギャラリーサイト。見やすく、検索用のフィルタも充実していて、個人的におすすめのギャラリーだ！

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

https://responsive-jp.com/

レスポンシブサイトのデザイン（スマホ用とパソコン用の見た目が切り替わるサイト）ばかりを集めたギャラリーサイト。WEBデザイン業界では、レスポンシブはもはや必須課題。レスポンシブサイトをデザインする時の手助けになること山のごとし。

「81-web.com」

https://81-web.com/

サムネイルがシンプルに見やすいので、一気に探せる！お気に入り登録や、ディスプレイのアイコンをクリックで「ページ全体の画面キャプチャ」が見れるのでとても便利！画面のキャプチャをわざわざ取る必要がなくなるので、僕はここを頻繁に使っている！

「MUUUUU.ORG」縦長のwebデザインギャラリー・サイトリンク集

https://muuuuu.org/

縦長のサイトを集めたギャラリー。サイトも綺麗で見やすく、カテゴリ分けが詳細にわけられているので、目的のデザインにリーチしやすいのでおすすめ！

「S5-Style」優れたWebデザインをブックマーク Webデザイナーのためのリンク集・ポータルサイト

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

検索フィルタが豊富で、サイトのデザインもさることながら、チョイスするデザインもいい感じ！

「straightline_bookmark」web design bookmarking

http://bm.straightline.jp/

カッコいいデザインで、サムネイルサイズを変更できる！参考サイトのデザインチョイスがいい！

「I/O 3000」国内外を問わず、Web制作の参考となるサイトをセレクト

https://io3000.com/

国内海外問わずにデザインが集められており、シャッフル機能もあるのでデザインを考える時に見るのに向いている！

「bookma!」感性を刺激するWebデザインギャラリー

https://bookma.torch.blue/

クマのロゴマークがかわいい！PC・SPが並んで表示されて、縦に並んでいるので、見る方もシンプルで使いやすい！レスポンシブデザインなどの参考にとても便利！

「awwwards」海外有名ギャラリーアワードサイト！

https://www.awwwards.com/

海外の数多のWebサイトの中から、ユーザー投票で掲載順位を決めている斬新ながら超有名なギャラリーサイト。ユーザー目線でデザインや設計など、どの視点で評価されているのかもわかるのでとても参考になる！

「CSS Design Awards」国際的なWEDデザインのアワードのサイト

https://www.cssdesignawards.com/

CSS DESIGN AWARDSという国際的なWEDデザインのアワードのサイト。毎日世界中から様々なサイト応募され、世界の最先端の事例を参考に見れる！

「ピンタレスト: Pinterest」あらゆる表現の参考に！

https://www.pinterest.jp/

WEBデザインに限らず、あらゆる見た目の参考になるサイト。いろんな切り口で検索してみると何かヒントになるサイト！デザインの表現で迷ったら僕は必ずここで検索して参考にしている！最初に簡単な登録が必要だが、自分のお気に入りの画像を登録できたりするので、登録して損はない！

「WEBデザインの模写」はどういう感じでやればいいの？

WEBデザインの練習に欠かせないのが「WEBデザインの模写」

ここまでWEBデザインの参考になるギャラリーサイトを見てきたが、WEBデザインの練習をしたいなら、参考サイトをみつけて「模写」してみよう！

ただ単純にWEBデザインをそのままコピーしたのでは、あまり意味がない！ではどのように模写するのが効率的なのか？

こちらの記事に、WEBデザインの模写の仕方について書いているので、是非参考にしてほしい！

WEBデザインの練習「WEBデザインの模写」の正しいやり方と手順！

キレイなWEBデザインやカッコいいデザインをするにはどうすればいいの？

美しいWEBデザインや見やすいデザインを作りたいのであれば、ただデザインを眺めていても「どうすれば良いかわからない」という人も多いだろう！

そういった人には、長年のWEBデザインの経験から、美しいWEBデザインの作り方やコツのポイントをまとめた記事があるので、こちらを参考にしてほしい！

美しいWEBデザインの作り方と9つのコツ

WEBデザインで「カッコいいキービジュアル」の作り方

自分ひとりで考えるよりはWEBデザイン上達の近道になるだろう！

最短でWEBデザイナーになる為の勉強方法

もしまだWEBデザイナーの仕事に就いていないという人は、基本の勉強から初めた方がいいかもしれない。ただ闇雲に独学してもWEBデザイナーになるのは難しいので、できるだけ早くWEBデザイナーになりたいという人はこちらの記事あわせて読んでみてほしい。

独学でWEBデザインの効率的勉強方法！初心者は何からやるべき？