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デザインの参考事例サイトです。
業種や画面名などでデザインを検索することができます。
デザインを検索したい方は活用してみましょう。