WEBデザイン事例を探せるギャラリーサイト14選【良いデザインにたくさん触れよう】

参考になるWEBデザイン事例を見つけられるギャラリーサイト
参考になるWEBデザイン事例を見つけられるギャラリーサイト

WEBデザインを勉強したい時、HTMLやCSSなどの言語習得も大事ですが、WEBデザインを勉強することも重要。

WEBデザインを学ぶためにはデザインの基礎を学ぶだけでなく、良いWEBデザインをたくさん見て学ぶのも勉強になります。

この記事では、良いWEBデザインが見つけられるギャラリーサイトをまとめてみました。

WEBデザイン事例を探せるギャラリーサイト14選

良いデザインをつくるには良いデザインの引き出しをもっておくことが重要です。

僕はネット広告という立場にいるのでサイト改善に関わる機会は多くないです。

しかし、LP改善をする際にはどういった構成でどんなデザインが好まれるかを把握しておく必要があり、引き出しを持っておくと重宝します。

WEBデザインに関わるサイト製作者やWEBサイトを持っているサービス側の人、ネット広告のようなWEBサイトに関わる仕事をしている人はデザインの引き出しをすぐに出せるようにしておくという意味でもギャラリーサイトを知っておくと便利です。

MUUUUU.ORG(ムーオルグ)

MUUUUU.ORGのトップページ
MUUUU.ORGのTOPページ

東京のWEB制作会社のQUOITWORKS Inc.さんが運営しているWEBデザインのギャラリーサイトで、デザイナーさんが厳選したサイトを見ることができます。

初心者のうちはプロが選んだ物を見てなんでこのサイトかっこいいんだろうと思いながら見ていくのが良いかなと思って、定期的に覗かせてもらってます。

産業、デザイン、サイトのタイプ、色などでタグ分けされているので、自分が手掛けているサイトや関係している業界のサイトを見つけやすいですよ。

ブックマ!

bookma!nののTOPページ

投稿型のギャラリーサイトです。

PCとスマホのデザインを一覧で表示できるのでPCの時とスマホの時の見え方を参考にしたい人におすすめです。

I/O 3000

I/O 3000のトップページ

国内外問わず、WEB制作の参考になるサイトをセレクトしたギャラリーサイト。

Twitterでも定期的にページ紹介が行われているので気に入った方はTwitterアカウントもフォローしてみるのがおすすめです。

Web Design Clip

Web Design Clipのトップページ
WebDesignClipのTOPページ

WEBデザインの参考となるクオリティーの高い国内のWEBデザインギャラリーサイトです。

こちらはメインのサイトカラーや業界別などで検索可能。

サイトのレイアウトのタイプ別でも検索が可能なので、好きなレイアウトがある人は検索がしやすいです。

また、男性向け・女性向けや手描き風などのタグからも様々なタイプのサイトを探せるので特定のサイトを参考にしたい人におすすめです。

responsivewebdesignjp

responsivewebdesignjpのトップページ
RESPONSIVEWEBDESIGNJPのTOPページ

日本国内の秀逸なレスポンシブWebデザインのサイトを集めたリンク集です。

Bootstrap/JQuery/Reactなど技術別でも選択可能なので技術に詳しい人にとって使いやすいサイトかなと思います。

Media Queries

Media Queriesのトップページ
MediaQueriesのTOPページ

海外のレスポンシブWEBデザインを集めたサイトです。

紹介文とサイトの構成を見る限り、上記で紹介したresponsivewebdesignjpはこのサイトにインスパイアされていそうです。

Design-trigger

Design-triggerのトップページ
Design-triggerのTOPページ

カラー・レイアウト・業界・テイストでカテゴリができます。

「WEBデザインのきっかけに」をコンセプトにされているので、Design-triggerという名前なんですね。

WEB制作のための参考となる書籍なども紹介されています。

81-web.com

81-web.comのトップページ
81-web.comのTOPページ

国内のサイトのみピックアップし、掲載されています。

余談ですが、サイトドメインの「81-web.com」は、日本の国際電話番号「81」に由来しているそうです。

WEBdesigngallery for web designers

WEBdesigngallery for web designersのトップページ

サイトを保有している企業の地域別で検索が可能な珍しいサイトです。

他サイトと比べると更新頻度が少なめですが、地域で探したい人はぜひ利用してみてください。

S5-Style

S5-Styleのトップページ
S5-StyleのTOPページ

お気に入りWEBサイトを一時的に保存可能で、保存したサイトリストをメーラーに貼り付けることも可能。

ピックアップしてメールで残しておくとあとでどのサイトだったっけなと迷わないので良いです。

SANKOU!

SANKOU!のTOPページ

国内の素敵なサイトを集めたギャラリーサイトです。

コーポレートサイトやECサイトなどのジャンル別、業界別はもちろん、かっこいい・迫力・爽やかなどの見た目の印象からも検索可能です。

珍しい、派手な配色というカテゴリから見るサイト集が個人的に好きです。

WPDesignGallary

WPデザインギャラリーのTOPページ

こちらのサイトは良いデザインを集めた物ではなく、Wordpressを使用した国内サイトのデザインを収集しているサイトです。

良いデザインというのは個人差が生じるのでそのため評価機能はつけていないとのこと。

あくまでギャラリーサイトとして利用が推奨です。

AGT smartphone design gallery

AGT smartphone design galleryのTOPページ

AGT smartphone design galleryはスマートフォン、iPhone向けのギャラリーサイトです。

スマートフォンのLP改善などをしたいときはこのサイトを覗いてみるのがおすすめです。

LPアーカイブ

LPアーカイブのTOPページ

LPとは主にWEB広告の広告をクリックした時に最初に表示されるページのことをいいます。

広告をクリックした後に縦長なページをみたことがある方も多いのではないでしょうか。

このサイトは、そのLPに特化したページなので、LPのデザインを考えるのに最適です。

デザインだけでなく、アフィリエイトリンクまで誘導するための文章構成などが参考になります。

様々なWEBデザインを研究してかっこいいデザインにしよう!

ウェブサイトのデザインがかっこ良かったりユーザーにとって使い勝手の良いものになると、それもユーザーがサービスを使い続けてくれる上でのひとつの理由になります。

WEBサイト製作者でなくてもビジネスサイドもデザインの視点が求められる場面が多くなっていると感じます。

詳しいデザイン手法がわからなかったとしても、多くのデザインの引き出しを持っているとアイディアが生まれます。

また、かっこいいなと思ったサイトに対して

「なんでこのサイトかっこいいと思ったんだろう?」

と言語化しておくと良いです。

うまく考えられないなと思った人は下記本を読んでみてください。

デザイナー視点からなんでこの構成にしたのかや初心者がデザインする上で知っておきたい基礎知識なんかもあって言語化することを手助けしてくれますよ



コメントを残す

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