近年フラットデザインが主流だったECデザインは
若干の影を加えた奥行きのある半立体的なセミフラットデザインへと変化しています。
立体的な表現はVR技術等の進歩による影響も少なからずありますが
2000年代初頭に大多数を占めたコントラストの強い影ではなく
フラットな要素をベースに半立体的に見せる影が現代的と言えるでしょう。
今回は効果的でさりげない影の表現を伝授します。
■ファッションとECデザインの相関性
ファッション業界においても、色数を抑え無駄な装飾の少ないミニマルスタイルがトレンドですが
ECデザインでも同様のことが言えます。
この風潮はアパレル店舗に限ったことではなく
どちらかと言うと装飾的なデザインが主流の食品を扱う店舗も同様です。
例えば装飾としてよく用いる外枠や線ですが
色は白やライトグレー、太さは1pxとする等、極力目立たせず
華奢でソリッドな印象に仕上げることが主流となりました。
もちろん広告等の場合はそれも一概には言えませんが
外観に特化した場合、ファッションもECデザインもそれぞれの時代ごとのトレンドがあります。
中でも近年は、足し算ではなく「引き算」のデザインが好まれていると言えます。
ECデザインにおける「引き算」のデザインは一見すると容易に感じますが
一歩間違うと簡素でインパクトに欠ける印象になりがちです。
そこで活きるのが若干の影を加えた半立体的な演出です。
影の演出方法は様々ですが、ここで注目したいのが影の色です。
本来影の色は黒に近しいためデフォルト設定の黒を使用しがちですが
影を加える対象物の背景色が暖色か寒色かによって色を変えることが
自然な影の演出への近道と言えるでしょう。
■さりげない表現でインパクト訴求
例えば背景色が寒色の場合は黒でも馴染みが良いですが
暖色の場合は影が背景に対してくっきりとした強い印象になり
悪目立ちしてしまう可能性があるため、黒ではなく茶色を用いるのがおすすめです。
また、影の照射の角度や濃淡も画面上のコントラストを決める重要な要素となるため
デフォルト設定のまま進めるのはなく、対象物や背景に応じて毎回調整してみましょう。
例えば斜め左上から光が射している印象に仕上げたい場合は
角度を130度の位置に設定し、距離のスライダーを5pxの位置まで動かしてみましょう。
さらに影のサイズを調整し不透明度を下げることで自然で柔らかい影の演出が可能です。
仕上げに背景の色に応じて描画モードを調整し、完成度を上げましょう。
上記はあくまでも参考値ですが、大切なのはデフォルト設定に捉われないことです。
日々意識しながらデザインを行うことで自身の好みの値も確立され
その結果、表現の幅が広がります。
色数や装飾が絞られた「引き算」のデザインは
外観がシンプルになった分、写真等を使用した色数の多いコンテンツが目立ち
消費者にインパクトを与えることができます。
特に食品を扱う店舗のバナーの場合、横幅いっぱいに画像を広げたダイナミック訴求や
画像の一部分だけに動きを加えたシネマグラフ訴求等の工夫が見られますが
これらの表現は外観のデザインが「引き算」だからこそ画像が前に出てきて目立つとも言えます。
ページのどの部分に重点を置くのかを意識しつつ構成要素を調整することで
「引き算」のデザインでありながらも自然とインパクトが生まれるのです。
