【2023年最新】WEBデザイントレンド5選

2022年のWEBデザインは、パララックスアニメーションを組み込んだサイトや3D、グラデーション、モノトーンのシンプルなデザインなどよく見るようになった。
今回は、そのような中で私自身が気になるWEBデザインテクニックを5つ紹介する。また、2023年の流行色も合わせて紹介する。

1.ホバーでテキストや画像など詳細情報を表示

まず、最初はマウスホバーで情報を表示するサイト。 Amazon Prime videoなど有名だが、設定のエリアにホバーするだけで、別ページに繊維することなく、直感的に示す内容が分かるというもの。
ポイントは広いホバー領域または、特定の範囲にマウスを合わせることで、画像やアニメーションでインパクトのある動きを実現できるところ。
下のサンプルは、フランスのレストランサイトで、 テキストにホバーで画像を表示されたり、テキストアニメーションなどが表示され理解しやすい。

2.複数の画像が重なったレイヤーエフェクト

最近良く見るようになったのが、画像が横スライドするのではなく、画像が次々に重なるレイヤーエフェクト。
このレイヤーエフェクトは以前からある手法だが、洗練されたモダンな雰囲気を演出でき、ファッション・ビューティー系のサイトに効果的だ。
限られた画面スペースを有効活用できるのも機能的で良い。

3.UI/UXデザインでトレンド、スクロールテリング

ユーザー体験、ユーザビリティを高める手法として「スクロールテリング」がある。ワンカラムデザインでスマホやタブレットとの相性が良い。
Webサイトで使われる「スクロールテリング」は、スクロールと、「ストーリーテリング」を組み合わせた造語で、ユーザーが画面をスクロールする動きに合わせてグラフィックやアニメーションが起動し、画面上のストーリーが展開する技法である。
事例はApple AirPods Proのスクロールテリング。

4. インクルーシブデザインでSDGsを実現

SDGsでは、人々の多様性を受け入れて、「誰ひとり社会に取り残さない」ことを目標とされている。
そのため、多種多様な人々が利用するWebサイトやコンテンツにも、インクルーシブデザインを取り入れることが推奨されるようになってきた。
インクルーシブデザインとは、アクセシビリティ・年齢・文化・経済状況・教育・性別・地理的位置・言語・人種など、さまざまなテーマに対応することが求められる。
インクルーシブデザインの詳細については、こちらのブログ「WEBデザインに有効なインクルーシブデザインとは」でも解説している。

5.ECサイトはミニマルなデザインが基本

最後にECサイトデザイントレンドにも触れておく。
売上アップが目標であるECサイトに必要なのは、見た目だけではなく、商品内容のわかりやすさ、情報がシンプルにまとまっていることが重要である。
ECサイトは、PCでもスマホでもどちらでも商品を見つけやすく、商品・サービスの購入(Check Out)に至る動線もシンプルで統一性があるサイトにデザインすることで購入率(CVR)は高まる。
ECサイトはシンプルであることが基本と言える。私はECサイトデザインはミニマリズムを採用すべきと考える。
ミニマルなWebデザインは、単純に商品を見やすく使いやすいだけでなく、サイトの動作が早い、表示速度が速いなど実用面でも優れている。

2023年のトレンドカラーは何色?

2022年12月、日本流行色協会(JAFCA)が発表した2023年の色は、「ルミナスイエロー」である。
2023年は優しく、明るい未来と癒しを感じさせる、明るい黄色「ルミナスイエロー(Luminous yellow)」である。
ルミナスイエローは、「穏やかに輝く」という意味で、快活さと春気分を象徴する色彩だ。
今年の春のファッションアイテムに是非、取り入れたいものだ。

また、アメリカパントン社(PANTONE)が発表した、2023年の「カラー・オブ・ザ・イヤー(Color of the Year)」では、活力と力強さ脈打つようなパワフルなカラーとして「ビバ マゼンタ(Viva Magenta)」が選ばれた。
鮮やかな赤としてのビバ マゼンタは、前向きな華やかさがあり活気に満ちた色である。

まとめ

2023年、注目されるだろうWEBデザインのテクニックを紹介した。
トレンドは必ずしも導入する必要はないが、デザイナーはトレンドチェックをし、ユーザーやクライアントに有益を思われるテクニックは積極的に取り入れてゆくべきだろう。

参考:【2023年版】いろんなデザイントレンドを調査、まとめてみた

 

関連する記事

色がもつイメージ:安心と信頼をメッセージする=ブルー効果... 色が何らかのサインを送りだしていることは誰もがよく知っている。誰がどんな色を選ぼうと、共通しているのは、その色に対して人は反応するということだ。私たちは色に条件反射し、気づくこともない。色に対する反応は直観的反応とも言われ、個々の色は人の本能的な反応と密接に関係し、その反応は生理的、感情的、環境...
色の持つイメージ:グレーは高品質をイメージできる... 色が何らかのサインを送りだしていることは誰もがよく知っている。誰がどんな色を選ぼうと、共通しているのは、その色に対して人は反応するということだ。 私たちは色に対し条件反射し、気づくこともない。色に対する反応は直観的反応とも言われ、個々の色は人の本能的な反応と密接に関係し、その反応は生理的、感...
今すぐできる。コンバージョン率をアップするいくつかの方法... Webサイトを運用するからには、何らかの目的があって運用されるいることだろう。ECサイトでは商品購入や資料の申し込み、企業サイトでは求人募集や製品資料の請求などである。 そして、その最終目的がどの程度達成されているか、その確率を「コンバージョン率(CVR)」と呼んでいる。 この「コンバージョ...
新しく立ち上げたEコマースサイトに人を集めるには?その1... 新しくEコマースサイトを立ち上げる場合、できることなら初めからたくさんの人を集めて、手ごたえのあるオープンにしたいものです。そこで、2回にわたって、さまざまなメディアを使ってトラフィックを増やす方法をいくつかご紹介したいと思います。 ユーザーへのアクセスを増やそう トラフィックを増やすには、...
2016年、日本のEC市場はどうだった? 今回も前回に引き続き経済産業省から2016年の「我が国におけるデータ駆動型社会に係る基盤整備」報告書に基づき、国内のEC市場を中心にまとめてみた。 報告によると、日本国内のBtoC-EC市場規模は、15兆1,358億円。前年より9.9%増加したとしている。 各分野では物販系分野で8兆43...
越境EC “言語”のハードルを超えるには... 越境ECの第一のハードルは言語である。国内ECサイトから仕様を海外販売のサイトにチェンジしサイトを構築するには、まずサイトを日本語で作成し、そのあとに、英語、中国語などにテキストを翻訳していく必要がある。 日常会話ならなんとか訳すことはできても、越境ECの場合、商品情報や専門用語などユーザー...

タグ: , , ,

コメントをどうぞ