matsushita

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

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

最後に

サイトのデザインはターゲット層や商品、ブランドイメージによっても異なります。
まずはお店や商品の特性を理解し、どういったサイト作りがユーザーに利便性をもたらすか。
日々、効果検証を行いながら、改良を重ねていくことが大切です。

*今回紹介させて頂いているサイトは弊社の制作と関係ないものが含まれています。

新しいウェブ体験を作ろう TAMのPWA開発
お問い合わせはこちら