このエントリーをはてなブックマークに追加

ユーザテストはこう活用する!『ユーザテスト×食品ギフトECサイト』5.トップページ解説編

食品ギフトECサイト_サムネイル当ブログではアイトラッキングを中心とした調査を紹介していますが、アイトラッキングだけが消費者の行動を知る手段ではありません。

このシリーズでは、リモートユーザテストと定量的なデータの活用・専門家評価により、競合サイトをベースにした商品購入の動き・商品購入の際に必要な条件・競合サイトの抱える課題を抽出し、それらの問題解決をするためのギフト向け牛肉ECサイトデザインを作成した事例をご紹介します。

最後となる今回はトップページについてご紹介します。

『おかいもの研究室が作った食品ギフトECサイト』シリーズの目次

1. 制作の流れ紹介編
2. ヘッダ解説編
3. 商品ページ解説編
4. ギフト紹介ページ解説編
5. トップページ解説編 ← 今回はここ

完成したデザイン

完成したデザインはこちらからご確認いただけます。

商品ページ / ギフトトップ / ギフトカテゴリ / トップページ

※ダミーとはいえ実際の本店サイト構築システムであるCARTSTARを使用して構築しています。商品検索や商品注文などができてしまいますが、実際に商品をお届けすることは出来ません。また表示確認のため様々なダミー商品データ・ダミーページが登録されておりますので、ご理解の上閲覧ください。

トップページ

ECサイトにおけるトップページの役割は、お店に興味を持ってもらう、何を売っているお店か理解してもらう、売れる・売りたい商品への誘導、イベントの案内など、多岐に渡ります。

シーズンごとのおすすめ商品、お店としてのこだわり、実際に行えるキャンペーンやイベントなど、お店によってもアピールしたい・もしくはアピールできる内容が変わってくるため、一つのパターンにするのがとても難しかったページです。

前提にもあるように『テンプレート』であることと、直帰もしくは離脱させないことを再優先して考え、以下のような要素をトップページに配置することにしました。

  • トップページの第一印象が決まるメインバナーエリア
  • 短期的な人気商品をアピールするためのランキングエリア
  • 売りたい商品を紹介するピックアップエリア
  • 新着情報
  • お店の紹介

メインバナーエリア

トップページが閲覧された際に、ファーストビューに入ってくるうえ、最も大きく写真が表示されるエリアであるため、閲覧した際のイメージを大きく左右するエリアです。

範囲が大きく取られたエリア内でバナーが切り替わるローテーションバナーは、最近のウェブサイトではよく見られる表現方法です。一定の範囲内に複数のバナーを設置できるため他要素を邪魔してしまわないのが特徴です。

バナーの切り替え方は、じわっと前後のバナーが切り替わるディゾルブ方式を取りました。

ローテーションバナー_じわっと切り替わる

バナーが左右にスライドする切り替え方もよく見られますが、特にシニア層の方は動きのあるUIを苦手とする傾向があるそうです。

なお、ローテーションバナーには批判的な意見もちらほら見かけます。今回は、このエリアを活用してお店の『イメージ』を伝えることのほうが主な目的であり、どちらかというとその下のエリアを見てもらうことを想定しています。

なので、イベントやキャンペーン情報を最優先でアピールし、クリックしてもらいたいのであれば、固定式のバナーに変更しても良いでしょう。

ランキングエリア

ランキングエリアは、今まさにお店で人気がある商品を紹介するエリアです。ランキングといえば、テレビでも雑誌でも、一般的なECサイトでもよく見かける商品紹介の切り口ですが、やはり失敗したくない心理から、人気商品が紹介されていると安心してもらいやすいようです。(ランキングを好む心理について上手くまとめられた記事があると良いのですが)

また、『人気部位ランキング』など切り口を変えて紹介ができるように、切り替えリンクを設置してあります。

ランキング

ピックアップエリア

ピックアップエリアは、安定して売れ続ける定番商品など、ある切り口において売上に関係なく商品を紹介するためのエリアです。

例えば『あっさりしたお肉』、商材によっては『季節の魚介類特集』といったことも可能でしょう。

ピックアップ

新着情報

ECサイトでは、サイトの更新感を演出ということで新着情報をページ上部に持ってくることがあります。しかし、食品、特に牛肉を取り扱う場合はシーズンでの商品の入れ替わりなどがあまり発生せず、逆に更新されていないように見えてしまう可能性が考えられました。

そこで、あえて新着情報はページ全体から見ると若干下の方へ配置するようにしました。

新着情報

お店の紹介

お店への安心感を持ってもらうため、お店の紹介エリアをトップページに設けました。ここには下記のような情報を掲載してもらうことを想定しています。

  • お店としてアピールできる特徴や差別化要素(お店の歴史や商品に対しするものなど)
  • 実店舗が存在する場合は、案内するページヘのバナー
  • その他お店が持つサイトなどへのリンク

これらは、『お店は信頼できるところなのか』という直接的なお店への不安を解消したり、実店舗が存在することを伝えて実店舗に足を運んでもらったり、またはそれにより安心感やどんな雰囲気のお店なのか、といった商品紹介だけでは伝わらない情報を伝えるのが目的です。

お店の紹介


以上、5回に渡っておかいもの研究室が作った食品ギフトECサイトの解説をしてきました。このようにユーザの動きを想定しながらサイトを構築することで、以下のような効果が期待できます。

  • プロジェクトに関わるメンバー全員で、解決すべき課題を共有できる
  • KPIを事前に決めているのでサイトをリリースした後の振り返りを行いやすい

ユーザーテストの手法やレベル感はいろいろな実施方法があるので、サービスの規模によってクイックスタートを目指したり入念に準備をしたりと、予算や状況に合わせた臨機応変なユーザテストプランを実施できます。

  • 関係者間で頻繁に認識違いが発生する疑問点が存在する
    ⇒に関して、アンケート調査のみ実施
  • サイトの情報量が増えて煩雑になってしまった
    ⇒3名程度のリモートユーザーテストで、購入に至るまでに本当に必要とされる情報を確認
  • これまで運用されていたサイトを引き継いだが、どこに課題があるのか全く分からない
    ⇒サイトの目的の整理した上で対面式もしくはリモートユーザーテストまでを5名で実施し、現状を整理する

もし、今のサービスを改善したいもしくは新しいサービスを立ち上げたいと思われているのであれば、ぜひ一度ご相談ください

このエントリーをはてなブックマークに追加

おかいもの研究室のサービスに関して
お気軽にお問い合わせください

▲ ページ先頭へ