Webデザインの参考になるサイト37選|流行りのデザインの動向についても解説

CXBOTTLE編集部
22

Webデザインの幅を広げる方法とは


Webサイトを作る上でWebデザインのスキルは大変重要です。デザインによってWebサイトの見やすさ、企業やサービス内容の伝わりやすさ、ユニークさなど、見る人に与える印象が大きく変わります。

多種多様なサイトデザインを研究することは、自分のWebデザインの幅を広げることに繋がります。Webサイトデザインの事例やトレンド動向を参考に、企業やサービス内容にマッチしたデザインの動向を探ってみてください。

自分のデザイン力に自信を持てるようにするには



自分のデザイン力に自信を持つには、どうすればよいのでしょうか。デザイン力は後天的に身につけられます。その方法の一つが、たくさんのサイトデザインを研究することです。

どうしてこのデザインは見やすいのか、印象に残りやすいのか、配置や配色、テキストデザインにこだわりはあるのか等、Webサイトの制作側の目線に立ってWebサイトを研究することが大切です。そうすれば自分のデザインにも幅が生まれ、デザイン力に磨きがかかるでしょう。

Webデザインの参考になるサイト37選



ここで、Webデザインの参考になるサイトを紹介します。パソコン向けやスマートフォン向けなど、様々なWebサイトをキュレーションしており、多様なWebサイトを研究できるサイトばかりです。

1:Dejam

「Dejam」は、LP・Webデザインの豊富なデザインデータベースを無料で公開している、参考事例サイトです。LPだけでなくWebサイトのデザインを画面ごとに閲覧することが可能できるのが大きな特徴です。

また有料版を用いると該当サイトの過去のデザインも見ることができるようになります。

https://leango.co.jp/dejam/

2:AGT

AGT smartphone design galleryは、スマートフォン向けのWebサイトギャラリーです。スマートフォンでスクロールしたときのデザイン感も見ることができるため、参考になります。

3:Awwwards

Awwwardsは、インターネット上の優れたWebデザインをアワード形式で紹介しているサイトです。色々な国のWebサイトのデザインを閲覧できるだけでなく、気に入ったWebサイトに投票できる仕組みもあり、見ていて飽きないサイトです。

4:bookma!

bookma!は、感性を刺激するWebデザインギャラリーです。PC用のサイトとスマートフォン用のサイトが並べて表示されているので、大変見やすくなっています。

ポップなサイトからユニークなサイト、シンプルで分かりやすいサイトまで、幅広い企業Webサイトのデザインを楽しめます。

5:cms design

cms designは、cms(コンテンツマネジメントシステム)で構築されたウェブデザインギャラリーサイトです。企業サイトを中心に、それぞれのサイトのトップページを閲覧できます。業界、色調などのカテゴリーごとに検索可能です。

6:CSSDesignAwards

WebデザインのアワードプラットフォームであるCSSDesignAwardsでは、ノミネート作品や受賞作品を閲覧することができます。

海外からの受賞作品のUI・UXでの評価ポイントも閲覧できるので、個人の主観だけでなく第三者から見たサイトの印象も参考にできます。

7:CSSREEL

CSSREELは約1万件以上のWebサイトをプラットフォーム上で閲覧できるサイトです。国内、国外の幅広いWebサイトを取り扱っており、カテゴリー別で検索もできます。

8:Digital Design Award

Digital Design Awardはイタリアの、Webサイトデザインアワードのサイトです。海外のWebサイトのみになりますが、ポップなイラスト調からシックなデザインまで幅広いWebサイトや動画も見ることができます。

9:81-web.com

81-web.comは、日本国内のサイトのみをピックアップして掲載している、ギャラリー&リンク集です。

国内の企業やサービス、レストランのWebサイトを集めているので、自身の所属する企業や取り扱うサービス、製品に直結するイメージが浮かびやすいでしょう。

10:Flat design gallery

Flat design galleryはフラットなUIスタイルと、トレンドを取り入れたデザインを追求することを目指した掲載サイトです。国内、国外のWebサイトを取り扱っており、ライク表示があるため人気のあるサイトがひと目で分かります。

11:Good Web Design

Good Web DesignはWebデザイナー・コーダー・エンジニアのために、良質なWebサイトを紹介するギャラリーです。

業界別にカテゴリー分けされているため、業界ごとのトレンドやトーン&マナーを把握することができます。ピンタレストと連動しており、ピンタレスト内で気に入ったイメージの保存が可能です。

12:HOVERSTAT.ES

HOVERSTAT.ESは海外のWebデザインをキュレーションしているサイトです。

個性的でユニークな、アート感の強いサイトデザインが多く集められています。

13:I/O 3000

I/O 3000は国内外を問わずWeb制作の参考になるサイトデザインを、企業サイトメインで掲載するギャラリーサイトです。カラー・年代別で絞って検索できるので、企業や商品のトーン&マナー、トレンドに合わせた参考サイトを見つけることができます。

14:イケサイ

イケサイは、Webサイト、制作会社、スクールまで掲載しているサイトです。Webデザインに役立つサイトやクールなサイト、かっこいいサイト、おしゃれなサイトを掲載しています。

サイトの種類は、企業サイトから特設、行政まで多様で、カテゴリー検索が可能です。

15:iPhoneデザインボックス

iPhoneデザインボックスは、スマートフォン専門のWebデザインの参考サイトです。

カテゴリーは業界やサービスジャンルだけでなく、かわいい、カラフル、女性向けなどのワードでも検索できるので、サービス対象者に合ったより具体的なスマートフォン向けWebサイトが見つかります。

16:Landingfolio

WebサイトキュレーションサイトのLandingfolioでは、パソコン用とスマートフォン用の画面をアイコンで切り替えることができます。

カテゴリーと色で同時にフィルターがかけられ、色はカラーコードによって検索が可能です。デザインソフトの色彩イメージと連動させた参考サイトを探せます。

17:LP advance

LP advanceはランディングページ制作に関わる人たちのための参考サイトです。

カテゴリーや色だけでなく、メインビジュアルの被写体でも検索できます。

ランディングページを制作するのにぴったりの参考サイトです。

18:LPアーカイブ

LPアーカイブは、リスティング広告やアドネットワークなどの広告をクリックした際に表示されるランディングページや、クオリティが高く見やすいランディングページを集めたサイトです。

スマートフォン画面で一覧表示されていますが、クリックするとサイトに飛ぶことができます。それぞれのカテゴリーの掲載数が約180〜4500件あり、多くのサイトを参考にできます。

19:MUUUUU.ORG

MUUUUU.ORGは、現場レベルでデザイナーが参考にしやすいWebデザインポータルサイトです。

クオリティが高く、縦に長いWebサイトを中心に掲載されています。MUUUUU.ORGのサイト自体が見やすく、使いやすさを意識して設計されています。

20:Responsive Web Design JP

Responsive Web Design JPは、日本国内のレスポンシブWebデザインのサイトを集めたリンク集です。

レスポンシブWebデザインとは、パソコンやスマートフォンなどWebサイトを利用する機器によって、分かりやすく、見やすく効果的に「切り替え」をする手法です。このサイトでも各機器によって見えやすいレスポンシブ対応がされています。

21:S5-Style

S5-StyleはハイクオリティなWebサイトのリンク集です。多様なサービス・クリエティブ手法・カラー配色・デザインテクニック・タイプ(ECサイトや企業サイトなど)で絞り込み検索ができます。

お気に入りサイトの保存機能もあるので、保存したリストを比べて検証することも可能です。

22:SANKOU!

SANKOU!は、多様なカテゴリーを持つ日本国内のスマートフォンサイトを掲載しているサイトです。サイトの運用方法やサービス内容も掲載されています。

シンプル、ポップ、リッチ、ゴージャス、迫力といった「雰囲気」や、日本ならではの「春夏秋冬」でも検索が可能です。

23:Siiimple

Siiimpleはミニマムで美しいWebサイトを厳選したギャラリーサイトです。

お気に入りボタンがあるので、自身のお気に入りリストを閲覧したり、それぞれのサイトがどれだけお気に入りを獲得しているかを確認したりできます。

24:Siteinspire

Siteinspireは、スタイル、業界、サービス内容、プラットフォーム別に検索が可能で、欧米やオセアニアを中心に世界各国のWebサイト制作会社別で絞り込むこともできます。

随時最新サイトもアップされており、世界のトレンドを取り入れたい方にもおすすめです。

25:SiteSee

SiteSeeは美しくモダンなWebサイトのキュレーションサイトです。サイト自体がシンプルで見やすく、主にサイト用途と色別に検索ができます。

ピンタレストとも連動して保存できる機能もあり、Webデザインの参考にするのに便利なサイトです。

26:straightline bookmark

straightline bookmarkは、国内・国外のサイトを約26,000件掲載しており、色や言語、サイト用途で検索が可能です。

またWebデザインの配置パターンによって検索ができるので、ある程度大枠のデザインイメージが固まっている方が、参考にしやすいサイトと言えます。

27:Tau Magazine

Tau Magazineでは、デザインや機能、構造など参考になりそうな国内のWebサイトを随時紹介しています。管理人のTau氏が個人で運営しているサイトです。

約1,400以上のサイトの中からカテゴリーやカラー、雰囲気での検索ができます。また、日本国内の幅広いサイトを掲載しているので、参考にしやすいでしょう。

28:The Best Designs

世界中のデザイナーが、最新のトレンドを参考にするために訪れるというThe Best Designsは、実際にデザイナーやデザインの制作交渉の参考にも利用されています。
デザイナーで検索すれば出身国と予算が出てきます。制作側として制作交渉するときの、一つの指標として参考になるサイトでしょう。

29:The FWA

The FWAは、イノベーションのショーケースであることをミッションとする、アワード形式のWebサイトキュレーションサイトです。

世界各国で高ポイントを獲得したサイトが掲載されています。カテゴリーなどに縛られず、イノベーティブなサイトを発見したい方におすすめのサイトです。

30:URAGAWA

URAGAWAは、クリエイティブカンパニーとクリエイター、クライアントの関係を構築していくことを目的としたデータベースです。

業界やサイトタイプ、特徴、カラーだけでなく、業界・サイトタイプと制作会社をマッチングさせて検索できます。他社に依頼する際には、大変便利で使い勝手のよいサイトと言えます。

また、Webデザインへの考え方やキャリア、デザインの裏側、企業ストーリーを記事で掲載しており、サイトデザインだけでなく、思考術も参考にできるサイトです。

31:Web Design Clip

Web Design Clipでは、Webデザイン制作でのWebデザイナー・開発者のインスピレーションが湧くような魅力的なWebサイトや、アイデア・技術に優れたWebデザインを約3,000サイト掲載しています。

日本国内のWebデザイン、海外のWebデザイン、ランディングページのWebデザイン、スマホサイト/レスポンシブWebデザインの、4つのコンテンツに分かれています。レイアウトごとの検索も可能です。

32:WPデザインギャラリー

WPデザインギャラリーは、CMS、WordPressを利用した日本国内のサイトを収集しているギャラリーサイトです。

色、カテゴリー、コンテンツ、雰囲気レイアウトに沿って検索が可能で、各サイトに管理者のコメントが付いています。

33:カラーミーショップデザインギャラリー

カラーミーショップデザインギャラリーは、国内のネットショップ作成サービス、カラーショップで制作されたECサイトを集めたWebサイトギャラリーです。

ネットショップの事例を集めているサイトのため、ECサイトやネットショップ制作の参考になるほか、テンプレート集から作成された比較的シンプルなサイトのため、Webデザイン初心者も作成しやすいデザインが見つかるでしょう。


34:ブブンデザインアーカイブ

ブブンデザインアーカイブは、WebデザインのためにWebサイトのパーツをアーカイブしている見本集です。タイトルロゴや、Webサイトの全ページに共通して表示するメニューバーである「グローバルナビゲーション」、メインビジュアルやサイドメニューなど、Webサイトデザインのパーツごとにカテゴリーが分かれています。

それぞれのコンテンツをフォトショップやイラストレーターにドラッグして、自身で制作したWebサイトと比較してみるとよいでしょう。

35:マネるデザイン研究所

マネるデザイン研究所は、デザインを勉強中の方、デザインを迷っている方におすすめのサイトです。

デザインの勉強においても、トレースは有効な学習法として知られていることから、このサイトではサイトごとにマネしたいポイント・応用できそうな場面・懸念点が解説されています。

図解付きで分かりやすく説明されているため、Webデザインのための参考書としても活用できるサイトでしょう。

36:現代デザイン

現代デザインでは、技術面やデザイン性に優れたWebサイトのトップページと中面ページを掲載しています。

カテゴリーは、イベント・コンサート、おもちゃ・ゲーム、ホテル・宿泊施設など多岐にわたり、色彩イメージでも絞り込みが可能です。Detailをクリックしサイトを閲覧すれば類似サイトも出てきますので、イメージに合ったサイトが探しやすいでしょう。

37:1GUU

1GUUは、国内外問わずシンプルなサイトからインタラクティブなサイトまで、Webデザインの参考となる様々なサンプルを集めたサイトです。動きに特徴のあるサイトには、パソコン版のみサムネイルにアニメーションを設置しています。

最近は様々な動きをつけたWebサイトが多くなってきており、静止画のサムネイルだけでは実際のサイトのイメージと大きく異なることがあります。実際にPCで1GUUサイトを閲覧すると、ひと目で動きのあるサイトが分かり、興味を惹かれるでしょう。

流行りのサイトデザインの動向3つ



ここまでWebデザインの参考になるキュレーションサイトや、ギャラリーサイトをご紹介しました。ここからは、流行りのサイトに見られるデザインの動向を3つご紹介します。

温かみのあるハンドライティング風デザイン、シックなダークモードデザイン、おしゃれに崩すブロークン グリッド レイアウトデザインの順に、よく見られているWebサイトに共通する特徴を挙げていきます。

1:温かみのあるハンドライティング風デザイン

ハンドライティング風デザインとは、手書き風デザインのことです。手書き風デザインの中には、タイトルや一部のテキストコンテンツなど「文字」を手書き風にするデザイン、手書き風の「イラスト」をメインにするデザイン、その両方を組み合わせるデザインがあります。

文字を手書き風にするデザインでは、写真と組み合わせて使われる傾向があります。イラストを手書き風にするデザインでは、線画やポートレート調のような、シンプルでおしゃれなデザインが好まれるのが最近の傾向です。

文字やイラスト、またはその両方をハンドライティング調にすることで、温かみのある親しみやすいデザインになります。女性向けの商品、イベントやカフェ、子ども向け商品に多く見られます。

近年ではジェンダーレスな商品やサービスにも、ハンドライティングデザインが活用されています。

2:シックなダークモードデザイン

ダークモードデザインとは、背景を黒やグレーなどのダークカラーにして、文字やアイコンを白や明るい色の配色にするデザインのことです。ダークモードデザインを取り入れると、シックでスタイリッシュな印象を与えることができます。

特に、背景を黒にすることでラグジュアリー感が高まります。そのため、他の類似商品やサービスと比較して価格帯の高いものや、シックでラグジュアリー感・特別感をアピールしたいものに使用すると、差別化できて効果的でしょう。

一方で、全体的に暗い印象になってしまう恐れもあるので、テキストコンテンツや写真のデザインを際立たせる工夫が必要です。

3:おしゃれに崩すブロークン グリッド レイアウトデザイン

ブロークン グリッド レイアウトデザインとは、直線や四角形を規則通り並べるのではなく、あえてずらしたり重ねたりはみ出させたりするデザインのことです。

規則的なデザインは見やすい一方で、単調で印象には残らない恐れがあります。そこで見ている人の視線を惹きつけ、印象的なデザインを作り出すブロークン グリッド レイアウトデザインがWebデザインでも使われるようになりました。

ブロークン グリッド レイアウトデザインは、「重ねる」と「はみ出す・外す」の2つの手法で再現できます。

単純に画像やテキストを並べるより、配置をブロークン グリッド レイアウトデザインに変えるだけで、おしゃれ感やトレンド感が出るでしょう。


Webデザインを始める前に運営するサイトの目的を明確にしよう


Webデザインと一口に言ってもその種類は多種多様で、配色やレイアウト一つで見る人へ与える印象がガラリと変わります。
参考サイトにも様々なデザインがありますので、研究する内に自身のデザインにブレが生じることもあるでしょう。

Webサイトを誰に届けたいのか、サイト上で伝えたい企業や商品、サービスへの想い・価値観・ブランディングを、まずはしっかり明確にしましょう。

その上で、キュレーションサイトやギャラリーサイトのWebサイトを参考にしてみてください。絞り込み検索機能を設けたサイトが多くありますので、想いや価値観に沿った配色やレイアウト、雰囲気をイメージしながら検索されることをおすすめします。

企業や商品の想いを、メッセージとして届けられるWebデザインを目指しましょう。

LPやWebデザインを効率的に検索するには

たくさんのサイトを検索して参考になるデザインを探すのは時間がかかって大変です。
そこでおすすめなのが、LeanGoの提供する「Dejam」です。

https://leango.co.jp/dejam/
「Dejam」は、豊富なデザインデータベースを無料で公開している、LP・Webデザインの参考事例サイトです。
業種や画面名などでデザインを検索することができます。
デザインを検索したい方は活用してみましょう。

記事スコア: 22

CXBOTTLE編集部の他の記事も読む

  • LPとは?運用のメリットとデメリット・特徴などを細かく解説!

    LPとはLPとは、ランディングページのことを指しています。ランディングページとは、検索結果や広告からの訪問者が最初にアクセスするページのことを言います。ちなみに、着地する(land)という意味からこの名前がついています。LPには、広義の意味合いと狭義の意味合い 続きを読む

  • プロセスマネジメントの意味|導入する利点や結果を出すコツとは?

    プロセスマネジメントの意味「プロセスマネジメント」という言葉をよく耳にすることでしょう。プロセスマネジメントは、結果を最大化させると言われています。このコラムではプロセスマネジメントの基本について解説し、その成功事例を紹介します。プロセスマネジメントが必要な理 続きを読む

  • LPの制作会社おすすめ12選|メリットやデメリット・依頼時の注意点を紹介!

    LP(ランディングページ)とは?LP(ランディングページ)は、もともと検索や広告経由で最初に見るページで、ホームページに着地するイメージからこのように呼ばれるようになりました。しかし、一般的には、縦長の情報量が多いページのことをLPと呼ぶことが多いです。商品の 続きを読む

  • LPの作り方の8つの手順とは?構成の要素や注意したいポイントも解説

    LPとはどのようなものかLP(ランディングページ)とは、集客を目的とした縦長1枚で完結するWebページのことです。Webページと聞くと、「TOPページ」「会社概要」「商品紹介 」「問い合わせ」等、複数のページから成るホームページを連想する方も多いでしょうが、そ 続きを読む

  • デザインの参考になるギャラリーサイト16選│自社にぴったりなLPの作り方も

    自社にぴったりなLPを作成する4つのコツLPとはランディングページのことです。最初にユーザーがアクセスするため、直訳すると着地ページという意味になります。サイトの顔となるLPは自社商品やサービスの特徴や利点が伝わりやすく、ユーザーの心をつかむデザインにするのが 続きを読む

  • 参考にしたいWebデザインのポートフォリオ22選|作成のポイントも詳しく説明

    WebデザインのポートフォリオとはWebデザインのポートフォリオとは、過去の作品を集めたWebサイト・ファイルのことを指します。自分の感性や個性をアピールすることも可能です。具体的には、クラウドソーシングで受注した案件や企業で残した実績を掲載します。ポートフォ 続きを読む

  • おすすめWebデザインのテンプレート41選|無料と有料のものを幅広く紹介

    Webデザインのテンプレートとは?Webデザインのテンプレートとは、Webサイトのデザインやレイアウトの雛形のことです。サイトの用途や予算に合わせた、様々なテーマやパッケージのものが販売されており、未経験者でも簡単に自分のサイトを作成できます。しかし、ひとくち 続きを読む

  • 無料で使えるWebデザインツール11選!選ぶ際のチェックリストも紹介

    Webデザインとは?Webデザインは、Web上に存在するホームページを制作することを意味します。他のデザインの仕事とは違い、Webデザインにはデザインだけではなくホームページとして表示するためのコーディングが必要です。Webをデザインするときは、コーディングを 続きを読む

  • Webデザイン業務が副業におすすめな8つの理由|在宅で副収入を得よう

    副業フリーランスの市場規模企業の副業解禁にも相まって、副業フリーランスの市場規模は、年々増えています。2020年に発生したコロナウイルスの発生も相まって、ここ数年で人々の働き方に対する意識が大幅に変化しました。また、ランサーズによる、フリーランス・副業・複業ワ 続きを読む

  • LPデザインの参考おすすめ17サイト!成功に導くポイント・見せ方のコツも紹介

    LPデザイン決定までの5つの流れLPとはランディングページの略で、Webサイトにおいてユーザーのアクションを誘導するためのページです。具体的には商品紹介ページやサービス紹介ページなどがLPになります。LPのクオリティはサイト売り上げに大きく影響するため、LPは 続きを読む

  • Webデザインを独学で学ぶには?6つの勉強方法や学習手順を解説

    独学でもWebデザインを学ぶことはできる優秀なWebデザイナーは引く手あまたで、高収入が得られる場合もあります。そのようなWebデザインを学んでみたいという人も少なくありません。しかし、専門のスクールに通わなければ学べないのではと考えている人も多くいるでしょう 続きを読む

  • BPMを導入するメリットを解説|必要な理由や海外との違いとは?

    BPMとはBPMとは「Business Process Management」を略した言葉で、業務管理手法の1つです。BPMは業務の流れをモデル化することで課題の分析を行い、課題解決のための新しい業務プロセスを作ることで、継続的に業務改善を行うというものです。 続きを読む

  • LPを構成する大切な10個の要素をご紹介|基本を押さえよう!

    LP(ランディングページ)の役割LP(ランディングページ)の役割は、webページ上の広告をクリック・タップして誘導された最初のページに対して効果的に商品やサービスの宣伝をする重要なものとなります。来訪してきたユーザーに対して購入意欲・資料請求・問い合わせといっ 続きを読む

  • 2021年Webデザインのトレンド15選|アニメーションを駆使したものも登場

    2021年のWebデザインのトレンドの傾向2021年はコロナウィルス蔓延による影響で、外出自粛やリモートワークが促進され、より長い時間を家で過ごす人が急増しました。必然的に人々がWebサイトを見る時間も長くなり、Webサイトを工夫することによる効果は大きくなっ 続きを読む

  • Webデザイン初心者におすすめの勉強法4選|おすすめの本15選も紹介

    Webデザインとは?ホームページ作成やデザインに興味がある人は、Webデザインを学んでみたいと思う人も多いでしょう。そもそも、Webデザインとはどんなことをするのでしょうか。Webデザインとは、パソコンやスマホなどのネット上に掲載されるホームページの文字や色の 続きを読む

  • Webデザインの勉強におすすめの本総合18選|独学やスキルアップにおすすめ

    WebデザインとはWebデザインとは、PCやスマートフォンなどの画面に表示されるもののデザインを作成することです。具体的には、企業などのホームページや商品紹介のWebサイトなどに、どのようなコンテンツを掲載するのか、配置や見出し、テキストの文字のフォントをどう 続きを読む

  • Taskworldが持つ特徴8つとメリット4つ!料金プランや使い方も解説

    TaskworldについてTaskworldとはタスク管理ツールです。その特徴は充実した機能と、洗練され使いやすくデザインされたひとつひとつのツールの使い易さです。 機能性と使いやすさの2つを追求した、総合タスク管理、プロジェクト管理ツールとしてTaskwor 続きを読む

  • QuickSolutionの4つの特徴|7つの導入メリット・料金プランを紹介

    QuickSolutionとはQuickSolutionは、日本の産学官連携による共同研究によって開発された純国産の企業内検索ソフトです。QuickSolutionのコア・アルゴリズムは豊橋技術科学大学で開発され、その後、住友電工・住友電工情報システムが評価や 続きを読む

  • AdFlowとは?AdFlowの特徴7つに制作に必要な搭載機能7つを紹介

    AdFlowとは?AdFlowは、創業の2007年からインターネット広告を中心に10万本を超える広告クリエイティブを手掛けてきた株式会社クリエイターズマッチが、自社の業務を効率化するために開発した、制作現場から生まれたプロジェクト管理ツールです。アパレル・化粧 続きを読む