Yahoo! Shoppingから学ぶ閲覧者を「動かす」ECサイトデザイン

初めて日本語でこのブログを更新しますっ(日本人なのに)。

筆者のななしです。よろしくお願いします。

今回はECサイトデザインのポイントを考えていきたいと思います。
ECサイトを作りなれていない人間が突然ECサイトの制作を始めると、デザインのロジックにびっくりします!特に画像の作り方なんかはコーポレートサイトとは全然違います。ECサイトを見ていると次の様な傾向があるなと感じています。具体的には……

  • 洗練というよりひたすら欲しがらせる。
  • 読みやすさよりも見つけやすさ。
  • 一点集中よりも「ついで」狙い。

こんな傾向があります。

先日Yahoo!ショッピング(日本)で15店舗のデザインを通りすがりの人風味で観察してきました。早速観察結果をアウトプットします。

店舗名は小さく、商品は大きく載せて見つけてもらう

ショッピングサイトのヘッダーのロゴやらなんやらが本当に小さい。営業日やカテゴリなどの方がよっぽど大きく表示されています。それに対して商品画像はでかい!これは商品を見てもらうための施策です。ショップの主役は商品であり、購入してもらえなければ意味がありません。極端なことを言うと、店名は商品購入後に気に留めてもらうくらいでいいんです。購入を助けるコンテンツを閲覧者の目につくように設置しています。メニュー、お得な情報、送料無料などの大事かつ閲覧者が食いつく有用な情報も目立つように置かれています。

商品画像は駆け引き上手

商品画像には訴求ポイントを1-3ポイントしっかりと入っています。文章は短く端的で、一目でわかりやすいです。注目すべきは商品画像の駆け引きのテクニックです。商品画像は閲覧者にすべてはさらけ出しません。「あ、そこがもうちょっと知りたい……」というところを隠しておくのです。そうすると商品ページに行って詳細を見てみようという閲覧者の心理変化が起こり、彼らを詳細ページに連れて行くことができるのです。

物は言いよう、宣伝文句は巧みに

ECサイトの文言はさらっと書かれているようで考え込まれています。例えば「メール便を廃止にしました」よりは「当店は物流改革しました! メール便廃止のお知らせ」の方がインパクトがあるし、販売店都合である廃止を前向きに活動する店舗のイメージに変えることができます。この手法、会社で社員のモチベーションを上げるときにもお応用できそうですね。

綺麗なだけじゃダメ、閲覧者を魅了して決済に誘う

ECサイトはブランドサイトのように洗練されていなくていい、綺麗じゃなくていいです。泥臭くていいから閲覧者を魅せるものをしっかり入れてアピールすることが大切です。そして購入まで引っ張っていく駆け引きの要素が必要。専門的に言うならば導線が大事ということになります。閲覧者をエスコートするルート、途中で差し出されるオプションを工夫する必要がありそうです。あと、安心感と安定感も大事です。拝見したどのサイトも、すっきり分かりやすいんですよね。ドライフルーツを販売しています、今日はレーズン1㎏が超お買い得、レーズンにはカリウム・鉄が豊富、送料は1200円以上無料です、セールは明日12時まで――こんな感じで分かりやすく、消費者に役立つ短いセンテンスを畳みかけてくるのがECサイトです。これら表現の中にはびっくりするくらい考え込んだり誤解しそうな要素がないです。そういった表記は閲覧者の食いつきが悪く、誤解に至っては客足を遠のかせます。

こちらはいかがでしょう? これがだめでも代替推薦品なら買ってくれる

スーパーでの買い物でこんな経験はありませんか?あらびきソーセージの横に「おもてなしにピッタリ」というPOPとともに置かれた燻製ソーセージに手を伸ばしてしまったこと……。もしあなたが家族の誕生日や来客を控えて食材の買い物をしていたら、薫製ソーセージに手を伸ばす確率はぐんと上がるのではないでしょうか。これの代わりにこれを買おうか……と思わせる商品を推すやり方を「代替推薦」とななしは読んでいます。この原理をECサイトも利用しています。今閲覧されている商品を買ってもらえなくても、類似商品で機能や成分、性質が異なるものをお勧めとして近くに掲載して置いたら買ってくれるかもしれません。これはいわゆる関連商品、ピックアップ商品というものに分類されます。

以上ななしがYahoo!ショッピング15店舗観察分析レポートでした。今回はぱっと見どうかな、というユーザー視点でまとめてみました。ざっと観察した割には大事なことがたくさん出てきましたね。是非制作に生かしたいものです。

また時間があるときに観察を試みます、お楽しみに。

Posted by Nanashi