2020年の13のウェブデザイントレンド

公開: 2020-02-06

今年は非常に多くのWebデザインのトレンドがあるため、トレンドとは何か、そしてデザインの世界で一般的なトピックとは何かを正確に知ることは困難です。 Flywheel自身の業界リーダーでありアートディレクターであるNicholasPetersenは、現在のグラフィックデザインのトレンドに遅れずについていくことが必須であると考えています。 「デザイナーとしての自分のスキルを実際に伸ばすには、デザインコミュニティで起こっているトレンドを認識することが役立ちます。」

この記事では、トップ13のWebデザインのトレンドとは何か、なぜそれらを気にする必要があるのか​​、そして業界の他の主要なデザイナーからのより示唆に富むアドバイスについて説明します。

2020年のウェブデザインのトレンドトップ13は次のとおりです。

  1. 抽象的なイラスト
  2. 幾何学的デザイン
  3. ミニマリズム
  4. 3D
  5. アクセシビリティ
  6. 好みの設定
  7. 没入型体験
  8. ダークモード
  9. 鮮やかな配色
  10. アイソメトリックデザイン
  11. カスタムタイポグラフィ
  12. 簡略図
  13. グラフィックを使った写真


抽象的なイラスト

抽象的なイラストは、アートとデザインの完璧なバランスです。 鮮やかな色と抽象的な形、線、画像が他とは異なるデザインを生み出すため、これは成長傾向です。

左側に青い抽象芸術作品が描かれたDropboxのログインページのスクリーンショット。
Dropboxのログインページのスクリーンショット、抽象的なイラストが特徴
内部にデザインが入った恐竜を描いた抽象的なイラストのスクリーンショット。
Behanceのスクリーンショット

幾何学的デザイン

幾何学的なウェブデザインは、今年浮上したもう一つのトレンドです。 幾何学的なデザインは、単純な幾何学的形状を特徴としており、非常にシンプルに見えるかもしれませんが、その背後には多くの考えと意図があります。 円や正方形のような単純な幾何学的形状を取り、それらをストーリーに変換するには、特定の種類のWebデザイナーが必要です。

ピンクのリボンがページに垂直に通され、上部にテキストが表示されているWebサイトのスクリーンショット。
RALLYのホームページのスクリーンショット
磁気的な色と幾何学的な形の半透明のチラシのスクリーンショット。
アドビからの画像

ミニマリズム

幾何学的なデザインが好きなら、このトレンドを気に入るはずです:ミニマリズム。 ミニマリストデザインは、ポイントにまっすぐでクリーンなデザインです。 騒々しく明るい色でいっぱいの混雑した世界では、ミニマリストのウェブサイトはウェブデザインのビーコンになっています。

ミニマリストのWebサイトのデザインも、訪問者がサイトをナビゲートするためのシームレスなユーザーエクスペリエンスを作成するため、人気が高まっています。

ページ中央の焦点として自転車を使用した白いホームページのスクリーンショット。
MotusのWebサイトのスクリーンショット

ジョージア州のデザイナーであるザック・ムーアは、ミニマリストのグラフィックデザインは、グラフィックデザイナーが来るのを見ることができるトレンドであると信じています。 「デザインは過去数年間、最小限の道をたどってきました。 クリーンなユーザーエクスペリエンスと煩雑さの欠如に向けてより速く実行します。 最小限のアプローチを採用しているデザイナーは、すでに人気のあるトレンドに従うためにそうしていると思います。時間が経つにつれて、ますます人気が高まるでしょう。」

完全に緑色でテキストが白のホームページのスクリーンショット。焦点はページの左側にあるホイールです。
Mixdのウェブサイトのスクリーンショット

3D

3Dグラフィックデザインもトップデザイントレンドとしてその道を歩んでいます。 多くのグラフィックデザイナーは、このワイルドでユニークな3D効果を作成するために、さまざまなタイポグラフィ、画像、抽象的な形を重ね始めています。 これと鮮やかな色を組み合わせることで、生き生きとした面白いデザインが生まれます。

ページの中央に「クリエイティブタイプ」があるページのスクリーンショット。フォント自体はカーペットのようにぼやけたりふわふわしたりします
AdobeCreateによるクリエイティブタイプのスクリーンショット
ほとんどが紫色のWebサイトのスクリーンショット。周りに他のアニメ作品が描かれたアニメモンスターがいます。
Togglのウェブサイトのスクリーンショット

アクセシビリティ

アクセシビリティは、多くのWebデザイナーが最近行っている会話ですが、これまで以上に考慮して、デザインのあらゆる側面に含めることが重要です。

Calibrate MediaのDavidは、アクセシビリティがWebデザインの重要な部分になっていると強く感じています。 「それは急速に大手企業の標準になりつつあります。 すべての年齢層とバックグラウンドからのより多くの人々が日常生活のためにインターネットを使用しているので、彼らのアクセスニーズに応えることが重要です。 イスラエルなどの一部の国では、現在、法律の一部となっています。

アクセシビリティに加えて、GDPRコンプライアンスは、今日のデジタル環境におけるもう1つの必須事項です。 「法的な理由は別として、ますます多くのユーザーがWebを閲覧する際のプライバシー権について懸念するようになっています。 適切に設計され、適切に作成されたCookie通知を実装する(およびGDPR標準を実装する)ことで、Webサイトの訪問者に対する信頼とセキュリティの感覚が構築されます。」

すべての人がアクセスできるWebサイトのスクリーンショット。
Wesley Missionには、使いやすいサイト、代替画像テキスト、さらにはサイトのアクセシビリティに関するフィードバックを送信できるアクセシビリティタブがあります。

ユーザーの設定

この時代のプリファレンス設定は、Web上でユーザーのソフトウェアプリファレンス(モーションの最小化など)を利用できるようになったことを意味します。 ユーザーがMacのシステム環境設定を動かしたくないとしましょう。 Webデザイナーは、その設定を採用して、エクスペリエンスを完全に調整することができます。 いくつかの解決策は、ホバーの視差効果またはズーム効果を削除することです。 このようにして、顧客は自分に最適なエクスペリエンスを制御し、Webデザイナーがすべてのユーザーに最適なエクスペリエンスを構築できるようにします。

この傾向は、ユーザーを最優先するWebエクスペリエンスの構築に役立つため重要です。 FlywheelのシニアプロダクトデザイナーであるTysonReederは、次のように述べています。 Appleはこれについて素晴らしい仕事をしています。

ユーザーのシステム環境設定に基づいてAppleのデザインがどのように変化するかを示すビデオ。

アクセシビリティとそれをWebデザインに実装する方法の詳細については、ここをクリックしてください。


没入型体験

没入型の体験とグラフィックデザインは、多くの人がやってくるのを見たもう1つのトレンドです。 人々がブランド、会社、または製品での体験をますます評価している世界では、Webデザイナーが拡張現実(別名AR)を使用してそれらの没入型体験を強化しているのは当然のことです。

KwitelleのChristelは、1マイル離れたところから没入型のグラフィックデザインが生まれるのを見たクリエイティブの1人で、「空中でそれを感じることができます」。

Webデザイナーは、WordPressサイトのデザイン、ブランドの新しいアニメーションロゴの作成など、没入型のエクスペリエンスとしてデザインを考えています。

たとえば、Appleは、より多くの情報を検索したり、購入する準備ができているユーザーに没入型の体験を提供することで、新製品について声明を発表しています。

MacBookProのオープニングのスクリーンショット
スクロールするともう少し開くMacBookProのスクリーンショット
ページをスクロールし続けると、MacBookProのスクリーンショットが完全に開きます。
AppleのWebサイトから取得したスクリーンショット

ダークモード

ダークモードが登場し、多くのWebデザイナーがこのトレンドを愛しています(そして、あえて言うと、少し夢中になっています)。 ダークモードは、デザインのコア部分が暗く、多くの場合黒であり、テキスト、画像、およびその他の機能が白または別のポップな色である場合に発生します。 これにより、正しく実行すると洗練された洗練された外観が作成されますが、バランスをとるのに最適です。

ダークモードを使用しているウェブサイトのスクリーンショット。使用される主な色は、背景に黒、テキストやその他の要素にオレンジと白が使用されています。
AnamolMaharjanDribbbleからの画像

Andrew Cachoは、ダークモードのトレンドを完全に受け入れています。 「それは、ウェブサイト上にスペースを作成する必要性の間の緊張のバランスを取りながら、ネイティブOSでビッグテックハードウェア企業によって設定されたトレンドに従うことでもあります。 活気が戻ってきて、個性が飛び散ります!」

他の設計者は、モバイルOSインターフェイスがすでにこの傾向を受け入れていることに同意しています。 ProximaのMattStaub氏は、次のように述べています。「ダークモードがモバイルOSインターフェイスを引き継ぐことで、設計されたエクスペリエンスがそれに続きます。 しかし、トレンディで鮮やかな色が暗闇を突き抜けます。」

アルバムとアーティストの画像がカラーでテキストが白のダークモードのSpotifyのページのスクリーンショット。
CloudAppからの画像

鮮やかな配色

トレンディで鮮やかな色と言えば、鮮やかな配色について話しましょう。 Webデザイナーは大胆な色を採用しており、多くの場合、彩度の高い色と暗い色合いを組み合わせて、デザインにシンプルでありながらカラフルで温かみのある雰囲気を与えています。 ネオンや蛍光灯などのさまざまな鮮やかな色の組み合わせが、ノイズの中でデザインを際立たせるのに役立っています。

ピンクをメインカラーにしたページのスクリーンショット。
Cowboy.comのスクリーンショット
青、ネオンピンク、エレクトリックブルー、黄色、白、黒などのさまざまな鮮やかな色のページのスクリーンショット。
MeowWolfのWebサイトのスクリーンショット

等角図

写真を撮るとき、カメラのさまざまな視点や角度がさまざまな外観、感触、感情を生み出す可能性があることを理解するのは簡単です。 アイソメ図のデザインも同様の概念です。これらのデザインにより、被写体のより多くの視点が可能になるためです。 デザイナーは、アイソメ図を使用して、デザインの上面、側面、または任意の角度を確認できます。

アイソメトリックデザインのスクリーンショット。デザインは横から見た小さな建物です。
PsychX86のWebサイトのスクリーンショット

アイソメトリック手法を使用すると、より多くの細部をよりすっきりと表示することもできます。 スペースを3Dで表示する機能があると、以前は利用できなかったスペースが開かれます。 非常に雑然としていて強制的に見えることなく、物を入れるためのより多くのスペースがあります。

アイソメトリックデザインのスクリーンショット。向こう側から見ると小さな街です。
Chronicledのスクリーンショット
Flywheelの電子ブックのスクリーンショット。ラップトップ、グラフ、イラストを使用したWebデザインのビジネスです。
ウェブデザインレポートのビジネスのスクリーンショット。 ここでそれを読んでください。

カスタムタイポグラフィ

より革新的なデザインを作成するために、Webデザイナーはタイポグラフィを表示する新しい方法を模索しています。 テキストを変換するためのさまざまなクリエイティブ要素の組み合わせは、ほとんどの人がやってくるのを見たトレンドです。

社内のグラフィックデザイナーであるReseは、カスタムタイポグラフィをデザインに組み込むのが大好きです。 「カスタムタイプを作成することは、通常はフォントライブラリで利用できるものに限定されているデザイン内の何かをパーソナライズおよび管理する方法であるため、便利です。」

黒と白のカスタムタイポグラフィ。テキストには、ユニークなフォントで「スーパーフライ」と書かれています。
フライホイールでデザインされたカスタムタイポグラフィの例

カスタムタイポグラフィはグラフィックデザインの最も古いトレンドの1つですが、それは進化し続けているものです。 「それは、美しい手作りの窓の看板から、Dribbbleで見つけることができる病気のグラフィックに変わりました」。

カスタムタイポグラフィの例。単純なレタリングを使用したものと、筆記体のユニークなレタリングを使用したものがあります。
AllanPetersDribbbleからの画像

カスタムタイポグラフィをいじり始める準備はできましたか? Reseはいくつかの素晴らしいアドバイスを提供しています。 「あなたが私のようで、カスタムタイプが少し気が遠くなると感じた場合は、古いタイプに行って練習し、インスピレーションを得てください。 古いスクリプトを練習して見るだけでとても助かりました。 ガレージセールやヴィンテージショップに行き、写真を撮り、見たものを再現してみてください!」


簡略化されたイラスト

簡略化された図は、2つの極性の反対のデザインのバランスです。 一般的なアプローチがあります。これは通常、さまざまな分野の人々がシーンを固定するカラフルな色の塊でテクノロジーと相互作用するSVGイラストです。 一方、非常にルーズな手描きのイラストのように見えるものがあり、その実行ははるかに抽象的で解釈的です。

Mailchimpのホームページのスクリーンショット。黄色の背景にシンプルな黒のイラストが描かれています。
Mailchimpのホームページのスクリーンショット

Flywheelの社内グラフィックデザイナーであるBryanNorthは、今年のデザイントレンドは1つの大きな理由であると考えています。それは、「上手くやれば、非常に人間的で親しみやすい感覚を呼び起こす」ということです。

ほとんどのデザイントレンドでは、会社、ブランド、特定のグラフィックデザイナーなど、オリジナルがどこから来たのかを特定するのは困難です。 ただし、ブライアンは、2019年のMailchimpの再設計がこのトレンドに大きな役割を果たしたと考えています。 「現在、Mailchimpの美学を追いかけているブランドはたくさんあるようです。」

Mailchimpのホームページのスクリーンショット。よりシンプルな黒いイラストが描かれています。
Mailchimpのホームページのスクリーンショット

「このトレンドで私が気に入っているのは、多くの人(一般的に自分自身をグラフィックデザイナーだと考えている人)が、他の方法では恐らく恐ろしいイラストで自分の気概をテストしていることです。 この取り組みから生まれた素晴らしいイラストがたくさんあり、本当に悪いイラストもいくつかあります。」


グラフィックを使った写真

写真+グラフィック=天国で行われた試合。

それは少し誇張されているかもしれませんが、デザイナーと写真家の両方がこの傾向を採用し、それを使用して自分の作品を展示しています。 写真をキャプチャし、アニメーションやグラフィックを追加して新しいレベルに引き上げることは、Flywheelでさえも受け入れているトレンドです。

Flywheelの社内写真家であるキンバリーは、彼女の写真をグラフィックスで新しい次元に持っていくというアイデアが大好きです。 「私たちのチームの設計者と協力して、最終結果が可能な限り最高のものになるようにすることは、わくわくします。 デザインを使用してイメージを強化することと混合された少し余分な計画は、最終的にはさらに意図的な最終製品を意味します。」

私たちのブログの記事のスクリーンショット。フライウィーラーが後ろにグラフィックとスケッチを持って座って考えているのが特徴です。
私たちのブログ、レイアウトの記事のスクリーンショット

ブログでもレポートでも、アニメーションやグラフィックを追加して画像を変換するのが大好きです。 このデザインは人目を引くものであり、ある時点でデザイン作業に含める必要があります。

グラフと「Webデザイナーの80%がほとんどのプロジェクトにデポジットを必要とする」という言葉を特徴とするグラフィックオーバーレイを使用して座って入力している人の画像
ウェブデザインレポートのビジネスからの画像

結論

デザインのトレンドとは何か、そしてそれをどのように作品に取り入れることができるかを知ることは重要ですが、スタイルやパターンが人気があるからといって、それが問題の正しい解決策になるとは限らないことに注意することも重要です。

「デザイナーの仕事は問題を解決することです。 他の設計者が行っていることを調査、発見、観察、および学習してから、問題に対する最善の解決策が実際に何であるかを判断します。 それらのパターンの1つである場合もあれば、設計プロセスに完全に固有のものである場合もあります。」 -Flywheelアートディレクター、Nicholas Petersen

「時代遅れになることのないトレンドの1つは、オリジナリティです。 作成すればするほど、自分に合ったものが見つかり、それが本当に上手になります。 最終的に、あなたが作るオリジナルの何かが新しいトレンドを設定します! 」

ウェブデザインレポートのビジネス

1,000人の主要なフリーランサー、エージェンシー、クリエイティブに、ウェブサイトを構築し、クライアントサービスを構築し、期限内に(全額!)支払いを受けるための最良の方法について尋ねました。 そこから、数値を計算し、洞察を掘り下げ、美しいレポートをパッケージ化して、推測をやめ、ビジネスの拡大を開始できるようにしました。

今月から、Webデザインビジネスをまったく新しいレベルに引き上げましょう。 あなたのような他のデザインビジネスから洞察を得て、あなたのサービスに対して競争力のある課金を始めましょう!