就職せず稼ぐため、娘が学生時代から準備していたこと
- コラム
- フリーランス/個人事業主
- 新卒フリーランス
Webサイトのデザインは、ユーザーを自社の世界観に引き込むために欠かせない要素です。
そこで今回は、Webデザインに役立つギャラリーサイトを集めました。
デザイン性に優れたWebサイトをたくさん見たい方、Webデザインのインスピレーションを得たい方はぜひ参考にしてみてください。
目次
海外のギャラリーサイト
1. MUUUUU.ORG
▲出典：MUUUU.ORG
ギャラリーサイトのなかでもデザイン性が高く、有名なWebサイトを集めています。
非営利目的でおこなっていて、オーソドックスなレイアウトかつ、非常にデザインが優れたサイトを厳選しているのが特徴です。
デザインタイプやサイトのタイプ、色あい、サービスという4つの大きなカテゴリーで分かれていて、さらに細かく70以上のカテゴリからWebサイトを選んで見ることができます。
デザイン性に優れたWebサイトをたくさん見たい方はぜひ参考にしてみてください。
2. AWWWARDS
▲出典：AWWWARDS
優れたデザインのWebサイトを表彰しているギャラリーサイトです。
世界中から投票されたWebサイトをさまざまな項目で、日ごと・週ごと・月ごと・年ごとに採点および投票を行い、順位付けを行なっています。
『AWWWARDS』に掲載されているWebサイトを見れば「今年のWebデザイントレンド」が一目でわかるでしょう。
万人を惹きつける、魅力的なWebサイトを参考にしたい方におすすめです。
3. siteInspire
▲出典：Howells—Studio
ロンドンのデジタルスタジオが運営する、海外のWebデザインを集めているギャラリーサイトです。
掲載されているWebサイトはどれもハイセンスで、参考にしたいものばかり。
ひとつの画面に6つのWebサイトが表示され、余白が十分にあるのでデザインを見比べやすくなっています。
またタグの種類が豊富で、「動画を背景に使っているWebデザイン」「ナビゲーションに凝っているWeb デザイン」など、検索時に細かく指定できるのもおすすめポイントです。
4. WebDesignFile
▲出典：WebDesignFile
海外のWebサイトのみを集めたギャラリーサイトです。
『WebDesignFile』のWebサイトは濃いグレーのみを使用したシンプルなデザインとなっており、このWebサイト自体を参考にしたくなります。
集められているWebサイトは国ごとにタグ付けされており、余計な情報が入っていないシンプルなものばかりです。
5. THE FWA
▲出典：THE FWA
海外のクリエイティブなWebサイトを集めており、『AWWWADS』と並ぶ人気を誇るギャラリーサイト。
数あるWebサイトの中から月間優秀賞や年間優秀賞を選出しているため、海外で人気なWebデザインを参考にしたい時にぴったりです。
『THE FWA』のWebサイトデザインは直線と四角が多く、モノトーンでスタイリッシュな印象を覚えます。
感性が磨かれるような、洗練されたデザインのWebサイトの他に、スマホサイトやアプリのWebデザインも掲載されています。
6. CSS mania
▲出典：CSS mania
海外のWebデザインギャラリーサイトです。
Webサイト作成の参考にするだけでなく、10ドルで自社サイトを掲載することもできるので、海外ユーザーの集客をしたい方にもおすすめ。
緑がベースのやわらかい印象のデザインで、それぞれのWebサイトが見やすくまとまっています。
右下の星マークのボタンを押すと、自分のお気に入りのWebサイトを保存できるのも便利ですね。
7. MinimalExhibit
▲出典：MinimalExhibit
シンプルなデザインのWebサイトを中心に取り揃えているギャラリーサイト。
掲載されているWebサイトにコメントを投稿したり、他のユーザーのコメントを閲覧できるのも特徴です。
ナチュラルで余計なものがなく、見やすいWebデザインを制作したい方はぜひ参考にしてみてください。
8. Siiimple
▲出典：Siiimple
その名の通り、シンプルなWebサイトを集めた海外のギャラリーサイトです。
カテゴリも多く、イラスト系のデザインもあるのでさまざまな場面で参考になります。
9. Flattrendz
▲出典：FLATTRENDZ.COM
フラット&シンプルにこだわったWebデザインを集約しているギャラリーサイトです。
メールアドレスを登録すれば、フラットUIデザインのトレンドがニュースレターで毎週届きます。
近年のトレンドである「フラットUI」を参考にしたい方にぴったりのWebサイトですね。
10. CSSclip
▲出典：CSSclip
『CSSclip』は、参考にしたいWebサイトを「色」で検索できるデザインギャラリーサイト。
掲載されているWebサイトは色使いのセンスが光るおしゃれなものばかりで、パレットから色を選択するだけなのでお気に入りのWebデザインを見つけやすいです。
Webサイトのイメージカラーが決まっている場合はぜひ参考にしてみてください。
11. Best Website Gallery
▲出典：Best Website Gallery
海外のWebデザインを集めたギャラリーサイトです。
見やすさを重視した2カラムレイアウトを特徴としているため、ひとつひとつのWebサイトをしっかりと閲覧できます。
気になったホームページがあれば、矢印ボタンを押すとすぐにリンクできるのも嬉しいポイントですね。
「新しい何かにインスピレーションを与えるようなWebサイト」を参考にしたい方はぜひ訪れてみてください。
12. Media Queries
▲出典：Media Queries
レスポンシブデザインのWebサイトを集めた海外のギャラリーサイトです。
PC表示からスマホ表示まで、多くのバージョンを参考にできます。
13. AIGA Eye on Design
▲出典：AIGA Eye on Design
Awwwardsなどのギャラリーサイトからも見られるように、デザイナーは流行のデザインにこだわる傾向があります。熟練したデザイナーの作品を分析することも重要ですが、たまにはフレッシュなデザイナーの作品からも刺激を得てみましょう。
『AIGA Eye on Design』は他のWebサイト・サービスとは異なり、若手デザイナーの作品が多く掲載されています。また人気のデザイナーの場合、連絡をとっても返事がこない場合もありますが、AIGA Eye on Designは比較的返信率が高い傾向にあります。きっと良い出会いに繋がるはずです。
国内のギャラリーサイト
14. bookma!
▲出典：bookma!
デザインの参考になるWebサイトを募集し、厳正な審査を通過した作品のみを掲載しているギャラリーサイトです。
色やテイスト（シンプル・ナチュラル・リッチなど）で検索できるので、直感的な操作ができます。
サムネイルの表示形式をカスタマイズできるのも特徴です。
15. WebDesignClip
▲出典：WebDesignClip
アイデアや技術面でクリエイティビティに富んだ、国内のWebデザインを集約しているギャラリーサイトです。
お気に入りのWebサイトを「MyClip」に登録できたり、各事例の詳細ページでデザインテイストの近いサイトが表示されたりと操作性に優れています。
検討しているサイトの方向性がある程度決まっている方はぜひ参考にしてみてください。
16. Responsive Web Design JP
▲出典：Responsive Web Design JP
国内のレスポンシブデザインに特化したWebサイトを掲載しています。
『Responsive Web Design JP』のWebサイトもレスポンシブデザインなため、すっきりと見やすいのが特徴。
複数の画面サイズで表示した時のサムネイルを、ひと目で確認したい方におすすめのギャラリーサイトです。
17. I/O3000
▲出典：I/O3000
国内／海外を問わず、Webデザインの参考になるサイトを集約しているギャラリーサイトです。
オートスクロールが実装されていて、ストレスを感じにくいWebデザインになっています。
シャッフルボタンを押せば全サイトの中からランダムでWebページを表示できるので、デザインに行き詰まった時に参考にしてみてください。
18. S5-Style
▲出典：S5-Style
国内外のデザイントレンドを押さえたギャラリーサイトです。
サイトのタイプや色、使用されている技術など6つのカテゴリから、それぞれOR/AND検索ができるので参考にしたいWebサイトが見つけやすいです。
お気に入りを一時保存できる機能が備わっているのも嬉しいポイント。
19. 81-web.com
▲出典：81-web.com
国内のクリエイティブなWebサイトデザインを集めたギャラリーサイトです。
気に入ったWebデザインをお気に入り登録できたり、実際にWebサイトを訪れなくてもプレビュー表示ができたりと操作性に優れています。
業種や色、タグなどで参考にしたいWebデザインを簡単に見つけられるのも特徴です。
20. AGT smartphone design gallery
▲出典：AGT smartphone design gallery
『AGT smartphone design gallery』は、国内外のモバイルデザインを集めたギャラリーサイトです。
スマートフォンで表示したときに、見やすく使いやすいWebデザインを作成したい方はぜひ参考にしてみてください。
21. Design-trigger
▲出典：Design-trigger
国内のWebデザインリンク集・Webデザインのギャラリーサイトです。
業界・カラー・テイスト・レイアウトなど、多数の検索カテゴリから選ぶので、参考にしたいWebデザインがすぐに見つかるでしょう。
22. ズロック
▲出典：ズロック
『ズロック』は、管理人のゴトウさんが、「おもしろいな～」と思ったWebサイトを国内／海外問わず掲載しているギャラリーサイトです。
デザイン性に優れた2700以上ものWebサイトが厳選されているので、参考にしたいWebデザインがきっと見つかるでしょう。
23. CHOICELY
▲出典：CHOICELY
充実したコンテンツや見やすいレイアウトなど、コミュニケーション設計に優れたWebサイトを多数掲載しているギャラリーサイトです。
Webデザインひとつひとつに丁寧な説明があるので、参考にしやすいですね。
24. WPデザインギャラリー
▲出典：WPデザインギャラリー
WordPressを使用したWebデザインを、国内／海外問わず掲載しているギャラリーサイトです。
ひとつひとつのWebデザインにされているコメントも閲覧できます。
WordPressでWebサイトの構築を考えている方はぜひ参考にしてみてください。
LP（ランディングページ）に特化したギャラリーサイト
25. LP幹事
▲出典：LP幹事
2500件以上のランディングページデザインが検索可能な『LP幹事』。PCデザインとスマホデザインがどちらも掲載されているのが嬉しい点です。
「業界」「色」「イメージ」などから検索可能で、検索可能な業界はなんと48種類。比較的よく検索される業界から、「お寺・神社」などのマイナーな業界まで、多様なホームページを参照することができます。
さまざまな方法でLPのデザインを探すことができるため、漠然としたイメージで参考となるLPを探すときにも役立ちそう。
各LPをクリックすると、そのキャッチコピーが表示されます。作成予定のLPについて同業他社がどのようなキャッチコピーで展開しているのかが分かるので、コピーのアイデア出しや競合分析に利用することが出来るでしょう。
26. Land-book
▲出典：Land-book
海外のランディングページやポートフォリオサイト、ブログを集約したギャラリーサイトです。
キーワード検索や、新着順、人気順の並べ替えができるので参考にしたいWebサイトがすぐに見つかるでしょう。
アカウント登録をすると気に入ったWebサイトを「My Favs」というリストに保存できるのも便利ですね。
「ランディングページをたくさん見て参考にしたい！」という方におすすめです。
27. LPアーカイブ
▲出典：LPアーカイブ
国内のランディングページのみを掲載しているギャラリーサイトです。
縦長のWebデザインになっているため、全体像が掴みやすくなっています。
ランディングページをたくさん参考にしたい方におすすめです。
28. lapa
▲出典：lapa
LPを集めたギャラリーサイト。
48のカテゴリーからLPを検索できるので、作りたいWebサイトに近い種類のページを参考にしやすく、LPづくりに活かしやすい構成が魅力です。
ECサイトに特化したギャラリーサイト
29. CartFrenzy
▲出典：CartFrenzy
ECサイトに特化した海外のWebデザイン参考サイト。
「ワイン」や「DIY」、「ペット関連」、「オーガニック」といった豊富なカテゴリーと、シンプルなUIが特徴です。
掲載数も500以上と多いですが、タグ検索やフリーワード検索で参考にしたいWebサイトを簡単に絞れます。
ショッピングサイトの制作に携わる方におすすめのギャラリーサイトです。
ポートフォリオに特化したギャラリーサイト
30. FOLIO FOCUS
▲出典：FOLIO FOCUS
ポートフォリオのみに特化してまとめられたWebデザインギャラリーです。
イラスト、写真、グラフィックなどを使った独創的な海外のポートフォリオサイトをたくさん見れます。
クリエイターならではの個性豊かなWebデザインを参考にしたい方におすすめです。
Webデザインの参考になるサービス／サイト
ここまで、Webデザインの参考になるギャラリーサイトをご紹介してきましたが、ほかにもデザインのインスピレーションに役立つサービスやサイトはあります。
以下では、Webデザインの参考になるサービスやサイトをご紹介します。ギャラリーサイトを見るだけでは物足りない方は、ぜひ以下のサイトも見て、サービスを活用してみてください。
31. Square
▲出典：Square
国際的なWebデザインコンテストに参加するためには、念入りな準備やある程度の資金が必要でハードルが高いもの。こうしたコンテストへの参加を躊躇しているなら、まずは『Square』をのぞいてみましょう。
『Square』のコンテストは、BehanceのUIゲームからはじまりました。参加者はグリッドテンプレートをダウンロードし、ページデザインを作成して、メールでSquareに送付します。その後作品が公開され、フィードバックがもらえるという仕組みです。
ルールがわかりやすく、参加費も必要ありません。デザインの幅を広げたい方はぜひ挑戦してみてください。
32. Gomoodboard
▲出典：Gomoodboard
めずらしいフォントや雑誌のレイアウト、SNSで流れたきたイラストや同僚の作品など、デザイナーは日々さまざまなものからインスピレーションを得ています。しかし、参考にしたい作品を頭の中に留めておくだけでは、少し不安が残ります。
そんな時に役立つのが『Gomoodboard』のサービスです。『Gomoodboard』は雑誌の切り抜きを集めるように、インスピレーションを得た作品をひとつの場所に保存できます。Webページや本の装丁、写真などを集めて、オリジナルのボードを作ってみましょう。ボードの数は無制限で、アカウント登録の必要もありません。
33. Behance
▲出典：Behance
PDFやPhotoshopでお馴染みのAdobeが運営するクリエイター向けSNS。Webデザインだけでなく、多くのクリエイターが自らのデザインを公開しています。
作品の母数が多いので、画面をスクロールするだけでもさまざまなジャンルのクリエイティブ作品に触れることができます。
Webデザイン以外のデザインからもインスピレーションを得たい人におすすめです。
34. Uplabs
▲出典：Uplabs
DribbbleやBehanceには、実際のWebサイトやアプリには使用されていない作品も掲載されています。こうした作品も魅力的ではありますが、あくまで完成品を参考にしたいなら『Uplabs』がおすすめです。
『Uplabs』は完成品に特化したデザインギャラリーであり、ユーザーはオープンコード、レイアウト、アニメーションおよびWebページを共有できます。ほとんどのオプションは自由に使用可能で、ポートフォリオを作成したい方には間違いなく参考になるWebサイトでしょう。
35. Freebbble
▲出典：Freebbble
Dribbbleはとても参考になるWebサイトですが、何千もの作品の中からピンとくる作品を探すのはなかなか大変ですよね。
『Freebbble』はこうした問題を解決するために、Dribbbleに投稿された無料の作品を「イラスト」「ロゴ」「フォント」などのカテゴリー別に分類しています。作品の検索機能もついており、目的の作品を瞬時に探し出せます。
36. UI8
▲出典：UI8
BehanceやDribbble、Instagramなどを通じてデザインの仕事を得るのは、簡単なことではありません。インターネットを通じて仕事を得たいなら、『UI8』を使ってみるのも手です。
ここではイラスト、ロゴ、フォント、アプリ、Webサイトなどのグラフィカルコンテンツの販売が可能です。作品が購入された場合、作者は報酬の90%を受け取ることができます。作品を販売するだけでなく、他のデザイナーの作品を見るだけでも勉強になるはずです。
37. Meetup
▲出典：Meetup
Web上で情報を探すのに飽きたら、実際に人と会ってみましょう。『Meetup』を使えば、いつ、どこでカンファレンスが開催されているかひと目でわかります。カンファレンスには初心者から専門家まで幅広い層が参加できるため、新たな知識を得る良い機会になるはずです。
オンラインで行われるカンファレンス（ウェブセミナー）もあり、直接足を運べなくても参加可能です。世界中の情報が掲載されているので、旅先で参加するのも良いですね。
38. waaark
▲出典：waaark
モジュラーデザインで設計されたWebサイト。載せる情報を必要なものだけに厳選しているので、すっきりと見栄えがよく、余計なストレスを感じることなく欲しい情報にアクセスできます。
ページを移動するとき、画面がカラフルな波で覆われるアニメーションは、ユーザーの興味を引くユニークなデザイン。「飛び道具」の一つとして参考にできそうです。
39. New Acton
▲出典：New Acton
『New Acton』は、線が細くてあたたかさが溢れる独特なイラストを掲載しているWebサイトです。単にイラストがふんだんに使われているだけでなく、各イラストが大きく動くのが特徴。
このサイトを見れば、イラストを掲載する際のアイデアが膨らみそうです。
40. Dreamer Stories
▲出典：Dreamer Stories
DACA（若年期に入国した不法移民の若者たちへの強制退去処分を猶予する米国の移民政策）によってアメリカからの強制退去を猶予された若者たちの声がまとめられたWebサイト。
一見すると単なるユニークな似顔絵のあるサイトですが、彼らの言葉に目を通すと、背景にある重いストーリーを考えさせられます。シリアスな事実を多くの人に知ってもらうための工夫が凝らされており、学ぶところが多いサイトです。
41. INSPIRATIONGRID
▲出典：INSPIRATIONGRID
世界中の優秀なクリエイターの情報と、プロダクトを集めて紹介しているWebサイト。幻想的なグラフィックデザインやアート、イラスト、幾何学模様などさまざまなコンテンツを見られます。
Webデザインの参考になるイラストを探したり、Webサイトのコンセプトイメージを探したりできます。
42. WIZARDING WORLD
▲出典：WIZARDING WORLD
世界的に有名なJ・K・ローリングの傑作『ハリー・ポッター』『ファンタスティック・ビースト』に関するさまざまな情報、コンテンツを集めているのが『WIZARDING WORLD』というサイトです。
サイトに飛ぶと、サイト全体が同作品の世界観で統一されており、ファンにはたまらないつくりになっています。ファンに向けた凝った演出は、ブランドサイトのデザインなどで参考にできるでしょう。
43. wellmedicated
▲出典：wellmedicated
複雑な数字やデータをWebサイトに表示しても、パッと見て理解できれば離脱率は跳ね上がらないものです。
wellmedicatedには、数字や情報をわかりやすい図で表現したインフォグラフィックがたくさん載っています。専門的な情報を初心者向けに発信するWebサイトなどをつくる際、役に立つ場面も多いでしょう。
44. Daily Infographic
▲出典：Daily Infographic
上記のインフォグラフィックは、それぞれ理想の仕事をイラストにしたものです。赤いボックスで分かれているので、誰が何の仕事をしているかすぐにわかりますね。
Daily Infographicは、数字が多くないインフォグラフィックを扱っています。イラストベースなので初心者でも自分のデザインに活かしやすいでしょう。
45. GOOD
▲出典：GOOD
『GOOD』はインフォグラフィックを活かしたデザインが実際に使われている記事を読めるサイトです。
実際に読んでみると、文章だけではよくわからない記事も、インフォグラフィックをつけるだけで格段に読みやすくなることがわかります。インフォグラフィックの効果を実感したい場合に参考にしてみましょう。
46. visually
▲出典：visually
マーケターのためのビジュアルコンテンツ作成を手掛けるクリエイター集団『visually』のサイトは、洗練されたデザインが魅力的。図や画像はもちろん、インフォグラフィックを駆使した動画も紹介されています。
カラフルで広告や宣伝に使えそうなインフォグラフィックも数多く揃っているため、図やイラストを駆使してマーケティング系のサイトをつくりたい方は参考にしてみましょう。
47. icon54
▲出典：icon54
『icon54』は、アイコンを販売している海外の会社です。サイトのつくりから「アイコンを販売している」ということすぐにわかり、シンプルなデザインの実践例として参考になります。
ただ、シンプルすぎるデザインを採用すると、自社の個性を発揮できない可能性もあるため、ユーザーのニーズとうまくすり合わせていく必要がありそうです。
48. MSDS Studio
▲出典：MSDS Studio
デザイン制作チーム『MSDS Studio』のサイトは、独創的なデザインが特徴です。
アルファベットのなかの幾何学模様が、Webサイトを開くたびに変わるので、毎回開くのが楽しみになります。タイポグラフィーデザインの参考になるでしょう。
49. CaavaDesign
▲出典：CaavaDesign
フォントのデザインだけではなく、背景や文字の色も考慮してデザインしているタイポグラフィーの参考サイト。
手描きを再現したタイポグラフィーやペンで塗ったようなカジュアルなタイポグラフィーなど、とにかくおしゃれなデザインが多いのが特徴です。
50. Upperquad
▲出典：Upperquad
こちらもクリエイターチームのサイト。
サイトにアクセスすると、いきなり動き出すトップページにびっくりする方も多いでしょう。しかし煩わしい動き方をするわけではなく、センスのあるデザインといえます。トップページのデザインに悩んでいる方にはぜひ参考にしていただきたいです。
51. ANIMAGRAFES
▲出典：ANIMAGRAFES
ジェットエンジンが動く仕組みを、動くアニメーションで表現している演出が面白いサイトです。
視覚で情報を得ることで、ユーザーはジェットエンジンの仕組みを苦労することなく理解できます。文章だけではわかりにくい説明を多用する方はぜひ参考にしてみては？
52. GIPHY
▲出典：GIPHY
GIF画像をまとめているWebサイト。リアルな動画だけでなく、ロゴのアニメーションやシネマグラフ、アニメーションタイポグラフィーなど幅広く取り揃えています。
サイトでGIF画像を活用したい方は学びが多いサイトでしょう。
おわりに
Webデザインの参考になるようなギャラリーサイトやサービスは見つかりましたか？
新たなインスピレーションを獲得するのにぜひ役立ててみてください。
（執筆：Emily 編集：Workship MAGAZINE編集部）
おしゃれなWebデザインのポートフォリオサイト36選。現役デザイナーが厳選！
Workship MAGAZINE
Webデザインスクールおすすめ15選【2024年版】
Workship MAGAZINE
フリーランスデザイナーに必要なサイトとポートフォリオサイトの作り方
Workship MAGAZINE
人気のフリーランス・副業求人
【リモートワークOK】大手からスタートアップまで、幅広い領域でユーザー体験を担うデザイナー/アートディレクター募集！
- #副業OK
- #新規事業
- #スタートアップ
- #急募
- #長期案件
- #スポット案件（1ヶ月）
- #フルリモートOK
職種：デザイナー
時給：2,500円 〜 4,000円
働き方：どちらでも可
エリア：東京都
【リモート可】【子育てママ歓迎】IoTサービスで世界中の家族を幸せに。アプリデザイナー(スマホ・タブレット) /Webデザイナー募集
- #スタートアップ
職種：デザイナー
時給：2,000円 〜
働き方：どちらでも可
エリア：東京都
【リモートOK】アート・エンタメ×ITでイノベーションを！新規事業のデザイナー募集！
- #スタートアップ
- #土日週末OK
- #急募
- #長期案件
- #正社員募集
- #フルリモートOK
職種：デザイナー
時給：5,000円 〜 8,000円
働き方：どちらでも可
エリア：東京都
Workship MAGAZINE編集部 創設・最古参メンバー。ITビジネス系、フリーランス系の記事を担当。
