今回は、Webデザインをするときに参考になるデザインを探すための「Webデザインギャラリーサイト」を30個ご紹介したいと思います。
この記事以外にも「おすすめギャラリーサイト◯選」のような紹介記事は沢山ありますが、海外サイトの紹介も多く、正直英語ができない私にとって海外のギャラリーサイトを紹介されても使い勝手が悪いんだが、、と思っていました。
なので今回は、ギャラリーサイトそのものが日本語表記で使いやすいギャラリーサイトだけに絞ってご紹介していきたいと思います!
大きく分けて、下記5つのカテゴリーごとにご紹介します。
- Webデザインのギャラリーサイト
- スマホデザイン・レスポンシブデザインのギャラリーサイト
- LPのギャラリーサイト
- WordPress・CMSで構築されたサイトのギャラリーサイト
- パーツデザインのギャラリーサイト
![](https://hatsuweb.design/wp-content/uploads/2023/04/IMG_3998-150x150.png)
お気に入りのギャラリーサイトを見つけてみてくださいね♩
それでは行ってみよ〜!
Webデザインのギャラリーサイト13選
最初にご紹介するのは、主にパソコンで見た時のデザインが参考になる、Webデザインのギャラリーサイトです。一番王道のギャラリーサイトなので2~3つほど気に入ったギャラリーサイトをブックマークしておくといいですね!
- SANKOU!
- I/O 3000
- 81-web.com
- MUUUUU.ORG
- WebDesignClip
- KAWAII DB
- イケサイ
- 1guu.jp
- 現代デザイン
- GOOD WEB DESIGN
- マネるデザイン研究所
- Stock
- S5-Style
SANKOU!:Webデザイン制作の参考になる国内のステキなサイト集
![Webデザインギャラリーサイト](https://hatsuweb.design/wp-content/uploads/2022/07/スクリーンショット-2022-07-15-16.36.32-1024x583.png)
![Webデザインギャラリーサイト](https://hatsuweb.design/wp-content/uploads/2022/07/スクリーンショット-2022-07-15-16.36.32-1024x583.png)
ギャラリーサイトの作りがシンプルで見やすいので使い勝手がいいです。「LP」や「コンテンツページ」も掲載されています。検索を絞る際の条件に「アクセス・遷移・日時で配色が変わる」「横スクロール」などの他のギャラリーサイトでは見られない項目もあるので、具体的に参考にしたいサイトが決まっている方はマッチした条件が見つかるかもしれません。STUDIO(ノーコード)で制作されたサイトも載っています。
I/O 3000:Webデザインに関わる人のためのWebデザインギャラリーサイト
![Webデザインギャラリーサイト](https://hatsuweb.design/wp-content/uploads/2022/07/スクリーンショット-2022-07-14-16.35.42-1024x583.png)
![Webデザインギャラリーサイト](https://hatsuweb.design/wp-content/uploads/2022/07/スクリーンショット-2022-07-14-16.35.42-1024x583.png)
国内外問わず、Web制作の参考となるサイトをセレクトしているギャラリーサイト。「Categories」をクリックすると探したい業界のサイトで検索することができます。「Tags」をクリックすると「responsive」「pop」など色んな条件で検索できるようになっていますが、英語表記なので若干使いづらいかもです。
81-web.com:日本の優れたWebデザイン・Webサイトギャラリー&リンク集
![Webデザインギャラリーサイト](https://hatsuweb.design/wp-content/uploads/2022/07/スクリーンショット-2022-07-14-16.36.00-1024x585.png)
![Webデザインギャラリーサイト](https://hatsuweb.design/wp-content/uploads/2022/07/スクリーンショット-2022-07-14-16.36.00-1024x585.png)
日本のサイトのみを載せているギャラリーサイト。他のギャラリーサイトと同じように各サイトのメインビジュアルがずらっと並んでいるのですが、このサイトの特徴は各メインビジュアルの下に表記されている「_pc _sp _detail _view site」の部分です。「_pc _sp」をクリックするとそれぞれパソコン・スマホのページが1枚の画像として表示されます。「_detail」はパソコンとスマホ、両方が画像が一度に表示されます。リンクに飛ぶのではなく、画像として一つのサイトを見ることで全体のデザインを俯瞰してみることができ、デザインする際の参考にしやすいと思います。
MUUUUU.ORG:クオリティが高い縦に長いサイトを厳選
![Webデザインギャラリーサイト](https://hatsuweb.design/wp-content/uploads/2022/07/スクリーンショット-2022-07-14-16.36.16-1024x586.png)
![Webデザインギャラリーサイト](https://hatsuweb.design/wp-content/uploads/2022/07/スクリーンショット-2022-07-14-16.36.16-1024x586.png)
見た目もシンプルで使い勝手もとってもシンプル。気になったサイトがあればクリックしてすぐにそのサイトに飛ぶことができます◎ 検索項目も他のサイトと同じように業界、色、どういう系のデザインか、サイトの種類などで絞って探すことができます。情報設計を参考にしやすい国内外のサイトを集めているとのこと。
WebDesignClip:Webサイト制作の参考になる日本のWebデザインリンク集
![Webデザインギャラリーサイト](https://hatsuweb.design/wp-content/uploads/2022/07/スクリーンショット-2022-07-14-16.36.33-1024x582.png)
![Webデザインギャラリーサイト](https://hatsuweb.design/wp-content/uploads/2022/07/スクリーンショット-2022-07-14-16.36.33-1024x582.png)
このギャラリーサイトは「Japan」「World」「Landing Page」「smartphone」に分かれており、このサイト一つをブックマークしておけばLPのデザインをするときもレスポンシブデザインをするときも参考になること間違いなしです。検索も他のサイトと違いレイアウト別の検索ができるのもポイント。
KAWAII DB:可愛いWEBデザインリンク集
![Webデザインギャラリーサイト](https://hatsuweb.design/wp-content/uploads/2022/07/スクリーンショット-2022-07-14-16.36.46-1024x581.png)
![Webデザインギャラリーサイト](https://hatsuweb.design/wp-content/uploads/2022/07/スクリーンショット-2022-07-14-16.36.46-1024x581.png)
このサイトはとにかく女子が好きそうな「かわいい」デザインだけを集めたギャラリーサイト。1ページ丸々載せているのでわざわざリンク先に飛ばなくても参考になりそうなデザインを探すことができちゃいます。
イケサイ:WEBデザインに役立、ついけてるサイト
![Webデザインギャラリーサイト](https://hatsuweb.design/wp-content/uploads/2022/07/スクリーンショット-2022-07-14-16.37.04-1024x581.png)
![Webデザインギャラリーサイト](https://hatsuweb.design/wp-content/uploads/2022/07/スクリーンショット-2022-07-14-16.37.04-1024x581.png)
「いけてるサイト、かっこいいサイト、おしゃれなサイト、クールなサイト」を載せているギャラリーサイト。更新頻度が高く常に新しいサイトを見つけることができるのですが、広告がたくさん貼られているので少し使いづらいかもです。
1guu.jp:千載一遇、その出合いをここから。優れたサイトのWebデザインリンク集
![Webデザインギャラリーサイト](https://hatsuweb.design/wp-content/uploads/2022/07/スクリーンショット-2022-07-15-16.35.04-1024x584.png)
![Webデザインギャラリーサイト](https://hatsuweb.design/wp-content/uploads/2022/07/スクリーンショット-2022-07-15-16.35.04-1024x584.png)
個人的な感想ですが、他のギャラリーサイトより個性的なデザイン・動きのサイトを多く集めている印象があり、見ていて楽しいギャラリーサイトです。美術館に来た気分。
現代デザイン:デザイン性に優れたWebサイトのトップページ、中面ページを掲載
![Webデザインギャラリーサイト](https://hatsuweb.design/wp-content/uploads/2022/07/スクリーンショット-2022-07-15-16.35.31-1024x582.png)
![Webデザインギャラリーサイト](https://hatsuweb.design/wp-content/uploads/2022/07/スクリーンショット-2022-07-15-16.35.31-1024x582.png)
サイトのメインビジュアルと中面ページが同時に見れるギャラリーサイト。気になったデザインのものがあればギャラリーサイト内でブックマークしてお気に入りのデザインだけを集めたページを作ることができます。
GOOD WEB DESIGN:Webデザイナー・コーダー・エンジニアの為の良質なWebデザイン ギャラリー
![Webデザインギャラリーサイト](https://hatsuweb.design/wp-content/uploads/2022/07/スクリーンショット-2022-07-15-16.35.49-1024x583.png)
![Webデザインギャラリーサイト](https://hatsuweb.design/wp-content/uploads/2022/07/スクリーンショット-2022-07-15-16.35.49-1024x583.png)
絞れるジャンルがとても多く、例えば「コーダー・エンジニア・デベロッパー」で絞るとコーダーさんなどのポートフォリオサイトが出てきたり、「Javascript・WordPress・CSS・SEO・コーディング」で絞るとコーディング関連のサービスサイトなどが出てくる。
マネるデザイン研究所:どの点が参考にできるのか、その応用場面、そして懸念点をまとめています
![Webデザインギャラリーサイト](https://hatsuweb.design/wp-content/uploads/2022/07/スクリーンショット-2022-07-15-16.36.03-1024x584.png)
![Webデザインギャラリーサイト](https://hatsuweb.design/wp-content/uploads/2022/07/スクリーンショット-2022-07-15-16.36.03-1024x584.png)
ただギャラリーサイトとして優れたデザインのサイトを載せているだけではなく、そのサイトのどの点が参考になるのか?などをまとめて切れている唯一のギャラリーサイト。
Stock:日本の優れたWebデザインを集めてみた
![Webデザインギャラリーサイト](https://hatsuweb.design/wp-content/uploads/2022/07/スクリーンショット-2022-07-15-16.36.18-1024x584.png)
![Webデザインギャラリーサイト](https://hatsuweb.design/wp-content/uploads/2022/07/スクリーンショット-2022-07-15-16.36.18-1024x584.png)
気になったサイトをクリックすると、セクションごとのサイトの画像やスマホ画面の時のデザインを一覧で見ることができるギャラリーサイトです。
S5-Style:ハイクオリティなWebサイトを探すなら
![Webデザインギャラリーサイト](https://hatsuweb.design/wp-content/uploads/2022/07/スクリーンショット-2022-07-15-16.44.55-1024x584.png)
![Webデザインギャラリーサイト](https://hatsuweb.design/wp-content/uploads/2022/07/スクリーンショット-2022-07-15-16.44.55-1024x584.png)
サイトだけではなく、Webデザイン関連の本もたくさん紹介されているギャラリーサイト。
スマホデザイン・レスポンシブデザインのギャラリーサイト7選
近年、パソコンがなくてもスマホから簡単にインターネットにアクセスできるようになりました。その関係でWebサイトもパソコンから見るのではなくスマホから見る人が増え、パソコンで見た時のデザインよりもスマホで見た時のデザインを気にするクライアントが増えておきます。そういった中でスマホデザイン・レスポンシブデザインの参考になるギャラリーサイトをいくつか知っておくことは非常に重要だと思いますので、ぜひ気になったギャラリーサイトはブックマークしておいてくださいね。
WebDesignClip:スマホサイト制作の参考になるスマホサイト・レスポンシブのクリップ集
![スマホデザイン・レスポンシブデザインのギャラリーサイト](https://hatsuweb.design/wp-content/uploads/2022/07/スクリーンショット-2022-07-16-22.26.07-1024x583.png)
![スマホデザイン・レスポンシブデザインのギャラリーサイト](https://hatsuweb.design/wp-content/uploads/2022/07/スクリーンショット-2022-07-16-22.26.07-1024x583.png)
先ほどもご紹介したギャラリーサイト。レスポンシブデザインも見ることができます。
URAGAWA:クリエイターはコミュニケーションの最終走者
![](https://hatsuweb.design/wp-content/uploads/2022/07/スクリーンショット-2022-07-16-22.26.22-1024x581.png)
![](https://hatsuweb.design/wp-content/uploads/2022/07/スクリーンショット-2022-07-16-22.26.22-1024x581.png)
ギャラリーサイト自体もとっても綺麗な作りで設計されている。サイトをクリックするとパソコン、スマホのメインビジュアルが横並びに表示されます。
RWD JP:日本国内の秀逸なレスポンシブWebデザインを集めた
![](https://hatsuweb.design/wp-content/uploads/2022/07/スクリーンショット-2022-07-16-22.26.37-1024x583.png)
![](https://hatsuweb.design/wp-content/uploads/2022/07/スクリーンショット-2022-07-16-22.26.37-1024x583.png)
国内のレスポンシブサイトを集めたギャラリーサイト。パソコン、タブレット、スマホの3画面を同時に見ることができる。
AGT smartphone design gallery:スマートフォン、iPhone向けの質の高いサイトを集めた
![](https://hatsuweb.design/wp-content/uploads/2022/07/スクリーンショット-2022-07-16-22.26.55-1024x585.png)
![](https://hatsuweb.design/wp-content/uploads/2022/07/スクリーンショット-2022-07-16-22.26.55-1024x585.png)
カーソルを合わせるとスマホ画面がスクロールされます。クリックするとスマホデザインが一枚の画像として見ることができるのでデザインの参考にしやすいです。
sps collection:スマートフォンサイトのデザインリンク集
![](https://hatsuweb.design/wp-content/uploads/2022/07/スクリーンショット-2022-07-16-22.27.12-1024x583.png)
![](https://hatsuweb.design/wp-content/uploads/2022/07/スクリーンショット-2022-07-16-22.27.12-1024x583.png)
クリックするとサイトに飛ぶ、シンプルな作り。気になったサイトは、ギャラリーサイト内でブックマークすることができます。
bookma!:感性を刺激するWebデザインギャラリー
![](https://hatsuweb.design/wp-content/uploads/2022/07/スクリーンショット-2022-07-16-22.27.28-1024x583.png)
![](https://hatsuweb.design/wp-content/uploads/2022/07/スクリーンショット-2022-07-16-22.27.28-1024x583.png)
パソコンとスマホのメインビジュアルを横並びで見比べることができるので、デザインの参考にしやすいです。
iPhoneデザインボックス
![](https://hatsuweb.design/wp-content/uploads/2022/07/スクリーンショット-2022-07-16-22.27.44-1024x582.png)
![](https://hatsuweb.design/wp-content/uploads/2022/07/スクリーンショット-2022-07-16-22.27.44-1024x582.png)
iPhoneで見た時に優れたデザインのサイトを集めているギャラリーサイト。
LPのギャラリーサイト5選
通常のWebサイトとは情報設計からレイアウト、デザインのポイントまで全て異なるのがランディングページ(LP)です。LPのデザインをする際にはLPのデザインを参考にしましょう。ここではLPを集めたギャラリーサイトをご紹介します。
WebDesignClip:LP・ランディングページ制作の参考になるギャラリー・クリップ集
![LP・ランディングページギャラリーサイト](https://hatsuweb.design/wp-content/uploads/2022/07/スクリーンショット-2022-07-15-16.55.08-1024x582.png)
![LP・ランディングページギャラリーサイト](https://hatsuweb.design/wp-content/uploads/2022/07/スクリーンショット-2022-07-15-16.55.08-1024x582.png)
国内外のWebサイトもレスポンシブデザインに優れたサイトも探せて、さらには優れたデザインのLPもたくさん載っているWebDesignClip。
ランディングページ集めました。:WEBデザイナーのためのランディングページのリンク集
![LP・ランディングページギャラリーサイト](https://hatsuweb.design/wp-content/uploads/2022/07/スクリーンショット-2022-07-15-16.55.54-1024x585.png)
![LP・ランディングページギャラリーサイト](https://hatsuweb.design/wp-content/uploads/2022/07/スクリーンショット-2022-07-15-16.55.54-1024x585.png)
ギャラリーサイトとしての作りは少し見づらいかもしれませんが、LPの掲載数は多いので、LPデザインに迷われた方は一見の価値ありかなと思います。
LP ARCHIVE:クオリティが高く見やすいLPばかりを集めたポータルサイト
![LP・ランディングページギャラリーサイト](https://hatsuweb.design/wp-content/uploads/2022/07/スクリーンショット-2022-07-15-16.56.17-1024x583.png)
![LP・ランディングページギャラリーサイト](https://hatsuweb.design/wp-content/uploads/2022/07/スクリーンショット-2022-07-15-16.56.17-1024x583.png)
圧倒的に掲載数が多いです。PCデザインのLPとスマホデザインのLP、それぞれで探すことができます。
LANDINGPAGE BOOKMARK:ランディングページの厳選デザイン・リンク集
![LP・ランディングページギャラリーサイト](https://hatsuweb.design/wp-content/uploads/2022/07/スクリーンショット-2022-07-15-16.56.31-1024x583.png)
![LP・ランディングページギャラリーサイト](https://hatsuweb.design/wp-content/uploads/2022/07/スクリーンショット-2022-07-15-16.56.31-1024x583.png)
こちらもLPだけを集めたギャラリーサイト。一昔前のデザインが多めな印象。
LP advance:LP制作・Web広告に参考になるLPデザインまとめ
![LP・ランディングページギャラリーサイト](https://hatsuweb.design/wp-content/uploads/2022/07/スクリーンショット-2022-07-15-16.56.51-1024x581.png)
![LP・ランディングページギャラリーサイト](https://hatsuweb.design/wp-content/uploads/2022/07/スクリーンショット-2022-07-15-16.56.51-1024x581.png)
こちらのギャラリーサイトは、キャッチコピーの一覧を見ることができます!LPといえばキャッチコピーはとても重要な要素ですが、そのキャッチコピーを業界別に絞って見ることができます。LP制作以外の時にも使えると思うのでキャッチコピーに迷ったら参考にしてみてください。
WordPress・CMSで構築されたサイトのギャラリーサイト2選
世の中にあるWebサイトの3つの一つがWordPressで作られたサイトだと言われています。WordPressで作られたサイトを参考にしたいと考えている方はこちらのギャラリーサイトを参考にしてください。
WPデザインギャラリー:WordPressを使用した国内外のWebサイトを収集
![WordPress・CMSで構築されたサイトのギャラリーサイト](https://hatsuweb.design/wp-content/uploads/2022/07/スクリーンショット-2022-07-16-22.28.05-1024x584.png)
![WordPress・CMSで構築されたサイトのギャラリーサイト](https://hatsuweb.design/wp-content/uploads/2022/07/スクリーンショット-2022-07-16-22.28.05-1024x584.png)
WordPressで作られたサイトだけを集めているギャラリーサイト。古めのサイトが多い印象。
cms design:cmsで構築されたWebデザインギャラリーサイト
![](https://hatsuweb.design/wp-content/uploads/2022/07/スクリーンショット-2022-07-16-22.28.32-1024x582.png)
![](https://hatsuweb.design/wp-content/uploads/2022/07/スクリーンショット-2022-07-16-22.28.32-1024x582.png)
CMSを使った国内のサイトを集めたギャラリーサイト。WordPress以外にも「EC-CUBE」や「Shopify」などのサイトも検索することができます。
パーツデザインのギャラリーサイト3選
パーツごとに参考になるデザインを探したいという方におすすめのギャラリーサイトです。
Parts.:パーツ別Webデザイン集
![パーツデザインのギャラリーサイト](https://hatsuweb.design/wp-content/uploads/2022/07/スクリーンショット-2022-07-16-22.28.58-1024x584.png)
![パーツデザインのギャラリーサイト](https://hatsuweb.design/wp-content/uploads/2022/07/スクリーンショット-2022-07-16-22.28.58-1024x584.png)
ヘッダー、メインビジュアル、料金、CTA、フッター、会社概要、お知らせなど、各セクションごとに絞って参考になるデザインを探すことができるギャラリーサイトです。おすすめ!
見出しデザイン.com:見出しのデザインを集めたWEBデザインギャラリー
![](https://hatsuweb.design/wp-content/uploads/2022/07/スクリーンショット-2022-07-16-22.29.09-1024x583.png)
![](https://hatsuweb.design/wp-content/uploads/2022/07/スクリーンショット-2022-07-16-22.29.09-1024x583.png)
サイトの見出しデザインだけを集めたギャラリーサイト。
ブブンデザインアーカイブ:アイデアインスピレーションを加速化する
![](https://hatsuweb.design/wp-content/uploads/2022/07/スクリーンショット-2022-07-16-22.29.22-1024x582.png)
![](https://hatsuweb.design/wp-content/uploads/2022/07/スクリーンショット-2022-07-16-22.29.22-1024x582.png)
このギャラリーサイトも部分的なデザインに絞って参考のデザインを探すことができるギャラリーサイトです。タイトルロゴ、グローバルナビゲーション、地図、アイコンなどで検索することができます。
さいごに:私のおすすめはこの8つ
30個のギャラリーサイトをご紹介してきましたが、この中でも個人的に特におすすめしたいギャラリーサイトは以下8つのサイトです。
Webデザインのギャラリーサイト
KAWAII DB:可愛いWEBデザインリンク集
1guu.jp:千載一遇、その出合いをここから。優れたサイトのWebデザインリンク集
マネるデザイン研究所:どの点が参考にできるのか、その応用場面、そして懸念点をまとめています
スマホデザイン・レスポンシブデザインのギャラリーサイト
AGT smartphone design gallery:スマートフォン、iPhone向けの質の高いサイトを集めた
bookma!:感性を刺激するWebデザインギャラリー
LPのギャラリーサイト
LP ARCHIVE:クオリティが高く見やすいLPばかりを集めたポータルサイト
WordPress・CMSで構築されたサイトのギャラリーサイト
cms design:cmsで構築されたWebデザインギャラリーサイト
パーツデザインのギャラリーサイト
Parts.:パーツ別Webデザイン集
![](https://hatsuweb.design/wp-content/uploads/2023/04/IMG_3998-150x150.png)
![](https://hatsuweb.design/wp-content/uploads/2023/04/IMG_3998-150x150.png)
![](https://hatsuweb.design/wp-content/uploads/2023/04/IMG_3998-150x150.png)
あなたのお気に入りのギャラリーサイトは見つかりましたか?
ぜひブックマークしてこれから沢山活用していってくださいね!