1. HOME
  2. ブログ
  3. 【2020年版】ECサイトデザインのトレンドまとめ

【2020年版】ECサイトデザインのトレンドまとめ

みなさま、こんにちは!

ネットショップの活性化を目指し、
ECサイト経営での黒字化を支援する

『おかもと』です。

もうすぐバレンタインデーですね(^^)

今年はまたまた「アナ雪2」の映画公開で
アナ雪ブームが再来しているので
オラフのアイシングクッキー作りに挑戦してみようと
こころんでいますが、きっとただの雪だるまになって
しまいそうな気がしているそんな日々です(笑)

先日よりECサイトのオシャレなデザイン
ご紹介させていただいております!

本日はそんなオシャレなECサイト
デザインのトレンドをまとめてみました!


 

-目次-
1.オシャレECサイトまとめ
2.ECサイトのトレンドデザイン
3.見た目での共通点
4.機能面での共通点
5.アニメーションがもたらす効果
6.オシャレECサイトのトレンドの共通点とは?
7.まとめ

1.オシャレECサイトまとめ

私が京都に住んでいますので、京都実店舗をもつ
馴染みのあるオシャレECサイトを集めてみました!

MoMA Design Store

るMoMA Design Storeのサイトです。
実店舗もオシャレですが
ECサイトもバナーやフォントがオシャレで
シンプルにまとめられています。

 

 

 

 

 

flying tiger copenhagen

実店舗でも馴染みのあるフライングタイガーの
サイトです。
店舗ロゴのフォントが可愛くて印象に残ります(^^)
全体的にポップなイメージでシンプルですが
可愛くまとめられています。

unico

オシャレ家具で有名なウニコさんです。
雑誌などでもよく掲載されていますよね(^^)
インテリアのコーディネートバナーが
とてもハイセンスで思わずスライドバナーを
全てチェックしてしまいます(笑)
商品画像は白背景でシンプルに商品を際立たせており
高級感も漂わせてもらえる雰囲気です。

ブルーボトルコーヒー

京都の南禅寺の近くにもあるブルーボトルコーヒー。
ロゴが青いボトルのシンプルなデザインです。
ECサイトも全体が白と青で統一されていて
ぶれないブランディング力も魅力ですね(^^♪

MARIEBELLE

以前もご紹介させていただいた
マリベルの公式サイトです。
PC・SPともども大きなスライドバナーに
思わず圧倒されクリックしたくなります!
見た目も可愛い商品の魅力が最大限に
伝わるサイト作りの工夫をされています。


2.ECサイトのトレンドデザイン

上記でオシャレなECサイトを
ご紹介させていただきましたが
現在のECサイトのトレンドは
どういったものになるか?

見た目での共通点
機能面での共通点

上記にわけて確認していきましょう(^^♪

3.見た目での共通点

ヘッダー・フッターで構成されている

PCページにおいても
スマホと同様、レフトナビがなく
ヘッダーメインコンテンツフッター
構成されています。
幅を最大限に使って表現するのが
トレンドのようですね。

フォントの使い方

各々の店舗の魅力を引き出すためには
フォントの種類も使い分けられています。

例えばフライングタイガーの場合は
ポップなイメージをフォントで演出してますし
ウニコの場合はシンプルなフォント
演出をしています。
フォントの使い方によって
サイトのイメージも大きく変わりますね。

コンセプトカラーを選ぶ

サイト全体のコンセプトカラーで
ブランディングを図ります。

色は心理学的にも
” 人間の行動に大きく影響を与える ”
と言われております。
デザインにおいての配色はとても重要と
言われておりますので、店舗にあったカラーを
選んでみましょう。

バナーでの誘導を活用している

バナーはユーザーにとって
とても目に留まりやすい
インパクトのあるものですよね。
バナーを上手に活用して
転換率回遊性を高める店舗作りを
されています。

4.機能面での共通点

フローティングを活用

ヘッダー部分に検索をしやすいように
カテゴリを掲載されていることが多いですが
こちらをフローティングさせることで
スクロールをしていても
すぐにチェックしたいページへ誘導できるのが
魅力です。
わざわざ途中で戻らないといけない…という
煩わしさもなくストレスフリーでショッピングが楽しめます。
またすぐにタップしたいバナーなどもフローティングを
することによりタップ率が高くなります。

ハンバーガーメニューの活用

スマホでは主流のハンバーガーメニュー
よくサイトでこのようなボタンを見かけませんか?
こちらをタップするとカテゴリメニューや
検索サーチが表示されます。
ページ内にメニュー表示のエリアを省略できることで
小さな画面のスマホでもより多くの情報掲載ができる
仕組みとなっております。

レイアウトの一工夫

どのデバイスからでもサイトへアクセスすると
まず1画面でどれだけの【 価値 】を伝えられるかが
大切なポイントです。
ECサイトはサイトのデザインやレイアウトなどで
大きく印象づけられるため、まず目に留まる
1画面にバナーや必要な情報を掲載して
離脱防止に繋げることがポイントです。

5.アニメーションがもたらす効果

ご紹介させていただいたどのサイトでも
スライドバナー “を使って
動きのある表現をされています。

現代のWEBデザインには欠かせない重要な要素にも
なっていますね。

もちろん大前提として
クリックしたくなる
バナーデザインを作ることですが
動き “を用いる事で
上手に注目を集め
行動を起こしやすい視覚効果が得られます。

またスライドバナーなどを用いる事によって
同じ枠の中で、より多くの情報掲載が行えるので
スマートにユーザーの回遊性を高められます。

最初に表示される画面には
スライドバナーなどを用いて
表現させることをおすすめいたします(^^)

6.オシャレECサイトのトレンドの共通点とは?

様々な点にわけて
トレンドのご紹介をさせていただきましたが

トレンドの中には
デザインや機能を使って

・快適にショッピングが楽しめるように
回遊性を高めるサイト作り
・商品の魅力が伝わるようなサイト作り
・お店自体の信頼をもってもらうサイト作り

上記のような工夫がされている共通点が
見つかりました(^^)

ぜひ色々とご参考くださいませ。


最後までお読みいただきありがとうございました(*^^*)

それではまた次回★

関連記事

おすすめの虎の巻

最近の虎の巻

カレンダー

2020年2月
« 1月   3月 »
 12
3456789
10111213141516
17181920212223
242526272829