Webデザインギャラリーサイト26選｜デザイン制作の参考に使えるWebサイトまとめ
私が実際に活用しているWebデザインギャラリーサイトを厳選して26サイトご紹介します。デザイン制作の参考にも、クライアントとの打ち合わせにも使えるものを集めました。
ザイナー視点はもちろん、クライアントが自社のデザインイメージを固める際にも役立ちます。デザインの方向性を大まかに決められることで、より良いデザインが生まれるきっかけになるので便利です。
Webデザインギャラリーサイトの活用について
デザインギャラリーでの閲覧は、単なる模倣のためではなく、アイデアや発想を刺激するために活用しています。私の場合、各デザインの「意図」を独自の視点で解釈し、それを案件のコンセプトに合わせてデザインします。
フリーランスデザイナーとして一人で制作を行っていると、どうしても視点が限られてしまいます。本記事で紹介するサイトを通じて新しいアイデアに触れ、制作の幅を広げています。ただ眺めるだけでなく、自分なりの解釈を加えながら、クライアントのニーズに応える独自のデザインを生み出すためのツールとして利用しています。
今回ご紹介するのは、これまでいくつものギャラリーサイトを参考にしてきた末に残った、実践で本当に役立つサイトばかり。それぞれに特徴があり、デザインの参考としてだけでなく、クライアントとの打ち合わせの場でも活用できる情報が集まっています。
ぜひ活用してみてください。
Webデザインギャラリーサイト26選
Design Decode. 901 – 優れたWebサイトの「なぜ」がわかるデザインギャラリー
デザイナーは言語化できることで、デザインを理解し分解しオリジナルのデザインを生む材料が得られると考えている。Design Decode. 901 では、1サイトごとに丁寧な言語化があり、デザイン言語を使ってどう表現しているのか。紹介しているサイトとあわせて読んでみると、とても参考になる。
Studio Showcase – Studioで作成されたWebサイト事例集
ノーコードサイトツール「Studio」で作成されたWebサイトをまとめた、公式が運営しているギャラリーサイト。クオリティの高いビジュアルが多く紹介されている。「ノーコードでもここまでできるのか」と毎回感心させられている。
Framer Gallery – Explore the best websites built with Framer
ノーコードサイトツール「Framer」で作成されたWebデザインギャラリーサイト。こちらも公式が運営している。海外サイトのテイストは日本サイトには採用できない濃い味付けのものが多いが、メインビジュアルやフッター、部分的なセクション単体で見ると参考になる。
Footer – The only footer gallery on earth.
フッターに特化したWebデザインギャラリーサイト。Webページの足元になるフッターはファッションだけでなくWebサイトとしてもおしゃれにしておきたい。ナビゲーションを並べる以外にもさまざまなデザインを紹介しているのでインスピレーションを刺激したいときに見てみるといいと思います。
S5-Style | ハイクオリティなWebサイトを探すなら Webデザインギャラリー
ユーザーが自分でキュレーターになれる共有型のWebデザインギャラリーサイト。みんなが投稿したデザインが集まる「All Web Designs」から、運営が厳選したものを「Good Web Designs」としてピックアップする二段構えになっている。
自分の観点でデザインをまとめられる「Design Sets」があるので、案件ごとに参考サイトを束ねておく使い方ができる。他の人のまとめをフォローすることもできるので、自分では拾えない切り口に出会える。
制作者へのインタビューを載せた「Interviews」も読み応えがある。なぜこの構造にしたのか、なぜこの表現を選んだのかを本人が話しているので、眺めるだけでは分からない判断の理由まで拾える。
S5-Style | ハイクオリティなWebサイトを探すなら Webデザインギャラリー
I/O 3000 | Webデザインギャラリー
良質なWebデザインを紹介しているギャラリーサイト『I/O 3000』。テーマ問わずさまざまなサイトを発見することができます。サイト数は本記事執筆時で1600以上あり、目的のサイトは何かしら見つけられると思います。
SANKOU! – Webデザインギャラリー
デザイナーの中で有名なWebデザインギャラリーサイト。
投稿頻度が高く、制作会社が情報公開するタイミングで更新されるので、最新のトレンドが把握しやすい。
次に紹介する81-web.comと同様に、トレンドの確認で利用しています。これら2つのサイトをチェックしておけば、流行りは把握できます。
Webデザインを部分的に参考するときは、後述する「ストックデザイン」の方が便利ですね。
81-web.com – 日本のWebサイトギャラリー
デザイナーの中でも有名なWebデザインギャラリーサイト。
日本のサイトに限定されているのが嬉しいのと、ページネーションがないので流し見しやすい。
こちらのサイトはWebデザインの参考というよりも、トレンドを把握するために利用することが多いです。
私は、Webデザインにトレンドを含めるとデザインの賞味期限が短くなると考えています。長期利用を想定したWebサイトでは流行りの要素はできるかぎり加えず、スタンダードな表現を多用することが多いです。もしトレンドを取り入れたとしても流行りが廃れたときに削除しても問題ない仕様にします。
サイトによっては短期利用を想定したものもあるので、ティザーサイトなどの制作時はよく参考にしています。
ちょうどいいWebデザインギャラリー
限られた条件の中で、最良のクリエイティブを『ちょうどいい』と定義して、キュレーターがそれぞれのWebサイトのちょうどいいポイントを端的に紹介していている『ちょうどいいWebデザインギャラリー』。
サイトをスクロールしているところを動画で紹介しているコンテンツもあってうれしい。
デザインのこと – Web design gallery
「あ、いいな」をテーマに運営者が気になったレスポンシブ対応のWebデザインをまとめられているギャラリーサイト『デザインのこと』。Webデザインギャラリーは一般的に紹介したサイトに訪れないとページ全体のデザインは見ることができないのですが、『デザインをさっと見る』ボタンでトップページがモーダルでサクッと確認できる。これはうれしい。デザインランキングがあるのもおもしろい。
URAGAWA | 制作会社がわかるWEBデザイン・参考サイト集
Webデザインのギャラリーに加えて、その制作の裏側を取材した記事を載せているギャラリーサイト。運営はクリエイター向け求人サイト「MOREWORKS」を手がける株式会社みらいワークス。
「GALLERY」でクリエイティブを見て、「MEDIA」で制作の裏側やチームのつくり方を読んで、「COMPANY」で手がけた制作会社まで辿れる。誰が作ったのかまで分かるので、制作会社を探しているクライアントにも向いている。
URAGAWA | 制作会社がわかるWEBデザイン・参考サイト集
Mobile-first Design Gallery
PCでの閲覧でもスマホレイアウトで構成されたモバイルファーストデザインに特化したWebデザインギャラリーサイト。
サイトターゲットがスマホが多く情報量が少ないサイトで採用されるレイアウトで、ここ数年よく見かけます。
掲載数は少ないのですが、レイアウトの参考にするには十分で、このサイトも見やすいので参考にしています（ページネーションと広告がないのもいい）。
Responsive Web Design JP | 日本国内の秀逸なレスポンシブWebデザインを集めたギャラリーサイト
日本国内の秀逸なレスポンシブWebデザインを集めたギャラリーサイト『Responsive Web Design JP』。PCデザイン、タブレットデザイン、スマホデザインの3パターンを一度に確認できるのはうれしい。1ページ10サイト掲載されていて344ページあるということは3,430サイト以上あるということで。2012年頃の懐かしいWebサイトを見ることができるのは貴重。
Responsive Web Design JP | 日本国内の秀逸なレスポンシブWebデザインを集めたギャラリーサイト
Web Design Clip | Webデザインギャラリー・クリップ集
Webサイト制作の参考になるクリップ集『Web Design Clip』。日本、海外、ランディングページ、スマホとギャラリーサイトを分け、それぞれのサイトタイプに特化しているので目的をもって探すことができます。また、それぞれのサイトタイプごとにカテゴリー、タグで分類されているのも便利。
Web Design Clip | Webデザインギャラリー・クリップ集
ストックデザイン(stockdesign) – 参考になるWebデザインが見つかる
Webデザインをパーツごとに紹介しているギャラリーサイト。
Webデザインを作成していて行き詰まるときはよくあります。「ヘッダーのデザインが他サイトと同じになってしまうからちょっと変えたい。」「お問い合わせがフォームのみなので、何かコンテンツを追加するアイデアがほしい。」と、部分的なデザインを探したいときに応えてくれるのが嬉しい。
「ヘッダー」「フロー・流れ」「メニュー」「料金」「実績」「お客さまの声」「お問い合わせフォーム」などのカテゴリごとに検索できる。
広告がないのも好印象で見やすい。
Slideland – スライドデザイン集
プレゼン用資料、会社案内資料、求人情報資料などさまざまな資料を集めたギャラリーサイト。
資料デザインは情報を伝えきることを求められることが多いので、Webデザインやカードデザインとしても参考になる。「ページ」「グラフ」「図解」「イラスト」「写真」「カラー」「テイスト」「業種」「資料の種類」からソートできるのも嬉しい。
BANNER LIBRARY – おしゃれなバナーだけを集めたギャラリーサイト
バナーデザインに特化したギャラリーサイト。
さまざまなバナーデザインをチェックできます。写真を使用した物が多い印象。
広告少なめで、スクロールのみで完結するギャラリーサイトなので流し見がしやすいのが嬉しい。
SAMUNE – 良質なデザインのサムネイルを集めたギャラリーサイト
サムネイルデザインに特化したギャラリーサイト。
動画（YouTube）用のサムネイルが多い印象だが、ブログなどのサムネイルやバナー作成時にも参考になる。
おそらくサムネデザインに特化したギャラリーサイトはここだけだと思う（他あったら教えてください）ので、ここしか見ていません。
Godly – Astronomically good web design inspiration
海外のWebデザインギャラリーサイト
一覧のサムネイルが動画で、各サイトのトップページの全体像が見れれる。ここでは、デザインの参考ではなく、アニメーションの参考で訪れることが多い。
私は無駄なアニメーションは不要と考えているのですが、多少動かすとちょっとリッチなイメージになるので、ここ数年はアニメーションを提案することが多くなりました。
こちらのサイトで紹介されているのは過剰なものもあるのですが、一覧から探すのに便利なのもあってよく見ています。
Kawaii DB – 可愛いWEBデザインリンク集
可愛いWEBデザインリンク集『Kawaii DB』。かわいいに特化したWebデザインギャラリーサイトは見かけないので便利ですね。トップページ全体のデザインを見れるのもうれしい。
Brilliant Design Collect
ブリリアントで機能的であり美しいWebサイトを紹介している『Brilliant Design Collect』。ビジュアルが良いサイトを多く紹介しているので制作者のインスピレーションを刺激してくれると思います。
Parts. – パーツ別Webデザイン集
Webサイトの部分的なデザインを紹介している『Parts.』。ヘッダー、メインビジュアル、フロー、料金、よくある質問、CTA、フッターなど22カテゴリー分けされているので目的のデザインが探しやすい。この手のWebデザインギャラリーは少ないのでありがたいですね。
cms design｜CMSで構築されたWebデザインギャラリー
CMSで構築されたWebサイトを紹介している『cms design』。日本語サイトに特化したキュレーターの趣向を反映されているとのことで、クライアントに紹介しやすいサイトが集まっています。
cms design｜CMSで構築されたWebデザインギャラリー
BAKUup | Webデザインギャラリー
優れたWebサイトデザインを集めた『BAKUup』。一覧のサムネイルをPCデザイン、スマホデザインで切り替えられるのはうれしい機能。主旨とは関係ないけどロゴとページトップボタンが
1GUU / webデザイナーのためのギャラリー・サイトリンク集
千載一遇、その出合いをここから。優れたサイトのWebデザインリンク集『1GUU』。印象的なアニメーションを実装しているサイトは動画で確認することができるのはうれしい（PCのみ）。国別でもカテゴリー分けされているのは他にないので、海外の動向をチェックしたい人にはありがたい。
1GUU / webデザイナーのためのギャラリー・サイトリンク集
Stock – 日本のWebデザインギャラリー
日本のWebデザインギャラリー『Stock』。国内の素晴らしいWebデザインを対象にキュレーション。Webデザインギャラリーの存在意義は多様ですが、制作現場で参考にしたい、クライアントが制作を依頼する前に参考にしやすいWebデザインギャラリーが欲しい人のためのWebデザインギャラリーサイト。インスピレーションを刺激したい方はぜひご覧ください。
Webデザインギャラリーサイトは、一人で制作しているフリーランスデザイナーやクライアントにとって欠かせない参考資料となります。
それぞれのサイトには独自の特徴があり、目的やデザインジャンルによって使い分けることで、より効率的にアイデアを得ることができます。
今回ご紹介したサイトは、資料デザインからWebデザイン、バナーやサムネイルといった特定のカテゴリまで幅広くカバーしており、用途に応じた柔軟な利用が可能です。
これらのギャラリーサイトは、単にデザインを真似るためではなく、意図や背景を汲み取り、自分なりのアプローチで新しい表現を生み出すためのきっかけを与えてくれるものです。
特に、クライアントに提案する際の視野を広げたり、具体的な方向性を伝える際にも役立ちます。多様な視点を取り入れることで、より質の高いアウトプットにつながります。
ぜひこれらのサイトを活用しながら、より良いデザインを追求してみてください。
