---

ニジボックスのUI UXノウハウや案件事例をご紹介！

---

UIやUXデザインのトレンドは、ユーザーニーズなどと同様に、時代につれて変わりゆくものです。そのため、ユーザーにとって最適な体験となるようなデザインを設計するには、いまのデザイントレンドを把握することが大切になります。

今回は、UI UXデザインの重要性を確認した上で、2024年におけるUI UXデザインの注目トレンドとその他のトレンドを紹介します。

UI UXデザイントレンドの重要性

UI UXデザインが時代遅れのままだと、製品の価値の有無にかかわらず、トラフィックを獲得しにくくなります。トラフィックとは、ユーザーがWebサイトなどを訪問した回数やアクセス数などのことです。

例えば、一昔前のままのUI UXデザインで作られたWebサイトに対して、訪問したユーザーは「古臭い」などのネガティブな印象を受けるかもしれません。
トレンドに敏感なユーザーは、より良いユーザー体験を求めて、競合のWebサイトに移る可能性もあります。

こうした問題を防ぐためにも、WebサイトはUI UXデザインのトレンドに合わせて改良し更新し続けることが大切です。

自社のブランドイメージに合わせてUI UXデザインのトレンドを取り入れるとよいでしょう。

UI UXデザインの注目トレンド

UI UXデザインの注目トレンドを紹介します。

AIの進出？ジェネレーティブAI

ジェネレーティブAIとは、米ガートナー社により「コンテンツやモノについてデータから学習し、それを使用して創造的かつ現実的な、まったく新しいアウトプットを生み出す機械学習手法（産業技術総合研究所・訳）」と定義された技術です。

ジェネレーティブAIは生成AIとも呼ばれ、膨大なデータの中から目的のものを自動生成して新しいモノを生み出す技術です。

例えば、打ち込んだ質問などに対して回答を返す文字生成AIの「ChatGPT」や、いくつかの特徴を指定するだけで新しい画像を生成する「Midjourney」などは、近年話題となっており、ジェネレーティブAIを使った代表的なサービスといえます。

Webコンテンツのデザイン制作における活用例としては、例えばフォントや色調、画面の占有率などを指定すると、その条件に合ったいくつものコンテンツを生成するといったものがあります。

ジェネレーティブAIは、Adobe PhotoshopやIllustratorの機能の一部として、すでに提供されているほか、デザイナーのカラーパレットの生成を助けるWebサイトなどにも使用されています。

これから、デザイナーの業務を支援するこうした技術がさらにリリースされることが予想されます。結果、効果的なユーザー体験につながるUIデザインの設計もよりしやすくなるでしょう。

SDGsの実現をサポートするインクルーシブデザイン

インクルーシブデザインとは、従来はデザインのターゲットから除外されてきた以下のような属性を含め、多様な人々をデザインプロセスの上流工程から巻き込む考え方です。

• 高齢者
• 障がい者
• 外国人

近年、世界的に注目されているSDGsでは、持続可能で多様性のある社会に向けて、「誰ひとり取り残さないこと」をテーマとしています。インクルーシブデザインは、企業や社会がSDGsを実現していく上でも、とても大切になる考え方です。

インクルーシブデザインの例としては、例えば絆創膏の色のバリエーションを増やしたアメリカの製薬会社「ジョンソン・エンド・ジョンソン」の例が分かりやすいでしょう。

絆創膏は、一般的にうすいだいだい色であり、これは貼った際に目立たなくするためですが、同社は多様な肌の色に考慮した絆創膏を発売しました。現在では、このインクルーシブデザインの取り組みによって、さまざまな肌の色の人が自分にあった絆創膏を選べるようになっています。

このように多様性に配慮したデザインがインクルーシブデザインです。

なお、ヨーロッパでは、欧州市場で製造・提供されている特定の製品・サービスを障がい者なども利用できるようにするために、欧州アクセシビリティ法が制定されました。EU加盟国は、この法的要件の遵守とともに、アクセシビリティの基準に沿う必要があります。

そして障害のある人や高齢者などがWebサイトを利用する際、バリアフリーでアクセスしやすいよう、以下のように取り入れることを求めています。

• 動画にキャプションを入れる
• 画像に代替テキストを入れる
• Webページ上にボタンをつけて、文字サイズを拡大しやすくする

さらに、2025年6月28日以降は、ヨーロッパ市場で提供できる製品・サービスがアクセシビリティ要件に準拠するものに限定されるものになります。
したがって、EU加盟国以外の企業が欧州で製品やサービスを提供する場合においても、アクセシビリティの基準およびガイドラインを適用し始める必要があるでしょう。

日本においても、今後インクルーシブデザインは注目されていくでしょう。
インクルーシブデザインに関しては以下の記事でも詳しく解説しています。

■参考記事：

マイクロインタラクション

マイクロインタラクションは、ユーザーの操作に対するフィードバックやステータスの変化を適切に伝えることで、Webサイトとユーザーのコミュニケーションを向上させるデザインの総称です。

具体的には、以下のようなものがマイクロインタラクションにあたります。

• SNSなどの新着メッセージ数に応じて、アイコンの右上に数字を表示する
• データのダウンロード中に「67％」などの進捗状況や現在のステータスを表示する
• ショッピングカートに商品が入ったあと、カートのアイコンの数字が増えるなど商品が追加されたことを分かりやすく通知する

レスポンシブデザイン

レスポンシブデザインは、すでに広く普及しているデザインの考え方ですが、2024年においても引き続き重要です。

レスポンシブデザインは、ユーザーが使うデバイスの画面サイズに合わせて、ページレイアウトを最適化させるデザインのことです。言い換えれば、どのデバイスからWebサイトにアクセスしても、レイアウトがずれたり壊れたりしないデザインです。

総務省の「令和3年通信利用動向調査の結果」によると、インターネット利用機器の第1位はスマートフォンになっており、個人保有の割合は74.3％になっています。

このことから考えても、スマートフォンでの閲覧にも適したレスポンシブデザインは引き続き重要といえるでしょう。

今後もさまざまなサイズのデバイスが登場することが予想されるため、適切なレスポンシブデザインとなっているか、常に確認が必要です。

出典：令和3年通信利用動向調査の結果（総務省）

■参考記事：

流行の兆し？没入感のあるデザイン

没入感のあるデザインとは、Webサイト全体に世界観があり、ユーザーが引き込まれるような工夫を凝らしたデザインのことです。

没入感のあるデザインで代表的なサイトの一つは、三菱ケミカル株式会社の採用サイト「みんなの夢が地球をまわす」が挙げられます。

このサイトにアクセスすると画面中央に数字のみ表示され、100までカウントアップします。この演出によって「何が表示されるのだろう？」といったワクワク感を演出しています。

また、100までのカウントアップのあとに表示されるトップページにも趣向が凝らされていいます。一般的なWebサイトは下にスクロールをしながら情報を閲覧しますが、このページでは画面が下にスクロールせず、奥から文字やイラストが次々に出現します。

その後、シンプルにまとめられたミッション・ビジョン・バリューなどが、「みんなの夢が地球をまわす」というコンテンツの中で展開していく仕組みです。

初めてこのページを訪れたユーザーが、「みんなの夢が地球をまわす」という世界観の中で応募に必要な価値観などに触れられるようになっています。

三菱ケミカル株式会社｜みんなの夢が地球をまわす

より印象に残る大きなフォント・大きな画像

メインビジュアルなどで文字や画像を大きく配置し、特徴あるフォントやアニメーションとともに表示する手法もトレンドです。

一般的には、コンテンツのタイトルや見出しなどの文字を大きく表示するデザインが多くなっています。Webサイトを開いたときに突然大きな文字や画像が表示されるため、ユーザーの印象に残りやすいでしょう。

例えば、税理士事務所O’lionのWebサイトは、Webページにアクセスすると、小さな「Olion」の文字のあとに巨大な「Olion」の文字が表示されるデザインです。

税理士事務所などの士業系の場合、堅く難しい雰囲気のWebサイトが多い傾向があるようです。これに対してO’lionは、オリジナリティのあるシンプルなデザインによって、他社との差別化を図るとともに、Webサイト訪問者に柔らかくとっつきやすい印象を与える工夫をしています。

税理士事務所O’lion

情報が端的に見られるカードコンポーネント

カードコンポーネントは、カードのような形のコンテナに画像や見出し、説明文などの情報を組み合わせて、縦に並べて見せるデザイン手法の一種です。
カードコンポーネントを取り入れると、さまざまな情報をユーザーが見やすいように効率よく表示でき、UXの向上が見込めます。

カードコンポーネントを用いた代表的なサイトといえるのが、写真供給サービス「Pinterest」です。Pinterestはカードコンポーネントを使うことで、不均一なアイテムや情報をグループ化することに成功しています。

Pinterest

粘土のようなクレイモーフィズム

クレイモーフィズムとは、粘土（clay）のような質感で丸みがあり、背景から浮いていて立体感のあるデザインのことです。クレイモーフィズムと似たデザインに、ニューモーフィズムというものがあります。両者には、以下のような違いがあります。

• クレイモーフィズム：背景から独立して浮かんでいる
• ニューモーフィズム：背景と同化しつつ立体感がある

クレイモーフィズムを取り入れているサイトは、現状ではまだ多くはありません。また、クレイモーフィズムを活用するWebサイトでも、その多くは、質感のあるイラストとしての使い方になります。

ユーザーをひきつけるような立体感のあるデザインや近未来的なデザインを目指すなら、クレイモーフィズムを背景やボタンに導入してもよいでしょう。

UI UXデザインのその他トレンド

2024年の大注目トレンドというわけではありませんが、UI UXデザインにおいて近年押さえておくべきその他のトレンドも紹介します。

デフォルト機能になりつつあるダークモード

ダークモードは、スマートフォンなどにもよく搭載されている機能で、ディスプレイ背景を黒を基調とする画面に設定できるモードです。Webサイトの場合、ライトモードのWebサイトにダークモードのオプションをつけ、好みに応じて変更できるように設計します。

ライトモードとダークモードのどちらが目に優しいかは、議論が続いていますが、背景が暗いWebサイトは写真や動画などが鮮明に見えるなどの理由から、ダークモードが目に優しいとする説もあります。

なお、エンジニアは、ダークモードに設定したテキストエディタでプログラムを書く人も多いようです。

ダークモードに近い暗めの設定は、以下のようにさまざまなOSやアプリで採用されています。

【OS】

• macOS
• Windows
• iOS
• Android

【Webブラウザ】

• Google Chrome
• Mozilla Firefox

【アプリ】

• YouTube
• Twitter
• Slack

パララックススクロールは廃止の傾向か

パララックスとは、日本語でいう「視差効果」のことです。具体的には、スクロールに合わせて背景と前景を異なるスピードで動くようにしたり、アニメーションによって奥行きや立体感を演出したりする効果です。

パララックスには、ユーザーを引き込んだり、コンテンツの訴求力を高めたりするメリットがある一方、演出方法次第では以下のようなデメリットもあります。

【例】

• サイトの内容が頭に入ってこない
• 表示速度が遅くなる

以上のことから、近年ではその評価には賛否があります。すでに時代遅れのデザインといわれることもある一方で、再びパララックスに注目する動きもあり、動向が注目されるデザイン手法です。

3Dイラスト

近未来的な立体感という点では、2022年のトレンドの一つでもあった3Dイラストにも注目したいところです。3Dイラストを使い、先述のクレイモーフィズムのような粘土質感のものや、その企業が思い描く未来や世界観を感じるデザインを表現します。3Dイラストには立体感だけなく、臨場感もユーザーに伝えやすい利点があります。

また、2Dと3Dを組み合わせたデザインにも注目しておきましょう。

ざらざらとした質感のイラスト

近年では、イラストに色をのせるだけでなく、ざらざらした質感（粒状感）を出すイラストも多くなりました。

粒状感の効果は、取り入れるコンテンツによって異なります。一般的には以下のような幅広い効果が期待できるとされています。

• レトロな雰囲気やアナログ感
• モダンな印象
• 印刷物のような質感

回転する文字

メインビジュアルやページトップで、矢印やアイコンの周りを回転させる手法です。動きが目を引くので目立たせるためや、単調なWebサイトの装飾目的でよく使われます。

画面端の小さなアイコンでも、ぐるぐるまわすことで、ユーザーから注目してもらいやすくなります。

例えば、ブラザーSDGsストーリー「ブラザーグループSDGsスペシャルサイト」のトップページのように画面左下や中央下部に回転する文字やアイコンを配置すれば、言葉を使わずに以下のような行動を促すことが可能になるでしょう。

• 最初にこのアイコンをクリック
• このアイコンをクリックして次のページへ

ブラザー工業株式会社|ブラザーグループSDGsスペシャルサイト

ホバーで大きく表示する

近年では、ホバー（対象物にマウスカーソルを重ねること）をすると、写真や情報を表示するデザインが増えています。ホバーした際に大きく情報を表示させると、ユーザーにインパクトを与えやすくなります。

ホバーで大きく表示させる対象が店舗の写真や地図であれば、情報が見やすくなる効果も期待できます。ホバーによる挙動は、Webサイトに実装しやすい点も利点です。

ホバーで情報を大きく表示させることで、ひと際工夫を凝らしたデザイン例としては、株式会社アールイコールの採用サイトがあります。

このページを開くと、カウントアップのあと画面中央に大きく「その野心 買い取ります」とメッセージが表示されます。そしてこのメッセージの上にマウスカーソルを動かすと、虫眼鏡のように「野心」の文字が拡大でき、実は野心の文字自体が別の文字列で構成されていることに気づく仕組みです。

株式会社アールイコール|アールイコール採用サイト

カーソルのアクション

先述のホバー例ともよく似ていますが、最近では、コンテンツにマウスカーソルをホバーしたときに見た目が大胆に変化するデザインも増えています。

例えば、立命館先端研究アカデミーのトップページは、ページの上でマウスポインターを動かすと、研究者の写真やイラストなどが複雑な動きをします。

また、株式会社エックスポイントワンのサイトは、ある領域の外側にマウスポインターを動かすと、その領域内で処理でも流しているかのようにプログラム文字列が動き出す仕様です。

こうした仕掛けを設置することでユーザーのワクワク感を刺激すると、Webサイトの細部まで見てもらいやすくなるでしょう。

立命館大学　立命館先進研究アカデミー|RARA
株式会社エックスポイントワン|X.1

パソコンでのスマートフォン表示

パソコンからの閲覧時にも、スマートフォンの画面表示を中央に置くデザインです。
いつもスマートフォンから情報収集しているユーザーからすれば、使い勝手が良い点がメリットです。

また、スマートフォン用の情報レイアウトをそのまま使えるため、ページを作る側としてもコーディングが楽になりやすいといったメリットがあります。

ただし、このデザイン手法は左右に大きく余白ができるため、何もせず余白のままにしておくと手抜き感や貧相なイメージを与えかねません。

下記に紹介するサントリーの「ほろよい」のWebサイトのように、余白を上手に使って世界観を広げるような装飾イラストを入れたり、背景に動画を配置したりといったユーザーをひきつける工夫が必要です。

サントリー株式会社|ほろよい

まとめ

これからUI UXデザインの見直しをするのであれば、記事内で紹介したトレンドを参考に自社サイトの改善を図ってみましょう。

ただし、UI UXデザインのトレンドは少しずつ変わっていくものです。Webサイトなどは「最初に作って終わり」ではなく定期的に見直しを行うことが大切です。また、時代の変化に取り残されないよう、最新のトレンドを常に追うことも重要です。

自社サイトのUI UXデザインを見直せば、ユーザー体験の満足度が上昇し、新たな顧客の獲得やさらなる収益の増加につながる可能性があります。本記事などを参考にUI UXデザインの改善に取り組んでみてください。

ニジボックスではサイト制作や開発における、情報設計やビジュアル設計といったUIデザイン面に加えて、ユーザーテストなどによるUX観点でのご支援も可能です。
下記資料にて、ニジボックスがクライアント課題に伴走する中で、磨き上げてきたUXデザインのプロセスや支援事例の一端を資料として一部ご紹介しています。
ご興味を持たれた方はぜひ、下記ダウンロードリンクよりご参照ください！