2022年のWEBデザインは、パララックスアニメーションを組み込んだサイトや３D、グラデーション、モノトーンのシンプルなデザインなどよく見るようになった。
今回は、そのような中で私自身が気になるWEBデザインテクニックを5つ紹介する。また、2023年の流行色も合わせて紹介する。
まず、最初はマウスホバーで情報を表示するサイト。 Amazon Prime videoなど有名だが、設定のエリアにホバーするだけで、別ページに繊維することなく、直感的に示す内容が分かるというもの。
ポイントは広いホバー領域または、特定の範囲にマウスを合わせることで、画像やアニメーションでインパクトのある動きを実現できるところ。
下のサンプルは、フランスのレストランサイトで、 テキストにホバーで画像を表示されたり、テキストアニメーションなどが表示され理解しやすい。
最近良く見るようになったのが、画像が横スライドするのではなく、画像が次々に重なるレイヤーエフェクト。
このレイヤーエフェクトは以前からある手法だが、洗練されたモダンな雰囲気を演出でき、ファッション・ビューティー系のサイトに効果的だ。
限られた画面スペースを有効活用できるのも機能的で良い。
ユーザー体験、ユーザビリティを高める手法として「スクロールテリング」がある。ワンカラムデザインでスマホやタブレットとの相性が良い。
Webサイトで使われる「スクロールテリング」は、スクロールと、「ストーリーテリング」を組み合わせた造語で、ユーザーが画面をスクロールする動きに合わせてグラフィックやアニメーションが起動し、画面上のストーリーが展開する技法である。
事例はApple AirPods Proのスクロールテリング。
SDGsでは、人々の多様性を受け入れて、「誰ひとり社会に取り残さない」ことを目標とされている。
そのため、多種多様な人々が利用するWebサイトやコンテンツにも、インクルーシブデザインを取り入れることが推奨されるようになってきた。
インクルーシブデザインとは、アクセシビリティ・年齢・文化・経済状況・教育・性別・地理的位置・言語・人種など、さまざまなテーマに対応することが求められる。
インクルーシブデザインの詳細については、こちらのブログ「WEBデザインに有効なインクルーシブデザインとは」でも解説している。
最後にECサイトデザイントレンドにも触れておく。
売上アップが目標であるECサイトに必要なのは、見た目だけではなく、商品内容のわかりやすさ、情報がシンプルにまとまっていることが重要である。
ECサイトは、PCでもスマホでもどちらでも商品を見つけやすく、商品・サービスの購入（Check Out）に至る動線もシンプルで統一性があるサイトにデザインすることで購入率（CVR）は高まる。
ECサイトはシンプルであることが基本と言える。私はECサイトデザインはミニマリズムを採用すべきと考える。
ミニマルなWebデザインは、単純に商品を見やすく使いやすいだけでなく、サイトの動作が早い、表示速度が速いなど実用面でも優れている。
2022年12月、日本流行色協会（JAFCA）が発表した2023年の色は、「ルミナスイエロー」である。
2023年は優しく、明るい未来と癒しを感じさせる、明るい黄色「ルミナスイエロー（Luminous yellow）」である。
ルミナスイエローは、「穏やかに輝く」という意味で、快活さと春気分を象徴する色彩だ。
今年の春のファッションアイテムに是非、取り入れたいものだ。
また、アメリカパントン社（PANTONE）が発表した、2023年の「カラー・オブ・ザ・イヤー（Color of the Year）」では、活力と力強さ脈打つようなパワフルなカラーとして「ビバ マゼンタ（Viva Magenta）」が選ばれた。
鮮やかな赤としてのビバ マゼンタは、前向きな華やかさがあり活気に満ちた色である。
2023年、注目されるだろうWEBデザインのテクニックを紹介した。
トレンドは必ずしも導入する必要はないが、デザイナーはトレンドチェックをし、ユーザーやクライアントに有益を思われるテクニックは積極的に取り入れてゆくべきだろう。
参考：【2023年版】いろんなデザイントレンドを調査、まとめてみた
タグ: ECサイト, webデザイン, デザイントレンド, 流行色