【翻訳】2023年ビジュアルデザインのトレンド(Diana Malewicz, UX Collective, 2022)

uxdesign.cc

モーションデザイン、パララックス、イマージョン、UIスタイルのコントラスト、モーフィズムなどの台頭

皆さん、こんにちは。私の最新のUIデザイン・トレンド・ガイドへようこそ。もう4年目の取材なので、私にとっては一種の伝統になっています。2023年版もいつもと同じように、数週間かけて徹底的に観察し、以下のトレンドの最も注目すべき例を集め、熟考の上、作成しています。

重要な注意:提供された例の99%は実際のプロダクトです😊!

あるトレンドは残り、あるいは進化し、より具体的なものに明確化されました。あるトレンドは、(願わくば)永久に消えていくでしょう。また、業界で大復活を遂げつつある古いトレンドも見つけることができます。

さあ、始めましょう!楽しく読みましょう❤。

モーションデザイン

上段左から エスティ ローダーアップルDuolingoWishes In WordsThe Virtual Economy ,Wickret

モーションデザインは巨大化し、おそらくどこでも目にすることができます。マイクロインタラクションから複雑なアニメーションまで、UIはもはや静的なものではなく、ユーザーは視覚的に "生きている "ことを期待しています。

TiktokInstagram、そしてユーザーが日常的に消費する絶え間ない動きのために、人々の注意力はどんどん低下しています。今は金魚のレベルか、それよりも低いという推測もあります。

ユーザーが興味を持ち続けるためには、動きをつけ、静的な画面や画像に命を吹き込み、より没入感を高める必要があるのです。

Duolingoを使っている人なら、最近のアップデートでアニメーションのイラストや画面遷移のエフェクトが増えたことがよくわかると思います。UIコンポーネントのほとんどは、さまざまな視覚効果を通じて、何らかの形でユーザーとインタラクションしています。ユーザーがアクションを起こすと、ほぼ常に画面上で何かが起こっているのです。

Duolingoの最新アップデートでは、アプリはほぼすべてのレベルでユーザーとインタラクションします。

動きについて語るとき、視差効果に触れないわけにはいきません。 パララックスとは、基本的に、スクロール中に異なる速度で動く、異なるレイヤーのグラフィックスのセットです。これは、すべてが1つの次元に配置されている間、コンテンツが実際の深さを持っているかのように非常に魅惑的で、目を喜ばせる効果を作成します。

視差は、近くにあるものほど速く動くという単純な原理を利用しています。車の運転中、窓から遠くの山々を眺めたときなど、まさに現実の世界と同じような効果が得られます。

Midwamは、GSAPライブラリを使用してウェブサイトを作成しました。ライブでご覧ください。ミッドワム

これらのアニメーションは、本当に素晴らしいものに見えるかもしれません。もちろん、そのほとんどはGSAPのようなライブラリを使ってコードで行われているのです。(ブラウザでメロエのピラミッドを探検することも可能です)。しかし、すべてのアニメーションは、開発者が再現できるように、最初にデザインする必要があります。そして、ここでデザイナーの出番です。

もし、あなたがモーションデザインをもっと探求しようと考えているなら、それは良いことです。近い将来、モーションデザインは必然的なデザインスキルになると私は強く信じています。すでに学び始めるのがベストかもしれませんね😉。

クリーンなデザイン

上段左から右へ。コインベースAirbnbTran Mau Tri Tam、Squareblack、Foh&BohRevolut

ここ数年、私のデザインスタイルは進化しており、よりシンプルでミニマル、そしてクリーンなアプローチへと徐々に向かいつつありました。どのデザイナーにとっても当たり前のことかもしれませんが、残るものも去るものもあるトレンドの中で、クリーンなミニマルデザインは絶対に間違いのないものであることを嬉しく思いますし、その実感は目からうろこであり、心地よさでもあります。

私は、さまざまなアプリやウェブサイトをサーフするたびに、クリーンでミニマルなものが最も心地よく、プロフェッショナルに見えると感じています。現代的で優れたデジタルプロダクトを作るために、あらゆる流行を追いかける必要はないのです。

しかし、それが上品なものであり、あなたのデザインを将来にわたって維持するものである限り、トレンドのいくつかに触発されるのは良いことです。トレンドは時として デザイナーにとっては、とてもありがたいことなのです。

Appleのウェブサイトは、プロダクトの特徴に焦点を当てた、タイムプルーフでミニマル、かつクリーンなUIデザインの究極の王者です。有名なAppleの「メイソングリッド」は、今やトレンドそのものです。ライブでご覧ください。アップル

マルチカラーソフトグラデーション

左から右へ SketchLS GraphicsWinampCosmosUntilStripe

オーロラグラデーション、抽象的なグラデーションの形、ボタンやカードのグラデーション、カラフルで鮮やかな色彩をパララックス効果のある背景に使用するなど、このトレンドはまだ現実的で強いようです。

オーロラグラデーションの美しい使用例です。ライブでご覧ください。Clyde

また、特定のフレーズを強調するために、見出しなどのテキストにグラデーションを使用する例も見受けられます。

左から右へ AppleVercelMemorisely

ハイコントラスト/モノクローム

左上から UberEndelRevolut BusinessHomeyKlarnaDropbox

業界最大手を含む多くのウェブサイトやアプリで、強いコントラストの要素や、時にはセクション全体を見かけることがあります。

インターフェイスをスクロールしている間、強いコントラストの要素やサーフェイスが常に点滅していると、集中力が刺激されるからです。

また、コントラストを上げすぎて目が疲れない限り、要素やテキストの視認性が良いので、インターフェイスを非常に使いやすくすることができます。

ダークフューチャリスティック/コズミックUI

上段左から右へ。GitHubZenlyRailwayLinearNotion AICreate

ダークUIは、単に「夜間/暗黒モード」を選択するオプションにとどまらず、より大きなものへと進化しています。実際、プロダクトやページをダークバージョンに切り替えるブランドは増えています。

個人的には、ダークUIの方がユーザーの注意を引きやすいのではないかと思います。典型的な「白い背景にコンテンツ」という見た目よりも非日常的で興味をそそられ、未来的、あるいは時には「宇宙的」な雰囲気さえ醸し出しますから。

Linearのウェブサイトは、ダークUIの素晴らしい例です。グラスモルフィックエレメントもふんだんに使われています。ライブでご覧ください。Linear

現実の素材を模倣する

左上から右へ SolanaLetterThoughtlabYoutube MusicNext.jsMural

私たちはすでに、グラスモーフィズム、クレイモーフィズム、メタル/クロモーフィズムなどを持っています。また、クリスタルや真珠のような効果を持つエレメントもかなり増えてきていますね。ただ、全体的に現実の素材を模倣することが近年の強いトレンドであり、いつまでも終わらないような気がしています。

(1年前に「スキューモーフィズムが徐々に復活しつつある」と書いたのを覚えていますか?)

ここで付け加えておくべき重要な観察があります:グラスモーフィズムは増加傾向にあるようです。あなたは今、ナビゲーション・バーやボタン、装飾的な要素のような、多くのウェブサイトで簡単にグラスモーフィズム効果を目撃することができます。

Letterは本当にクリスタルを好んでいます。また、ナビゲーションバーの強力なグラスモーフィック効果に注目してください。ライブでご覧ください。Letter

巨大なタイポグラフィ

上段左から右へ AppleHeart AerospaceStand With UkraineIncreaseGumroadInstagram

現在、非常に注目されている強力なトレンド。画面解像度が大きいため、ミニマル/ブルータリスト/ローの雰囲気を出すために、主にウェブサイトで使用される。多くの場合、フルスクリーンの写真と目立つアニメーションが使われています。

本当に見事ですね。クレジット:Heart Aerospace

サンセリフ幾何学的なタイポグラフィはどこにも行くことはなく、常に安全で機能的なインターフェースの選択肢であり続けるでしょう。

私たちは今、非常に多くの素晴らしいフォントソースを持っています。Google FontsやFont Shareのような無料のソースから、Gilroy、Circular Std、Mont、Axiforma、Nexa、Galanoといった多くの素晴らしいプレミアムフォントファミリーに至るまでです。

あなたのデザインを次のレベルに引き上げるために、これらのプロフェッショナルなフォントファミリーのいくつかに投資することをお勧めします - お金を払う価値があります。

私の注目すべきフォントの膨大なセレクションはこちらでご覧いただけます。

センチメンタルなデザイン

上段左から:HarborBeautifulVacationFranky'sHow We FeelExpress VPN

私は日々、物事を整理整頓するのが好きです。ニューブルタリスト、ヴィンテージ、レトロウェーブ、80年代から90年代、雑誌やポスターに似たトレンドはすべて、「センチメンタルデザイン」というラベルでひとつの箱に入れてしまいましょう。

販売しようとするプロダクトやサービスによっては、視覚的に大きな役割を果たすこともありますが、機能よりも形の勝利であることが多いのです。 しかし同時に、時折、独創的で完全に個性的なものを見るのは新鮮なことです。

ひとつ重大な疑問があります。それらは本当にUIデザインに適しているのでしょうか?

例としては?ブルータリズムデザインに切り替えることを決めた多くのブランドは、非常に否定的なユーザーフィードバックを受けました。

FigmaとGumroadは人気のある例外ですが、これはすべてのプロダクトに合うスタイルではありません。ただ、リデザインを担当したデザインチームのほとんどが、実際にはその結果に満足していたようです。残念なことですが、ブルータリズムのようなスタイルが、ユーザーにとって機能的で魅力的であることはほとんどありません。

最近のThe Vergeのリデザインはその典型的な例で、変更後、月間5.5Millionビュー近くがサイトから落ち込んでいます。カオスなレイアウトと極端なコントラストが主な原因だったようです。

デジタルプロダクトに関しては、機能性と視覚性のバランスが重要であると言えるでしょう。

PS. この記事で紹介したトレンドをほぼすべてミックスするとどうなるのか、気になりませんか?それは、私がお手伝いします。

すべてを手に入れることができるのに、なぜひとつのトレンドに集中するのでしょうか?ライブでご覧ください。Cyd Stumpel

最後までお付き合いいただき、ありがとうございました!😊。 あなたはどのトレンドが好きですか? あなたは言及する価値のある他の傾向を目撃しましたか? コメントで教えてください💬。