Webデザインのサンプルに最適!ギャラリーサイト30選をジャンル別に紹介 | WEBCAMP NAVI
【5月の受講枠も残りわずか】

Webデザインのサンプルに最適!ギャラリーサイト30選をジャンル別に紹介

webデザイン サンプル

Webデザインに関わっているなかで、ときには「デザインのアイディアが浮かばない…!」と悩んでしまうこともあるでしょう。
そんなときには、さまざまなWebデザインを見てみるのが効果的です。

とはいえギャラリーサイトはいくつもあるため、どこで見ればよいのかと迷ってしまう方も多いでしょう。
そこでこの記事では、以下の4つのタイプ別におすすめのギャラリーサイトをご紹介していきます。

  • 国内
  • 海外
  • スマホ特化
  • 特定のパーツ特化

業務や勉強に活かせるWeb制作のアイディアが欲しい方は、ぜひ最後まで読み進めてくださいね。

【Webデザインのサンプル】国内ギャラリーサイト15選

Webデザインのサンプル

まずは、おすすめの国内ギャラリーサイト15選をご紹介していきます。

国内の厳選したギャラリーサイトを集めたので、ぜひ参考にしてください。
それでは順番に見ていきましょう!

1.SANKOU!

SANKOU!

(出典:SANKOU!)

「SANKOU!」はデザイン性が高く、高品質なWebサイトがそろっているギャラリーサイトです。
更新頻度も高く、トレンドのデザインをいち早く知りたい方におすすめ。

また、

  • Webサイト
  • LP(ランディングページ)
  • コンテンツページ

の3つのカテゴリー別に検索できるのも魅力的なポイントです。

このギャラリーサイトの評価
検索しやすさ
(4.5)
見やすさ
(4.5)
デザインの美しさ
(5.0)
更新頻度
(5.0)
事例の数の多さ
(4.5)
総合評価
(5.0)

2.イケサイ

イケサイ

(出典:イケサイ)

「イケサイ」は、高品質なデザインを幅広く見るのにおすすめなギャラリーサイト。
ほぼ毎日2つから4つのサイトが新しく追加されているため、更新頻度は高いといえます。

Webサイトのカテゴリーやカラー別に検索できるのも嬉しいポイントです。

このギャラリーサイトの評価
検索しやすさ
(4.5)
見やすさ
(4.0)
デザインの美しさ
(4.5)
更新頻度
(5.0)
事例の数の多さ
(5.0)
総合評価
(4.5)

3.MUUUUU.ORG

MUUUUU.ORG

(出典:MUUUUU.ORG)

「MUUUUU.ORG」は、クオリティの高い縦長のサイトが集められているギャラリーサイト。
現場レベルで参考になるデザイン性の高いWebサイトが集結しており、とても参考になります。

カテゴリーでソートして表示できるのも嬉しいポイントです。
デザイン性の高いサイトの設計部分まですぐに知りたい方におすすめ。

このギャラリーサイトの評価
検索しやすさ
(5.0)
見やすさ
(4.5)
デザインの美しさ
(5.0)
更新頻度
(4.0)
事例の数の多さ
(4.0)
総合評価
(4.5)

4.ズロック

ズロック

(出典:ズロック)

「ズロック」は、国内のデザイン性に優れたかっこいいWebサイトを集めたギャラリーサイト。

  • 業種
  • レイアウト
  • カラー
  • イメージ
  • Webサイトの種類
によって、検索できる点がとても便利です。

掲載されているサイトはどれも見栄えがよいものばかりなのも嬉しいポイント。

このギャラリーサイトの評価
検索しやすさ
(4.0)
見やすさ
(4.0)
デザインの美しさ
(5.0)
更新頻度
(3.0)
事例の数の多さ
(4.0)
総合評価
(4.0)

5.81- web.com

81-web.com

(出典:81- web.com

「81-web.com」は、Webサイト制作に役立つデザイン性の高いサイトを集めたギャラリー&リンク集です。
サイトドメインの「81-web.com」は、日本の国際電話番号「81」に由来しています。

気に入ったWebサイトを「お気に入り機能」に登録できるのも嬉しいポイント。
また、実際にWebサイトを開かなくてもプレビュー表示ができるなど、操作性に優れています。
サイト自体もシンプルで見やすいのが特徴です。

このギャラリーサイトの評価
検索しやすさ
(4.5)
見やすさ
(5.0)
デザインの美しさ
(5.0)
更新頻度
(4.0)
事例の数の多さ
(4.0)
総合評価
(4.5)

6. Design-trigger

Design-trigger

(出典: Design-trigger)

「Design-trigger」は、国内のWebデザインリンク集・Webデザインのギャラリーサイトです。

  • カラー
  • レイアウト
  • 業界
  • テイスト
のカテゴリー別に検索できるためとても使いやすいのが特徴。

このギャラリーサイトの評価
検索しやすさ
(4.5)
見やすさ
(5.0)
デザインの美しさ
(5.0)
更新頻度
(4.0)
事例の数の多さ
(4.0)
総合評価
(5.0)

7.straightline bookmark

straightline bookmark

(出典:straightline bookmark)

「straightline bookmark」は、国内のデザイン性の高いWebサイトを集めたギャラリーサイト。

レイアウト別にも検索できるのが特徴です。
Webサイトの設計を中心に知りたい方におすすめ。

このギャラリーサイトの評価
検索しやすさ
(3.5)
見やすさ
(3.5)
デザインの美しさ
(5.0)
更新頻度
(3.5)
事例の数の多さ
(4.0)
総合評価
(4.0)

8.S5-Style

S5-Style

(出典:S5-Style)

「S5-Style」は、参考になるハイクオリティなWebサイトが集められたギャラリーサイト。

  • トレンド
  • 業種
  • テイスト

別にまとめられているため、検索も容易にできます。

他のギャラリーサイトにはあまりない「タイポグラフィー・文字のWebデザイン」のカテゴリーがあるのが特徴です。

このギャラリーサイトの評価
検索しやすさ
(4.5)
見やすさ
(4.5)
デザインの美しさ
(5.0)
更新頻度
(4.0)
事例の数の多さ
(4.5)
総合評価
(4.5)

9.Web Design Clip

Web Design Clip

(出典:Web Design Clip)

「Web Design Clip」は、トレンドをおさえたWebサイトが多いギャラリーサイト。
Web Design Clipのサイト自体もデザイン性が高く、見やすいのが特徴です。
カテゴリーやタグも細かく設定して検索できます。

デザインに迷ったらまず参考にしていただきたいギャラリーサイトです。

このギャラリーサイトの評価
検索しやすさ
(4.5)
見やすさ
(5.0)
デザインの美しさ
(5.0)
更新頻度
(4.0)
事例の数の多さ
(4.5)
総合評価
(5.0)

10.Good Design Web

Good Design Web

(出典:Good Design Web)

「Good Design Web」は、国内外のクオリティが高いWebサイトを集めたギャラリーサイトです。

  • ECサイト
  • アプリ
  • フォトグラフ
  • ポートフォリオ
  • グラフィック・アート

など多種多様な検索カテゴリーがあるのが特徴。

幅広いデザインを見たいときにおすすめなギャラリーサイトです。
他のギャラリーサイトにはないデザインも、Good Design Webなら見つけられるかもしれません。

このギャラリーサイトの評価
検索しやすさ
(3.5)
見やすさ
(3.5)
デザインの美しさ
(4.0)
更新頻度
(3.5)
事例の数の多さ
(4.0)
総合評価
(4.0)

11.週刊ウェブデザイン

週刊ウェブデザイン

(出典:週刊ウェブデザイン)

「週刊ウェブデザイン」は、バラエティ豊かなWebサイトを集めたギャラリーサイト。
毎週20サイト以上更新しているため、いつ見ても新しいWebサイトに出会えます。

Webデザインだけではく、写真素材やロゴデザインなども紹介しているのが特徴。
掲載されているWebサイトが多く、あらゆるタイプのデザインを学べます。

このギャラリーサイトの評価
検索しやすさ
(4.5)
見やすさ
(4.0)
デザインの美しさ
(4.0)
更新頻度
(5.0)
事例の数の多さ
(4.5)
総合評価
(4.0)

12.WEBデザインの見本帳

WEBデザインの見本帳

(出典:WEBデザインの見本帳)

「WEBデザインの見本帳」は、Webデザイナーのために作られたギャラリーサイト。
ハイクオリティなWebサイトが数多く集められています。

また、

  • Webサイトのイメージ
  • カラー・配色
  • 職業の種類

など、細かくカテゴリー分けされているため操作性も抜群です。

サイトの便利な使いかたを丁寧に解説しているのも嬉しいポイント。

このギャラリーサイトの評価
検索しやすさ
(4.5)
見やすさ
(4.0)
デザインの美しさ
(4.5)
更新頻度
(4.0)
事例の数の多さ
(4.0)
総合評価
(4.5)

13.WPデザインギャラリー

WPデザインギャラリー

(出典:WPデザインギャラリー)

「WPデザインギャラリー」は、WordPressを使用したWebサイトを集めたギャラリーサイトです。
掲載されているWebサイトをクリックしなくても、そのサイトの特徴を見れるのが嬉しいポイント。

幅広く多くのデザインを見たいときにおすすめです。

このギャラリーサイトの評価
検索しやすさ
(3.5)
見やすさ
(4.0)
デザインの美しさ
(3.5)
更新頻度
(3.5)
事例の数の多さ
(4.0)
総合評価
(3.5)

14.ARTNOC.COM

ARTNOC.COM

(出典:ARTNOC.COM)

「ARTNOC.COM」は、クリエイティブなWebサイトが収集されたギャラリーサイト。

  • 業種
  • カラー
  • レイアウト
  • 視覚効果
  • デザインテイスト

別に分類されているため、検索も簡単にできます。

業種やデザインスタイルなどが細かく分類しているのが特徴です。

このギャラリーサイトの評価
検索しやすさ
(4.0)
見やすさ
(4.0)
デザインの美しさ
(4.5)
更新頻度
(4.0)
事例の数の多さ
(4.0)
総合評価
(4.0)

15.bookma! v3

bookma! v3

(出典:bookma! v3)

「bookma! v3」は、パソコンとスマホの両方を一気に見れるギャラリーサイト。
パソコンとスマホの表示が並べて掲載されているため、レスポンシブデザインを比較しながら確認できます。

レスポンスシブデザインを重視したいときにおすすめ。

このギャラリーサイトの評価
検索しやすさ
(3.5)
見やすさ
(4.0)
デザインの美しさ
(5.0)
更新頻度
(3.5)
事例の数の多さ
(4.0)
総合評価
(4.0)

【Webデザインのサンプル】海外ギャラリーサイト7選

ギャラリーサイトを観ているパソコンのイメージ

国内のおすすめギャラリーサイトはいかがでしたか?
ここからは、海外のおすすめギャラリーサイトをご紹介していきます。

国内のギャラリーサイトとの違いも楽しみながらぜひご覧ください。
それではさっそく見ていきましょう!

1.CSS Design Awards

cssdesignawards

(出典:CSS Design Awards)

「CSS Design Awards」は、革新的なWebサイトを表彰する国際的なギャラリーサイト。

  • UI
  • UX
  • イノベーション

3つの観点からWebサイトを評価し掲載しているのが特徴です。

このギャラリーサイトの評価
検索しやすさ
(3.5)
見やすさ
(4.0)
デザインの美しさ
(5.0)
更新頻度
(4.0)
事例の数の多さ
(3.5)
総合評価
(4.5)

2.AWWWARDS

AWWWARDS

(出典:AWWWARDS)

「AWWWARDS」は、クオリティの高いWebサイトを表彰しているギャラリーサイト。
AWWWARDSに掲載されているWebサイトを見れば、トレンドデザインがすぐにわかります。

多くの人を魅了するデザインが見たいときにおすすめです。

このギャラリーサイトの評価
検索しやすさ
(4.5)
見やすさ
(4.5)
デザインの美しさ
(5.0)
更新頻度
(5.0)
事例の数の多さ
(4.0)
総合評価
(5.0)

3.One Page Love

One Page Love

(出典:One Page Love)

「One Page Love」は、1ページのみで構成されたペラサイトをだけをまとめたギャラリーサイトです。

さまざまなカテゴリー別に検索できるため、数多くのデザインに触れられます。
ペライチサイトのデザイン構成を見たいときにおすすめです。

このギャラリーサイトの評価
検索しやすさ
(4.0)
見やすさ
(4.0)
デザインの美しさ
(5.0)
更新頻度
(4.0)
事例の数の多さ
(4.0)
総合評価
(4.5)

4.WeLoveWP

WeLoveWP

(出典:WeLoveWP)

「WeLoveWP」は、WordPressのデザインサイトを集めたギャラリーサイト。
WordPressで作成されたWebサイトがメインに掲載されているため、個人のブログやポートフォリオが中心です。

デザイン性が優れたサイトが多数掲載されているのが特徴。

このギャラリーサイトの評価
検索しやすさ
(5.0)
見やすさ
(4.5)
デザインの美しさ
(5.0)
更新頻度
(4.0)
事例の数の多さ
(4.0)
総合評価
(5.0)

5.Minimal Exhibit

Minimal Exhibit

(出典:Minimal Exhibit)

「Minimal Exhibit」は、名前の通りミニマル系のWebサイトを収集したギャラリーサイト。
無駄を省き、最小限の情報で作成された魅力的なWebサイトが多数掲載されています。

  • ポートフォリオ
  • 設計
  • アプリ開発

など、多種多様なタグでデザインを検索できるのが特徴です。

このギャラリーサイトの評価
検索しやすさ
(4.5)
見やすさ
(4.5)
デザインの美しさ
(5.0)
更新頻度
(4.0)
事例の数の多さ
(4.0)
総合評価
(4.5)

6.Folio Focus

Folio Focus

(出典:Folio Focus)

「Folio Focus」は、ポートフォリオに特化したギャラリーサイトです。

イラスト、写真、グラフィックなどを使った、ハイクオリティなデザインが数多く見れます。
ポートフォリオを作るときにはぜひ参考にしてみてください。

このギャラリーサイトの評価
検索しやすさ
(3.5)
見やすさ
(4.0)
デザインの美しさ
(5.0)
更新頻度
(2.0)
事例の数の多さ
(1.5)
総合評価
(4.5)

7.site inspire

site inspire

(出典:inspire)

「site inspire」は、デザイン性の高いWebサイトを数多く掲載しているギャラリーサイト。
掲載しているサイトの数はなんと7,800以上!

デザインのスタイルやタイプ別に個性豊かなデザインを見れるのが特徴です。

このギャラリーサイトの評価
検索しやすさ
(4.5)
見やすさ
(4.5)
デザインの美しさ
(5.0)
更新頻度
(4.5)
事例の数の多さ
(5.0)
総合評価
(5.0)

【Webデザインのサンプル】スマホ特化ギャラリーサイト3選

ギャラリーサイトのイメージ

スマホの利用者が増えている現代では、スマホ向けのデザインの研究も必要不可欠です。
ここからは、スマホに特化したギャラリーサイトを3つご紹介するので、ぜひ参考にしてくださいね。

1.iPhoneデザインボックス

iPhoneデザインボックス

(出典:iPhoneデザインボックス 公式サイト)

「iPhoneデザインボックス」は、国内のスマホサイトがまとめられているギャラリーサイトです。
カラーやデザインのイメージ、業種などカテゴリー別に検索できます。

詳細ページにいけばスマホとパソコンの両方の画面が同時に確認できるのが特徴です。

このギャラリーサイトの評価
検索しやすさ
(4.0)
見やすさ
(4.0)
デザインの美しさ
(4.0)
更新頻度
(3.5)
事例の数の多さ
(3.5)
総合評価
(4.0)

2.Responsive Web Design JP

Responsive Web Design JP

(出典:Responsive Web Design JP)

「Responsive Web Design JP」は、ハイクオリティなレスポンシブ対応のWebサイトを集めたギャラリーサイト。
技術やカラー、タイプ別に検索できます。

レスポンシブデザインに困ったときに、ぜひ活用してみてください。

このギャラリーサイトの評価
検索しやすさ
(4.0)
見やすさ
(4.0)
デザインの美しさ
(5.0)
更新頻度
(3.5)
事例の数の多さ
(3.5)
総合評価
(4.0)

3.AGT smartphone design gallery

AGT

(出典:AGT smartphone design gallery)

「AGT smartphone design gallery」は、スマホ、iPhone向けのハイクオリティなWebサイトを収集したギャラリーサイト。
サイトはシンプルで見やすく、検索もしやすいのが特徴です。

スマホ向けのデザインのアイディアが欲しいときにおすすめ!

このギャラリーサイトの評価
検索しやすさ
(3.5)
見やすさ
(4.0)
デザインの美しさ
(5.0)
更新頻度
(2.0)
事例の数の多さ
(1.5)
総合評価
(4.5)

【Webデザインのサンプル】特定のパーツ特化ギャラリーサイト5選

特定のパーツ特化ギャラリーサイト

Web制作をしていると、バナーやフッターなどのパーツデザインに悩んでしまうときもありますよね。
そこでここからは、Webデザインの特定パーツに特化したギャラリーサイトをご紹介していきます。

1.iconDrop

iconDrop

(出典:iconDrop)

「iconDrop」は、iPhoneやiPadアプリ向けのアイコンをまとめたギャラリーサイト。
カラーやタグ、タイプなどに分類されているため検索も簡単です。

アプリ開発やリニューアルなど、アイコンを制作する際の参考にしてみてはいかがでしょうか。

このギャラリーサイトの評価
検索しやすさ
(4.0)
見やすさ
(4.0)
デザインの美しさ
(5.0)
更新頻度
(3.0)
事例の数の多さ
(3.0)
総合評価
(4.0)

2.見出しデザイン.com

見出しデザイン.com

(出典:見出しデザイン.com)

「見出しデザイン.com」は、Webサイトの見出しデザインに特化したギャラリーサイト。

  • グラデーション
  • 上線・下線
  • 形状

などをカテゴリー別に検索できます。

アイディアの引き出しを増やすのにも最適です。

このギャラリーサイトの評価
検索しやすさ
(4.0)
見やすさ
(4.0)
デザインの美しさ
(4.5)
更新頻度
(3.5)
事例の数の多さ
(3.5)
総合評価
(4.0)

3.フッターデザイン.com

フッターデザイン.com

(出典:フッターデザイン.com)

「フッターデザイン.com」は名前の通り、フッターに特化したギャラリーサイトです。
イラスト、横並びメニュー、カラムメニューなどのカテゴリー別に分類されています。

フッターのデザインに悩んでときにはぜひ活用してみてください。

このギャラリーサイトの評価
検索しやすさ
(4.0)
見やすさ
(4.0)
デザインの美しさ
(4.0)
更新頻度
(3.5)
事例の数の多さ
(3.5)
総合評価
(4.0)

4.Banner Matome

Banner Matome

(出典:Banner Matome)

「Banner Matome」は、さまざまなジャンルのバナーが掲載されているギャラリーサイト。

カラーや業種、表現別にバナーを探せます。
バナー作りのアイディアに困ったときはぜひ活用してみてください。

このギャラリーサイトの評価
検索しやすさ
(4.0)
見やすさ
(3.5)
デザインの美しさ
(4.0)
更新頻度
(4.5)
事例の数の多さ
(4.0)
総合評価
(4.0)

5.UI Movement

UI Movement

(出典:UI Movement)

「UI Movement」は、UIのアニメーションを収集したギャラリーサイト。

  • ボタン
  • ナビゲーション
  • タブ

など、パーツごとにタグが設定されているため、探したいパーツのデザインもすぐに見つけられるでしょう。

このギャラリーサイトの評価
検索しやすさ
(4.5)
見やすさ
(4.5)
デザインの美しさ
(5.0)
更新頻度
(4.0)
事例の数の多さ
(4.0)
総合評価
(4.5)

まとめ:デザインのサンプルは目的に合わせて使い分けることが大切

今回は現場で使えるクオリティの高いギャラリーサイトをご紹介していきました。
あなたに合ったギャラリーサイトは見つかりましたか?

日頃からさまざまなWebサイトを観察していれば、自然とデザイナーとしてのスキルアップにも繋がります。
トレンドを理解したり、デザインの幅を広げるためにも、ぜひさまざまなギャラリーサイトをチェックしてみてください。

自宅にいながら、プロのキャリアアドバイザーに無料オンライン相談!

DMM WEBCAMPは転職成功率98%※1の全コースオンライン対応の転職保証型のプログラミングスクールです。短期間で確実にスキルを身につけて、ひとりひとりに寄り添った転職サポートで、未経験からのエンジニア転職を叶えます!

外出自粛期間中でも、自宅にいながらオンライン学習でスキルを高めることができます。

キャリアに迷ったら、まずはビデオ通話で無料キャリア相談を受けてみませんか?

自宅で過ごす時間が増えた今こそキャリアアップを目指しましょう!この機会を活用し、ぜひDMM  WEBCAMPの無料カウンセリングをご利用ください。

オンラインで実施中/
【無料】キャリア相談の日程を見る

※ 1 2020年4月時点