ページを作ったあとの改善フローのセオリー | Webデザインセオリー Advent Calendar 2015

yatさんに直接声をかけていただいたので Webデザインセオリー Advent Calendar 2015 というお題に対して記事をかいてみました。

Webデザインセオリー Advent Calendar 2015 とは

デザイン、レイアウト、フォント、カラー、イラストなど、デザインに関するブログを書きましょう。
Webデザインを作る上で使う、ツールの使い方なんかでもOK!
小ネタやTipsから、ガッツリとした記事、どんな形式でも構わないので、やってみませんか?

といった企画のアドベントカレンダーです。

最初に

Webデザインセオリーと聞いてすぐに思いつくのは、余白の開け方とか、色の使い方、フォントの選び方、レイアウトのルール、最近のデザインの傾向、とかそんな感じだったのですが、それは他の方がちょいちょい書いてくださっているので、今回はそれとは別のセオリーを書いて見たいと思います。

私は制作会社歴よりEC歴のほうが長いので、ECでの体験から思ったことを少し書いてみます。Webデザインセオリーとい う題目からはすこし外れそうです。

ECのデザインセオリーというよりは、「ページを作ったあとの改善フローのセオリー」といった感じでしょうか。

問題を特定します

あるページで販売してる、ある商品が売れなかったとします。
買うまでの流れを分解して整理しどこが悪いのかを特定します。

ECで大事になってくるのはコンバージョン(cv:買ってもらうこと)なので、「買ってもらうには」という切り口で購入までの流れを整理してみます。

買ってもらうには

ざっくりこんな感じに分けられます。この中でどこに問題がありそうか、数値を確認します。

もうちょっと分解する

さらに別の切り口で、デバイス別(パソコン、スマホ、タブレットなど)、セグメント別(会員、新規など)で分解して見れるとより問題が特定できます。

PC 会員
PC 新規
SP 会員
SP 新規

上記のように分け、UU、CV、CVR、フォームの通過率などをチェックするとより問題箇所を絞り込めます。ここを分けて見れていないと、別の改善案にたどり着いてしまうことになります。

uu : ユニークユーザ(サイトに来た人の数)
cv : コンバージョン(買った数)
car : コンバージョンレート(コンバージョンした割合)

※ 会社によってはuuではなくpvで判断する場合もあります

たとえば、あるページに100人来て、8個商品を買った場合、
8cv ÷ 100uu = 0.08 (cvr 8%)
となります。

さらに、ページからカートに入れて、注文完了するまでの流れを見れるともっとよいです。

この辺を掛け合わせると、PC会員のフォーム離脱率がPC新規よりも高いから致命的な欠陥があるはずだとか、フォームは通過してるけどそもそもページでカートに入れてないとか、いろいろ見えてくるので改善につなげやすくなります。

商品が問題の場合

主にページからカートに入れられてない場合ですね。

これは企画段階でしっかりやっておくべきことだと思いますが、念のため確認します。ターゲットは明確なのか。そのターゲットに対してニーズはありそうなのか。他に言えることはないか。

サプライヤや商品開発担当者などや、ターゲットにヒアリングすることで新たな訴求が発見できたりします。

ページアップした後だと、目標や在庫などコミットしてる場合があるので、注力しないという判断は難しいと思いますが。

ページが問題の場合

こちらも主にページからカートに入れられてない場合。

ページの構成は問題ないか、ナビゲーション、ボタンなどのUIは適切か、などを見直します。

販売期間や売上目標、ページのCVRなどによっては再度デザインしなおすなどの判断もあるかと思います。デザイン側としては大変ですが。

その他の要因が問題の場合

割引

割引は大きな要因の一つです。割引デザインの見せ方もいろいろあるので検討してみるといいかもしれません。
ただ、しっかりと価値を伝えられていたら割引をする必要もないと思うので、個人的には割り引かないで済む方が理想ではあります。

フォーム

フォームは全ページに関わる部分なので、そこの改善をできたときのインパクトが大きいです。項目が多くて入力が面倒だったり、わかりにくかったり、エラーがリアルタイムじゃなかったり、などなどそんな事象がある場合は改善できる可能性が高いです。

改善はABテストする

余裕がないときは前後比較でも仕方ないのですが、キャンペーンの違いや、締切間近、イレギュラーなトラフィックなど、正確な比較ができないので、基本は同じページの1部分だけを変えたものを同じ期間テストします。

そうすることによって、その訴求の効果を正確に判断することができます。

CVRが悪すぎる場合、まるっと作り直してしまうこともあるかと思いますが、それだと具体的にどこがどうよかったのか掴みづらいです。

A/B test を繰り返す

最初に「ページを作ったあとの改善フローのセオリー」と書きましたが、いままでの流れを繰り返すことで目標を達成させるようにします。

よく言われるPDCAサイクルに近いイメージです。

Plan(計画)→ Do(実行)→ Check(評価)→ Act(改善)

ちなみに、UUが少なすぎるとCVRのブレ幅が大きくなります。

たとえばUUが10でcvが1の場合と2の場合では

1cv ÷ 10uu = cvr 10%
2cv ÷ 10uu = cvr 20%

1件の購入数の違いで、CVRに10%も差が出てしまうことになるので注意したいです。

仮説が出ない時は、お客様に聞く

ABテストをするにも、何が悪いのかわからなくてどうしていいかわからない時もあります。

そんなときはお客様に聞いて仮説を出すのもいいと思います。アンケート、ユーザテスト、ヒアリング。いろいろ方法はあると思います。

ひとつ注意したいのは、ターゲットに近い属性のひとたちに聞くということ。30代前後のOL向けに作ったスイーツについて、50代の男性サラリーマンに聞いても意味がないのでw

アンケートはゼグメントがしぼれるなら問題ないですが、絞れない場合、意見に偏りがある場合が高いので注意してください。 他の二つ、ユーザテスト、ヒアリングに関しても同じで、「誰に」というところに気をつけたいですね。

そしてアンケートは、集計に時間をとられたりする場合があるのと、ユーザテストとヒアリングは、聞ける人を見つけたりするのに結構時間がかかると思うのでなかなか大変だったりします。そのあたりも意識していつどのタイミングでやるのか判断してもらえるといいと思います。

継続してもらうために

EC(マーケティング?)では、LTV(ライフタイムバリュー Life Time Value 顧客生涯価値)という言葉があるように、継続して使ってもらうことも大切な部分です。今回はLTVの説明は省きますが、一旦「継続して使ってもらった時の利益」みたいなイメージを持ってもらえたら大丈夫です。

ここまでは、作ったページのデータを確認し問題がある場合は改善する、そのためのベースとなるような流れを書いてきました。

ただそれ以外にも、はじめて買ってくれたお客様に再度買ってもらうためにマイナスな印象を与えないようにすることも大事です。

直近のCVRを上げるために動いてしまって、リピートしてもらえない状況にならないように、デザインテイストや、販促などに対して、お客様に不信感を与えないかなど、自分が買うとしたらという目線でチェックすることも大事になってきます。直近ではCVRは下がってしまうかもしれないですが、長い目で見るとやったほうがいいことなども出てくると思います。

数字を意識した修正

この仕事をやってると、デザイナ以外の方から、なんか気になるから修正してほしいとかありますよね。リソースは限りがあるし、それでどれだけCVRが上がるのか。

そこでABテストなどの数値があると、相手や上司に判断してもらいやすくなります。

「今までこんなテストをやってきたけどCVRは変わらない。ただこういった細かい修正で、 PSDを開いて修正して書き出してアップして確認してというフローが何回も発生してリソースを週5時間使っている。なので今後はやらないようにしたい。」みたいに話ができます。「めんどくさいからやだ」とか「結構修正時間使ってるんですよ。たぶんCVRも変わってないと思うし」とか話すより全然違いますよね。

あとは、偉い人から「こここうじゃないの?」みたいなこと言われてやらなくちゃいけなくなったり。そんなときも大変ですが、がんばってABテストをやるとどちらがよかったか結果がわかります。

テストしないでそのまま全展開して、CVR2%落ちたとかよくある話だったりするのでこれも結構大事です。

ブランディング目線なども入ってくる場合もあるので難しい所ですが。

最後に

このへんのことが分かっていると、会社の人や取引先の方などに、ECをわかってるWebデザイナーとして認識してもらえるのではないでしょうか?

わたしはECに関わる前は、こういった考え方があることをまったく知らなかったです。。

それでもなんとかやっているので、今から遅いとかは無いと思います。むしろ、「社内でECに対して詳しい人がいないでただ更新してた」みたいな場合だとすごいチャンスだと思うので、一度やってみてはいかがでしょうか。

このブログや記事が気に入っていただけたら、
「RSS購読」や、「いいね! ・ ツイート ・ はてブ」などの「SNS共有」をしていただけるとうれしいです!

この記事に関連する記事

コメントをどうぞ