ECサイトをデザインする時のポイントと参考事例

ECサイトでは、買い物のしやすさを考えたレイアウトとともに、商品をわかりやすく伝えたり、購買意欲を湧かせる見せ方が重要になってきます。
今回は参考事例とともに、ECサイトをデザインする時のポイントをご紹介したいと思います。

ユーザーがわかりやすいデザイン仕様に

ECサイトでは、商品やブランドの魅力が伝わるビジュアルであることや、誰が見てもわかりやすいレイアウトであることが重要です。
直感的にイメージできるアイコンや、目を引くボタンの設置など、細かいところまで配慮したデザインを心がけましょう。

目的の商品が探しやすく、検索性に優れた「ベルメゾンネット」

http://www.bellemaison.jp/

グローバルナビではサブナビゲーションをマウスオーバーで表示するようにし、検索エリアを上部にすっきりまとめています。全てのページに設置されているため、カテゴリ別に商品を探しやすく、回遊性を高めます。
ECサイトでは、最近チェックした商品や関連商品、ランキング、クーポンといったコンテンツを設けたり、特集ページを用意して、ユーザーの潜在的な需要を呼び起こす工夫も大切です。

ファーストビューで印象づける「TAKAMI」

https://www.takami-labo.com/

サイトにアクセスした際に、画像や動画を画面いっぱいに展開するデザイン手法を「ヒーローヘッダー」といい、最近はこういったサイトが多く見られるようになりました。
1カラムで視覚的なインパクトが強いので、サイトのブランディングや印象を残すのに効果的です。
製品一覧では「落とす」「洗う」「整える」など、一目でわかるグループ分けがされています。

商品写真は高品質で魅力的なものを

ネットショッピングは商品を実際に手にできないため、伝える情報として写真は最も重要です。
ファッションではあればターゲット層に合わせたモデルの着用写真、コスメであれば使用写真や、使い方など。
商品購入後のイメージを喚起させるものを用意しましょう。

ブランドコンセプトを忠実に表現した「AÃRK」

https://aarkcollective.com/
こちらは海外のサイトですが、必要な情報は最低限にとどめ、写真メインで構成されています。
様々なシーンやモデルを起用した写真を複数掲載し、まるでインスタグラムを見ているかのようです。
こういったデザイン手法をミニマルデザイン「Less is More(より少ないことは、より豊かである)」といい、海外に多く用いられています。

上品で鮮やかな商品画像が際立つ「petit ACCUEIL」

http://petitaccueil.com/

食品は明るく彩度を高めに、色味も多少暖色に調整することでより美味しそうに見えます。
写真が綺麗だと、切り抜いた画像を並べるだけでも雰囲気がでますね。
サイト自体も余白をたっぷり持たせていて、優雅で高級感のあるデザインに仕上がっています。

購入の決め手となる商品ページを作り込む

サイトにアクセスするときにTOPページから入るとは限りません。
商品ページでの案内が写真、商品名、価格だけであればユーザーに不信感を与えます。
詳細な情報を掲載したり、商品を購入するメリットがしっかり伝わるよう、ターゲットに合わせた見せ方を考えましょう。

魅力ある商品とライフスタイルを提案する「BAMUDA」

https://www.balmuda.com/jp/range/

こちらは電子レンジの商品ページの一例です。
使用方法など、静止画では表現できない情報は動画を活用してみるのも手です。
写真を大きく使用したダイナミックな見せ方が印象的で、できることから細かいスペックまで各ページに分けて、詳しく紹介しています。
また実際のお客様の使用例や作れるレシピを掲載することで、購入後のイメージを喚起させます。

作り手の想いを伝えて、信頼感を届ける「conosaki」

https://conosaki.net/i/s_kurikawa

独自商品であれば、作り手のこだわりや生産背景もしっかり伝えましょう。
上記ページでは、たくさんの写真を使ってランドセルの細かいデザイン構造や、想いを一つ一つ丁寧に紹介しています。
また、お客様の声を載せることで安心感を与えたり、カート下部すぐに配送、決済の情報を載せているところから親切心が伺えます。