2015.02.10
保存版！Webデザインの参考になるギャラリーサイトをまとめてみた
あなたはサイトデザインに悩むことはありますか？またWebデザインを学び始めた方は、多くの書籍を読んで勉強をしても、いざサイトデザインをしようとすると「どんなデザインにしようかな…」と悩んでしまいますよね。私もそうでした。しかしそんな時は、おしゃれなサイトをまとめた「ギャラリーサイト」が非常に参考になります。サイトデザインに悩んだ時だけでなく、デザインやレイアウトを学ぶときにも活用することが出来ます。
そうして多くのサイトを見ることで、自分自身の技術向上にも繋がるのです。しかし重要なのは、「このデザインいいね！」と思ったものを真似することではありません。そのデザインがなぜそのようになったのか、デザイナーの思い描いている「設計」を洞察することが重要です。
これを繰り返すことで「自分の引き出し」が増え、オリジナルのデザインに活かすことが出来ます。実際にそうやって多くの技術を得たデザイナーは数多く存在します。今回は、そんなデザインで悩んだ時や技術向上のために役立つギャラリーサイトを様々な視点でまとめてみました！
Webデザイン全般
まず初めは、おしゃれで機能性に優れたサイトを集めたギャラリーサイトをご紹介します！多くのサイトは業種やテイスト、色などで見たいサイトを絞り込むことができます。私もサイトデザインの勉強によく利用させて頂いています。本当、おしゃれでクールなサイトが多いですね。
bookma! v3
ギャラリー検索が豊富で、国内か海外で絞り込むのはもちろん、サイトカラーや背景色で絞ったり、Facebookのいいね！やTwitterのツイート数順に並び替えることが出来ます。ギャラリーにマウスオーバーするといいね！やツイート数が見られるのも面白いですね。どんなサイトが人気で印象に残るか勉強になります。
▼記事リンク
WEBデザイン参考サイト bookma! v3
I/O 3000
スクロールするとギャラリーを自動的に読み込むので、すらすらと快適に閲覧することが出来ます。またタグでの絞り込みができ、例えば「HTML5」や「typography」など数多くのタグから絞り込むことが出来ます。個人的に好きな機能がシャッフル機能です。ギャラリーはとても数が多いので、シャッフル機能を活用することで幅広いギャラリーを見ることができます。
▼記事リンク
I/O 3000 | Webデザインギャラリー
ズロック
2000を超えるサイトを掲載しており、業種やカラーはもちろん、レスポンシブやブログデザインなど「レイアウト」で絞り込むことができます。また「企画がおもしろい」や「UIが素晴らしい」など独特の視点で絞り込むことも出来ます。グレーの背景がクールでカッコいいサイトですね。
▼記事リンク
ズロック｜Webデザインのリンク集
Best Web Gallery
おしゃれな海外サイトを集めたギャラリーサイトで、特にメイン画像に大きめのタイポグラフィを利用したデザインが多いように感じます。海外サイトならではのレイアウトや手法を学ぶことができ、国内サイトで何かインパクトを残したい要素のデザインに活用できそうです。
▼記事リンク
Best Web Gallery
レスポンシブデザイン
1つのHTMLファイルでスマートフォンやタブレット、デスクトップなど様々なデバイスに最適なページを表示する「レスポンシブデザイン」を集めたギャラリーサイトのご紹介です！いざ初めてレスポンシブを実装する際は「デザインやレイアウトはどうすれば良いんだ…」と悩んでしまいますよね。そんなときにぜひご参考にしてみてください。個人的な意見ですが、レスポンシブデザインに絞ってサイトを集めるのって大変そうですね。
Responsive Web Design JP
国内のレスポンシブデザインを集めたギャラリーサイトです。海外のレスポンシブデザインを集めたサイトは比較的多めですが、やはり国内サイトでないとイメージが湧きづらかったりしますよね。カテゴリーやサイトタイプはもちろん、「Bootstrap」や「CSS3」など技術面で絞り込むこともできます。
▼記事リンク
Responsive Web Design JP | 日本国内の秀逸なレスポンシブWebデザインを集めたギャラリーサイト
Responsive from ZURB
300近いレスポンシブデザインを集めた海外のギャラリーサイトです。「Bootstrap」などのフレームワーク別に絞り込むことが出来ます。
▼記事リンク
Responsive from ZURB | Gallery of Responsive Sites
Media Queries
数えきれないほど多くのレスポンシブデザインを集めた海外のギャラリーサイトです。デスクトップ(1600px)/ネットブック(1024px)/タブレット(768px)/スマートフォン(320px)の4つのサイズでキャプチャを掲載しています。こう見ると、デスクトップとスマートフォン2種類のレイアウトを基本としているサイトもあれば、タブレットを加えた3種類のレイアウトを採用してるサイトなど様々ですね。
▼記事リンク
Media Queries
縦長レイアウト
1ページ完結型のサイトや、視線移動とユーザビリティの観点からワンカラムの縦長レイアウトを採用したサイトが増えてきました。そういったサイトに特化したギャラリーサイトをご紹介します！ワンカラムだとサイドバーなどがないので、マルチカラムに比べてコンテンツに集中しやすいですよね。しかしそうすると回遊性が…など、Webデザインは本当に難しいですね。
One Page Love
1ページ完結型のサイト(いわゆるペライチと言われていますよね)を集めた海外のギャラリーサイトです。こういうサイトはアプリや商品の紹介など、何か1つに特化したコンテンツに向いていると言われています。たしかに自分で制作したアプリを紹介されている方は、1ページ完結型のレイアウトが多いですよね。ページの下部にCTA(コール・トゥ・アクション)を設置しているサイトが多いです。
▼記事リンク
One Page Love
MUUUUU.ORG
縦長レイアウトのサイトを集めた国内のギャラリーサイトです。以前までは「スクロールを出来るだけさせない」と、ファーストビューの重要性が今より高かったと思います。もちろん今でもファーストビューの重要性は変わりませんが、今では「スクロールをさせてストーリーに引き込め」と言われていますね。それに従ってこういった縦長レイアウトが増えてきたんですね。個人的に縦長レイアウトは大好きです。
▼記事リンク
縦長のwebデザインギャラリー・サイトリンク集｜MUUUUU.ORG
WEBデザインギャラリー
ワンカラムレイアウトのサイトを集めた国内のギャラリーサイトです。サイドバーなどを設置せず、コンテンツに集中させるワンカラムレイアウトは本当に増えてきましたよね。一概には言えませんが、ページ数が少なめでサイドバーがなくても回遊性が落ちないサイトであれば、ワンカラムレイアウトが最適ですね。
▼記事リンク
1カラム のWEBデザイン一覧 | WEBデザインギャラリー
フラットデザイン
リアルな質感を求める「スキューモフィズム」デザインとは違い、グラデーションやドロップシャドウを使わないミニマルな「フラット」デザインを採用したサイトを集めたギャラリーサイトをご紹介します！フラットデザインは多くの装飾を必要としないので比較的簡単に作れそうですが、フラットデザインには独特の色合いがあり、またグラデーションを使わずにボタンの立体感を出さなければいけないなど多くのノウハウを必要とします。次にご紹介するギャラリーサイトで、あなたもフラットデザインをマスターしちゃいましょう！
Flat UI Design
フラットデザインのサイトを集めた海外のギャラリーサイトです。「アプリ」や「ポートフォリオ」など10を超えるカテゴリで絞り込むことができます。ギャラリーサイトのデザインもフラットで、とても分かりやすいですね。
▼記事リンク
Flat UI Design – A showcase of the best examples of the flat UI design aesthetic on the web.
Flat design gallery
フラットデザインのサイトを集めた海外のギャラリーサイトです。30を超えるカテゴリで絞り込むことができます。
▼記事リンク
Flat design gallery – Finest collection of flat ui website designs | Flat Trendz
Flat Inspire
フラットデザインのサイトを集めた海外のギャラリーサイトです。カテゴリーで絞り込むのはもちろん、「STYLE」や「TYPEFACE」で絞り込むこともできます。キャプチャの右下にはサイトのメインカラーやキーカラーが表示されており、マウスオーバーすることで色コードを取得することができます。この機能は便利ですね～。
▼記事リンク
Flat Design Gallery & Showcase • An inspirational resource for designers • Flat Inspire
ワードプレステーマ
おしゃれでクールなワードプレスのテーマを集めたギャラリーサイトをご紹介します。ブログのデザインやレイアウトにはある程度決まりがありますが、その中でも様々な要素を差別化することで個性を出したブログを作ることが出来ます。実際多くのブログを拝見すると、色んなデザインやアイデアで溢れていますよね。ブログを運営されている方は必見です！
WPデザインギャラリー
国内外問わず400を超えるワードプレステーマを集めたギャラリーサイトです。ギャラリーをマウスオーバーすると1つ1つにコメントが書いてあり、色んな視点でギャラリーを楽しく見ることが出来ます。業種やカテゴリはもちろん、色やテイスト、カラム数で絞り込むことができます。
▼記事リンク
WPデザインギャラリー
Choicely
国内外問わず300近いワードプレステーマを集めたギャラリーサイトです。サイトからそのテーマのダウンロードページに直接飛ぶことが出来るのは、とても便利ですね。ワードプレスのテーマだけでなく、通常のWebデザインや動画など多くのコンテンツを紹介しています。
▼記事リンク
WordPressテーマギャラリー | Choicely
パーツごと
ヘッダーやフッターなど、パーツごとに特化したギャラリーサイトをご紹介します。「このサイトに合うフッターのデザインが思いつかない…」や「どうも見出しが目立たないし、おしゃれじゃない…」など、手が止まってしまうこともありますよね。そんなときに次にご紹介するギャラリーサイトをご参考にすると、色んなアイデアが思い浮かびそうです。フッターのデザインにこだわると、そのサイト全体の世界観が増しますよね。
ブブンデザインアーカイブ
ロゴやグローバルナビゲーション、サイドメニューやログインフォームなど多くのパーツをまとめたギャラリーサイトです。凄まじい数のパーツが掲載しており、「テーブル」や「パンくずリスト」など本当に細かいパーツごとに分かれています。
▼記事リンク
Webデザインの“ブブン”を集めたブブンデザインアーカイブ 公式サイト
見出しデザイン.com
サイトの「見出し」だけを集めたギャラリーサイトです。見出しはデザインの幅があまり広くないように感じますが、こう見ると多くのバリエーションや表現の仕方があるんですね。面白いですね～。「グラデーション」や「テキストのみ」など見出しを絞り込んで探すことができます。
▼記事リンク
見出しデザイン.com
フッターデザイン.com
サイトの「フッター」だけを集めたギャラリーサイトです。近年はフッターにサイトマップやフッターリンクを設置した「ビックフッター」が増えてきましたね。フッターにサイトマップがあることで、ページ間の回遊性を高め、ユーザーにサイト全体の構造を理解してもらうことができます。フッターに世界観を持たせることで、サイト全体の印象が変わります。
▼記事リンク
フッターデザイン.com -Webデザインの“フッター”を集めたサイト-
まとめ
いかがでしたか？ギャラリーサイトを見ることで、多くのアイデアやノウハウを得ることが出来ると思います。冒頭でも書きましたが、自分が気に入ったデザインをそのまま真似するのではなく(勉強として同じものを作ってみるのは良いと思います)、どうしてその色にしたのか？どうしてこのボタンは角丸じゃないのか？など、自分なりにデザイナーの「設計」を洞察してみてください。
それを繰り返すことで、いざ自分がデザインするときにきちんとした「設計」を元に実装することができ、それはただデザインが良いだけではなくユーザビリティやアクセシビリティの向上に繋がります。
ギャラリーサイトを見て、沢山のアイデアやノウハウを自分のものにしていけるよう頑張りましょう！そうするともっとWebデザインが楽しくなると思います。私ももっともっと多くのサイトを見て勉強したいです。