デザインの作業に取りかかろうとして、真っ白なアートボードの前で手が止まってしまう。Webデザインを学び始めた方から、この悩みを聞くことが本当に多いです。
そんなときに頼りになるのが、優れたWebサイトを集めた「ギャラリーサイト」です。ギャラリーサイトは、業種・色・レイアウトなどの条件で実在のWebサイトを検索できるデザインの資料庫で、プロの制作現場でも日常的に使われています。
この記事では、国内外の代表的なギャラリーサイトを用途別にまとめ、さらに「ただ眺めるだけ」で終わらせないための具体的な使い方まで解説します。参考サイト探しにかけていた時間を、これまでより短くしやすくなります。
ギャラリーサイトを使う目的を先に決めておく
ギャラリーサイトは数が多く、目的を決めずに開くと延々とスクロールしてしまいます。まず自分がどの段階で困っているのかを整理しておくと、見るべきサイトが絞り込めます。
目的は大きく3つに分かれる
制作の現場でギャラリーサイトが開かれる場面は、おおむね次の3つです。
| 目的 | 探しているもの | 向いているサイトの型 |
|---|---|---|
| 方向性の決定 | クライアントに提案する全体のトーン | 業種・カラー検索が強い国内系 |
| パーツの参考 | ヘッダー、フッター、フォームの型 | パーツ単位で分類されたサイト |
| 表現の引き出し | アニメーションやインタラクション | 海外の先鋭的なギャラリー |
「なんとなく見る」から「この目的で見る」に切り替えるだけで、探すのにかかる時間はかなり変わってきます。この前提を持ったうえで、次から具体的なサイトを見ていきましょう。
国内のWebデザインギャラリーサイト
日本語のサイトを扱う案件では、日本語フォントの組み方や情報量の多さに対応したレイアウトが参考になります。まずは国内系から押さえておくのが現実的です。
SANKOU!
SANKOU!は、国内のWebサイトを中心に掲載しているギャラリーです。業種、サイトの種類、デザインのテイスト、配色といった条件で絞り込めるため、「美容室の落ち着いたトーンのサイト」といった具体的な条件で探せるのが強みです。
掲載されているサイトのスクリーンショットが縦に長く表示されるので、ページ全体の構成をひと目でつかめます。クライアントに提案資料を作るときの候補集めにも使いやすい構成です。
配色で絞り込んで集めた実例は、配色の組み合わせをまとめた本と見比べると、なぜその色の組み合わせが落ち着いて見えるのかを理解しやすくなります。
MUUUUU.ORG
MUUUUU.ORGは「縦に長く、オーソドックスなレイアウトで、なおかつデザインが優れたサイト」を厳選して掲載しているギャラリーです。国内外を問わず収録されており、選定の基準がはっきりしているぶん、質のばらつきが少ないという特徴があります。
コーポレートサイトや採用サイトのように、情報量が多く縦長になりがちな案件を担当するときに参考になります。スクロールに応じた見せ方の工夫が集まっているので、単調になりがちな長いページの打開策を探すのに向いています。
I/O 3000
I/O 3000は、国内外のWeb制作の参考サイトを幅広く掲載しているギャラリーです。カラー検索やカテゴリー検索に加えてテキスト検索にも対応しており、キーワードから探したいときに便利です。
掲載スパンが長く蓄積量があるため、「少し前の年代の雰囲気」を意図的に探すこともできます。レトロ寄りのデザインを求められたときの資料集めにも使えます。
Web Design Clip
Web Design Clipは、国内サイトをカテゴリ別に整理して掲載しているギャラリーです。スマートフォン向けのデザインを扱う派生サイトも運営されており、レスポンシブ対応の実例を確認したいときに参照できます。
81-web.com
81-web.comは、日本国内の優れたWebサイトを集めたギャラリーです。掲載ページに使用CMSやフォントなどの情報が併記されていることがあり、「どうやって作られているか」まで踏み込んで調べられる点が学習者にとって価値があります。
海外のWebデザインギャラリーサイト
海外系は、表現の幅を広げたいときに効きます。国内案件でそのまま使える機会は多くありませんが、引き出しを増やす目的では価値があります。
Awwwards
Awwwardsは、世界中のWebサイトをデザイン・ユーザビリティ・クリエイティビティなどの観点から評価して紹介しているサイトです。掲載されているのは実験的な表現を含む作品が多く、スクロール連動アニメーションやWebGLを使った表現の最前線を確認できます。
ただし、掲載作品をそのまま国内の一般的な案件に持ち込むと、読み込み速度や操作性の面で問題が出ることがあります。あくまで表現の引き出しとして参照するのが現実的です。
Behance
BehanceはAdobeが運営するクリエイター向けのポートフォリオ共有サービスです。実際に公開されたWebサイトだけでなく、制作過程やコンセプトボードまで含めて公開されている投稿が多く、デザインの意図を言語化する練習の教材になります。
Dribbble
Dribbbleは、デザイナーが作品の一部を切り出して投稿するプラットフォームです。実装されていない「見た目だけ」の作品も多いため実務の参考にはしづらい面がありますが、配色やUIパーツの雰囲気を探すには手軽です。
Land-book
Land-bookは、ランディングページに特化して収集しているギャラリーです。LP制作の案件では構成の型がある程度決まっているため、複数の実例を並べて比較すると共通の骨格が見えてきます。
ギャラリーサイトの使い方は4ステップで固定する
ここからが本題です。ギャラリーサイトは、見る手順を決めておかないと時間だけが溶けていきます。次の4ステップを毎回同じ順番でやってみてください。
1. 条件を1つに絞って検索する（業種・色・レイアウトのどれか）
2. 気になったサイトは実際に開いて、スマホ幅まで縮めて挙動を見る
3. 「なぜ良いと感じたか」を1行のテキストで書き出す
4. 書き出したメモとスクリーンショットをセットで保存する
実際に開いてスマホ幅まで縮める
ギャラリーサイトに載っているのはスクリーンショットです。静止画では、ホバー時の変化やスクロール時の動き、そしてスマートフォンでの見え方がまったく分かりません。本体のサイトを開いて、ブラウザの幅を縮めながら確認する習慣をつけてください。
このとき、開発者ツールのレスポンシブ表示モードを使うと切り替えが速くなります。使い方はMDN Web Docsのレスポンシブデザインの解説が体系的にまとまっています。
言語化しないと引き出しにならない
「なんかオシャレ」で終わらせると、翌日には何も残っていません。「余白が広く取られていて、1画面に情報が3つしか入っていない」「見出しだけ明朝体で、本文はゴシック体になっている」というレベルまで分解して書き出します。
この作業を50件ほど続けると、自分が良いと感じるデザインの共通点が見えてきます。それが、そのままあなたのデザインの軸になります。
やりがちな残念な使い方
・そのまま模写して自分の作品として公開する（著作権の侵害につながるおそれがあります）
・海外の派手な表現を、情報量の多い国内サイトにそのまま持ち込む
・複数サイトの良いところをつぎはぎして、全体の統一感を失う
・見るだけで手を動かさず、時間だけが過ぎる
とくに1つ目は深刻です。学習目的で構造を分解するのは問題ありませんが、デザインをそのまま複製して公開したり、ポートフォリオに自作として掲載したりする行為はトラブルの原因になります。参考にするのは考え方や構成であって、成果物そのものではありません。
ギャラリー巡回を習慣にするための環境づくり
参考サイトを見比べる作業は、ノートPC1枚だとかなりつらいものがあります。ギャラリー、実サイト、自分のデザインツールを行き来するため、ウィンドウの切り替えだけで集中力が削られていくからです。
画面の面積が作業効率に直結する
デザインの比較作業では、画面の広さがそのまま効率になります。27インチのWQHD（2560×1440）モニターを1枚追加すると、左に参考サイト、右にFigmaという配置が成立します。フルHDだと横幅が足りず、結局ウィンドウを重ねることになりがちです。
デスクが狭くて設置に困っている場合は、クランプ式のモニターアームを使うとモニターの土台ぶんの奥行きが空きます。机の奥行きが60cm程度だと、モニタースタンドを置いた時点でキーボードのスペースが厳しくなるので、ここは効いてきます。
ストックの置き場所を1つに決める
気になったサイトをブラウザのブックマークに入れ続けると、数ヶ月後には探せない山ができあがります。スクリーンショットと1行メモをセットで保存できる場所を1つ決めておきましょう。
デジタルで管理するならNotionやEagleのようなツール、アナログ派ならA5サイズのリングノートに印象を書き出す方法もあります。手で書くと記憶に残りやすいという理由で、あえて紙を使うデザイナーも少なくありません。
デザインの基礎は書籍で補う
ギャラリーサイトは実例の宝庫ですが、「なぜそう見えるのか」の理屈までは教えてくれません。ここは書籍で補うのが早道です。デザインの4原則を扱った『ノンデザイナーズ・デザインブック』や、作例の思考プロセスを追える『なるほどデザイン』あたりは、実例を見る目を鍛えるのに役立ちます。
理屈を知ってからギャラリーを見ると、同じサイトでも見えるものが変わります。この順番で往復するのが効率的です。
目的別の使い分けまとめ
| やりたいこと | 参照したいギャラリー |
|---|---|
| 業種を指定して国内サイトを探す | SANKOU!、81-web.com |
| 縦に長いページの構成を学ぶ | MUUUUU.ORG |
| キーワードや色から幅広く探す | I/O 3000 |
| スマホ表示の実例を確認する | Web Design Clip系 |
| アニメーション表現の引き出しを増やす | Awwwards |
| 制作意図やコンセプトを読み解く | Behance |
| ランディングページの型を掴む | Land-book |
すべてを毎日巡回する必要はありません。国内から2つ、海外から1つを定点観測するくらいが、無理なく続けられる分量です。
よくある質問
Q. ギャラリーサイトは毎日見たほうがいいですか
毎日である必要はありませんが、週に2〜3回、10分程度の短い時間で見る習慣のほうが続きます。まとめて2時間見るより、短く頻繁に触れるほうが記憶に定着しやすいです。
Q. 掲載されているサイトを模写するのは問題ありませんか
学習のために手元でコードを書いて再現するのは、一般的に行われている練習方法です。ただし、それを公開したり自作として提出したりすると、著作権上の問題が生じるおそれがあります。練習の成果はローカル環境にとどめ、ポートフォリオには自分でゼロから設計したものを載せてください。なお、ここでの説明は法的助言ではありません。具体的な判断が必要な場合は専門家にご相談ください。
Q. 自分のサイトをギャラリーサイトに掲載してもらうことはできますか
多くのギャラリーサイトには掲載申請のフォームが用意されています。採用の基準はサイトごとに異なり、申請しても掲載されない場合もあります。掲載実績は営業活動で語れる材料になるため、自信作ができたら申請してみる価値はあります。
Q. 海外のギャラリーばかり見ていると何か問題がありますか
日本語の組版が抜け落ちるという問題があります。英語は単語間にスペースがあり、大文字と小文字で視覚的なリズムが生まれますが、日本語は全角文字が均等に並ぶため同じ設計では窮屈に見えます。国内案件を担当するなら、国内系のギャラリーを軸にするのが安全です。
Q. ギャラリーサイト以外に参考になる場所はありますか
実務では、担当する業種の企業サイトを10社まとめて見るという方法がよく使われます。その業界で「当たり前」とされている表現が分かるため、外し方の判断がしやすくなります。ギャラリーで良い例を見て、業界横断で標準を見る。この2軸で調べると精度が上がります。
Q. 集めた参考サイトはクライアントに見せてもいいですか
提案時に方向性を共有する目的で見せるのは一般的です。ただし「このサイトと同じものを作る」という誤解を生まないよう、どの要素を参考にするのかを明示して伝えてください。色なのか、余白なのか、写真の使い方なのか。ここを言葉にしておくと、後の認識のずれを防げます。
まとめ
ギャラリーサイトは、Webデザインを学ぶうえで手軽に使えて、費用もかからない教材です。国内系で日本語レイアウトの実例を押さえ、海外系で表現の幅を広げる。この組み合わせが基本になります。
大切なのは、見た数ではなく「なぜ良いと感じたか」を言葉にした回数です。1日1件でも構いません。1行のメモを積み上げていけば、半年後には自分だけの資料庫ができあがっています。
今日はまずSANKOU!を開いて、気になったサイトを1つだけ選び、良いと思った理由を1行書いてみてください。そこから始まります。
