Webデザインが学べるコミュニティを作りました!

もう迷わない!目的別で探せるWebデザイン参考サイト総まとめ

masaca(@masaca_dApps)です。

Webデザインの参考にするときに、ギャラリーサイトを使うことが多いと思いますが「ギャラリーサイトもたくさんあるし、どれをみたらいいかわからない・・・。」といったことや、「探しているジャンルがなかなか見つからない・・・。」といったことがよくあります。

そんな方のために、こういう目的のときはこのギャラリーサイトを使う!といった紹介や、探しているジャンルがたくさんみつかるWebサイトをまとめました。

最新のWebデザイン、イラストメイン、雑誌っぽいデザイン、ランディングページ、インフォグラフィック・図解など、これで簡単に参考にしたいWebデザインがすぐに見つかるはずです。

masaca

効率よくWebデザインの参考を集めよう!

最新のWebデザインのトレンドを探す

トレンドのWebデザインを探したい、とにかくたくさんクオリティの高いデザインが見たいといった、ざっくりとした探し方のときはWebデザインギャラリーサイトがオススメです。

I/O 3000

新規でWebデザインに取り掛かる時にまず私がチェックするサイトです。
io3000は更新頻度も高く、最近のトレンドはこのサイトを見るだけで把握できるので定期的にチェックしておきたいサイトです。ジャンルやカラーで探すこともできます。

muuuuu.org

クオリティの高い縦長サイトのWebデザインギャラリー。I/O 3000同様に最近のトレンドを把握するためにチェックします。

WebDesignClip

この3つでトレンドは抑えられます。あとは以下の目的別でWebデザインを探しましょう。

イラストメインのWebデザインを探す

イラスト系のWebサイトの参考デザインを探すときは以下のサイトがオススメです。
イラストを描くときのテイストに悩んだ時にも使えます。

イラストブックマーク

かわいい系、ナチュラル、オーガニックなサイトにイラストが多く使われています。

にじいろクリップ

ゲーム・アニメ系のWebデザインの参考サイトを集めるなら、にじいろクリップがオススメです。

雑誌・グラフィック・チラシっぽいWebデザインを探す

マイフェバ

マイフェバは観光情報サイトですが、特集ページのひとつひとつが雑誌やグラフィックを使ったWebデザインの参考になります。
メインビジュアルやバナーのクオリティもかなり高いです。サイトのどこをみても真似したくなります。

ISETAN’S BOOK APARTMENTS

伊勢丹が制作したデジタルカタログが見ることができます!クオリティの高いグラフィックがまとまっています。
Webデザインではありませんが、雑誌・グラフィック系のWebデザインの参考になります。

チラシミュージアム

アート系のチラシはメインビジュアル・文字組の参考になります。「チラシミュージアム」を使えば実際に行かなくてもアプリでクオリティの高いグラフィックがたくさん集まります。
【メインビジュアル参考】「チラシミュージアム」で全国のアート系チラシが簡単に集まる!

Webサービス・アプリのWebデザインを探す

WebFolio

日本国内のWEBサービスをまとめたポータルサイトです。
Webサービスやアプリを紹介するWebサイトのデザインを参考にしたいときに便利です。
どんな見せ方をすればサービスやアプリの魅力を伝えることができるのか、とても勉強になります。

国内で使えるサブスクリプション(定額)サービス41個まとめてみた

日本国内のサブスクリプション(定額)サービスをまとめた記事です。
「Spotify」や「Hulu」などが有名ですね。

料金の見せ方やメリット、利用の流れなどWebサービスサイトのデザインの参考になります。

ランディングページ(LP)のWebデザインを探す

コンバージョンラボ

コンバージョンラボはランディングページをメインにWeb制作を行なっている会社です。
どのランディングページもクオリティが高く、成果を上げるためにはどのようなデザインや構成にすればいいのか参考になります。

Web Design ClipⓁ

Web Design ClipⓁは前述したWebDesignClipのランディングページに特化したサイトです。
ゴテゴテしたデザインよりもキレイめでスマートなランディングページが多く見ることができます。

まだまだたくさんランディングページが見たい方は、以下もチェックしてみてください。

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

LPアーカイブ

キッズ・児童向けのWebデザインを探す

子供向けのWebデザインでクオリティが最高峰だと感じるのはポケモン関連のサイトです。
色使いやフォント、わくわく感を出すにはどうすれば良いのかとても参考になります。

ポケットモンスターオフィシャルサイト

サイト内のバナーや関連サイトにはたくさんのキッズデザインの参考になるものばかりです。子供向けのWebサイトを制作する際は目を通しておきましょう。

こどもちゃれんじ

ベネッセのこどもちゃれんじも、キッズの年齢別にデザインを探す場合に参考になります。

高級感・エレガントなWebデザインを探す

高級感やエレガントさをどうやって出したら良いのかわからないときは、ウエディング系のWebサイトを参考にしましょう。
少しググるだけでも、たくさんのWebデザインの参考があつまるはずです。

インフォグラフィック・図解のWebデザインを探す

インフォグラフィックや図解の見せ方は経験がなければ、パッと思いつくものではありません。
どのようなデザインをすればわかりやすく、数値や表を見せることができるのか勉強になりますね。

infographic.jp

制作会社のクオリティの高いWebデザインを探す

常にクオリティの高いWebサイトを制作している、制作会社の制作実績ページは参考にしたいWebデザインの宝庫です。
Webデザインギャラリーでは見つからないクオリティの高いWebデザインを見つけることができます。

株式会社ベイジ

参考にしたいコーポレート系のWebデザインが多いです。

株式会社BAKE

制作会社ではありませんが、ブランドページにBAKE関連のクオリティの高いWebサイト「RINGO」や「ZAKU ZAKU」などがまとまっています。

Webデザイナーに人気の「ベイク チーズタルト 」のWebデザインを解説

株式会社ノイ

鉄道系・有名大学など大規模なクライアントの実績が多く、クオリティが高いです。
よくギャラリーサイトで見かけるWebサイトを制作している会社です。

ワヴデザイン株式会社

街中で見かけたことのある有名広告や、大手企業のWebデザインの制作実績を見ることができます。
ややグラフィックよりですが、グラフィカルな表現やメインビジュアルの参考になります。

株式会社ソニックジャム

JINS、キリン、NHK、HONDAなどナショナルクライアントの案件が多く、圧倒的なクオリティです。
こちらも広告系のWebデザインが気になるあなたへオススメです。
制作実績をWebに切り替えるとたくさんのWebサイトを見ることができます。

y2

シンプル、ハイセンスなWebデザインが好きな人はハマる制作実績です。余白までこだわりを感じます。

コンデンス株式会社

ハイクオリティなシンプル系のWebデザインがたくさん掲載されています。

まとめ

たくさんのWebデザインギャラリーを横断するよりも、目的別に使い分けることでデザインの参考をみつけやすくなります。
私はほとんどこのあたりをチェックすることで、どんな場合でも十分に対応できています。

そのほかにも参考サイトが見つかった場合は随時更新していきたいと思います。

masaca

たくさんのデザインを見ることはとても刺激になるね。定期的にチェックしておこう!
【メインビジュアル参考】「チラシミュージアム」で全国のアート系チラシが簡単に集まる! 【バナーで学ぶ】効率的にWebデザインのアイデアを出す力を鍛える方法 初心者デザインから脱出!写真の上の文字を見やすくするテクニック7選

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA