海外事例から予測するWebデザイントレンド5選【2023年版】

2023年は、アクセシビリティ、UX、レスポンシビリティなど、さまざまな課題に対応したWebサイトのトレンドが混在する年になることが予想されています。

より快適な体験を実現するために、なにが体験に影響を与えるかについて、より広く考える必要があるでしょう。

この記事では、海外事例から予測される2023年のWebデザイントレンドを紹介します。

1. ホバーで情報が見られるアイコン

Webデザインにおける重要な課題のひとつが、誰でも直感的に操作できるインターフェイスを作ることです。しかし、Webデザインで使われるショートカット、とくにアイコンのなかには、特定のユーザーのアクセシビリティを阻害してしまうものもあります。

以下の画像のヘッダーに配置されている、ショッピングカート、虫眼鏡、アカウントをあらわす人のマークは、用途が明確なアイコンの例です。

▲出典：BeBiker 4

しかしあまり目にしないアイコンについては、複数の解釈が生じる可能性があります。

2023年は、アイコンの意図をより明確にするために、以下のようにテキストを表示するのがトレンドになるかもしれません。

▲出典：BeJeweler 2

上の事例ではアイコンだけでなく、バリエーションの見本にカーソルをあわせた際にもテキストが表示されています。

2. 社会的信頼性の可視化

2023年には、信頼が以前よりさらに重要になります。Webサイトは消費者と事業との最初の接点になることが多いため、Webデザインによる信頼関係の構築がとくに大切です。

Webデザインで信頼を得る方法は、複数あります。もっとも一般的なのは、以下の事例のように、顧客の声やレビューを紹介するセクションを設けることでしょう。

▲出典：BeDoctor

この事例では、顧客満足度、顧客の声、顧客の平均評価を掲載することで、信頼を可視化しています。

事業をはじめたばかりで、上記のような方法でアピールすることが難しい場合は、トラストマークを活用するのがおすすめ。トラストマークとは、安全なWeb サイトであることを証明するためにサイト上に表示するマークのこと。チェックアウトボタンの横にトラストマークを配置すれば、ユーザーに取引の安全性をアピールできます。

以下の事例のように、Webサイトに信頼性の高さをアピールするようなステートメント（声明文）を記載するのもおすすめです。

▲出典：BeMarketing 2

アスタリスクや米印（※）を活用すれば、画面下部に免責事項を記載したり、主張の根拠となるページのリンクを貼ったりすることもできます。

このように、Webデザインによって社会的信頼を可視化することも、2023年のトレンドになるでしょう。

3. モバイル特化型のデザイン

レスポンシブデザインはもはや一般的な存在になり、WordPressテーマの大半がレスポンシブ対応しています。

たしかにレスポンシブなWebサイトは快適なUXを提供していますが、Webデザイナーはそれを上回るようなクリエイティブなアイデアをあまり求められてきませんでした。

2023年にはモバイルの重要性がより高まり、上記のような状況が変化します。今後は、モバイル特有の問題に対応できるWebデザインがトレンドになるのです。Webデザイナーはよりクリエイティブなアイデアを求められるでしょう。

たとえば、ナビゲーションの変化。以下の事例では、デスクトップ版で一番下に表示されている問い合わせボタンが、一番上に表示されています。

▲出典：BeLanguage 4

使用するデバイスによる習慣や目的の違いを理解していれば、ナビゲーションなどの主要なコンポーネントのデザインにすこしずつ違いが出てくるはずです。

2023年には以下のように、モバイルアプリのようなWebサイトがトレンドになるでしょう。以下の事例では、デスクトップサイトの多段ヘッダーデザインを踏襲するのではなく、アカウント、カート、お気に入りのリンクなどがスティッキーボトムバーとして表示されています。
スティッキーボトムバーとは、スクロールしても流れず、指定の場所で固定され続けるサイドバーのことを指します。

▲出典：BeFurnitureStore

単なるレスポンシブサイトで満足せず、モバイル版に特化したWebデザインというトレンドに乗ることができれば、2023年もWebデザイナーとして評価されるはずです。

4. シェイプとテクスチャの活用

これまでのトレンドに、スキューモーフィズムがありました。

スキューモーフィズムとは、多くのユーザーにとって馴染みのないものを、できるだけ馴染みのある素材で仕上げるデザインスタイルのこと。このスタイルを取り入れる事で、直感的に機能をイメージしやすくなります。

このデザインスタイルがトレンドになった際には、一時的にリアルなテクスチャがスクリーン上に展開されましたが、すぐに廃れてしまいました。しかし、スキューモーフィズムが廃れたからといって、テクスチャをつけるというアイデア自体が失敗だったわけではありません。

2023年のWebデザインでは、ちょっとしたシェイプやテクスチャを取り入れることがトレンドになりそうです。以下の事例では、丸みを帯びた形や線が、Webサイトの背景として採用されています。UIに遊びごころを与え、かつ悪目立ちしないデザインです。

▲出典：BeRenovate 5

また以下の事例では、丸と四角をベースにした2つのテクスチャの図形をうまく活用し、統一感を出しています。2つのテクスチャを巧みに配置することで、デザインに一貫性をもたせつつ、視線も誘導しているのです。

▲出典：BeCoaching 3

ユーザーの視線は一般的に左側の余白に集まりがちなので、図形を右側に配置して視線を調整しています。

5. 補足用の動画

じっくり文章を読みたい人はブログ、見たり聞いたりしたい人には動画やVlog。オンライン上には、ニーズによってさまざまなコンテンツ消費方法があります。

動画が便利だからといって、すべてのコンテンツを動画に置き換えるのはおすすめできません。制作に手間がかかるほか、数が増えると速度も低下します。

2023年のトレンドになるのは、重要な情報についての補足動画です。以下の事例では、フルワイドの動画セクションが採用されています。顧客の声を動画で紹介したり、製品の技術的特徴をわかりやすく説明したりなど、さまざまな用途に活用できそうです。

▲出典：BeBusiness 6

また、以下の事例ではさらに補足的に動画が使われています。占有するスペースは小さいながらも、再生ボタンがわかりやすく配置されており、動画であることがすぐわかります。

▲出典：BePregnancy

自動再生の動画背景などは避けて、動画を控えめかつ戦略的に活用するのが、2023年のWebデザイントレンドになりそうです。

2023年のトレンドは戦略的なWebデザイン

かつてのトレンドの中には、遊び心のある色や、実験的なタイポグラフィなども存在していました。2023年のトレンドは、より現実的で戦略的なものになりそうです。

アクセシビリティやレスポンシビリティの向上、信頼関係の構築といった課題に取り組むにあたって、5つのトレンドはどれも役立ってくれるはず。表面的な変化ではなく、Webサイト全体を改善するように取り組んでみましょう。

（執筆：BeTheme　翻訳：Asuka Nakajima　編集：鈴木里菜　提供元：codrops）