Webデザインの参考にしている国内ギャラリーサイト5選
はじめに
グラフィックデザインの勉強を始めた時も、先人たちからは
デザインは世の中に溢れている。
外に出て、デザインを意識して歩いているだけでデザインの勉強はできる。
と言われました。
Webデザインもそうです。
現在のトレンドや、人気の企業はどんなデザインを採用しているのか・・
それは企業のコーポレートサイトなのか、採用サイトなのか、キャンペーンサイトなのか
いろんな角度からWebサイトを見るのが1番勉強になります。
そのうち「ギャラリーサイト」というジャンルがあることを知り、いくつか使い続けるうちに自分なりのお気に入りができました。
この記事では、私が実際に参考にしている国内のギャラリーサイトを5つ紹介します。
なぜ国内か？
ターゲットが日本人向けの、日本企業のサイトを多く作成してきたので、自然と国内のギャラリーサイトばかりを見ていました。
あとは単純に好きなギャラリーサイトが多いので、国内と海外で分けようかなと。笑
ギャラリーサイトとは？
ギャラリーサイトとは、クオリティの高いWebサイトのデザインをまとめて見られるサービスです。
「こんな雰囲気のサイトを作りたい」「飲食店のサイトのレイアウトを参考にしたい」というときに、業種・色・スタイルで検索してデザインのヒントを探すことができます。
参考にしているギャラリーサイト5選
01 SANKOU! 【国内・初心者向け】
国内のWebサイトをカテゴリ・業種・スタイルで検索できるギャラリーサイトです。PCとスマホ表示を切り替えて確認できるのが特徴で、レスポンシブデザインの参考に便利です。掲載数が多く、「飲食店」「コーポレート」「採用サイト」など業種で絞り込めるので、「同じ業種のサイトを見たい」というときに重宝します。
👉 こんな人におすすめ：Webデザインを学び始めたばかりの方・国内サイトのレイアウトを参考にしたい方
業種で検索できるので目的のデザインが見つかりやすかったですし、お気に入り数が多いサイトが見られるので、どのようなサイトが特に人気なのかすぐに分かるところが良かったです。
私が1番見ているサイトです。
02 URAGAWA 【国内・制作会社が分かるギャラリー】
https://mirai-works.co.jp/uragawa/
「制作会社がわかる」ことを特徴とした国内Webデザインのギャラリーサイトです。
業界別（旅行・不動産・美容・金融など）とサイトタイプ別（採用サイト・特設サイト・メディアなど）で絞り込んで検索できます。
気になるサイトを見つけたときに「どの制作会社が作ったか」まで確認できるので、外注先を探したいWeb担当者にも役立ちます。
👉 こんな人におすすめ：デザインだけでなく制作の裏側にも興味がある方・Web制作の発注先を探している方
このサイトは、「写真が印象的」や「イラストが印象的」など具体的な特徴からサイトを探すことができますので、写真素材が少ないからイラストを中心に作成しようかな・・という時や、逆に印象的な写真やイラストを貰えたからどうやって効果的に見せようかな・・という時に参考にさせてもらっていました。
03 MUUUUU.ORG 【国内・ハイクオリティ】
プロのWebデザイナーが選んだ、クオリティの高い国内Webサイトだけを掲載しているギャラリーサイトです。
「とにかくレベルの高いサイトを見たい」というときに向いています。
掲載基準が厳しいため数は多くありませんが、どのサイトもデザインの完成度が高く、「目を鍛える」のに最適です。
カテゴリで絞り込んで使えます。
👉 こんな人におすすめ：デザインの質を上げたい方・ハイクオリティなサイトでセンスを磨きたい方
とにかくクオリティが高いので、日々のWebデザインの勉強によく使っています。
04 81-web.com 【国内・フォント検索が便利】
国内のWebサイトをまとめたギャラリーサイトです。
他のサイトにはない「フォントで検索できる」機能が特徴で、「游明朝を使ったサイトを見たい」「丸ゴシック系のサイトを参考にしたい」というときに便利です。
グラフィックデザイナーはフォントへの感度が高い方が多いので、この機能は特に活用しやすいと思います。スマホ表示も確認できます。
👉 こんな人におすすめ：フォント選びで悩んでいる方・グラフィックデザイナー出身でフォントにこだわりたい方
グラフィック出身の人はフォントが大好きだと思います。笑
グラフィックと違って便利に使えるWebフォントは限られていますよね（日本語は特に）
見ているだけでも面白いですが、フォントを決めかねている時に参考になります。
05 RWD JP 【PC＋タブレット＋スマホ並列表示が便利】
PCとタブレットとスマホのデザインを横に並べて同時に確認できるギャラリーサイトです。「PCとタブレットとスマホでどう変化するか」を一目で確認できるため、レスポンシブデザインを学ぶときの参考に最適です。
第5回でお伝えしたように、Webはスマホ表示が重要なので、両方を並べて見ながら学べるこのサイトは特に初心者におすすめです。
👉 こんな人におすすめ：レスポンシブデザインを学びたい方・PCとスマホの表示の違いを確認したい方
5サイトまとめ
| サイト名 | 特徴 | こんなときに使う |
| SANKOU! | 業種・スタイルで検索できる | 「飲食店のサイト」など業種で探したいとき |
| URAGAWA | 制作会社ごとにまとめて見られる | 制作の裏側にも興味があるとき |
| MUUUUU.ORG | プロ厳選のハイクオリティ | デザインの質を上げたいとき |
| 81-web.com | フォント別に検索できる | フォント選びの参考にしたいとき |
| RWD JP | PCとタブレットとスマホを並べて確認 | レスポンシブの参考にしたいとき |
まとめ
Webデザインの参考を探すときは、ギャラリーサイトをブックマークしておくと便利です。
「ただ眺めるだけ」でも勉強になりますが、次の使い方をするとより効果的です。
- 作りたいサイトに近い業種・スタイルで絞り込んで探す
- 「なぜこのデザインが見やすいか」を言語化してみる
- 気に入ったサイトのスクリーンショットをフォルダに保存しておく
お気に入りのサイトがいつまでギャラリーサイトに載っているかはわかりません。
サイトをリニューアルしてしまえば、見られなくなってしまいますし、キャンペーン特化のLPとかだと、キャンペーン終了とともに見られなくなってしう可能性大です。
今回の制作では使えなくても、いつかこんなデザインを作って見たいなというものはすぐにスクショをして見返せるようにしておくと良いと思います！
▶ 次回予告 むちゃぶりその4 — SEOを強化せよ
「SEOって結局何をすればいいの？」グラフィックデザイナー視点で実体験をもとに解説します。
