売れるECサイトのトレンドデザインとは？
みなさま、こんにちは！
ネットショップの活性化を目指し、
ECサイト経営での黒字化を支援する
にしきたに です。
私はEC業界に初心者の状態で入っていきました。
まだまだ未熟者ですが、少しずつ知識がついてきたと思います。
本日の記事はこのようなお悩みの方にご紹介します
・ECサイトのデザインについて悩んでいる
・最新のトレンドを知りたい！
・売れるECサイトはどのようにして
作るのか知りたい！
1.2020年のトレンドデザイン5選
2.「yahoo award」の受賞ショップから学ぶ！売れるECサイト作り
3.お客様目線でサイトデザインを見直そう！
1.2020年のトレンドデザイン5選
①ダークモード
2020年はサイトの背景が暗いトーンやデザイン
が増えると言われています。既にこちらはtwitterやLINEなどで追加されています。
白い背景に比べると
「目に優しい」「バッテリーの消費を抑えられる」
などの利点があります。
私もSNSはダークモードに切り替えて使用しています。一日中PCやスマホの画面を見ている方が多いので、有効的です。
暗い背景の白文字となると、文章が読みずらいなどのデメリットもあるのでお店のコンセプトに合ったダークトーンのデザインで制作しましょう。
②グラデーション
【画像引用元 http://photoshopvip.net/98951】
グラデーションとは色調・明暗などの段階的変化、
つまり2色以上の色を使い、色彩の変化を取り入れたデザインのことを指します。
こちらの「WebGradients」というサイトでは、
180種類のグラデーションが自由にコピぺできます。グラデーションの参考にしていただければと思います。
グラデーションのメリットとしては、
一色では表現できない独創的な雰囲気を演出し、
他社サイトと差別化できます。
③フォトと○○
【画像引用元:https://www.cromier.it/】
写真と何かを組み合わせたデザインが注目を集めています。従来からある写真にイラストやグラフィックデザインを施すものが再ブレイク中です。
お店の看板となるようなメインビジュアルの写真を
既に持っている場合だとイラストや文字など
を組み合わせるだけなのですぐに取り入れやすいと思います。
④コーナーナビゲーション
【画像引用元:https://www.tallervertical.es/】
メニューを配置する場所は、
サイト上部やサイドのみでしたが、
2020年は四隅にメニューを配置する
「コーナーナビゲーション」が注目されています。
あえて画面端に各メニューやSNSのアイコンを
必要最小限まで省略する表現で
スマートな雰囲気を醸しだせます。
またカテゴリーごとに枠のように囲うことで、
全体的にメリハリのあるデザインとなるので、
オススメです。
⑤スクロールデザイン
【画像引用元:https://hack.wired.jp/】
この静止画だと伝わりずらいですが、
上記のサイトページに入ると中央の丸い図形の辺りにマウスを持っていくと、
その動きと同じように自動でクルクルと動き、画面全体がスクロールされます。
商品画像やキャンペーン画像などにスクロールはたくさん使われますね。
スクロールによって動きのあるデザインは、興味を持たれやすく、目を惹きます。
ウェブサイト全体が動くようなデザインが好まれるようです。
看板画像だけでなく、商品画像やバナー画像なども
自動スクロールのものにするとページを開く手間が省けて、すぐに情報が知りたい方に効果的です。
デメリットとしては、あまりスクロールを増やしすぎると、ページの表示される速度が落ちますので
目につきやすいページ上部やレフトナビなどに集中させるといいと思います。
▽▼こちらも是非ご参照ください▽▼
2.「yahoo award」受賞ショップから学ぶ！売れるECサイト作り
「cleamdot.」さん
こちらのお店は「ヤフーアワードのアクセサリー部門」で受賞されています。
個人的にすごく好きなレイアウトなのですが、
画像の配置が多すぎず、画像の上部と下部に自動スクロールが配置されていて、
探している商品が見つけやすくなっています。
画像をたくさん載せると賑やかな印象になりますが、ページ自体が重たくなってしまい、画像が全部表示されるまで時間がかかってしまいます。
スクロールやスライダー機能を使って、
動きのある探しやすいデザインがいいと思います。
こちらは「SUPER CAKE produced by OCS」さんです。
スイーツ部門で1位を獲得されています。
先ほどご紹介した「ダークモード」を採用されています。
黒の背景に美味しそうな商品画像を配置することにより高級感を演出し、食欲をそそるような画像を動的に配置されています。
売れるECサイトに必要なこと…
それは第一印象で商品に興味を
持ってもらえるような演出にすることです。
3.お客様目線でサイトデザインを見直そう！
お客様は第一印象で判断する(3つのポイント)
お客様がページを開いたときの第一印象で
興味を持ってもらえるか決まります。
①注意を惹く
パッと見た時に「なんだろう」と気になるような
注目を集めるデザイン
②分かりやすい
どんなものが売っているのか一目でわかる
探したい商品が見つけやすいデザイン
③購買意欲が湧く
「欲しい！」と思うインパクトのあるデザイン
いかがでしたでしょうか。
デザインのトレンドも毎年変わっていきます。
売れているECサイトはトレンドを取り入れて
お客様目線のサイトづくりを心がけています。
最後までお読みいただきありがとうございます。
