今回は参考サイトや学習をする際よく見るギャラリーサイトとその活用法をご紹介します。業務や学習にお役に立ていただければ幸いです。
WEBサイトだけではなく、LPサイトやバナーが集められたギャラリーサイトもご紹介します。
CONTENTS
WEBギャラリーサイト（国内）
MUUUUU.ORG
ほとんどの方が活用されているギャラリーサイトの１つだと思います。縦長のサイトが集められています。様々な業種のサイトが取り上げられていて、カテゴリーも豊富です。更新も頻繁にされています。
http://muuuuu.org/
ズロック
こちらも様々な業種・デザインのサイトが取り上げられているギャラリーサイトです。
http://www.zzrock.net/
WebDesignClip
またまたこちらも様々な業種のサイトが取り上げられています。レイアウトごとに検索がしやすいギャラリーサイトです。
http://www.webdesignclip.com/
Responsive Web Design JP
紹介されているサイトがPC、タブレット、スマホ画面サイズそれぞれのパターンでサムネ表示されているので非常に一覧が見やすいです。こちらの記事（2017年こそモバイルフレンドリーなサイトでモバイルファーストインデックス到来に備えよう）にもあるように、昨今はモバイルフレンドリーなサイトが主流になっているのでスマホ表示の流行しているデザインなどは把握する必要がありますよね。
http://responsive-jp.com/
I/O 3000
サイトがシンプルで一覧がとても見やすく、更新頻度も高いです。
http://io3000.com/
WEBギャラリーサイト(海外)
Awwwards
世界中の最先端のサイトが集まったギャラリーサイトです。ざっと眺めているだけでも正直面白いサイトです。デザインがハイレベルなものが多くよく驚かされます。
http://www.awwwards.com/
The Fwa
PC、スマホサイト以外にもアプリも取り上げられています。
https://thefwa.com/
The Best Designs
一覧がみやすいです。またWordpressのテーマも揃っています。
https://www.thebestdesigns.com/
CSS Design Awards
ユーザーに投票され選ばれたサイトが集まっています。こちらも非常にハイレベルなデザインのサイトが集まっています。
http://www.cssdesignawards.com/
WebDesignFile
WebDesignClipの姉妹サイトで各国で制作されたサイトが集められています。国ごとにタグ分けされているのでどこの国で作られたサイトかが判別しやすいです。
http://www.webdesignfile.com/
ランディングページ
WebDesignClip L
こちらもWebDesignClipの姉妹サイトです。まとまっていて見やすいサイトです。一部海外のLPサイトも扱われています。
http://lp.webdesignclip.com/
ランディングページ集めました。
アーカイブが年月ごとに表示されているので、運用されていれば7年前のページデザインも見ることができます。
http://lp-web.com/
バナーデザイン
レトロバナー
更新率が高めです。また様々なサイズ、業種のバナーが取り上げられています。
http://retrobanner.net/
BANNER LINKS
こちらも多業種のバナーが集められています。
http://nonamedesign.info/banner/
活用方法
休日暇なときや時間があるときなどブラウザーのデベロッパーツールなどを使って下記に着目して見て回っています。
(UI/UX)デザイン面
・フォントの種類、サイズ
・使われているカラーとその組み合わせ
・要素間のマージンの取り方
・サイトにどのような導線がはられているか
・どのような意図でデザインされているのか
・テキストの量
コーディング面
・HTML、CSSの組み方
・CSSプロパティの使い方
・CSSやスクリプットによって可変する要素の仕組み
・PC→タブレット→スマートフォン時の要素の切り替わり方
・どのようなjQueryのプラグインが使っているのか
・CSSフレームワークはどう使用されているか
・リセットCSSの設定
その他
・どのようにファイルがツリー形式の構造で並べられているか
・ターゲット層はなにか
・取り上げられているサイトの共通点
お役立ちツール
Dirty Markup
デベロッパーツール等でCSSやJavaScriptを分析しようとすると圧縮されていてソースコードがひたすら一列にズラーっと並んで解析しにくいことがあります。そういう時はこのツールです。このツールはソースコードを整形してくれます。
まとめ
今回は特にメジャーなギャラリーサイトを中心にご紹介させていただきました。この他にも例えば和のデザインだけ集められたギャラリーサイトなど様々あります。ネタが貯まり次第、あまり知られていないようなギャラリーサイトをいつかご紹介したいと思います。
ギャラリーサイトは参考サイト探しや学習、サイト分析、流行りのデザインの把握にとても役立ちますので皆さんもぜひお気に入りのギャラリーサイトを探してみてください。
また時間がある方はコーディングやPhotoshop等でお気に入りのサイトを模写してみるのもいいかもしれません。
