２０２３年版 UX / UI デザイン最新 トレンド １０選

２０２３年版 UX / UI デザイン の最新 トレンド １０選

UX/UIは今、競争の激しい市場ではより質の高いユーザー目線でのサービス提供やビジネス価値の向上の面でも重要視する必要がありますね。

近年「個人」の選択肢が増え、今年２０２３年は、パーソナライゼーション、スクロリーテリング、データストーリーテリング、ボタンレスUIに注目が集まりそうですね。

筆者たちの調査では、人々がスマートフォンのサイズだけでなく、大画面への関心があることもわかりました。このようなことから、Instagramも、需要の高まりに対応するため、デスクトップでの”UX”を改善しています。

UXPinで高品質で完全に機能するプロトタイプを作成し、 UIデザインのアイデアをテストしませんか。無料トライアルにサインアップして、高度な機能をお試しください。

製品の個別化

２０２１から２０２２年、個別化の人気が高まりましたが、それは単にUIに誰かの名前を追加するという意味ではありません。企業は、ファーストおよびサードパーティデータを使い、ユーザーの行動や閲覧の履歴などに基づいて個別化されたユーザー体験を作り出すのです。

個別化のいい例として、Netflixが挙げられます。アルゴリズムが視聴履歴に基づいて番組を提案するため、同じアカウントはありません。eコマース大手のAmazonも同様のアプローチで、購入履歴や閲覧履歴をもとに、各買い物客ののホームページを個別化します。

ちなみに Infosysは、製品の個別化を４つの要素で以下のようにまとめています：

  • ペルソナ：顧客は誰か
  • 製品のおすすめ：何を提供し、どのように製品やサービスを紹介するか
  • 製品の価格設定：理想的な価格帯
  • 製品の位置づけ：セールスファネルの各ステージにおいて、顧客にどのように製品を位置づけるか

製品の個別化に関する参考資料（英語）：

Webex Eventsのプロダクトデザイン担当ディレクターであるシェリル・クーリス氏より：

「２０２３年の今、私たち消費者は、製品の個別化へのハードルが高くなりつつあります。」とコメントしています。そして、「製品は “パーソナル” なものです。私たちの生活に密接に関わっており、ニーズに合わせて体験をカスタマイズすることで適切なものにたどり着けることを期待しているのです。」と加えて述べました。

クロスプラットフォームでUXの強化

クロスプラットフォームのアプリケーションは新しいものではなく、以前から多くの製品では、複数のデバイス間でシームレスなUXを提供するために取り組まれています。

また、モバイルでアクセスできないサービスや機能では、アクセスのできる競合他社に顧客を奪われてしまう可能性があります。

クロスプラットフォームの体験とは、【デスクトップからモバイルへ】の移行のみを指すのではありません。プロダクトデザイナーは、その逆の【モバイルからデスクトップへ】の移行についても考えなければなりません。もし今モバイル専用のアプリケーションをお持ちであれば、デスクトップユーザーを考慮する時が来たのかもしれませんね。 Instagramは、この傾向はますます高まっていると述べています。

Instagramの責任者であるアダム・モッセーリ氏は、Twitterで大画面モニターで使えるように【ウェブ版 Instagram】をアップデートしたことを発表しました。このアップデートにより、ユーザーはデスクトップ版でより多くのことができるようになり、大画面での体験のためにプラットフォームを最適化することもできるようになりました。

クロスプラットフォーム対応のUXに関する参考資料（英語）：

スクローリーテリング

スクローリーテリング ＝ 【スクロール】＋【ストーリーテリング】です。決して新しい トレンド ではありませんが、確実に広まってきています。スクローリーテリングの素晴らしい例としては、AppleのAirPods Max のランディングページがあり、そこではページをスクロールすると、美しい製品画像とともに、さまざまな特徴や利点が強調されています。

ONS（英国の国家統計局）のような政府機関では、公的事項を知らせるのに没入型のスクロール技術が使われています。「スクローリーテリング形式の強みは、読者を引き付け、ストーリーに命を吹き込む能力です。インタラクティブな「スクローリーテリング」の記事は、複雑なデータセットを説明したり探索したりするのにとてもいい方法なんです」。

スクローリーテリングに関する参考資料（英語）：

データストーリーテリング

引き続きストーリーテリングのテーマのもとに、『データストーリーテリング』をみてみましょう。

マイクロソフトはこの トレンド を、「ストーリーを裏付るのに役立つ複雑なデータや分析情報に基づいて、説得力のある説明を作り上げ、対象者に影響を与えたり情報を提供したりする概念 」であると表現しています。

データストーリーテリングは、企業の製品デザインでは目新しいものではありませんが、消費者向けデジタル製品、特にApple Health、Whoop、Garmin、Stravaなどのアクティビティ関連のアプリでは、このUI（ユーザーインターフェース）の傾向が強まってきているのがわかります。みんな数字やデータが大好きなのが伝わります。

文章添削ツールの『Grammarly』では、毎週ユーザーに送る個別化されたメールに、以下のようなメトリクスを含むデータのストーリーテリングが使われています：

２０２３年版 UX / UI デザイン の最新 トレンド １０選 - データストーリーテリング

  • 生産性が高かった週
  • チェックした単語数/生産性
  • アラート表示数/マスター
  • 使用した独自の単語数/ボキャブラリー

Grammarly の毎週のデータストーリーテリングのメールは、ユーザーの文章力向上のためにツールをもっと使うように促し、それによって、最終的に製品の使用率とエンゲージメントが上がります。

では、製品のエンゲージメントが上がるに、データストーリーテリング具体的な活用方法を紹介します：

  1. まず、ターゲットとするユーザーにインタビューを行い、どのような情報を最重要視しているのか、また、どのようなことが改善につながるのかを知る。
  2. コンテンツデザイナー、プロダクトマネージャー、マーケター、データサイエンティスト、エンジニアなど、部門を超えたチームを集め、個別化されたデータの見せ方についてアイデアを出し合う。
  3. ユーザビリティテストのために、完全に機能する高忠実度のデータ可視化プロトタイプを作成する。
  4. ベータ版を立ち上げ、エンドユーザーからフィードバックを得る。
  5. 改善と反復！

データストーリーテリングに関する参考資料（日本語・英語）：

ミニマリズム

ミニマリズムは今もこれからも トレンド です！ YouTubeは２０２２年半ばに UI デザインを一新し、よりモダンでミニマルな、黒とグレースケールの外観にしました。YouTube の今までの 赤い【購読ボタン】は黒になり、二次的な CTA（Call To Action）はグレー地に黒となっています。

２０２３年版 UX / UI デザイン の最新 トレンド １０選 - ミニマリズム

YouTube の「ブラック＆グレースケールUI」は、明るいテーマと暗いテーマの間でシームレスなUXを提供し、ダークモードは、ここ数年でよく使われるようになってきている トレンド です。

２０２３年版 UX / UI デザイン の最新 トレンド １０選 - ブラック＆グレースケール UI

多くのウェブサイトやデジタル製品で、「黒とグレースケール」のバリエーションが採用されています。このシンプルなカラーパレットには、Ghost というブログプラットフォームの例のように、UIデザイナーが重要なCTAや機能を１色でポップに表現できるという利点があります。

ghost minimal example

ミニマリズムに関する参考資料（英語）：

ボタンレス UI 

ミニマリズムの流れを汲むのは「ボタンレス UI」 です  。「え？！」と思いましたか？ ボタンレス UI は、あなたが思っている以上に一般的です。モバイルデバイスは大抵、『設定』にボタンのないパターンが採用されていますからね。

iphone buttonless ui

例えば、iPhoneでは、【タップ】、【スライド】、【スワイプ】といった動きを使って、設定の調整ができ、音量や明るさは、「 + 」や「 – 」の代わりに、上下にスライドして調整します。

ピッチャーAG のプロダクトデザイン担当ディレクターである、ピョートル・マカレヴィッチ氏は、「明確な結果をもたらす決まったアクションがあるいうのは素晴らしい発明ですが、かなり時代遅れです。」と言いました。加えて「日常で私たちは色々なインタラクションの方法がありますからね。」と加えています。

音声は、最も自然なコミュニケーションデバイスのようですね。デバイスのアシスタントや家庭用スマートデバイスの操作に音声が使われていますが、まだかなりぎこちないです。Siriは、多彩なのは素晴らしいですが、日常的に使えるアシスタントではありませんし、話題のNeuralinkもまだ遠い存在です。

ボタンレスUIでは、照明のスイッチをパチンと鳴るスイッチに変えるのではなく、必要な時に正確に点灯する照明にすることが重要です。

多くのUIパターンでは、ボタンに無駄が多い場合が多いです。

例えば、カードに１つのアクションしかない場合、ボタンは必要なく、ユーザーはカードをクリックやタップすればいいでしょう。

その他、デザイナーがボタンをなくすことができる例として、以下のようなものがあります：

  • デバイスの生体認証によるログインフォームの置き換え
  • 音声検索／VUI（音声ユーザーインターフェース）機能の活用
  • メッセージやポップアップをドラッグやスワイプで閉じる
  • ダブルタップによる「いいね！」や「お気に入り」の操作
  • テキストフィールドの送信ボタンをデバイスのリターンキーに置き換える

ボタンレス UI に関する参考料（英語）：

VRおよびARの UIデザイン 

Meta の「メタバース」という予言を信じるかどうかは別として、VR（仮想現実）やAR（拡張現実）のUXデザインの需要は増え続けています。

Pitcher AG のピョートル・マカレヴィッチ氏は、「私たちデザイナーは、そのことを意識し、自分たちの声が確実に伝わるようにしなければいけません。」と言っています。加えて、「それは風景を劇的に変化させるものですが、我々にはまだその準備ができていません。字幕付きライブ翻訳機やバーチャルユニバースのような新しい取り組みも出てきており、何かありそうな気がします。アイアンマンのヘルメットの中（または外）にいるジャービス（アイアンマンが開発したAI ）や、Ikea のARで家具を揃えるだけではなくなり、単なる目新しいものではなくなり、必需品になるのではないでしょうか。」と言っています。

VRとARは、例えば多くの企業が社員教育にARシステムを利用しているように、ゲームや社会的相互作用にとどまらず、ユーザーが現実世界をよりよくナビゲートできるようにするためのツールの開発へと広がっています。

以下のように、VRを利用してユーザーが商品を試せるようなアプリを作成している小売ブランドもあります：

  • IKEA Place：「リビングルームにどのソファが一番似合うか」など、Ikeaの商品を使って部屋がどのように見えるかを視覚化できるAR家具アプリ。
  • Warby Parker：様々な眼鏡フレームを試し、アプリで購入することができるすごいAR体験。
  • L’Oréal ModiFace: 最適な色合いやトーンを見つけのに、ロレアルのメイクアップ製品群を試すことができる。

このようなクリエイティブなアプリケーションは、物理的な製品を販売するブランドが AR や VR 技術を活用することで、顧客が 【購入前に試す 】ことができることを示しています。

VRおよびARのUI デザインに関する参考資料（英語）：

MLP（Minimum Lovable Product）

大手製品開発ソフトウェア「Aha！」の共同創業者兼CEOであるブライアン・デ・ハーフ氏は、２０１３年に『MLP（Minimum Lovable Product）』という言葉を作り、ベストセラーとなった著書『Lovability: How to Build Business That People Love and Be Happy Doing it』でこのことについて書きました。

MLPの背後にある考え方は、MVP（実用最小限の製品）を使ってできるだけ早く市場に投入することよりも、顧客に愛される製品体験を提供することに重点を置くというものです。

これはUIデザイナーにとって、どういう意味なのでしょうか。

「来年は、新しいアイデアやイノベーションの出現に伴い、より小さく、より速く市場に投入される試作品という、”ミニマム”に製品というアプローチがより多く見られるようになるでしょう。デザイナー（そしてユーザー）にとって、この上なく刺激的な時代になります！大きなアイデアをテストし、進化していく様子を見ることができるのです。」− Webex Events、シェリル・クーリス氏。

競争が激しく、新しいスタートアップが日々あらゆる市場に参入する中、質の高いUIデザインは今後数年間、大きな競争力を持つことになるでしょう。

MLPに関する参考資料（英語）：

２０２３年のタイポグラフィーの トレンド 

２０２３年のタイポグラフィーの最大の トレンド は、『大きく、太く、大文字』のようです。世界的な Web トレンド サイトであるAwwwardsでさえ、ホームページの「見出し１」とヘッダーの「 Callout」 に大文字のボールドタイポグラフィを使用しています。

 

awwwards bold example

UI デザイナーは、言葉を強調したり、ユーザーの注意を引くために、書体やスタイルを混ぜることもあります。例えば、ラコステの「Draw it Yourself キャンペーン」のヒーローには、「見出し１」に大胆な大文字のスタイルと、ソリッドでアウトライン化されたテキストを組み合わせて使われています。

 

lacoste bold text example

テニス界のスターであるヴィーナス・ウイリアムズもまた、自身のウェブサイト全体に、大きく大胆な大文字のタイポグラフィを使用しています。このフォントによって、彼女が世界ナンバーワンの強者であるというステータスが強化されています。

venus bold typography example

２０２３年、自身のブランドを目立たせ、圧倒的なマーケットリーダーとして位置づけたいなら、大きく大胆な大文字のタイポグラフィが有効です。よりソフトで落ち着いたアプローチには、オーストラリアを拠点とするクリエイティブ集団の Hip Operaの例のように、細く、凝縮された、大文字のタイポグラフィを使うといいでしょう。

thin typography example

タイポグラフィに関する参考資料（英語）：

高度なマイクロインタラクションおよびアニメーション

マイクロインタラクションは、デジタル製品に生命を吹き込みます。ここ数年の技術と性能の向上により、デザイナーはこの微妙なアニメーションをあらゆるコンポーネントに追加できるようになり、UI にキャラクターと個性を与えることができるようになりました。

高度なマイクロインタラクションは、特にユーザーのアクションに反応しなければならないボタンレス UI において、重要なユーザーフィードバックを提供します。Appleの例に戻って、それぞれのUI要素がどのようにアニメーション化してシステムの変化をユーザーに知らせているかに注目してみましょう。フライトモードのオンとオフを切り替えると、複数のマイクロインタラクションが起動し、システムがタスクを実行するまで動作します。

AR、VR、ウェアラブル、そしてホログラフィックUI の進歩により、２０２３年から２０２４年には、ユーザーとテクノロジーのインターフェース方法や、HCI（人間とコンピューターの相互作用）を促すマイクロインタラクションに刺激的な変化が見られるようになるでしょう。

マイクロインタラクションに関する参考資料（日本語・英語）：

世界最先端のデザイン・プロトタイピングツール「UXPin」で、 UIデザインをレベルアップしましょう。

最終製品のように見える、完全なインタラクティブ プロトタイプで、ユーザー テストを改善し、ステークホルダーから有意義なフィードバックを得ませんか。無料トライアルにサインアップして、UXPinの高度なプロトタイピング機能をぜひお試しください。

Still hungry for the design?

UXPin is a product design platform used by the best designers on the planet. Let your team easily design, collaborate, and present from low-fidelity wireframes to fully-interactive prototypes.

Start your free trial

These e-Books might interest you