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の目的だからです。

なぜダメか？

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

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

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

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

ゴールを見据える

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

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

ボタンのデザインはどちらが良いだろうか？文言の位置はどこが良いのだろうか？…　これはこれで効果が出る場合も多くあります。でも、これだけでテストをしていると言ってしまうと半分以上損をしているかもしれません。

仮説からきちんと組み立てながらテストをきちんと設計することで、より戦略的にその次のアプローチをテストを利用しながら組み立てていくことが出来るようになります。今回はそんなテストの奥行きについて少し触れてみたいと思います。

次のアクションのために

全てにおいてテストは連続的に出来るわけではありませんが、多くの場合、きちんと設定することでテストの次のアクションまで想定することが出来るようになります。とあるページの改善についてどう考えていくかという事を具体的に触れていきたいと思います。

Web解析ツールを利用した分析を行った結果、「Aというページにはコンバージョンへの貢献率が高いがトラフィックが少ない。もしかしたら、ページAのトラフィックを増やすことでさらにコンバージョンを増やすことが出来るかもしれない」という仮説がたったとします。

しかし、これと同時に「ページAは単に特定のニーズが発生したセグメントだけが利用しているだけで、必ずしもトラフィックを増やしたところでコンバージョンは増えないかもしれない。場合によっては全体として減ってしまうかもしれない」という疑問も沸き上がります。

こういう時にはテストの出番なわけです。まさにこういった疑問を解消するために利用するわけですよ。そして、より戦略的に実施するためにはまず、ちょっと強引なテストをしてツールA自体の効果を測れるようにします。

テストの戦略

このような場合、テストを行うことで、その後の方針を決めることが可能です。最初にページAの全セグメントへの効果テストを行います。このテストによりページAは特定のセグメントのみに効果があるものなのか、そうではないかが判断出来るようになります。

もしページAのトラフィック自体を増やすことで、ページAのポテンシャル を効果的に発揮できる（ページAを使ったセグメントとそうではないセグメントでテスト結果を比較した時にページAを参照しているセグメントの方が効果が高かった場合）、その後はページAの誘導に力を入れる判断が出来ます。

逆にページAの利用がやはり特定のセグメントのみに効果がある（ページAの利用とそうではないセグメントとで利用者の方に効果が出なかった）場合、そのページの利用率しだいですが、ここには手を付けずに他の箇所を行うか、ページ自体の改修などを検討することになります。

1. 全訪問者へのページ参照の可能性をテスト
2. 結果に合わせて誘導、もしくは別の検討を開始

まとめ

解析ツールで得られた数字をベースに改善策を検討する場合、そこには何かしらの仮説、戦略が必要になってきます。テスト設計をうまく行うことで、テストには奥行きを設定することが可能性になります。

上記のご紹介した例を最も効率的に利用した例として、ランディングページを利用してコンテンツのニーズを探る検証・テストを数回繰り返し、ある程度効果的な要素が決まったところで、TOPページのリニューアルにも反映させ見事全体のコンバージョンのリフトにつながった例もあります。

TOPページのリニューアルなどでは、担当者の方にとってはリニューアルをすることでコンバージョンが下がるかもしれないというリスクがあり、それは同時に怖さでもあります。テストをうまく利用してリスクを取り除くことで、このリスクを最小限に抑えていくことが出来るようにもなります。

改善策を検討する際は、テストの奥行きについても意識 をしておくことで、より効率的なリソース投下も出来るようになると思いますので、意識をしていただけると良いのではないかなぁと思います。

サイトを最適化をしていくにあたり、途中経過、結果をナレッジとして落とし込むことも組織として重要なポイントと言えます。

ここについては私が関わる様々なところで、色々な検討をされているところもあれば、逆にあまり行っていないために、同じようなテストをサイトごとに行ってしまっていたというケースもあったりします。

テストを行うこともタダではありません。制作や改修といったコストに影響もします。「既に過去に行ったことがある」 「グループサイトで既に実施」などといったものを再度検証してしまっているのは会社として見たときに非常にもったいないコストになってしまっているとも言えます。

さて、一言にナレッジといってもどのような事が、ナレッジと言えるのでしょうか？ ここにはいくつかのステップがあると考えています。まず、行ったものを記録するという行為です。そもそも何故テストを行ったのか、それは成功したのか、失敗したのかなどを書き起こす必要があるわけです。ちなみに失敗も記載しておくことが大事です。その失敗を今後は行わないために。

これを後で実施しようとすると、年末の大掃除のように時間を大きくとって行う必要があるわけですが、そんなころにはテストの仮説なんてものは忘れてしまっています。鉄は熱いうちに打てです。テストが終わった時には評価を含めてきちんと落とし込む必要があります。もうこれはテストにかかる工数を見積る時にとっておいた方が良いです。

さて、次にドキュメント化されたものをシェアする必要があるわけです。同僚、上司、未来の担当者など様々な場合が考えられます。上司からしてみれば完結でわかりやすいもの、未来の担当者からしてみれば、必要な時に検索出来ることなどがあげられます。

難しいですね。

それぞれをパワーポイントでまとめることもさることながら、社内にWikiやブログを用意してシェアしていくことも良いと思います。 パワーポイントを作りつつ、共有サーバにアーカイブしてWikiからリンクを設置するといった方法も良いかもしれません。

さて、テストが終わり、それが成功だった場合、もう1つタスクが残っている場合があります。それが横展開です。先ほどのナレッジシェアも横展開と言えば、横展開なのですが、ここでは先ほどのものとは変わってきます。

テストをきちんと設計した場合、このテキストが効く、このコミュニケーション方法が効くといったものがテスト結果から読み取れます。もしランディングページで実施したメッセージのテストであれば、サイトのTOPページやメール、リスティング広告にも流用出来る可能性があります。

ランディングページで行ったテストが他のチャネルや場所に横展開出来るなんてすばらしいことじゃないですか。だって、その人たちはもうそのテストしなくていいんですから！（ちょっと洋書の翻訳本風）実際にそれがきちんと展開できれば、他の場所で同じことを行っていたかもしれないことを、1つのテストで済ませることができればわけです。これはやっぱり会社のコストという面からも非常にHappyです。

つらつらとやっておいた方が良さそうな内容を挙げてみたわけですが、これらを実施しようとしたらやっぱりプロセスとして組み込んでおいた方が良いわけです。じゃないと忘れちゃいます。ドキュメント化であれば、それを書き終えてテスト終了としておき、必ずアーカイブまですることを義務付けるとか、なんだたら関係者で必ずレビューをする時間を設けておくとかでも良いと思います。

シェアの部分は上のアーカイブができていれば良いわけですが、今度はその逆ですね。テスト案を考えられます時に似たようなケースがあるかをきちんと検索して探すことが求められるわけです。つまり、やっぱりですよ、テスト案をアーカイブする時は、検索されそうなキーワードをメタ情報として登録しておかないとダメなわけですよ。

そして、横展開です。これは全てを管理しているようなコアチームのようなところがあるのであれば、そこが責務を追うというのでも良いと思いますが、定期ミーティングを設定し強制的に何かシェアをする場にしてしまっても良いかもしれません。定期ミーティングを設定するって、結構それだけでもものごとが進むんですよね。たまに形骸化しますけど。

ということで、あまりまとめながら書いていないので無駄に長くなりましたが、ナレッジシェアしていこうよという話しでした。

※おそらくこんな話はどこぞのナレッジマネジメントの本などを読めばある程度出ているかもしれません。

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

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

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

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

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

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

テストの概要

さてテストの概要ですが、先ほども触れたようにこのブログで行っていました。既にテストは停止してしまいましたが、現在も掲載している各ページの右下の表示されているTwitterのバナーです。

仮説

Twitterで利用しているアイコンを使った方が、実際にフォローだとか興味を持ってもらえるのではないだろうか？でもやっぱりTwitterの青い鳥の方がよりTwitterが直感的にわかるのかもしれない。さぁどっち？ ということで２種類のバナーを使ってテストを行いました。

バナーパターン１

バナーパターン２

ゴール

本来ならTwitterのフォローをゴールにしたいところですが、そこまではトラッキングできないのでバナーのクリック率です。一応、訪問ではなく、訪問者ベースでの検証をしています。

テスト結果

さて、わくわくのテスト結果です。このエントリのタイトルとか気にしている場合ではありません。テスト結果わかっちゃうじゃないです。

じゃん！バナー２が大勝利でした。１年流した結果でいくと、青い鳥のバナー（バナー１）に比べて、102.39%の上昇です。大勝利です。

ということでです。Twitterのアイコンとかにしておくほうがよりクリックされます。次回は気が向いたら文言でさらにあがるかどうかについても検証したいと思いますよ。

とはいえ既存のページのワイヤーフレームを作るのも大変なもの。ただ、別に考える時に少しあれば良いのでそんなに手間をかけた細かいものでなくても良いわけです。

Volkside | Introducing Wirify: The web as wireframesで提供されているブックマークレットを使うと、簡単にワイヤーフレームが作れるようになります。リンク先の「Wirify by Volkside」のリンク先をブックマークに追加して、ワイヤーフレームを見たいページでブックマークを呼び出すだけです。

ちなみにこのブログのトップページをやってみたのが下記のイメージです。

ピクセルが正確には表現できていない点やプライバシーは保つもののURLをログとして記録をしているなど注意点もあるのでそのあたりは留意しながら使いましょう。ということでたまにはこんなネタでした。