デザインは最終的には好みの問題になってしまうので、クライアントの意向などで、なかなかデザイナーが提案したものに仕上がらない事もよくあります。

クライアント側の意見を後から後から追加されてしまい、結果的にはハチャメチャなデザインになってしまう事も…。

しかし、クライアントへ、きっちりと提案したデザインが効果的であるという事を提示できれば、納得してくれるのではないでしょうか？

Googleから提供されているウェブサイトオプティマイザーを利用すれば、簡単にデザインの効果測定（A/Bテスト）ができるので、なかなか使えるツールになるのでは？

Googleウェブサイトオプティマイザーは、同時に複数のデザインを公開してクリック率やコンバージョン率などを測定し、どちらのデザインがより効果的なのかを比較できるツールです。

クライアントの予算にもよりますが…。クライアントが主張するデザインと、デザイナーが提案するデザインに大きな溝がある場合、２つのデザインを同時に公開し、ランダムに訪問するユーザーを振り分け、効果を測定し効果の高いデザインを採用すれば、両者が納得してサイト制作を進めていく事が出来るでしょう。

今回は、Googleウェブサイトオプティマイザーなどのツールを使って、実際にデザインの比較テストをしている事例をピックアップしてみました。

Googleウェブサイトオプティマイザー

Googleウェブサイトオプティマイザーのページはこのような感じ。数字やグラフで一目で効果的なページがわかります。

Make sense of your site: tips for webpage design

もちろんGoogle社内でもこのツールは活用されていました。Googleのデザイナーの人たちは、以下の２パターンのデザインを比較し、多くのデザイナーが上のスクリーンショット付きのデザインに決定するだろうと予測していたようですが…。

なんと、結果は下のシンプルなデザインの方が30％もダウンロード数が多かったという結果がでたようです。Googleのデザイナーでもどちらのデザインがユーザーの心をつかむのかは、わからなかったという事ですね…。

画像を使ってインパクトを高める事と、コンバージョンをアップさせる事は必ずしもイコールではないという事ですね。

How Obama’s team used A/B testing to improve fund raising

アメリカ大統領選挙を制したオバマ大統領のウェブサイトでもしっかりとA/Bテストを行っているようです。サイトに掲載するTシャツのデザインを比較し、より効果的なデザインと配置を検証しているようです。

Google Website Optimizer Test: We Didn’t Implement the Winner

こちらもA/Bテストを行って、コンバージョン率を大幅にアップさせる事に成功した事例です。しかしながら、クライアントと話しあい、将来的なプランも見据えて2番めにアップしたデザインを採用したようです。クライアントとより深い関係を築く事が出来るのもA/Bテストの利点ではないでしょうか？

Sparkt Studio

数パターンのデザインを比較検証した結果、最も効果的だったデザインを採用した事例です。

最終的には、以下のデザインが採用されたようです。

Writing Decisions: Headline tests on the Highrise signup page

こちらの事例は、デザインというよりは、キャッチコピーのA/Bテストの例です。上がオリジナルのコピー、下が30％コンバージョン率をアップさせたコピーだそうです。他にも様々なコピーの組み合わせが比較されています。少しの違いのように見えますが、結果には大きな違いがでるのですね…。

Should Retail Email Sell or Inform? An A/B Split Test Case Study

フォントやサイズ、コピーを変える事で、クリック率を7％、コンバージョン率を6％、売り上げを15％もアップさせた事例です。

Experiment or Go Home!

お花屋さんのサイトで、花の写真だけでなく、女性の写真をくわえる事でアップさせた事例です。

Experimentando con el Test A/B

こちらは、スペイン語で書かれているのですが…。アイコンを上に配置する、吹き出しの色を変えてみるなど、デザインのマイナーチェンジで比較する事例です。

Demo Club A/B test results

こちらは、お問い合わせフォームのA/Bテストです。上か下か、結局どちらが採用されたかわかりますか？正解はこちら。

Similar Posts:

• 翻訳サービスいろいろ
• ニュースレター テンプレートとツールいろいろ
• タイトル・見出しに使えるデザインまとめ
• ウェブデザイナーにおすすめ Google Chromeエクステンションいろいろ
• Google AdSenseにまつわる使える6つのツール