モーションデザイン、パララックス、イマージョン、UIスタイルのコントラスト、モーフィズムなどの台頭
皆さん、こんにちは。私の最新のUIデザイン・トレンド・ガイドへようこそ。もう4年目の取材なので、私にとっては一種の伝統になっています。2023年版もいつもと同じように、数週間かけて徹底的に観察し、以下のトレンドの最も注目すべき例を集め、熟考の上、作成しています。
重要な注意:提供された例の99%は実際のプロダクトです😊!
あるトレンドは残り、あるいは進化し、より具体的なものに明確化されました。あるトレンドは、(願わくば)永久に消えていくでしょう。また、業界で大復活を遂げつつある古いトレンドも見つけることができます。
さあ、始めましょう!楽しく読みましょう❤。
モーションデザイン
モーションデザインは巨大化し、おそらくどこでも目にすることができます。マイクロインタラクションから複雑なアニメーションまで、UIはもはや静的なものではなく、ユーザーは視覚的に "生きている "ことを期待しています。
Tiktok、Instagram、そしてユーザーが日常的に消費する絶え間ない動きのために、人々の注意力はどんどん低下しています。今は金魚のレベルか、それよりも低いという推測もあります。
ユーザーが興味を持ち続けるためには、動きをつけ、静的な画面や画像に命を吹き込み、より没入感を高める必要があるのです。
Duolingoを使っている人なら、最近のアップデートでアニメーションのイラストや画面遷移のエフェクトが増えたことがよくわかると思います。UIコンポーネントのほとんどは、さまざまな視覚効果を通じて、何らかの形でユーザーとインタラクションしています。ユーザーがアクションを起こすと、ほぼ常に画面上で何かが起こっているのです。
動きについて語るとき、視差効果に触れないわけにはいきません。 パララックスとは、基本的に、スクロール中に異なる速度で動く、異なるレイヤーのグラフィックスのセットです。これは、すべてが1つの次元に配置されている間、コンテンツが実際の深さを持っているかのように非常に魅惑的で、目を喜ばせる効果を作成します。
視差は、近くにあるものほど速く動くという単純な原理を利用しています。車の運転中、窓から遠くの山々を眺めたときなど、まさに現実の世界と同じような効果が得られます。
これらのアニメーションは、本当に素晴らしいものに見えるかもしれません。もちろん、そのほとんどはGSAPのようなライブラリを使ってコードで行われているのです。(ブラウザでメロエのピラミッドを探検することも可能です)。しかし、すべてのアニメーションは、開発者が再現できるように、最初にデザインする必要があります。そして、ここでデザイナーの出番です。
もし、あなたがモーションデザインをもっと探求しようと考えているなら、それは良いことです。近い将来、モーションデザインは必然的なデザインスキルになると私は強く信じています。すでに学び始めるのがベストかもしれませんね😉。
クリーンなデザイン
ここ数年、私のデザインスタイルは進化しており、よりシンプルでミニマル、そしてクリーンなアプローチへと徐々に向かいつつありました。どのデザイナーにとっても当たり前のことかもしれませんが、残るものも去るものもあるトレンドの中で、クリーンなミニマルデザインは絶対に間違いのないものであることを嬉しく思いますし、その実感は目からうろこであり、心地よさでもあります。
私は、さまざまなアプリやウェブサイトをサーフするたびに、クリーンでミニマルなものが最も心地よく、プロフェッショナルに見えると感じています。現代的で優れたデジタルプロダクトを作るために、あらゆる流行を追いかける必要はないのです。
しかし、それが上品なものであり、あなたのデザインを将来にわたって維持するものである限り、トレンドのいくつかに触発されるのは良いことです。トレンドは時として デザイナーにとっては、とてもありがたいことなのです。
マルチカラーソフトグラデーション
オーロラグラデーション、抽象的なグラデーションの形、ボタンやカードのグラデーション、カラフルで鮮やかな色彩をパララックス効果のある背景に使用するなど、このトレンドはまだ現実的で強いようです。
また、特定のフレーズを強調するために、見出しなどのテキストにグラデーションを使用する例も見受けられます。
ハイコントラスト/モノクローム
業界最大手を含む多くのウェブサイトやアプリで、強いコントラストの要素や、時にはセクション全体を見かけることがあります。
インターフェイスをスクロールしている間、強いコントラストの要素やサーフェイスが常に点滅していると、集中力が刺激されるからです。
また、コントラストを上げすぎて目が疲れない限り、要素やテキストの視認性が良いので、インターフェイスを非常に使いやすくすることができます。
ダークフューチャリスティック/コズミックUI
ダークUIは、単に「夜間/暗黒モード」を選択するオプションにとどまらず、より大きなものへと進化しています。実際、プロダクトやページをダークバージョンに切り替えるブランドは増えています。
個人的には、ダークUIの方がユーザーの注意を引きやすいのではないかと思います。典型的な「白い背景にコンテンツ」という見た目よりも非日常的で興味をそそられ、未来的、あるいは時には「宇宙的」な雰囲気さえ醸し出しますから。
現実の素材を模倣する
私たちはすでに、グラスモーフィズム、クレイモーフィズム、メタル/クロモーフィズムなどを持っています。また、クリスタルや真珠のような効果を持つエレメントもかなり増えてきていますね。ただ、全体的に現実の素材を模倣することが近年の強いトレンドであり、いつまでも終わらないような気がしています。
(1年前に「スキューモーフィズムが徐々に復活しつつある」と書いたのを覚えていますか?)
ここで付け加えておくべき重要な観察があります:グラスモーフィズムは増加傾向にあるようです。あなたは今、ナビゲーション・バーやボタン、装飾的な要素のような、多くのウェブサイトで簡単にグラスモーフィズム効果を目撃することができます。
巨大なタイポグラフィ
現在、非常に注目されている強力なトレンド。画面解像度が大きいため、ミニマル/ブルータリスト/ローの雰囲気を出すために、主にウェブサイトで使用される。多くの場合、フルスクリーンの写真と目立つアニメーションが使われています。
サンセリフ、幾何学的なタイポグラフィはどこにも行くことはなく、常に安全で機能的なインターフェースの選択肢であり続けるでしょう。
私たちは今、非常に多くの素晴らしいフォントソースを持っています。Google FontsやFont Shareのような無料のソースから、Gilroy、Circular Std、Mont、Axiforma、Nexa、Galanoといった多くの素晴らしいプレミアムフォントファミリーに至るまでです。
あなたのデザインを次のレベルに引き上げるために、これらのプロフェッショナルなフォントファミリーのいくつかに投資することをお勧めします - お金を払う価値があります。
私の注目すべきフォントの膨大なセレクションはこちらでご覧いただけます。
センチメンタルなデザイン
私は日々、物事を整理整頓するのが好きです。ニューブルタリスト、ヴィンテージ、レトロウェーブ、80年代から90年代、雑誌やポスターに似たトレンドはすべて、「センチメンタルデザイン」というラベルでひとつの箱に入れてしまいましょう。
販売しようとするプロダクトやサービスによっては、視覚的に大きな役割を果たすこともありますが、機能よりも形の勝利であることが多いのです。 しかし同時に、時折、独創的で完全に個性的なものを見るのは新鮮なことです。
ひとつ重大な疑問があります。それらは本当にUIデザインに適しているのでしょうか?
例としては?ブルータリズムデザインに切り替えることを決めた多くのブランドは、非常に否定的なユーザーフィードバックを受けました。
FigmaとGumroadは人気のある例外ですが、これはすべてのプロダクトに合うスタイルではありません。ただ、リデザインを担当したデザインチームのほとんどが、実際にはその結果に満足していたようです。残念なことですが、ブルータリズムのようなスタイルが、ユーザーにとって機能的で魅力的であることはほとんどありません。
最近のThe Vergeのリデザインはその典型的な例で、変更後、月間5.5Millionビュー近くがサイトから落ち込んでいます。カオスなレイアウトと極端なコントラストが主な原因だったようです。
デジタルプロダクトに関しては、機能性と視覚性のバランスが重要であると言えるでしょう。
PS. この記事で紹介したトレンドをほぼすべてミックスするとどうなるのか、気になりませんか?それは、私がお手伝いします。
最後までお付き合いいただき、ありがとうございました!😊。 あなたはどのトレンドが好きですか? あなたは言及する価値のある他の傾向を目撃しましたか? コメントで教えてください💬。