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

ユーザテストはこう活用する!『ユーザテスト×食品ギフトECサイト』1.サイト制作の流れ紹介編

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

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

※1 リモートユーザテスト … 一般のユーザへ特定のタスクを依頼し、画面の録画に加え、思考を発話して録音しながら記録してもらう
※2 定量的なデータの活用 … ネットユーザへのアンケート等により取得した、サンプル数の豊富なデータ
※3 専門家評価 … 専門家による、経験則や評価項目を組み合わせた課題発見法

シリーズ1回目の今回は、調査からデザイン完成までの制作の流れをご紹介します。

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

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

大枠としてのサイトコンセプトや基本方針決め

ここでご紹介するECサイトのデザインは、以下のようなコンセプトや方針のもとに調査と作成を行いました。

◯本店サイト(独自ドメインサイト)を少しでも早く立ち上げるための雛形(テンプレート)として作ること

◯特に当社の本店ECサイト構築システム『CARTSTAR』で使えること

◯実際の運用に合わせてカスタマイズされることを前提とし、複雑かつ融通の効かないデザインにしないこと

◯ただし、カスタマイズしなくても、高いサイトの操作性が確保できていること

◯商材は、ギフト向けの比較的高価(単価5,000円〜20,000円程度)な食品が中心

リモートユーザテスト × 3名

まず最初に、『お祝いのお返しにちょっといい牛肉を探す』という条件でリモートユーザテストを行いました。競合サイトをどのように一般のユーザが利用しているかを理解するためです。

リモートユーザテスト_01 リモートユーザテスト_02 リモートユーザテスト_03

一般のユーザとはいえ、思ったことを好き勝手言ってもらうわけではありません。

順序立てて設計した『タスク(達成してもらいたい目的)』を実行してもらいつつ、感じたことを操作しながら発言してもらいます。また調査の中ではヒヤリング項目も設定しているので、操作中に発言しきれなかったことも発言してもらえます。

今回は、検索キーワードや閲覧サイト等を指定しなかったので、自然なお買い物の動きを知ることができました。

◯ギフトは予算ありきで探されやすい

◯たった一つのキャッチコピーで、ギフトを贈る相手に適した商品の一つであることが理解できることがある

◯メッセージカードがどんな物なのか分からないと不安

◯美味しそうに見えない写真はマイナス印象

などなど。

ネットアンケート

リモートユーザテストだけでは分からないことを、ネットアンケートによって定量的に調査します。

ネットアンケート_01 ネットアンケート_02
└アンケートの回答内容の一部

今回は、ネットアンケートによって以下のような意見が集められました。

◯ギフト注文時に気になることは、相手の好み・おいしいかどうか・送料の順番
◯ギフト注文商品の選定理由は、現物がおいしかったことが重要
◯60歳以上の方はパソコンの利用率が高く、スマートフォンよりタブレットを好む
などなど。

より詳細なサイトコンセプトや基本方針決め

これらのリモートユーザテストとネットアンケートの結果に加え、年代ごとの支出やネットショッピングの年間利用額といった一般向けに公開されている調査思慮など考慮し、サイトのコンセプトや基本方針を更に詳細に決めました。

◯商品単価が高いため、購買層を支出やネットショッピング年間利用額の多いシニア層を中心ターゲットとする

◯シニア層はPCやタブレットの利用が多いため、PCサイトに特化して構築する

◯タブレットで利用できないことが無いように考慮

◯取り扱い商品点数は100〜300点程度

◯商品に対するオーナーの思い入れが強い

◯ユーザにとってのサイトへの入り口はトップページだけとは限らない

◯商品を買い物かごに追加してもらうことがゴール

KPI図

ここまでが、サイト制作の事前準備です。次からは実際の制作段階です。

ワイヤーフレーム

ワイヤーフレームとは、ウェブサイトの要素をどこに配置するかを決めるための設計図のようなものです。リンクの過不足が無いか、どんな文章を入れるのか、並べる商品は何にするのかといった、要件を決めるために使われます。

今回は、特に最初に作成したものは叩き台(アイデア)としての意味合いが強くなりました。

事前に決めたコンセプトや基本方針を実現するためにはどんな画面構成が必要なのか、何度も議論を重ねて改善していきました。また、様々なプロジェクトにおけるユーザテストの経験が豊富な専門家のアドバイスも取り入れながら進めました。

最初の商品ページのワイヤーフレームはこちらです。

最初のワイヤーフレーム_01

一般的なECサイトのセオリーに則ったレイアウトとなっており、レフトナビゲーションが存在するのが特徴的です。が、後ほど説明しますがレフトナビゲーションは取り除いてしまうことになります。

最終的にワイヤーフレームは、色や装飾等を作成するデザイナーさんに指示をするための設計図のようなものになっていきます。そこには、各パーツの挙動(クリックやオンマウス時の反応)や、ページの中で目立たせたい要素などを、ユーザにとっての役割として何を実現したいかを伝えられるように書いていきます。

最終的に、商品ページのワイヤーフレームはこのようになりました。

最後のワイヤーフレーム_01

デザイン

ワイヤーフレームでの議論や検討が進み、関係者間で認識が共通化出来てきたら、実際のデザイン(色味や挙動、文字サイズなど)を起こす段階になります。

デザイナーさんには、このサイトの目的をしっかり共有しながら、ワイヤーフレームを基本としながらも様々なアイデアを出してもらいました。複数のテーマカラーを使ったり、もしくは極力色を使わないようにするなどした時に、ゴールまでの動線がイメージしやすいかどうか、商品画像と商品名で設置するリンクは、どこをクリックできるようにするか…などなど、様々なことを検討しました。

ワイヤーフレームと同様に、こちらも専門家のアイデアを取り入れています。例えば、マウスポインタを写真の上に持ってきた際にクリックできるエリアが色が変われば、リンクの下線が無くとも迷うことは少ない…といった内容です。

コーディング

デザインが完成したら、実際にHTMLやCSS、必要に応じてJavaScriptを記述していきます。

デザインを完璧に仕上げて、その通りコーディングするのが手戻りもなく理想的ですが、コーディングしたものをCARTSTARに組み込みながら細かなデザインを調整が発生しました。

理想形を求めて作成したデザインが、システムの仕様上どうしても再現できないことが出てくるのはECサイト構築時には良くある話です。それでも、CARTSTARはデザイン(任意のHTMLやCSSの適用)の自由度が高く、当初イメージしていた理想形からは大きくかけ離れないようコーディングすることができました。

まとめ

今回は、以下のような制作の流れだったことをご紹介しました。

1. 準備:リモートユーザテスト
2. 準備:ネットアンケート
3. サイトコンセプトや基本方針決め
4. 制作:ワイヤーフレーム
5. 制作:デザイン

準備』と書いた項目は多くの時間や費用を必要としないため、ECサイトを新規に構築したり、もしくはリニューアルを行う前に実施しやすい施策です。

ユーザテストは多大なコスがかかると思われがちかもしれませんが、そんなことはありません

『3.』までの項目をしっかりとプロジェクトに関わるメンバー間で共有することで、課題が発生した時の判断の軸が共通化されます。認識の不一致による不毛な議論を減らすことが可能です。「言った言わない」とか、後出しジャンケンみたいな議論は、余計な時間を使ってしまうことになります。

また、年代ごとの支出についての資料は自社調査ではなくネットで公開されているデータを参考にしましたが、そのような資料もとても役に立ちます。知りたいデータがあった場合は、一度ネットで検索してみると良いでしょう。

制作』の段階では、今回は事前に準備した情報を元に一気にデザインまで進めましたが、理想的には『4』と『5』の間を目安にプロトタイピングと、それを使ったユーザテストを行うのが理想です。アイデア段階の画面構成を実際のユーザにテスト操作してもらうことで、致命的な欠陥があれば先に発見できるからです。

とはいえテストに協力してくれるユーザさんを探すのは大変ですので、スケジュールや予算と相談しながら実施するかどうかを決めましょう。

次回からは、実際に出来上がったデザインが、どのような作りになっているのかをご紹介していきます。

  1. 制作の流れ紹介編 ← 今回はここ
  2. ヘッダ解説編
  3. 商品ページ解説編
  4. ギフト紹介ページ解説編
  5. トップページ・その他解説編
このエントリーをはてなブックマークに追加

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

▲ ページ先頭へ