-1.jpeg?width=48&height=48&name=DSC_2387%20(1)-1.jpeg){kind=small}
Webデザインのアイデア出しや、社内外でのイメージ共有には、ギャラリーサイトを参考にするのがおすすめです。Webデザインの勉強をしたい方にとっても、さまざまなデザインに触れることは大切なプロセスの1つといえます。
5ステップでパフォーマンスの高いウェブサイトを作成、管理する方法
HubSpotとCanvaは共同で、パフォーマンスが高く見栄えの良いウェブサイトを作成、管理する手順を詳しく説明する無料のガイドを作成しました。
- オーディエンスとそのニーズについて理解する
- オーディエンスに合ったコンテンツを作成する
- ウェブサイトを最適化し最大限の成果を上げる
- パフォーマンスレポートの作成、分析、継続的な改善
今すぐダウンロードする
全てのフィールドが必須です。
今回は、Webデザインの参考になる国内外のギャラリーサイト20選を紹介します。2024年のデザイントレンドもあわせて紹介していますので、ぜひ参考にしてください。
Webデザインのギャラリーサイト20選
Webデザインの参考になるギャラリーサイト20選を紹介します。各サイトの事例数・検索しやすさ・更新頻度とともに、主な特徴を見ていきましょう。
1. SANKOU！
- 事例の数：2,200以上
- 検索しやすさ：◎
- 更新頻度：◎
「SANKOU！」は、高品質なWebサイト・ECサイト・LP・コンテンツページがそろうギャラリーです。更新頻度が高く、流行を追うのに重宝します。
また、業種別・目的別・色別など、いろいろな角度から検索できます。「シズル感」や「ステキなバナー」といった、デザイナー目線のカテゴリがそろっているのも特徴です。
2. Web Design Clip
- 事例の数：2,400以上
- 検索しやすさ：◎
- 更新頻度：◯
「Web Design Clip」は、国内外の独創性の高いサイトを集めたギャラリーです。PC用だけでなく、レスポンシブデザインも多数掲載されています。
更新頻度は控えめなものの、事例が多く検索もしやすい設計です。
3. 81-web.com
- 事例の数：5,100以上
- 検索しやすさ：◯
- 更新頻度：◎
「81-web.com」は、デザイン性に優れた国内サイトを集めたギャラリーです。5,000以上も事例があるので、イメージに近いものが見つかりやすいでしょう。
サムネイルの右下にあるPCマークをクリックすると、事例のサイトへ都度飛ぶことなくプレビューがすぐに表示されます。流し見したい時に便利な機能です。
4. S5-Style
- 事例の数：7,400以上
- 検索しやすさ：◎
- 更新頻度：◎
「S5-Style」では、高品質なデザインのサイトが厳選されています。7,000以上の事例があるのでじっくり回遊してみるのもいいでしょう。検索の特徴として、Technicの欄からCSSやHTMLなどの技術仕様別に絞り込めます。またAND・OR検索も可能なので、調べ方の幅が広がりますね。
5. bookma!
- 事例の数：780以上
- 検索しやすさ：△
- 更新頻度：△
「bookma!」は、パッと目を引く特徴的なサイトを集めたギャラリーです。PC版・スマホ版の両方が掲載されています。文字検索しかないものの、独自性の高いサイトが豊富にそろっている点は魅力です。ぜひ活用してみましょう。
6. ちょうどいい
- 事例の数：2,000以上
- 検索しやすさ：〇
- 更新頻度：〇
「ちょうどいい」は、サービス名のとおり各Webサイトの「ちょうどいいポイント」がまとめられているギャラリーサイトです。各サイトのPC版／スマホ版のトップページのほか、注目ポイントが紹介されているため、チェックしておくべき点が一目でわかります。
検索機能では、業種やサイト種別、トーンやデザインの特徴といった複数の条件で絞り込みが可能。自社のイメージに合ったデザイン見本を探したい時におすすめです。
7. MUUUUU.ORG
- 事例の数：4,800以上
- 検索しやすさ：◯
- 更新頻度：◎
「MUUUUU.ORG」は、製作者の立場に立って、実務の参考にしやすいサイトのみを集めるというコンセプトのもと構築されたギャラリーです。デザイン性はもちろん、ユーザビリティやUXも重視されています。
フラットデザインやタイポグラフィなど、デザインの系統で細かく検索できる点は、Webサイト構想段階であれば、とくに便利だと感じるでしょう。
8. イケサイ
- 事例の数：1,400以上
- 検索しやすさ：△
- 更新頻度：◎
「イケサイ」はその名のとおり「イケてるサイト」を集めたギャラリーです。一目見たら記憶に残るような印象的なサイトが多々あり、見識の幅を広げるのに役立ちます。検索は業種別ででき、競合リサーチなどにも有用です。
9. Siiimple
- 事例の数：1,600以上
- 検索しやすさ：◯
- 更新頻度：△
「Siiimple」はシンプル・ミニマムなデザインに特化したギャラリーです。更新頻度はあまり高くないものの、最初からシンプルさに対象を絞って調べられるのは便利ですね。
10. WPデザインギャラリー
- 事例の数：440以上
- 検索しやすさ：◎
- 更新頻度：◯
「WPデザインギャラリー」は、WordPressサイトに特化した珍しいギャラリーです。
サムネイルにポインタを当てるとデザインの解説が表示されます。流し見でも要点をすぐ把握できる点も他のサイトにはない特徴です。
11. Responsive Web Design JP
- 事例の数：5,200以上
- 検索しやすさ：◎
- 更新頻度：◎
「Responsive Web Design JP」は、優れたレスポンシブデザインのサイトを国内外から集めたギャラリーです。色別や業種別のほか、技術仕様ごとに検索できます。
サムネイルにはスマホ、タブレット、PCの表示が一覧で並びます。それぞれのデバイスでどう表示されるのか一目でチェックできて便利です。
12. AGT smartphone design gallery
- 事例の数：690以上
- 検索しやすさ：△
- 更新頻度：◯
「AGT smartphone design gallery」も、レスポンシブ特化のギャラリーです。
サムネイルをクリックするとサイト全体をスクショで確認できます。わざわざ遷移する必要がないので便利です。
13. LAND-book
- 事例の数：非公開
- 検索しやすさ：△
- 更新頻度：◯
「LAND-book」は、海外サイトがまとめられているギャラリーサイトです。検索条件をプルダウンで選択して絞り込む形式のため、自社が求めているデザインのイメージがある程度固まっている場合におすすめです。
ユーザー登録をすることで、一部のサイトデザインを購入できるサービスも利用可能です。
14. iPhoneデザインボックス
- 事例の数：540以上
- 検索しやすさ：◯
- 更新頻度：△
「iPhoneデザインボックス」は、iPhoneでの表示をメインに扱うギャラリーです。
更新頻度はそれほど高くないものの、各事例はじっくり吟味された上で掲載されており、スマホサイト制作で参考になるポイントは多いでしょう。
15. LPアーカイブ
- 事例の数：41,000以上
- 検索しやすさ：◎
- 更新頻度：◎
「LPアーカイブ」は、LPに特化したギャラリーサイトです。事例の数が豊富で、検索機能も充実しており、目的に合った参考LPを簡単に見つけられるでしょう。とにかく量がそろっているため、多種多様なLPを見てインスピレーションを得たい方におすすめです。
16. LPadvance
- 事例の数：1,500以上
- 検索しやすさ：◯
- 更新頻度：◎
「LPadvance」もLPに特化したギャラリーサイトで、制作者の目線で参考にしやすい事例を集めています。
js技術やアニメgifのLPも掲載しているため、LPデザインのリサーチ用に幅広く利用できます。
17. 1GUU
- 事例の数：非公開
- 検索しやすさ：◎
- 更新頻度：〇
「1GUU」は、動きのあるWebサイトに特化して紹介しているギャラリーサイトです。各サイトへ遷移することなく、サムネイルでアニメーションを確認できます。
また、世界各国のサイトを国や地域別に検索できる点も特徴。グローバルな事業展開を予定している企業におすすめです。
18. HOVERSTAT.ES
- 事例の数：非公開
- 検索しやすさ：〇
- 更新頻度：△
「HOVERSTAT.ES」は、インタラクティブな表現が採用されているサイトに特化しているギャラリーです。サムネイルにマウスポインタを合わせると、各サイトのアニメーションを確認できます。
独自性の高いWebサイトの事例も多数掲載されているため、他社サイトとの差別化を図りたい事業者様におすすめです。
19. ブブンデザインアーカイブ
- 事例の数：2,500以上
- 検索しやすさ：◯
- 更新頻度：◯
「ブブンデザインアーカイブ」は、見出しやアイコンなど、サイトのパーツごとにアーカイブしたギャラリーです。「全体像は決まったけど、細かいパーツをどうするか迷う……」という時に役立ちます。
20. Elements of Design
- 事例の数：880以上
- 検索しやすさ：△
- 更新頻度：△
「Elements of Design」は、海外サイトの見出しやアイコンなどをパーツごとにまとめたギャラリーです。
更新は長らく止まっていますが、前掲のブブンデザインアーカイブとあわせて「ここだけ調べたい」という時に使ってみてください。
Webデザインのギャラリーサイト比較表
|
サイト名 |
事例の数 |
検索しやすさ |
更新頻度 |
おすすめポイント |
|---|---|---|---|---|
|
2,200以上 |
◎ |
◎ |
更新頻度が高い |
|
|
2,400以上 |
◎ |
◯ |
創造性が高い |
|
|
5,100以上 |
◯ |
◎ |
事例が見やすい |
|
|
7,400以上 |
◎ |
◎ |
オシャレ |
|
|
780以上 |
△ |
△ |
印象に残る |
|
|
2,000以上 |
◯ |
◯ |
注目ポイントがわかる |
|
|
4,800以上 |
◯ |
◎ |
実務重視 |
|
|
1,400以上 |
△ |
◎ |
印象的なサイトが多い |
|
|
1,600以上 |
◯ |
△ |
世界のトレンドが分かる |
|
|
440以上 |
◎ |
◯ |
WordPress特化 |
|
サイト名 |
事例の数 |
検索しやすさ |
更新頻度 |
おすすめポイント |
|---|---|---|---|---|
|
5,200以上 |
◎ |
◎ |
フレームワークごとに検索可能 |
|
|
690以上 |
△ |
◯ |
UI業務向け |
|
|
非公開 |
△ |
◯ |
海外サイトの事例が豊富 |
|
|
540以上 |
◯ |
△ |
iPhone表示特化 |
|
|
41,000以上 |
◎ |
◎ |
膨大な量のLP |
|
|
1,500以上 |
◯ |
◎ |
jsやgifのLPも |
|
|
非公開 |
◎ |
◯ |
動きのあるサイトに特化 |
|
|
非公開 |
◯ |
△ |
インタラクティブな表現に特化 |
|
|
2,500以上 |
◯ |
◯ |
パーツごとの検索が可能 |
|
|
880以上 |
△ |
△ |
海外サイトをパーツごとに紹介 |
2024年のWebサイトデザインのトレンド3選
最後に、各ギャラリーの傾向から見える2024年のWebデザインのトレンドを紹介します。デザインの方向性を検討する際に活用してください。
トレンド1：Webアクセシビリティ
アクセシビリティとは「誰にとっても使いやすい」ことを指します。2024年4月、障害者差別解消法が改正され、民間事業者にも合理的配慮の提供が義務化されました。これに伴い、Webサイトにおいてもアクセシビリティを重視する動きが広がっています。
上記のサイトでは、メニューにテキストとアイコンをセットで掲載し、各メニューの意図が一目で伝わるよう配慮されています。また、各リンクに背景色とコントラストの高いカラーを使用することにより、視認性を高めている点が特徴です。
トレンド2：モバイルファースト
スマホでの表示を前提にWebサイトを構築する「モバイルファースト」と呼ばれる考え方も一般的なものになりつつあります。以前からデバイスの画面サイズに合わせて表示を自動調整するレスポンシブデザインが広く採用されてきましたが、スマホユーザーを想定してWebサイトをデザインする動きにいっそう拍車がかかっているのが特徴です。
上記のサイトに見られるようなデザインは「Bento UI」（弁当箱のように各要素が配置されたUI）とも呼ばれ、グリッド単位でリフローしやすくなっています。これにより、さまざまな画面サイズのモバイル端末に対応できるUIの設計が可能です。
トレンド3：AIを駆使したデザイン
近年はAIを活用したサービスが注目を集めていますが、Webデザインの分野も例外ではありません。上記のサイトでは、AIチャットボットがWebサイト上に小ウィンドウで表示され、会話形式でおすすめ商品がレコメンドされる仕組みになっています。こうしたWeb接客を自動化する仕組みは、今後ますます浸透していくでしょう。
また、Web制作のプロセスにもAIが活用され始めています。ワイヤーフレームやサイト構造、コンテンツ制作などに生成AIが駆使されているケースも少なくありません。人が担う工程と、AIによって効率よく処理できる工程を切り分けていくことが重要です。
目的に合ったギャラリーサイトを積極的に参照しよう
今回はWebサイトデザインの参考になるギャラリーサイト20選と、2024年のトレンドを紹介しました。ギャラリーサイトと一口に言っても、サイトごとに特徴や掲載されているサイトの傾向、検索方法などが異なるため、自社の目的や求めているデザインの傾向に合ったサイトを参照することが大切です。さまざまなWebサイトを参考にしつつ、近年のトレンドを意識したWebデザインを検討してみてください。
