WEB DESIGN TREND 2023
こんにちは。ナディアのデザイナーのWです。
2023年、今年もたくさんの素敵なwebサイトを見てきましたが、その中で新しいと感じ、印象に残ったデザインをご紹介します。
1. ダイナミックなhoverの挙動
hoverのデザインといえば、今までは色が変わったり、写真がズームされたりといったシンプルなhoverの動きが主流でしたが、最近では大胆に変化するダイナミックなhoverをクリエイティブなサイトで多く見られました。
特に印象的だったものは、テキストリンクのメニューをマウスオンすると背景が全面画像に切り替わるデザインです。
はじめは、テキストリンクの基本的な情報のみが表示され、ユーザーが興味を持ったときにイメージ画像が背景画像として全面に表示される、といった階層的な情報の提供をしています。
画像を用いて導線をデザインする際、似たようなレンポジ画像が並んだり、画像では表現しにくい内容をわかりやすくする目的で取り入れた画像の意図が伝わりにくく、かえって混乱させてしまう場合もあります。
一方で、上記でご紹介したサイトのように、メニューをテキストリンクとして存在感のあるサイズや配置で並べ、画像はhover時に背景画像として大きく表示する、といった見せ方は、ユーザーにとっても各メニュー内容を認識しやすくし、スマートで視覚的にも魅力的な演出だと感じました。
ただし、hoverデザインはスマホでは効果を発揮しない理由から、モバイルファーストのサイトや画像の重要度が高い場合には適しません。
また、アクセシビリティの面においても考慮が必要な場合なため、取り入れる際は適切かを吟味することも忘れずに行いましょう。
2. ブレンドモード
スクロールによって写真などの上に文字が重なる場合に、下の要素と重なる部分に応じて色が変化する、という手法です。
追従するヘッダーのロゴなどに適用すると、下に背景を引かなくても常に視認性を担保することができます。
ナディアのサイトのヘッダーにも使われています！
このような描画モードを調整したデザインは、今までは実装が難しくWebデザインでは使用を避けてきたものでしたが、現在ではCSSのブレンドモードが登場し表現が可能となったことから、多く見られるようになりました。
スクロールに伴い重なる要素が変化することによる視覚効果がクリエイティブな印象を引き出し、シンプルでおしゃれなデザインにマッチします。
また、重なる色によって視認性が悪くなる心配も不要となるため、ユーザビリティ面にも優れており、汎用性を求められるメディアサイトなどでも効果的です。
3. 水平スクロール
水平スクロールのWebデザインは一般的な上から下にスクロールされるものとは異なり、横方向に向かってスクロールされるサイトです。
新鮮でユニークな動きで他のサイトとの差別化を図ることができます。
水平方向に広がるストーリーテリングや視差効果を活かしたサイトに効果的で、動的でクリエイティブなデザインを実現できます。
また、特定のコンテンツや要素を強調したいときにも効果的で、視覚的な焦点を当てることができます。
また、サイト全体の構造を水平スクロールにするのではなく、通常の縦スクロールのサイトの中で部分的に取り入れたサイトも多く見られるようになりました。
今までスライダーで見せていたステップやポイントが3つ以上並ぶような部分に水平スクロールを適用することで、コンテンツの見落としを防ぎ、視線の誘導がしやすくなったり、「次へ」ボタンを押す手間や自動で切り替わるタイミングを待つ必要もなくなるなど、ユーザーにとってのメリットが多くあります。
更に、「乃木坂的フラクタル」のように、縦方向・横方向のスクロールの進化版として、斜め方向に進む挙動を取り入れているサイトもあります。
斜め下に向かって進む動きは「坂」を連想させる他、左右に切り替わることでセクションの境目も明確になったり、通常の縦スクロールも交えることで特定のセクションや要素を目立たせることもできます。
4. 影のシルエット
自然光が当たったときにできる影を模倣し、植物や窓などの影のシルエットを背景に用いることで、平面の要素が奥行きを感じさせ、立体的な印象を与えます。
風で揺れているようなアニメーションを追加すると、さらにリアルな雰囲気が演出でき、上質で温かみのある癒やしの空間、夏や海の清涼感を感じる空気を表現することができます。
5. おわりに
今回ご紹介したデザインは、従来の常識から一歩踏み出した大胆な動き、少しの工夫やひと手間が、サイトのブランディングをより強く印象的に表現することができる新鮮で素晴らしいアイディアだと思いました。
来年も、クリエイティブさとユーザビリティのバランスを考えながら、目的やコンセプトに合わせてユーザーにとって魅力的で使いやすいデザインを作っていけるよう、新しいアイディアを上手く取り入れていきたいです。
この記事が気に入ったらサポートをしてみませんか？