webと企画 #9 デザイン効果

こんにちは、クリエイティブディレクターの
高宮と申します！

第八回目の記事では
「フォトディレクション」
という部分についてざっくりお話
いたししました。前回の記事はこちら
https://note.com/chiharunoippo/n/n0fa5b3da4f56

さて第九回目の記事では
「WEBのトレンドデザインとその効果」
についてお話ししようと思います。

実務でwebデザインをリサーチしたり、
参考にしているテーマやデザインのトレンドを
紹介しながらそのトレンドデザインは
どういうケースの場合に適しているのかなど
考察していきたいと思います。

2020年のトレンドデザインは

・ダークモード
・グラデーションデザイン
・流体シェイプや幾何学図形
・スクロールに合わせた展開アニメーション
・マイクロインタラクション
・対話型音声インターフェース

こちらを参考にしました。
https://www.live-commerce.com/ecommerce-blog/2020-web-design/#.XlOe25P7RQJ

まず、ダークモードとは
背景がくらいトーンのデザインで
近年ではスマホの普及やオンラインコンテンツの
増加によりユーザーの
スクリーンタイム(画面を見ている時間)が
非常に長くなってきています。

そんな中でこのダークモードは
今やtwitterやyoutubeなどの様々な
場面で導入されるデザインで
主な効果としては
「目が疲れにくい、優しい」
「バッテリーが長持ちする」
という効果があり、WEBでも適用される
ケースがあります。

WEBのダークモードは特に
コンテンツの情報が多い場合や
→(じっくり読んでもらいたい)
ブランドコンセプトに合わせて
他のサイトとの差別化を図る場合などに
使用されているケースがほとんどだと
感じます。

次にグラデーションデザイン
についてです。トレンドともなる
グラデーションデザインは私も実務で
使用することが多く、とてもメジャーな
デザインであると感じます。

具体的な利点としては

・写真や画像素材が少ない場合も
　おしゃれに見せられる
・ブランドのトーンマナーに当てはまる
　物を再現しやすい
・グラデーションにする色を
　少し変化させるだけで違う印象にもできる

だと思います。

一つ課題となるのはシンプルで洗練された
コンテンツ配置が重要になってくる事。
なのでこのデザインを適用する場合は
コンテンツの情報量が多い
写真をたくさん使いたい場合は
あまり適していないデザインである
と感じます。

次は流体シェイプト幾何学図形を
使用したデザインについて。

流体シェイプ、幾何学図形は
滑らかな波紋や幾何学図形などを使用する事で
幻想的な雰囲気を出せるデザイン。

こちらのデザインの特徴は
・グラデーションカラーと共に
　使用されるケースも多い
・写真などを変わった形にする事で
　意図してユーザーの興味を引ける
・メインビジュアルに自由度の高い
　表現力を持たせられる

といった点が特徴的です。
抽象的、幻想的なイメージをユーザーに
与えられるのでお店やカフェの雰囲気などを
伝えたい時に適していると考えられます。
興味を引くという点ではLPにも向いている
デザインであると思います。

次にスクロールに合わせて
展開するアニメーションデザインについて
お話しします。

近年ではもはや当たり前のように
組み込まれることがとても多い
メジャーなデザインですがその理由は
様々な効果がユーザー体験を向上させて
いるからです。

その効果は
・スクロール操作による変化を楽しめる為
　ユーザーの興味を引くのに適している
　どんどんスクロールして行きたくなる心理
・動的に変化するコンテンツは認識がしやすい
といった効果があるでしょう。

こちらのデザインも、ユーザーの興味を引く時
やスクロールが多く行われるページに
適しているデザインですので
LPでの使用や時にはいい印象を与えるという
部分からコーポレートサイトなどでも
見かけるデザインです。

次は3Dグラフィックスを使用した
デザインについてです。

こちらは3Dグラフィックスを使用し、
アニメーションを加えることで
印象にインパクトを持たせられるのが
特徴のデザインです。
幾何学のテーマとは違い3Dで表現できる
個体の物を印象に残しやすい
特徴があります。

こちらを適用するケースは主に
商品や製品を紹介するECサイトや
LPでの使用で他ページとの差別化ができる
デザインです。

次はマイクロインタラクションデザイン
についてです。

マイクロインタラクションとは
細かな相互作用があるという特徴の
デザインで具体的な例としては
追従するカーソルやローディング画面、
マウスホバーでの動的変化があるデザイン。

マイクロインタラクションを組み込む
メリットやその際与えるユーザー効果は
・離脱率の減少
・サイト自体への興味促進
・ユーザー体験の向上
などが挙げられます。

上記の効果から
このデザインを組み込むのに最適なのは
・コーポレーションサイト
→会社のブランド個性、世界観を表現できる
・イベントやショッピングのECサイト
などが適していると考えられますね。

最後に対話型音声インターフェース
について。こちらはデザインというより
システムに近い部分だと思います。

現状ではまだまだ普及率も低い
音声インターフェースですが、将来的に
デザインに組み込まれることは十分に
あると考えられます。

このシステムが導入されていれば
新しいユーザー体験(UX)の開発にもなり
音声対話、音声文字化などは
特にシステム的にも手順の多い
ECサイトを手助けする形で普及していく
のではないかと考察しています。

今回は
「WEBのトレンドデザインとその効果」
についてお話しました。

次回は
「デザイン基礎理論」
についてご紹介したいと思います。

ここまで読んでくださった皆様、
ありがとうございました。
次回も、よろしくお願いいたします！