WEB DESIGN TREND 2023

こんにちは。ナディアのデザイナーのWです。
2023年、今年もたくさんの素敵なwebサイトを見てきましたが、その中で新しいと感じ、印象に残ったデザインをご紹介します。

1. ダイナミックなhoverの挙動

hoverのデザインといえば、今までは色が変わったり、写真がズームされたりといったシンプルなhoverの動きが主流でしたが、最近では大胆に変化するダイナミックなhoverをクリエイティブなサイトで多く見られました。
特に印象的だったものは、テキストリンクのメニューをマウスオンすると背景が全面画像に切り替わるデザインです。
はじめは、テキストリンクの基本的な情報のみが表示され、ユーザーが興味を持ったときにイメージ画像が背景画像として全面に表示される、といった階層的な情報の提供をしています。

bird and insect

bird and insect は、「面白い！」を作り、想いを共に描く image branding partner です。 bird and insect is the image branding partner that focuses on drawing out your brand story in a way that moves.

https://bird-and-insect.com/

金沢市・東京のWeb制作・ホームページ制作会社｜株式会社ニコットラボ

株式会社ニコットラボは、金沢市、東京を拠点に活動しているWeb制作会社です。UI/UXを中心としたブランディング・リブランディングを得意としております。10年以上の豊富な経験で最高の価値と体験をユーザーに届けます。公開後も保守メンテナンスやサイト改善のサポートも行っておりますのでご安心してご依頼ください。

https://nicottolabo.info/

画像を用いて導線をデザインする際、似たようなレンポジ画像が並んだり、画像では表現しにくい内容をわかりやすくする目的で取り入れた画像の意図が伝わりにくく、かえって混乱させてしまう場合もあります。
一方で、上記でご紹介したサイトのように、メニューをテキストリンクとして存在感のあるサイズや配置で並べ、画像はhover時に背景画像として大きく表示する、といった見せ方は、ユーザーにとっても各メニュー内容を認識しやすくし、スマートで視覚的にも魅力的な演出だと感じました。

ただし、hoverデザインはスマホでは効果を発揮しない理由から、モバイルファーストのサイトや画像の重要度が高い場合には適しません。
また、アクセシビリティの面においても考慮が必要な場合なため、取り入れる際は適切かを吟味することも忘れずに行いましょう。

2. ブレンドモード

スクロールによって写真などの上に文字が重なる場合に、下の要素と重なる部分に応じて色が変化する、という手法です。
追従するヘッダーのロゴなどに適用すると、下に背景を引かなくても常に視認性を担保することができます。
ナディアのサイトのヘッダーにも使われています！

株式会社ナディア | デザインの力を、すべてのひとへ。 | 東京・札幌を拠点とした制作会社

株式会社ナディアは東京・札幌を拠点とした制作会社です。数多くのWeb制作実績とサイト運用ノウハウを強みとしたクリエイティブに加え、さらに映像制作・編集からシステム・アプリ開発や3DCG、グラフィックデザインまで、ワンストップのソリューションをご提供します。

https://nadia.bz/

GRIN | はみだした生き方も悪くない、と笑える世界。

GRINは、自分の生き方で世界を生き抜く一歩を踏み出すクリエイティブマガジンです。

https://grinweb.jp/

このような描画モードを調整したデザインは、今までは実装が難しくWebデザインでは使用を避けてきたものでしたが、現在ではCSSのブレンドモードが登場し表現が可能となったことから、多く見られるようになりました。
スクロールに伴い重なる要素が変化することによる視覚効果がクリエイティブな印象を引き出し、シンプルでおしゃれなデザインにマッチします。
また、重なる色によって視認性が悪くなる心配も不要となるため、ユーザビリティ面にも優れており、汎用性を求められるメディアサイトなどでも効果的です。

3. 水平スクロール

水平スクロールのWebデザインは一般的な上から下にスクロールされるものとは異なり、横方向に向かってスクロールされるサイトです。
新鮮でユニークな動きで他のサイトとの差別化を図ることができます。
水平方向に広がるストーリーテリングや視差効果を活かしたサイトに効果的で、動的でクリエイティブなデザインを実現できます。
また、特定のコンテンツや要素を強調したいときにも効果的で、視覚的な焦点を当てることができます。

また、サイト全体の構造を水平スクロールにするのではなく、通常の縦スクロールのサイトの中で部分的に取り入れたサイトも多く見られるようになりました。
今までスライダーで見せていたステップやポイントが3つ以上並ぶような部分に水平スクロールを適用することで、コンテンツの見落としを防ぎ、視線の誘導がしやすくなったり、「次へ」ボタンを押す手間や自動で切り替わるタイミングを待つ必要もなくなるなど、ユーザーにとってのメリットが多くあります。

株式会社彩匠堂｜期待通り、以上のものを。

彩匠堂は、大阪にある印刷会社です。印刷も、梱包も、配送も。彩匠堂がさまざまなニーズにお応えします。お客さまの「こんなことがしたいな」を形にし、「そんなこともできるの？」に先回り。お客さま自身が気づいていないニーズもキャッチアップ致します。

https://saisyoudo.co.jp/

更に、「乃木坂的フラクタル」のように、縦方向・横方向のスクロールの進化版として、斜め方向に進む挙動を取り入れているサイトもあります。
斜め下に向かって進む動きは「坂」を連想させる他、左右に切り替わることでセクションの境目も明確になったり、通常の縦スクロールも交えることで特定のセクションや要素を目立たせることもできます。

乃木坂的フラクタル｜乃木坂46［公式］プロデュースアプリ

キミだけの乃木坂46をプロデュース 乃木坂46アプリゲーム「乃木坂的フラクタル」好評配信中 https://nogizaka-fractal.com #乃木フラ

https://nogizaka-fractal.com/

4. 影のシルエット

自然光が当たったときにできる影を模倣し、植物や窓などの影のシルエットを背景に用いることで、平面の要素が奥行きを感じさせ、立体的な印象を与えます。
風で揺れているようなアニメーションを追加すると、さらにリアルな雰囲気が演出でき、上質で温かみのある癒やしの空間、夏や海の清涼感を感じる空気を表現することができます。

おやど 森の音【公式】山形県 かみのやま温泉

山形県かみのやま温泉にある、おやど森の音[もりのね]は1日14組限定の宿。日常で忘れていた「小さな幸せ」をお客様に届けます。

https://mori-ne.com/

e-3X plus 公式ブランドサイト｜株式会社MTG

暮らしを快適にする、e-3X plus（イースリーエックスプラス）。水道水だけで安心して除菌や消臭などができる高機能除菌水を生成します。さぁ、あなたも暮らしをエコアップデートしませんか。

https://www.atlife-official.com/

5. おわりに

今回ご紹介したデザインは、従来の常識から一歩踏み出した大胆な動き、少しの工夫やひと手間が、サイトのブランディングをより強く印象的に表現することができる新鮮で素晴らしいアイディアだと思いました。
来年も、クリエイティブさとユーザビリティのバランスを考えながら、目的やコンセプトに合わせてユーザーにとって魅力的で使いやすいデザインを作っていけるよう、新しいアイディアを上手く取り入れていきたいです。