ビジュアルで勝負!2020年に確認しておきたい重要デザイントレンド7個まとめ

best-design-trend-2020-1

 

新しい年を迎え、さまざまなデザインブログやサイトで新しいトレンド予想が行われており、当ブログでも昨年末にまとめています。

 

サンプル例でわかる!注目したい2020年のWebデザイントレンド8個まとめ

2020年に注目されているグラフィックデザインの最新トレンド10個まとめ

 

トレンドは入れ替わりが激しく、すぐに古くなってしまう恐れがあるため、ここではビジュアル面に関連する、2020年に確認しておきたいトレンド7個をまとめてご紹介します。

 

 

2D & 3D イラストレーション

 

2020年に入り、イラストレーションはデジタル製品において新しい節目を迎えています。見栄えの良いストック写真でさえうまく機能せず、フラットなアニメーションも少なくなってきています。だからといって、とても複雑なデザインが必要というわけではありませんが、手描きや2Dまたは3Dイラストが、試してみたいスタイルとなるでしょう。

 

以下のサンプル例からもわかるように、通常の一般的なUIデザインから外れたスタイルを採用する場合、クリエイティブは心配する必要がなく、非常にうまく機能するでしょう。型にはまらない考え方をすることがポイントで、ユニークな独創性は他との違いをうまく演出します。

 

2d-3d-illustration

 

また、ストックベクターイラストが緊急のデザイン課題を解決するほど、イラストは需要がピークに高まってくることも検討する必要があります。しかし、多くの人がベクターイラストを採用することで、もっとも一般的なスタイルとなることから、あまり長期的な解決法とは言えません。他とは違う型にはまらないユニークなイラストアイデアが、他との違いを魅せる方法と言えるでしょう。

 

 

 

アニメーション

 

イラストをさらに有効活用したいときは、アニメーション化することも重要となってくるでしょう。それほど大した動きでなくても、静止画に動きを加えることで、配置されただけの「スタンプ」のように感じることはありません。

 

animation by Inder Preet

Website animations by Tigran Manukyan

Ice cream shop “ICETORY” by Brightlab

Java Script 3d charts mobile app product page by Taras Migulko

 

もちろん上記サンプル例のように、ダイナミックな動きを採用してもデザイン性を妨げるものはありません。しかし、特に文字テキスト量が多いページの場合、ユーザーがより重要な情報から注意をそらす、「ノイズ」となる可能性があることも考慮しておきましょう。

 

 

 

フルスクリーンのスマートフォン&モバイル・ファースト

 

iPhoneとAdnroidのどちらもシステムとハードウェアが変更されたことで、画面上の物理的ボタンと画面の境界線となるエッジの両方が消えました。

 

アプリ画面はスクリーンの側面や上端、下端まで最大限広げられ、インターフェースのサイズがかなり多くなっています。業界全体でこの動きは活発になっており、新しい正面カメラは画面上ではなく、隠されるか別の場所に配置する必要があるでしょう。そして以下のサンプル例のように、デザイナーはUIとUXデザインの両方で、その限られたスペースをよりユニークな方法で使用しています。

 

 

画面スペースを奪うボタンがないため、ジェスチャーはモバイルアプリのナビゲーションにとって不可欠となっています。そのため、新しいユーザーを飽きさせずにスキップできる操作ガイドを導入することを検討してみましょう。そうすれば、ユーザーが目的の場所を取得、移動するためにスワイプする場所を簡単に見つけることができるでしょう。

 

 

 

豊富なカラーパレット

配色カラーパレットに関して、ブランドはそれほど制限する必要はなくなりました。これまでカラーパレットは2〜3色に限定されていましたが、デザインスタイルは繰り返しになってしまいます。たとえば以下のサンプル例のように、Dropboxでは豊富なカラーパレットを採用しており、Figmaもそれに続きました。

 

colors-palette

 

もちろん、システムとスタイルガイドはあり、色はランダムに選択されているわけではありません。4ないし5色のパレットが、表現力に優れた多様性から人気となり、調和の取れたブランドイメージを確立できるでしょう。特定の画面で伝えようとしているものや環境に応じて、その豊富なカラーパレットから取得したさまざまな色を使用してみましょう。

 

 

 

巨大なオーバーサイズのフォント

デジタル製品やブランドの最初のインパクトを作成するときに、太字で巨大な文字テキストは大いに役立ちます。アグレッシブな見た目にしたり、ランディングページだけに使用する必要はありません。実行可能であれば、ナビゲーションメニューにも使用できます。

 

以下のサンプル例からもわかるように、巨大なフォントサイズを採用することで、グラフィックのインパクトだけでなく、緊急性を要するポスターデザインに仕上げることができます。

 

oversized-letters

Balance – Beahnce.net

EDEE Branding & Design – Behance.net

 

繰り返しとなりますが、非常に大きな文字テキストを利用すると、ユーザーを目的のコンテンツに導くことを困難にしたり、読みづらくなってしまう恐れもあるので注意が必要となります。

 

 

 

「壊れたグリッド」、非対称レイアウト

 

ここ数年のあいだ、商業的に確立されたブランドでさえ、「ブルータリズム(英: Brutalism)」スタイルを採用したことを覚えているでしょう。このスタイルは、少なくともしばらくの間、デザイントレンドとして定着するようになりました。グリッドは柔軟性があり、ユーザーがデジタル製品に慣れてきたことで、あまり厳密である必要もありません。このスタイルを採用することで、以下のサンプル例のように、コンテンツの予測がすこし難しくなり、読み進めたくなるデザインが特長です。

 

grids-asymmetry-layout

 

MW Design Shop – Behance.net

Plant & Nature Website Concept by Tomasz Mazurczak

Wajer Yachts — page effects by Superhero Cheesecake

 

このデザインスタイルで重要なのは、より「極端な」サンプルを参考にし、可能な場合は製品をニーズに合わせることです。ただし、最先端デザインを表現したいときは、トライアンドエラーによる検証が必要となります。

 

 

 

新スキューモーフィズム・デザイン

 

マテリアルデザインが登場し、その反動としてブルータリズムが誕生しました。しかし、マテリアルデザインの基本原則は、リアリズムを追求したグラフィックによって新しい次元へと進んでいます。

 

ボタンはまるで日常生活で使っているようなスタイルに魅せ、ミニマリズムは新しく使用できるデザインの美しさを表現するのに役立ちます。これは簡単なスタイルではなく、いくつかの空間概念が重要となってきますが、デザイナーが実際に3Dモデリングについて知っておく必要はありません。

 

以下のサンプル例では、特定の製品に合わせた配色と雰囲気に合わせながら、リアルさが特長のスキューモーフィズム(英: Skeuomorphism)をうまく復活させており、素晴らしい出来となっています。

 

neuomorphism-design

 

ただし、このスタイルは手軽に表現できるものではなく、日常生活で使われているようなハイライトとシャドウをうまくポイントに合わせる必要があります。ひとつのデザイン設計がすべての当てはまるわけではありませんが、デザイナーはこれらのエフェクトをうまく演出する時短テクニックを思いつくでしょう。

 

 

 

さいごに、。

 

いかがでしたでしょう。2020年も興奮する新しいものやスタイルがたくさん登場すると予想されています。デザイナーは、市場マーケットで目立つなにか新しいことに挑戦するという気持ちで、作品に臨むことができるでしょう。そして新しいトレンドは、常にデザインスタイルをさらに進化させる動機となるでしょう。では、2020年もデザインを楽しんで!

 

参照元リンク : 7 UI TRENDS YOU SHOULD BE WATCHING IN 2020 – Imaginary Cloud