Amazon.com

メガドロップダウンメニューを検討する上でよく挙がるのがAmazon.comですが、結構メニューの構造が秀逸な形になっています。まずは操作した時の動画など。

これを見ると下記のポイントなどが特徴的な部分と捉えられます。

• 縦型のメガドロップダウンメニュー
• 第１階層のメニューは表示されている
• リキッドレイアウトに対応し、横幅がせばまると第１階層もドロップダウンとしてしまわれる
• 最近のメガドロップダウンよろしく画像なども入っている

Starbucks.com

Starbucks.comでは少しおもむきの違うドロップダウンメニューを用意しています。これも操作した時の動画を。

これを見ると下記のポイントなどが特徴的な部分と捉えられます。

• オーバーレイ型ではなくコンテンツ自体が下に下がる
• マウスオーバーしていなくても固定で表示される
• 別メニューの表示もしくは閉じるアイコンにより非表示となる

まとめ

実際にはもっと色々なパターンを見つけていくわけですが、こうやって列挙しながら、それぞれのサイトでの工夫ポイントを見つけていくわけです。あとは、テストに組み込む際に、どの＜要素＞が最も効果的であったかをわかるようなパターンを作っていくわけです。

必要に応じてこういうパターンをストックしておくというのもの、実はテストパターンを考えていく上で重要だったりするわけです。

具体的なパターンを探る

レスポンススピードといったシステム的な改善ではない場合は、ある程度改善案が見えてきたら、テストパターンに落とし込むための具体的なパターンを考えはじめます。

しかし、実際これは白紙ベースで考え始めるのは難しものです。また、既にずっと運用しているサイトなどではアイデアが凝り固まってしまって大きな変化のあるテストパターンが思いつかないこともあります。

これではテストの魅力半減です。今まで自分たちで思いつかなかったものなどでもテストパターンに入れる方が、テストの面白味もその後の効果の改善も期待できます。

ということでよく実施する方法をご紹介します。

競合や同業のパターンを探る

テストパターンを検討する時に競合や同業のパターンを確認することは、非常に重要です。競合となるサイトがある場合、多くにおいて似たようなページや機能が存在することも多々あります。

サービスの特性上、競合も含めて併用利用がされている可能性がある場合は、業界で共通のUIや表現にしていくことも1つのアプローチになります。

また、競合以外にもコマースサイトや新規獲得といったサービスやサイトの構造でみた場合に、違う業界で同じサービス形態のサイトを確認することも非常に参考になります。また、同じ業界の別の国のものを確認するのも非常に参考になることが多々あります。

• 競合他社のサイトを確認
• 同業他国のサイトを確認
• 同じサービス構造のサイトを確認

UIのパターンまとめを見る

UI系のテストパターンを検討する場合は、色々な方がまとめているパターンまとめを参考にするのも1つのアプローチとなります。いくつか参考にしやすいサイトを掲載しておきます。

UIについてユーザーベースで集めているサイトや、〜 TOP10やShwocaseといった単語をつけて検索をすることで結構色々なデザインを探り出すことも出来ます。

• Discover Usabila（ALL）
• Top 50 Button Design Showcase（Button）
• Mobile UI Patterns | Recently Added（Mobile）
• Inspired UI（Mobile）
• lovely ui（Mobile）
• Recent / iOS UI Patterns (beta)（Mobile）
• Product Pages Design Showcase | Elements of Design（Product Page）
• 25 Examples of Inspiring Product Display in Web Design | Codrops（Product List）

過去のナレッジの確認

テストを続けている場合などは、過去に実施したテスト結果なども参考になります。見直すと過去に既にダメだったパターンもあったりするので、そういうものをテストパターンから排除することも可能です。

サイトの別のセクションで実施したテスト案などをそのまま転用することができる場合もあるので、本当に過去のナレッジ蓄積は重要です。

まとめ

前回のエントリでは、どんなアプローチをしていくかというざっくりでしたが、今回はもう少し具体的なテストパターンを出すための方法をお伝えしました。こういったものから、どういった部分をテストするのか、どこを要素として評価・比較するのかを検討していきテストパターンを洗い出していきます。

冒頭にも書きましたが他のサイトなどを確認することで、新しい視点のテスト案を検討しやすくなります。良さそうだなと思ったり、おっ、と思ったらテスト案に入れてみる。そんな事から最適化は始まったりするわけです。

分析ベースであっても、それ以外の課題からだったとしても、この＜改善案＞を作る時は、ホントーにいろいろと考えます。分析→仮説→改善案といった形でその順番を書いてしまうと、直線的なフローになってしまうのですが、実際はもう行ったり来たりなわけです。

そんな中でテスト案を組み立てるのは非常に面白いものの「何をすればいいのやら…」ともなってしまうこともあり、そんな未来の自分を救うべく色々なアプローチのフレームワークを整理してみたいと思います。（長くなってしまったので3回ぐらいで）

どこに手を付けるのか？

実際にある程度の仮説まで作れてきたとしても、そこから具体的なテスト案に落とし込む時に「何をテストするのか？」という部分でつまずいてしまうことは多くあります。

非常に簡単な例ですが、特定のページの離脱率が非常に高い場合「そのページへの動線を検討しなおすべきなのか、そのページのコンテンツを直すべきなのか、あと何が考えられる？」となってしまったりします。

実際には、より深い分析を実施したり、改善パターンを作る工数なども含めて考えていくわけですが、とはいえある程度どんなことが出来るかは手元にあると便利なわけで、そいうのが欲しいと思った時につくったのが下記の図です。

大きくはコンテンツとサイト動線とUIとくくりながら、こんな改善パターンがあるようなぁと洗い出したものになります。それぞれの専門家が見れば、いくつかの粒度が混在してない？ともなる図なのですが、あくまでテスト案を考えるのに良い粒度にそろえてみてます。

コンテンツなのか、サイトの動線なのか、UIなのか、こういったところをから当たりをつけて、どんな事ができそうか検討して頂ければと思います。

まとめ

とりあえず初回としてきっかけを作るための図を紹介させて頂きました。実はこれがあるだけでも結構助かることも往々にしてあります。デスクに貼っておいてもいいぐらい。ということで「何が出来る？」と思った時に思い出してみてください。

ちょっとした事でコンバージョンはあがる

テストを行っていると様々な気づきがありますが、通して感じるのは、小さな変化でも大きな結果を生むことがあるということです。

テストを実施する場合、テストのクリエイティブには出来るだけ大きな変化をつけることをお願いしています。これは大きな変化があった方が結果に差がでやすいのと、そのテスト結果から知見を見つけ出しやすいためです。

しかし、仮説の内容やテストするサイトの状況によっては、必ずしも大きな変化をつけたテストが出来るわけではなく、小さな変更で実施する場合もあります。

テストによってはこれでも、元々あったもの（デフォルトパターン）と比較して6〜 8％程度アップすることも多々あります。通常、テストのリフト（比較上昇）結果は5〜6％程度アップしたら成功、10％あがったら大成功ですので十分な結果なわけです。

場所だけでも変わる

少し事例を挙げてみます。テスト案を考えてる場合に、そのサイトやサービスの強みや弱みを必ず聞きます。特に強みはそのサイトでコンバージョンしなければならない理由となるため、これらを全面に押し出す場合も良くあります。

あるサイトではサービスの1つとして提供しており、実は競合などと比較すると強みになっている付帯サービスがありました。元々はTOPページの脇でそれ程大きくない情報として告知されていた内容でしたが、これを未購入の方にターゲティングして大きく出したことで非常に大きな売上効果を生み出しました。表示した場所と大きさだけでです。

文言だけでも変わる

また、別のコマースサイトですが商品の詳細画面にあったCall-To-Action（行動喚起）ボタンの文言を「購入する」から「購入へ」と変更したテストをしたことで、約6％のコンバージョンのリフトがありました。

商品詳細画面のボタンですので、このインパクトは大きく、年間で数億円のリフト効果を生み出した結果となりました。たった「する」を「へ」に変更しただけでです。

ちなみにこのテストでは、セグメント別に結果を確認すると新規の方だけに絞るとリフトは十数％となっている結果であり、良く言われている内容ではありますが、初めての方にとって「購入する」という内容は非常にハードルが高いことが分かりました。

まとめ

ここで重要なのは「する」より「へ」の方が良かったという結果ではなく、このような小さな変化でも大きな効果の差があるということであり、その多くが制作の段階で決定されているということです。

こういった内容の全てを制作時にもっとも効果が高いもの選択することは難しいものです。また、カジュアルに変更した文言で売上があがることもあれば、下がることだって十分にあるわけです。だからこそテストを実施しながら最適化をしていく必要があるわけです。もしかしたら数億円損してるかもしれないわけですからね。

こういったCall-To-Actionのボタンのテストですがたまにクリックのみで評価されてしまっているケースがあります。しかし、これはテスト結果を間違って評価してしまいかねないので注意が必要です。というかクリック率だけで評価とかは、基本はダメです。

これはCall-To-Actionのゴール、というかそもそもサイトのゴールがクリックではないからです。コマースサイトなら購入完了、リード獲得なら資料請求完了がそのサイト、そのCall-To-Actionの目的だからです。

なぜダメか？

ボタンのクリックを誘導すること自体は、ボタンの大きさ、色、位置などを工夫しアテンションを集めることである程度可能です。

しかし、アテンションが強くクリック率は高くなるものの、その先の離脱が大きくなり結果としてコンバージョン率で見ると悪くなってしまうケースもあります。これはコンバージョンへの準備がまだ出来てないままにクリックさせてしまっていたりするからなんですよね。

クリック率だけでそのテストの善し悪しを判断してしまうことは、例えるなら「お店のドアをあけた人をカウントして、今日は売上あがったね。」って言っているようなもんなわけです。

もちろん、人を沢山送った結果としてコンバージョン率があがることもあるので、クリック率だけ評価をして結果もついてくるケースもあります。しかしながら、実際にクリック率があがってコンバージョン率が下がったテストケースを見ている以上それが正しいとは言えないわけですよ。

ゴールを見据える

テストを継続的に続けていく上で重要なのはサイトのゴール、最適化の目的に沿ったテストを実施していくことです。衝動的なテストをたまにやるのも良いのですが、基本的にはある程度プランニングにのっかったテストをやっていかないと、１年たって見返してみると何が結果として残ったんだっけ？になりかねないのです。

テスト自体にだってコストがかかります。きちんと評価をし、サイトのゴールにひもづく、次につながるテストを実施していって頂ければと思う所存なわけです。

1. 状況・ギャップを発見する分析
2. 改善案に昇華させる分析
3. 効果を試算する分析

さて、今回は「ツールの改善」という視点で「状況・ギャップを発見する分析」「改善案に昇華させる分析」を中心にブレイクダウンした例に触れていきたいと思います。

ちなみに「ツール」とはサイトの目的を達成するために用意されている機能的なものを指しています。コマースサイトであればカート機能や商品の比較、３Dビューといったものなどがそれにあたります。

状況・ギャップを発見する分析

状況・ギャップを発見する分析では、まずは大きく２つのポイントで確認をします。ツールの場合は「利用率」と「コンバージョンへの貢献」です。

利用率とは、サイト利用者のうちどの程度利用しているかです。当然のことながら良いツールであっても使われなければ意味がありません。ので、状況把握としてまずシェア率を確認します。

ちなみにサイト内にいくつかのツールがある場合は、それぞれの利用率を比較してみると、どの程度そのツールにポテンシャルがあるかどうか目星をつけやすくなります。

そしてもう１つのコンバージョン率の貢献ですね。当たり前のことながらコンバージョンに紐づいていないツールは無駄ツールの可能性があります。場合によってそれにより、コンバージョンを失っているかもしれません。

どの程度の人が利用しているかと同時に、どの程度の人がツールを利用してコンバージョンをしているかも出していきます。これも利用率同様にツールが複数ある場合は比較をすると良いと思います。

この２つの分析によりおおよその方向性を見つけ出します。コンバージョン率が高く、利用率が低い場合、利用を増やす方向での検討を行うわけです。

逆にコンバージョン率がそれほど高くなく、利用率が高い場合は、そのツール自体のニーズはあるため、ツール自体の改善をする方向で検討を行うわけです。

改善案に昇華させる分析

実際に、ステップ１で方向性が見えたらより具体的な改善案に落としこんでいくわけです。ツールの場合は先程あげた通り、利用を増やすか（動線の改善）、パフォーマンスを上げるかが方向性になってきます。

そのため、ツールの利用状況を把握することで見えてきた方向性に対して、より深い分析を行なっていくことになります。動線の改善を行うのであれば、流入元（利用元）としてどこが多いのかといった部分にフォーカスをすると良いと思います。

この分析を行う際に頭の中では「どのようなタイミングで、誰が（どのようなステータスの人が）このツールを使っているのか？」という部分を忘れないようにすることです。これを考えていることで、より具体的な仮説が組み立てやすくなってきます。

最も流入が多い箇所を確認し、そのページやセクションへのトラフィックのうち、何％ぐらいのが遷移しているかを確認します。この割合を確認することで、どのくらい改善出来そうかなどの判断もつけやすくなります。

そして流入が多いセクションの内容も考え、どのようなタイミングで利用されているかを考えて仮説を組み立てと分析を繰り返していきます。

最初のうちは「もうこれ以上はどちらか判断がつかない」というところまで行なってみると良いと思います。そうするとそのうちどこまでの仮説で改善施策として組み立てるかが見えてきやすくなります。

最終的にはテストを行うことで検証するのが良いでしょう。確証があるものに対してもテストを実施することをお勧めします。そうすることで改善の結果の数字をきちんと残せるためです。

まとめ

先日行った３つのステップをより具体的なツールの分析として落とし込んでみました。分析や改善の目的をあらかじめ設定することで、おおよそこのような感じで分析から改善施策まで落とし込んでいくことが可能になります。フレームワークの１つとしてぜひ活用して頂ければと思います。

今回はその視点の「課題分析」「深堀り分析」の２つの部分によりフォーカスして、分析を通してサイトの改善につなげる際のポイントとして整理をしてみました。

０：目的設定

今回は大きく３つのステップに分けてみることで整理をしました。そしてこれらのステップを行うに前にまず「目的」を設定し、それらに対して行なっていきます。この目的はある程度具体化さらたものが望ましいでしょう。

例えば「サイトの回遊性を高めたい」でも分析を開始することは可能ですが、目的が大きすぎ、少し分析の方向性がぶれてしまう可能性があります。これに対して「サイトの回遊性向上のために、フリーワード検索の利用向上をしたい」であればより分析の目的を明確にすることができます。

1. 状況・ギャップを発見する分析
2. 改善案に昇華させる分析
3. 効果を試算する分析

１：状況・ギャップを発見する分析

このフェーズでは目的で設定した箇所の状況の把握とギャップの発見を行なっていきます。状況の把握では、分析対象がどの程度なのかを知ります。

先ほどのフリーワード検索であれば、フリーワード検索の利用状況やその検索内容などを知ることが状況の把握となります。ギャップについては以前に記述した「最適化のために重要なたった1つのこと」で触れているギャップの発見です。

これが結構難しい部分なのですが、何かと比較をして仮説につながる大きな違いを見つけることです。ページとページ、セクションとセクション、サイトとサイト、セグメントとセグメントなど色々な切り口があります。

先ほどのフリーワード検索の場合であれば、商品の詳細ページを見つけるための他の手段、メニュー、特集といった箇所と比較をしてパフォーマンスなどを比較するのが１つの手段になると思います。また、検索されたワードを比較することで見えてくる部分があると思います。

２：改善案に昇華させる分析

次のステップとして改善案を作っていくための分析を行なっていきます。ここが一番の肝になる部分です。前のステップで分析した部分から仮説を導きだしていくわけです。

改めて目的として設定している部分に対して、そのままその戦略を実施すべきなのか、そうではない判断をすべきなのかも含めてここで整理をします。

例えば前述のサイト内検索であれば、サイト内検索をより利用してもらうべきなのか、サイト内検索のパフォーマンスをアップすべきなのか、サイト内検索は縮小方向にするのかも検討しながら分析を行なっていくわけです。

分析の結果、サイト内検索のコンバージョンへの貢献は高いものの、それほど利用されていない（当初の目的通り）のであれば、利用する動線を強化する方法を検討するための分析を行います。

サイト内のどこから利用されることが多いのか、どのようなシチュエーションの時に利用されることが多いのか、そういったものを想像しながら分析をしていくわけです。ここで必要に応じてユーザーインタビューや外部評価などを使っても良いと思います。

分析から得られるもののほとんどは「解決策」ではありません。課題点とその改善案のための糸口となる情報です。そのためStep1、Step２といった分析を通して、どのように改善するかを頭に描いていくわけです。

改善仮説を考えるために有効な考えは「どこから来て」「何をして」「どこに行くのか（行ったのか）」を考えながら分析を進めていくことです。そして、その中で「パフォーマンス」なのか「動線（トラフィック）」のどちらが課題なのかを検討していくわけです。

３：効果を試算する分析

ステップ２で組み立てた改善案に対してこれは実際に実施をするかどうかを判断する１つの方法として効果を試算する方法があります。ただ、これは必ず必要なステップというわけではなく、場合によって行うステップです。

効果の試算はあくまで実施するかどうかの目処を決定するための補助です。そのため取得出来るデータに基づきデータの試算をします。体よく言えば「フェルミ推定」個人的には前職の上司の言葉を借りて「緻密などんぶり勘定」です。

つまり、知り得る数字のみを利用しながら期待値を計算していくわけです。これらを計算するにあたっては先ほどのパフォーマンスの改善なのか、トラフィックの改善に分けると考えやすくなります。

パフォーマンスの改善の場合は

（現状のトラフィック数×改善したCVR）ー現状のCV数＝改善期待値

として導きだすことが可能です。

トラフィックの改善の場合は

（改善したトラフィック数ー現状のトラフィック数）×CVR＝改善期待値

といった感じで導き出します。

実際にはこれをベースにして分析によって抽出できるデータを利用しながら細かく組み立てを行います。例えばトラフィック改善での計算の場合、「改善したトラフィック数」を導き出すためには、さらにその元となるデータを辿ります。

改善施策として、既にある入口を何かしらの方法で誘導を増やす場合、遷移元のターゲットとなるページからの流入数を確認します。これが流入元のトラフィックに対してどの程度改善できそうかを計算し、結果として「改善したトラフィック数」を算出するわけです。

まぁ、色々とゴニョゴニョする方法があるのですがそれはまた別で記載したいと思います。

まとめ

効果の試算については、あくまで参考でしかないのであくまで１判断材料としてみて頂くのが良いです。例えばトラフィック数が増えれば、そこのCVRは少し下がったりする場合もあります。ただ、それを考慮し続けると果てしない旅の始まりになってしまいますので、ある程度の割り切りの中で作っておく必要があります。

かなり長い文章になりましたが、基本的にこれらのステップと分析の目的とを組み合わせていくことで、分析アプローチの整理が出来るんじゃないかなぁと思ってます。

以前にCMで選択肢が多いために選択をしない決定回避の法則なども紹介されていることがありましたが、選択肢をどう考え、どう見せていくかはWebサイトにとって重要です。

最近、TEDのビデオを見るのにハマっているのですが、ご紹介するビデオでは行動経済学者ダン・アリエリーが消費者の意思決定の錯覚について触れています。

ダン・アリエリー：我々は本当に自分で決めているのか？ | Video on TED.com

あえて選択ができるようにするための選択肢などの例は非常に面白いですね。そして個人的にぐっときた言葉がありました。

（これらのアンケートの）多くの決断は自分ではしてないこと、それは、あの記入用紙をデザインした人の手の中にあるのです

いかに選択肢を選択しやすいようにつくるか。こういった事を考えていくこともサイト最適化のアプローチの１つなんだと思います。

最適化のための改善アプローチとは複雑に考えようと思えば、いくらでも考えられてしまったりもするのです。しかし、それではアクションがしにくくなってしまいます。そこでアプローチを出来るだけ単純に出来るよう＜大きく２つ＞に分けてみました。

２つに分けたステップ

単純化したアプローチのステップは大きく２つに分けて考えるのが良いかなぁと思っています。１つ目のステップは、サイト全体の改善をすること。次のステップが、＋αの最適化をすることです。

図は概念図みたいなものですが、これらのステップはあくまでアプローチを単純に考えるためのものなので、厳密に分かれている必要はないと思っています。いきなり詳細にフォーカスした改善にならないための考えのクサビみたいなものです。

Step１：サイト全体の改善

最適化アプローチの中で、まずはサイト全体の改善を行っていくことが良いと思っています。サイト訪問者の誰であっても改善にあたる部分にフォーカスするわけです。

このステップでは、セグメントといった細かいことはあまり考えないようにします。これが重要です。セグメントを考え始めると途端に＜どう直すのか？＞が難しくなるので、あくまで全体的に直すアプローチをとるわけです。

実際にいくつかリストアップすると下記のような部分がポイントとなってきます。

• 効果のあがっていない悪い広告の見直し（流入）
• 主動線の漏れの低減（離脱）
• チェックアウトプロセスでの漏れの低減（離脱）

Step２：さらに良くする

全体の最適化が見えてきたら次のステップです。さらに良くすると考えた場合は、自ずとセグメント別に最適化していくことになってきます。

セグメントの分類については書き始めるとそれはそれで深くなってしまうので、まずは 第３回解析しないと！やりました。 を見ていただくのがオススメです！

…と細かい部分はさておき、セグメント別に最適化を行っていくための基本は下記になってきます。

• 関係性の高い情報を伝える
• 関係のない情報・UIは見せない

有効なセグメントを見つけ出し、こういったポイントで最適化を組み立てていくことにより、全体的によくなったサイトを、さらにチューニングしていく形になってくるわけです。

まとめ

分かりやすいようにステップを分けしてみたのですが、もしかしたら自分だけが分かりやすい可能性もあります。まぁ、そのあたりは粗びきブログなので…

実際に最適化のアプローチを行っていく場合はStep１の中でもセグメント考慮する必要も出てくる場合もあります。最初にも触れたとおり、このステップはあくまで全体のアプローチの概念なわけですよ。

なので、あまり厳密に考えずに、考え方を整理するためのフレームワークとしてお使いくださいませ。

最近のWeb解析の話は、比較的この最初にある「問題点の発見」にフォーカスがされているものの、実際にそのあとの改善アプローチは語られていないことがほとんどだったり。

ということで、非常にざっくりではあるものの、問題点を発見したあとにどんな改善アプローチがあるのかというのをざっくりと図でまとめてみました。

専門家が見ると「このマッピングどうなのよ？」的なところもあるだろうなぁと感じつつも、Ver0.1として作ってしまって、必要であればツッコミをいただこうというアプローチにしてみました。

ただ、改善アイデアを作っていくうえでの、きっかけ的要素は思いつく限りで盛り込んでいったものになります。あとはそれぞれ細かくブレイクダウンしていく感じですかね。

この前段部分も、頭の中にぼや〜っと図があるので、もう少し明確化したら図におこします。また、この図のきっかけをくださいった、T氏、Y氏、K氏、S氏に感謝します。