【翻訳】2023年のUX/UIデザイントレンド(Thalion, Prototypr, 2022)

blog.prototypr.io

来年の目標を立てるための予測の時期がやってきました!

1年のうちで、将来の目標を計画し始める特別な時期がやってきました。毎年のように、2023年に何が注目されるのか、現在の観察に基づくいくつかの予測を紹介しましょう。そのおかげで、あなたは自分の目標をよりよく調整できるようになると思います。

まず、去年の予想は当たったのでしょうか?

昨年、私は今後のトレンドについても書きました。2022年のUX/UIデザイントレンドの記事を参考に、お気軽にチェックしてみてください。ここでは、どの予測が当たったのか、簡単にまとめてみました。

  • ノーコードが標準になる:確定。2022年にノーコードが大流行したといってもいいと思いますが、最近のFramerのアップデートで、ようやくその領域に飛び込みやすくなりましたね。2023年にノーコードがどうなるかを書いていきます。
  • グラスモーフィズムが新しいスタンダードとなる(もうトレンドではない):確定、そのことに疑いはない。私たちはそれをオペレーティングシステムで見ています。モバイルやWebサイトでも見られます。
  • 90年代スタイルが新しいトレンドとなる?:部分的に確定。大きなトレンドにはなりませんでしたが、人気のあるスタイルの一つであることは確かです。しかし、いくつかの主要なプラットフォーム(GumroadやMediumなど)は、この種の視覚的処理を踏襲しています。
  • インタラクティブなプロトタイプ:確定。2022年、Figmaは、スプリング・アニメーションなどの新機能を導入し、さらにインタラクティブなプロトタイプを作ることができるようになりました。もしあなたがよりインタラクティブな要素を求めているなら、2022年にProtopieはいくつかのクールな変更を導入し、プロトタイピングをより簡単に始められる無料プランを用意しました

結構な数の予測が確定していますね。では、次に何が起こるか予想してみましょう。

2023年に期待されるデザイントレンド

2023年に何がホットなトレンドになるのか、想像する時間です。まずはより技術的な側面から、そしてビジュアルデザインに飛び込んでみましょう。

ノーコード - タイタンの戦い

ノーコードのためのデザインはまだ新鮮で、この分野で起こることはたくさんあるようです。2023年は、2つの優れたプラットフォームの戦いの場となるのでしょう。

ひとつは、すでに信頼されている堅実なプラットフォームであるWebflow、そしてもうひとつは、新たな新星であるFramerです。

私見ですが、両ツールとも多くのエキサイティングな新機能や改良が期待できそうです。

ここ数ヶ月、Framerがより多くの機能拡張を導入しているのを目にしました。チームは、魅力的な要素やチュートリアルのベースを構築しています。このツールは、直感的で、ウェブページエディタというよりもデザインツールのように感じられます。私もその可能性を試してみようと思い、デザイナーポートフォリオテンプレートを作ってみました(Framer Template Galleryで紹介)。

一方、Webflowは、そのカンファレンスにおいて、自分たちが何をしているのかを理解していることを確認した。彼らは、古いネーミングや構造を捨てることを恐れず、新鮮なアイデアを受け入れています。私はランディングページのほとんどにWebflowを使用していますが、すでにこれらの改善が見られます。

では、デザイナーであるあなたはどうすればいいのでしょうか。両方のプラットフォームを学び、その可能性を確認することです。Webflowは、より複雑なWebサイトに適しており、Framerは、ランディングページのような単純なものにはより速いかもしれません。

どちらが勝つか分かりませんが、共存と急成長を期待します。競合他社が私たちの注目を集めるために、できるだけ良いものを作るというのは、理想的な状況だと思います。

バーチャルリアリティ - もう一回?

ソース Apple.com

昨年、私は、バーチャル・リアリティが大衆に普及するのを待っていると述べました。2022年にそうなることを期待しましたが、その時ではありませんでした。

この状況は2023年には変わるのでしょうか?それは市場次第です。いつものように経済危機はイノベーションを鈍らせますが、その直後には新しい技術ソリューションが急増することが期待できるかもしれません。

VRやARが大衆の手に届くようになるのはいつ頃でしょうか?Facebook Metaは、メタバースを構築していますが、より多くの人々に届けるには、あまり運が良くないというのが実情です。

私にとって、バーチャルリアリティ市場の変化の明確な兆候は、Apple Glassesの発表でしょう。クパチーノの巨人は、VRバイスを発表する最初の企業である必要はありませんが、私はそれが正しいことを行う最初のものになることを確信しています。私たちはすでに他のデバイスカテゴリーで何度もそれを見てきましたが、この革新的な人間中心主義の精神はまだ残っていると信じています

分散化のためのデザイン

最近、Twitterの一部のユーザーが、Mastodonという別のソーシャルネットワークに移行することを決めました。このソリューションのユニークな点は、そのアーキテクチャ、つまり分散型であることです。

マストドン・ソーシャル・プラットフォーム

では、分散型ソーシャルメディアとは何でしょうか?ブロックチェーン技術に基づき、独立したサーバーで運営されています。企業の手中にあるわけではありません。その代わり、その運営とネットワーキングにまつわるすべての決定は、そのユーザーが行うのです。

しかし、多くのユーザーが、分散型プラットフォームという新しい環境に戸惑っているように見受けられます。これは、エクスペリエンスを向上させるチャンスであることは間違いありません。

動画体験のためのデザイン

デザイナーは何十年もかけて、読みやすさを追求したデザインをしています。人々はデジタルコンテンツを読むことにほとんどの時間を費やしています。しかし、今、それは変わりつつあります。特にソーシャルメディアにおける動画素材の人気が高まっているため、人々はますます読まなくなってきているのです。

なぜ動画が従来のテキストや静止画のコンテンツに勝てるのでしょうか?まず、動画は注目を集めるのが早い(そこで何かが起こっている、音が聞こえる、など)。動画は消費するのにあまり労力を必要としません(読む必要がなく、ただ見るだけでよい)。

さらに、InstagramのリールやTikTokのような素材の無限ループを持つプラットフォームは、短い動画を見ることにユーザーを簡単に中毒にさせることができます。

フィードのエンドレススクロールパターンのようなものです。私たちの動画を素早く切り替えて見ていくと、脳はその都度ドーパミンのヒットを得ます。これが一種の神経的な「ハイ」を生み出す。次の動画、次の動画と見続けてしまうのは、そのせいです。

我々、デザイナーにとっての結論は?テキストの情報アーキテクチャのパターンは確立されていますが、動画はまだまだ発見がある分野のようです。

来年は、そういう新しい動画プラットフォームが誕生するかもしれませんね(TikTokのパターンをコピーするだけではない何かがあると信じています)。だから、来年は、私たちに動画を提供するソリューション、あるいはその素材の中での体験をデザインするために、新しい新鮮なパターンを発明する必要があるかもしれません。

AIを活用したデザイン

2022年にはAI関連のツール&ジェネレーターが爆発的に普及しました(Dall-e 2で作られた美しいアートワークを見たことがありますか?これは新鮮で、大きな可能性を持っており、2023年にはそれが探求されるでしょう。

私は、AIがデザイナーに取って代わるとは思っていません。しかし、大きな味方になってくれるでしょう。さまざまな仕事をサポートしてくれるのです。リサーチやベンチマーキング、デザインシステムの構築など、AIによるソリューションが私たちを助けてくれることは想像に難くありません。今のところ、Magician Design pluginのような既存のツールは、仕事に喜びをもたらしてくれるでしょう。ぜひチェックしてみてください。

2023年のビジュアル/UIデザイントレンド

Framerで新しいトレンドのデザインやノーコードページのテンプレートを閲覧すると、2023年に確実に重要な役割を果たすパターンがいくつかあることがわかります。

サマリーグリッド - Appleのように

最近の基調講演を見ると、新しく発表される製品には必ずサマリースライドがあることにお気づきかもしれない。

ソース Apple.com

これは、楽しいビジュアルでつながった情報アーキテクチャの芸術品です。2020年以来、キーノートで私たちとともにあったが、今ではさらにデザイナーを刺激し始めた。製品や機能にサマリーグリッドを使用したデザインがすでにたくさんあることにお気づきでしょう。この新しいパターンは、退屈な機能のリストよりもずっと魅力的です。

グラデーション

数年前、グラデーションは少し時代遅れなものに思え、誰もが美しい写真を使ったソリッドでミニマルなレイアウトを望んでいましたが、これは変化しています。しかし、最近のグラデーションはより複雑になっています。メッシュグラデーションやガラスモルフィックブラーレイヤーなどの特徴があります。

新しいグラデーションは、鮮やかで珍しい色調を持つようになる。レイヤーブレンドを混ぜたり、ぼかし要素を重ねたりすることで、驚くほど素晴らしい効果を得ることができます。また、最近のmacOSリリースの素晴らしい壁紙のような、いくつかの3つのエフェクトを模倣するかもしれません。

https://trycoffee.co

現代のグラデーションは、単なる背景ではありません。テキストの塗りつぶしとしても使用できます。

出典 Apple.com

なぜ、これほどまでに効果があるのでしょうか?それは、自然に感じられるからです。ぼやけた空、車のメタリックな反射、葉の微妙な緑のトーンの違いなど、自然界にはグラデーションがあふれています。

そのトレンドに乗るために、デザイナーとしてできることは何でしょうか。お気に入りのウェブサイトやdribbbleのショットをブラウズしてみてください。彼らがどのようにグラデーションを適用しているかを見てみましょう。どんな色が使われているのでしょうか?どのような形状を表現していますか?テキストコンテンツや他の要素とどのように調和しているか?

Framer.comであらゆる種類のグラデーションを実現

究極のシンプル化

ノーコード化の流れと関係があるのかどうかはわかりません。しかし最近、Framerで作成されたサイトの多くが、非常にミニマルであると同時に、含まれる要素が大胆になり始めていることに気づきました。

トレンドの特徴は、大きなインタラクティブエリアです。また、グリッドのようなレイアウト(Apple Summary Gridのトレンド参照)であることが多く、テキストコンテンツはごくわずかであることが多いのです。

https://tr.af/

https://agency.framer.website

そのトレンドの流行に備えるために このスタイルでWebサイトの要素を再現し、それらがどのように作用するかを試してみてください。テキストコンテンツを最小限に抑え、ビジュアルを最大化することで、著者はどのように素晴らしい結果を得たのでしょうか?

まとめ

正直に言いましょう。誰も未来を予測することはできません。しかし、現在の知見からいくつかのことを推し量ることはできるかもしれません。私は、これらのものの多くは、すぐにその時が来ると強く信じています。準備するのは良いことです。

あなたは、どのトレンドが起きると思いますか?そうでないものは?お気軽にコメントをお寄せください。

お読みいただきありがとうございました。