Webデザインのトレンド2021:ダークモードからモーションへ

ダークモードからモーションへ

来年、ウェブを席巻するウェブデザインのトレンドは?エンバトのエキスパートが、2021年に注目すべきトップトレンドを教えてくれます。

ウェブデザインはここ数年で長い道のりを歩んできました。ウェブデザインは、創造性とテクノロジーの交差点に存在しており、世界で最も速く動く2つの産業であるため、新しいウェブデザインのトレンドとテクニックが常に出現していることは驚くに値しません。では、ウェブデザインの最新トレンドとは何でしょうか?

ユーザーフレンドリーなナビゲーション、データセキュリティ、高速ロード時間など、ウェブデザインには常に一定の側面がありますが、流行や流行は移り変わります。しかし、最新かつ最大のウェブデザインのトレンド、スタイル、イノベーションを常に把握しておくことは、拡大し続けるオンラインエコシステムの中で、=ウェブサイトが際立つことを保証します。

では、ダークモードからインタラクティブ性まで、来年のウェブデザインのトレンドはどのようなものになるのでしょうか?エンバトの専門家に、2020年のWebサイトの特徴や、2021年に注目すべき最新のWebデザイントレンドについて聞いてみました。

ダークモード

ダークモード – アップルホームページ

ウェブデザインでは長い間、白い背景はウェブサイトやアプリに空のスペースを作る唯一の方法と考えられていました。数年前からダークなテーマや要素を追加し始めたデザイナーもいましたが、ダークモードのトレンドは2020年に本当に業界に定着し、2021年まで続くと予想されています。

ダークモードとは?

ダークモード – クロックストライク12 ホームページ

AppleやHublotなどの大手ブランドや、Clock Strikes Twelveのような個人のポートフォリオにも採用されているダークモードは、どのようなウェブサイトにもモダンでエレガントなタッチを加えるのに最適な方法です。2020年のグラフィックデザインの大きなトレンドであるパステルやネオンなど、デザイナーはよりクリエイティブな要素で遊ぶことができるようになるだけでなく、研究によると、ダークモードはブルーライトへの露出を減らすことで、バッテリー寿命と視力の両方に良いことが分かっています。

「眩しさやブルーライトへの暴露、そして私たちの大切なバッテリー寿命への影響を明らかにした研究に基づいて、ダークモード設定を提供する製品やダーク駆動のみを提供する製品が増えているようです」とEnvato UIデザイナーのSean Feehanは言います。

ダークモードは、洗練されたシックなデザインで目に優しいだけでなく、コントラストを高め、デザイン要素をより見やすくするのにも最適です。Johny Vino、Koos Looijesteijijn、Adrian Verde Studioの例に見られるように、ウェブサイトにダークモードのトグルを追加して、訪問者が体験をカスタマイズできるようにすることもできます。

ダークモードの切り替え – Johny Vino ホームページ

「ダークモードは、2020年のウェブデザインに最も大きな影響を与えるトレンドであることは間違いないと思います。」とEnvatoのUXデザイナー、Tahlia Giannopoulasは言いました。「ダークモードが流行してから、小さな『ダークモード』トグル(ライトモードとダークモードの切り替え)を備えたウェブサイトをいくつか見てきましたが、これはユーザーが体験をカスタマイズするための素晴らしいシンプルな方法です。」

元々はホワイトとライトのカラースキームのみでデザインされていましたが、iOSやAndroidのUIでよく見られる、スケオモーフィズムとフラットデザインに基づいた分裂的なUXスタイルであるニューロモーフィックデザインも、ダークモードのトレンドを取り入れたものが増えてきており、人気の高いライトカラーのテーマを急速に追い越しています。

ダーク(モード)サイドにクロスオーバーするには、hoangptsさんのダッシュボードUIコンセプトダークテーマ、angelbi88さんのファイナンスウォレットダークモードUIキットPP、cerpowさんのEnvato ElementsのSpate Uiキットをチェックしてみてください!

コラージュ&ミキシングメディウム

コラージュは今年、グラフィックデザインやソーシャルメディアの世界を席巻した最大のトレンドのひとつで、ウェブデザインの世界でもすぐに定着しました。ミックスメディアスタイルは、デジタルアーティストやソーシャルメディアのインフルエンサーの影響で再び脚光を浴び、Chobani、City Circus、Urban Outfittersなど、多くのブランドやウェブデザイナーにも採用されました。

コラージュとは?

コラージュは、写真、イラスト、グラフィック、モーション、テキストなどのメディアをミックスして、刺激的で人目を引く美学を作り出すことです。

デジタル領域に移行した今、コラージュのトレンドは、アニメーションコラージュ、大きな装飾的なフォント、芸術的なテクスチャ(ペイントブラシのストロークなど)、さらにはアニメーション化された歪んだテキストなどのミックスメディアへと進化しており、信じられないほどユニークな結果を生み出しています。

「ミックスメディアの概念は、2021年にはさらに大きくなると思います」とTahlia氏は言いました。「今や多くの人がiPadのドローイングアプリを使っていますし、伝統的なペイントメディウム(水彩、油彩、ガッシュなど)を模倣したデジタルブラシによって、デジタルアートの境界線が再定義されつつあります。また、デジタルアートがすでにデバイスに入っている(写真やスキャンを気にする必要がない)という利便性が加わったことで、ウェブ上での共有がこれまで以上に簡単になりました。

コラージュ – アーバン アウトフィッターズ ホームページ

コラージュはミニマルなUXデザインと相性の良いトレンドです。ウェブサイトのデザインにミックスメディアとコラージュを統合することは、そうでなければ普通の経験に創造性のスプラッシュを追加し、ブランドやビジネスを際立たせるための確実な方法です。

次のWebデザインにコラージュを統合するには、このBrynnクリエイティブポートフォリオのテーマ、このブリッジをチェックアウト – クリエイティブ多目的WordPressのテーマ、またはこのBoldlab – ThemeForestのクリエイティブエージェンシーのテーマ。または、Envato Elementsでこれらの素晴らしいコラージュにインスパイアされたアイテムをチェックしてみてください!

アンチデザイン

アンチデザイン – ロゼバンカーホームページ

警告:この傾向は誰にでも当てはまるものではないことはわかっています。

2020年が何かを教えてくれたとしたら、それはすべてのルールや期待を窓から投げ出すことです。アンチデザインは、2019年のブルタリズムの復活によって拍車がかかったトレンドであり、物議を醸したスタイルは、最近ではウェブやグラフィックデザインだけでなく、ソーシャルメディアやポップカルチャーの領域にも浸透しています。

アンチデザイン – プレイタイプホームページ

アンチデザインとは何ですか?
「生々しい」、「無恥」、そして「醜い」とさえ表現されるアンチデザイン運動は、伝統的な「良い」デザインの基準に抗議するために、混沌と醜さを受け入れることがすべてである。それは実験的で非対称なレイアウト、誇張、歪み、重ね合わせ、伝統的な「醜い」要素を特徴としており、誰にでも好まれるものではないことは確かです。しかし、あなたが群衆から目立つのが好きな人なら、アンチデザインのウェブサイトは、ちょうどそれを行うための非常に効果的なツールであることを否定することはできません!

アンチデザイン – XXIXホームページ

オランダのブランドRoze BunkerやデザインスタジオPlay TypeやXXIXのカオスでありながら風変わりなウェブサイトのデザインに見られるように、多くのデザイナーがアンチデザインの奇妙な世界に手を出しています。オージーのアーティストFlumeでさえ、彼のウェブサイトでは明るく大胆で残忍なアプローチをとっています。このスタイルは常に際立っていますが(適切な理由があればいいのですが)、効果的なウェブデザインはバランスが重要です。ですから、もしUIにアンチデザインの道を選んだとしても、ウェブサイトのUXがシンプルで機能的でユーザーフレンドリーであることを確認することが重要です。

アンチデザイン – ダイナミックMTLホームページ

「アンチデザインのトレンドはもうおさまると思っていたけど、『ブレイキング・ザ・ルール』はコラージュやミクストメディアとともに進化してきたと思う 」とTahliaは言いました。「イメージを重ねたり、サンセリフフォントにセリフを混ぜたり、型破りな方法でアニメーションを使ったりと、さまざまなウェブサイトに出くわしてきました。それでも、素晴らしいUXのおかげで、彼らはまだそれを成功させているのです。」

ミニマリズム

ミニマリズム – ETQホームページ

ミニマリズムは、この10年間でウェブデザイナーの仕事の幅を広げてきました。しかし、ミニマリストのウェブデザインとは何でしょうか?視覚的なスタイルというよりも、デザインの原理というよりも、ミニマリズムデザインとは、基本的な形、きれいなテキスト、限られたカラーパレット、空のスペースなど、基本的な要素のみを使用して、シンプルで機能的で記憶に残るものを作ることを基本としています。

ミニマリズム – 株式会社ヒュージ ホームページ

高級靴ブランドのETQ Amsterdamやブルックリンを拠点とする事業開発会社Huge Inc.など、多くのブランドがミニマリズムのトレンドをウェブデザインに取り入れています。ミニマリズムというと、一般的には白黒の空間をイメージしますが、ミニマリズムは白黒だけではありません。ブロックカラーや大胆な背景、シンプルなサンセリフフォントやミニマリストな書体、シンプルでありながらも魅力的なウェブサイトデザインを作るためのミニマムなデザイン要素など、カラフルなミニマリズムがグラフィックデザインとウェブデザインの両方で増えてきています。

ミニマリズム – 株式会社ヒュージ アクションページ

ウェブサイトのビジュアルデザインをシンプルにするだけでなく、ユーザビリティと機能性を向上させることを目的としたトレンドであり、2021年に向けたもう一つの大きなトレンドであるミニマリズムのウェブデザインは、今後何年にもわたって現代のUIデザインの重要な要素であり続けるでしょう。

「私はトレンドにはあまり興味がありませんが、ミニマリズムはデジタルデザインの世界では常に関連性があると信じています。」インターフェイスを複雑にすればするほど、ユーザーは製品を使うのに苦労することになります。

オーガニックデザイン

オーガニックデザイン – オラのホームページ

2020年の最大のデザイントレンドの一つであるオーガニックデザインは、自然や身の回りの世界をインスピレーションにしたものばかりです。プロダクトデザインやインテリアデザイン、グラフィックデザインなどでよく見られますが、ウェブデザインの世界でもこのトレンドは勢いを増し始めています。

オーガニックデザインのトレンドは、持続可能性と環境保護への関心が高まっていることに影響されており、温かみのある土っぽい色、自然な形、生のオーガニックな質感を特徴としています。

オーガニックデザイン – アボッツフォード修道院 ‘What’s On’ ページ

ニュートラルカラーは、私たちの環境の自然なパレットを再現するものであり、ウェブサイトにオーガニックな雰囲気を加える最も簡単で効果的な方法の一つです。柔らかなブラウン、ベージュ、ホワイトの他に、色あせたピンク、ブルー、グリーンなどもニュートラルカラーパレットに加えるのに適しています。

オーガニックデザイン-より良いソースの製品ページ

「かなりの数のウェブサイトが素朴で温かみのあるカラーパレットに移行していることに気づきました。これは、通常画面を支配している明るく涼しい色調からの歓迎すべき変化です」とTahlia氏は言います。

オーガニックデザインの基本に戻るには、dirtylinestudioのポートフォリオクリエイティブルックブックや、Envato Elementsのpixelbuddha_graphicのナチュラルシェイプ&シーンコレクションをチェックしてみてください。あるいは、Earth Tones コレクションの中に入ってみましょう。

イラスト

イラスト – AHMホームページ

今年、イラストレーションはグラフィックデザイン、ソーシャルメディア、ウェブデザインの分野で爆発的な人気を博しています。多くのブランド、ビジネス、クリエイターがイラストレーションやデジタルアートの人気に便乗して、健康保険会社のAHMや高級ファッションブランドのグッチなど、多くのブランドがウェブサイトのデザインに手描きの要素を取り入れるようになりました。

オーガニックデザインに続いて、イラストレーションは、Webデザインにクラフト感や本物のタッチを加え、Webサイトにウェルカムな雰囲気を与えるのに最適です。2020年には、デザインの多様性と表現力に焦点が当てられるようになり、多くのイラストレーターが、一般的に「オッドボディ」と呼ばれるスタイルで、あらゆる形や大きさの風変わりな人々をフィーチャーするようになっています。

イラスト – 株式会社ヒュージ リサーチページ

3Dイラストレーターであり、Elementsの著者でもあるAmrit Pal Singhは、多様性、個性、表現の多様性に焦点を当てた、より風変わりで包括的なイラストレーションを提唱しています。

3Dイラスト – AmritPalDesignのウェブサイト

「長年にわたるイラストやキャラクターデザインは、美と重要性の誤った基準を確立してきました。アーモンド型の目、白い肌、特定の体型など、これらの偏見を確立する漫画を見て育ってきました。」クリエイターやアーティストとして、それを修正するのが私たちの義務です。「私たちは、あらゆる段階で表現について意識的に考える必要があります。私は常に自分の作品をより多様で包括的なものにしようと努力しています。」

機能性、包括性、アクセシビリティ

機能性 – Blue Receipt ホームページ

ウェブサイトの機能性は、常にウェブデザインの重要な要素となっています。しかし、高速ロード時間、ページスピード、モバイルフレンドリーなデザインとともに、包括性とアクセシビリティへの注目が高まっていることから、障害者のニーズを考慮したウェブデザインの必要性が高まっており、すべての人がアクセス可能で機能的なウェブサイトを作る必要があります。

アクセシビリティ – Blue Receipt Productページ

幸いなことに、アクセス可能なウェブデザインは、eコマースのハブであるBlue Receiptや、お手軽なキャットフードブランドのCat Personなど、より多くのブランドやビジネスで採用されるようになっています。

アクセシビリティ – Cat Person Productページ

ウェブサイトをより機能的でアクセスしやすく、包括的なものに最適化することは、顧客サービスの向上だけでなく、コンバージョンの増加、SEOの強化、視聴者層の拡大にもつながります。

ウェブサイトをより包括的でアクセスしやすいものにするには、以下のような方法があります。

  • テキストと背景の間に強い色のコントラストをつけます。
  • キーボードナビゲーションを使用しているときにリンクの周りに表示される長方形のアウトラインのようなフォーカスインジケータを追加します。
  • ラベルや指示を、コンテキストの低いプレースホルダテキストではなく、フォームフィールドで使用します。
    画像に機能的なaltタグを使用します。
  • わかりやすく、わかりやすく、専門用語のないコピーが特徴です。

モーションとインタラクティビティ

モーション – グリッドスペースホームページ

動画はオンラインコンテンツの中で最も魅力的な形であることが証明されているので、ウェブデザインでもモーションが大きなトレンドになっているのは当然のことです。Alter MindやGridspaceのようなブティックサイトからSEEKのキャリアアドバイスページまで、ウェブデザインにおけるモーションやアニメーションは、普通のウェブページをよりエキサイティングで魅力的なものにするためのシンプルな方法です。

同様に、YouTube Rewindのような多くのブランドや企業は、ウェブサイトにクイズやゲーム、投票、アンケートなど、よりインタラクティブな要素を追加し始めています。このウェブサイトでは、「THE ANRCADE」と呼ばれるインタラクティブなアーケードゲームが特徴の Estee Lauder(エスティ ローダー)があります。

Interactivity – Estee Lauder’s ANRCADE Game

オンライン体験を楽しくするだけでなく、インタラクティブ性は、訪問者を魅了しながら、訪問者のことをもっと知りたい場合にも最適な方法です。しかし、バランスを取り、モーションやインタラクティブな要素がウェブサイトの目的を支配したり、気を散らさないようにすることが重要です。

3D&ジオメトリックデザイン

3D Floating Objects – Arteryホームページ

幾何学的なパターンや要素は現代のウェブデザインの世界で頻繁に使用されており、多角形、ダイヤモンド、長方形、三角形、ひし形などの古典的な平面図形を含む。しかし、幾何学的なウェブデザインのトレンドは、3D形状、フローティングオブジェクト、可視グリッドラインなど、より現代的な要素を含むように進化してきました。

Geometric Design -Imagineersホームページ

幾何学的なデザインに3D形状や浮遊物を使用することで、現実的なオブジェクトと超現実的な動きを融合させ、魅惑的で未来的な効果を生み出しています – このスタイルは、新製品をアピールするためにテック系のコマーシャルでよく使用されている吊り下げられた回転する動きで人気を博しています。これは、Webデザインに別のレイヤーまたはディメンションを追加して、Webサイトが訪問者を魅了するようにするのに最適です。TheArteryによるこのWebサイトで見られるように、幾何学的要素と最小限のシンプルなグリッド線を組み合わせてWebサイトをレイアウトします。

3D Floating Objects – Artery Design Lab ページ

ワードプレスのページビルダー&テンプレートキット

ここ数年、セルフサービスのウェブサイトテンプレートやページビルダーの人気が高まっています。ElementorやWordpress Gutenbergのようなウェブサイトビルダーは、今日では、技術に精通していない人やデザイン志向の人でも、すぐにプロのウェブサイトを作成することができることを意味しています。

Kaleo – Creative Portfolio Template Kit

ページビルダーは、高速でコードフリー、柔軟性に富んでおり、デザインやコーディングの知識がなくても、プロ仕様のレイアウトや無限のカスタマイズが可能です。

Envato Elements Template Kits for Elementor は、ホームページからお問い合わせページまで、プロフェッショナルでまとまりのあるウェブサイトデザインやテンプレートを幅広く提供しています。Envato の新しいカテゴリーのテンプレートは、WordPress ページ ビルダーと連携して使用できるように設計されており、ウェブサイトをあっという間に簡単に立ち上げることができます。

ソース

 

►►►サービスについて