HubSpotの年次イベントである「INBOUND16」で、私たちは大々的にリニューアルされたHubSpot.comを発表しました。その後、ウェブサイトのパフォーマンスのモニタリングを開始し、テストを実施して、かなりの量のデータを集めました。
そして、私たちはリニューアルによって十分な成果が得られたことを確信しました。この記事では、今回のプロジェクトから私たちが学んだ重要ないくつかのことについて、皆さんにお話ししたいと思います。
私たちは大規模なリニューアルの場合はたいてい、ウェブサイトを大幅に改善するために注目すべきデータの検討から作業を始めます。HubSpot.comはアップデートが継続的に行われていますが、それらの経験から理解したことをまとめて、年に1度か2度はウェブサイトの大規模なリニューアルを実施するようにしています。今回注目したのは次のような点です。
トラフィックとリードを増やすウェブサイトパフォーマンス最適化手法
ウェブサイトのパフォーマンスが原因で失注するような事態は未然に防がなければなりません。 改善のポイントを無料ガイドでお確かめください。
- ウェブサイトのパフォーマンスを改善する方法
- SEOのベストプラクティスを実践する方法
- モバイル向けにウェブサイトを最適化する方法
- ウェブサイトのセキュリティーを強化する方法
今すぐダウンロードする
全てのフィールドが必須です。
ユーザーエクスペリエンス
HubSpot.comは、私が「Design Debt」と呼んでいる現象に陥っていました。つまり、ウェブサイトに対して繰り返しテストを実施し、データ上ではパフォーマンスが高いという結果が出ているものの、ユーザーからの実際の反応はそれほど良くないという問題があったのです。
その理由としては、デザインに一貫性がない、ナビゲーションにまとまりがなく不便、ウェブサイトの重要な部分が後から付け足して作られたように見える（実際、後から付け足されました）など、いくつか予想はつくのですが、とにかくこうなった以上、ウェブサイトのリファクタリングを行い、テスト結果から集めた情報を基にサイト全体を一新して、一貫性のあるデザインに作り直すことが必要です。
コンバージョン
テスト結果から得た情報を基にウェブサイト全体を作り変えれば、コンバージョン率が向上するだけでなく、CRO（Conversion Rate Optimization）の対策に向けた強固な基盤作りもできるはずです。せっかくテストを行ったのですから、その結果をチーム全体に伝えてデザインに活かさなくてはなりません。しかも、その時点でHubSpotのラインナップが変更されることが決まっていたため、私たちはアップデートを大々的に行いたいと思うようになりました。
製品プロモーションのアプローチ
INBOUND 2016の開催の前に、HubSpot Growth Stackが発表されることが決定していました。この製品ではHubSpotの全製品の無料バージョンが提供されます。これによって、米国だけでなく世界中のHubSpotウェブサイトにおいて、コンバージョン率に大きな影響が出ることは確実でした。HubSpotをどのように紹介するべきかを、ユーザーを巻き込んで検討し直すには、まさに絶好の機会だったのです。
最終的に、私たちはHubSpot.comのアプローチを一から考え直すことになりました。初期の調査で、HubSpot.comの主要な70ページ程度を、リファクタリングするかデザインを変更する必要があることがわかったからです。その時点で、INBOUND開催までの期間は3か月に迫っていました。
しかし、これほど思い切った、しかも内容の濃いプロジェクトを、初期のテスト結果だけで開始することはありませんでした。事前にMVP（Minimum Viable Product： 検証に必要な最低限の機能を持ったプロダクト）を利用して、自分たちの考えが正しいことを確認する必要があると思いました。
準備段階のテスト
それから数日かけて、私とMatthew BarbyはHubSpot SalesのウェブサイトのMVPを静かに立ち上げました。その目的は、手持ちのデータや仮説、ざっくりとしたアイデアをすべて無条件に取り入れてデザインを作成すると、どのような結果になるかを調べることでした。
イラストを追加したり、立体感を出すためにドロップシャドウを入れたり、スタイルガイドに反する色を使ってみたり、新しいCSSアニメーションを追加したり、まったく違うトーンのコピーを入れたり、風変わりなCTA（Call-To-Action）を使ったりと、あらゆることを手当たり次第に試してみました。
（MVPデザインの様子）
テストはうまくいきました。新しい方のデザインで、コンバージョン率が20％高くなったのです。また、テストに協力したユーザーも、このアプローチを気に入ってくれました。HubSpot.comを一新することで効果が得られそうだとわかったので、私たちはこのリニューアルプロジェクトの開始を決意しました。
予想してはいましたが、プロジェクトの開始後に行ったテストで、先ほどのデザインには改善すべき点が多く含まれることがわかりました（たとえば、ドロップシャドウは効果が強すぎました）。もちろん、自分たち二人だけでWebデザインの全体的な方向性など決められようもありません。
それはチームをきちんと編成してから考えればよいので、このテストでは今回のリニューアルに対する私たちの考えが間違っていないこと、それが実現可能であることを確認できただけで良しとしました。
キックオフ
さっそく、チームの編成に取りかかりました。CRO、SEO対策、コピーライティング、データ分析、デザイン、開発、製品リサーチ、そしてプロジェクト管理と、プロジェクトに必要な専門分野のエキスパートを集めて精鋭部隊を結成しました。
その後、最終的に承認したり重要な判断を下したりする意思決定者として、3名の経営幹部が加わりました。メンバーの数が多いように思えるかもしれませんが、社員数が1,500を超える企業にしてはかなり少ない方です。少人数に絞ってチームを編成することは重要です。これは大企業でも同じで、その方がスコープクリープ（プロジェクトの進行につれてスコープが少しずつ肥大化すること）を防げます。
リサーチ
デザインを始める前に、私たちはさらに詳しくリサーチを行って洞察を加えることにしました。まずはコンバージョンフローの全体的な調査から始めました。
すると、製品ごとに（3つから7つほどの手順による）複数のフローが存在し、なかには非常に複雑なものも含まれることがわかりました。また、コンバージョンフローや手順の数が少ない製品では、プロセスが複雑な製品と比較して、コンバージョン率が2倍から3倍も高くなることも明らかになりました。
この結果から学んだのは、言うまでもなく、コンバージョンフローを集約し、HubSpot.com上のランディングからコンバートまでの手順の数を、大幅に減らす必要があるということです。
簡素化する前と後のコンバージョンフロー
また、HubSpotのユーザージャーニーについてもリサーチしました。これを調べることによって、ユーザーが実際にHubSpot.comのコンバージョンフローをどのように通過しているかがわかり、手続きの煩雑さを解決する糸口が得られました。
なかには、自分がどの製品に登録しているのかさえ、よくわかっていない人もいました。特に、HubSpotのCRMとHubSpot Salesがどのように連携するのか、理解できない人が多いようでした。そこで私たちはカスタマーではないユーザー、支払いが発生しているカスタマー、そしてHubSpotの社員に対してインタビューを行い、その結果、以下のコメントが得られて解決すべき問題点が明確になりました。
ウェブサイトがあまりにもわかり辛いので、手続きを続けることができませんでした。まったくうまくいかず、わけがわかりません。これを利用することで我が社に何のメリットがあるのか、そもそもメリットがあるのかも、一切判断がつきませんでした。
このように率直で、正直な、滅多にないフィードバックは大歓迎です。私たちはこれを真摯に受け止め、貴重な意見をいただいた方や、プロフィールから詳しく調査すべきと判断した方に対して、フォローアップインタビューを行いました。それと同時に、製品について説明を受ける際にどの方法が望ましいか（そして、どの方法の場合にコンバージョン率が上がるか）についても調査し、非常に興味深いデータを入手しました。
ソフトウェアの説明を受ける際、どの方法が望ましいですか？
これらのリサーチ結果を基に、コンバージョンフローを大幅に簡素化させ、「Get Started」用のCTAも作成しました。
訪問者はこのCTAをクリックして「Get Started」フローに移動します。そして、HubSpot Marketingのデモをリクエストしたり、3製品の無料バージョンに登録したりするオプションを提示されます。
この新しいコンバージョンフローを中心として、HubSpot.comの重要な39のページについて集中的に、アップデートの作業を行いました。初期の時点では、70ページに対して大幅な変更が必要と考えていましたが、その後のリサーチにより、時間をかけて作業しなくてはならない最重要ページを絞り込みました。
コンテンツとコピー
今回のリニューアルの要として、私たちは、「コピーファースト」をテーマに掲げていました。つまり、デザインを先に作るのではなく、コピーを基にデザインを決めようと考えていました。コピーに込められたメッセージをデザインが補い、そして増幅するように創り上げるのです。これをスケジュールがかなりタイトななかで実現しなくてはなりません。私たちはコピーライティングとワイヤーフレームの作成を並行して行うことにしました。
大切なのは、製品の価値をユーザーに理解しやすい言葉で上手に説明することです。HubSpotという製品が実際何なのか、訪問者には理解しにくい面もあると理解したうえで、マーケティングとセールスの両方に便利で、しかもCRMも無料で使えることを明確に伝えたいと考えました。
また、3つの製品がそれぞれ単体でも十分パワフルに利用でき、一緒に使用すればさらに効果が高いことを伝えるとともに、それをHubSpotの新製品であるGrowth Stackのポジショニングとして示すことにも重点を置きました。
コピーに関してこれまでに行ったA/Bテストにおいて、コンバージョン率が20％近くも上昇したのを確認済みであったため、今回のリニューアルで、私たちはCROの目標を達成させるために、コピーの質を高めることが必須と考えていました。そのため、リサーチによって集めたデータをフルに活用し、さらに、プロダクト マーケティング チームによるガイダンスも取り入れて、HubSpotのポジショニングを定める新しいコピーの作成に取り組みました。
効果的なコピーを作成するためには、質の高いリサーチを行い、その結果を基に重要な判断を下していくことが不可欠です。つまり、リサーチの能力に優れていなければ、優秀なコピーライターにはなれません。
デザインの評価
今回のプロジェクトでユーザーに伝えたいことの概要が決まったので、私たちはもう一度MVPに立ち返り、それをデザインにどう取り入れるかを考え始めました。構造上は完成にかなり近いところまできていましたが、すべてが正しく表示されるようにデザインを整える必要がありました。
問題は、「美しさを正す」という作業が決して簡単ではなく、また、それを測定するのはさらに困難だということでした。私たちはたびたび、最も美しく見えるのはどれかを主観的に議論して長い時間を費やしましたが、何をもって美しいと捉えるか、考え方を変えることで、美しさの度合いをかなり客観的に測定できるようになりました。
要するに、何を美しいとするかを意思決定者の判断ではなく、ユーザーの判断に委ねるのが最善の策と理解したのです。その方法なら測定も難しくはありません。
そこで私たちはテスト用のデザイン（結果を確認するため）、現状のデザイン（ベンチマークとして見るため）、称賛するデザイン（何を目指すべきか決めるため）の3つを使用してテストを行いました。結果はほぼ望みどおりではあったものの、いくつか非常に気に入っていたアイデアを破棄せざるを得なくなりました。それは次のようなものでした。
イラスト
私たち自身はイラストをデザインにぜひ使用したいと思っていましたが、テストではユーザーの評価が良くありませんでした。イラストのスタイルや色彩、キャラクターをさまざまに変えて反応を調べましたが、最終的にどれを取ってもユーザーのお眼鏡に適うものはありませんでした。
イラストを気に入ったという人もいれば、子供染みている、あるいは素人っぽく見えるという人もいて結果が思わしくないため、イラストを使用することをいったん諦め、改めてテストを行って、将来的に使用を検討することにしました。
ドロップシャドウなどの視覚効果
デザインには最新のトレンドを取り入れたくなるものですが、実際、ユーザーの多くはトレンドなど理解しないか、面白いと感じていません。いわゆる「先進的なデザイン」よりも、すっきりとした控えめなデザインの方が、おしなべてパフォーマンスが高くなるものです。
確かに、テストの結果に目を疑ったり、ときには屈辱さえ感じてしまうこともあるでしょう。それでも、デザインの方向性を決める際には、自分よりもオーディエンスの考えを優先すべきであることは、どれだけ強調しても足りないくらいです。ユーザーは自分たちとまったく異なる、計り知れないほど貴重な見解を与えてくれます。
ワイヤーフレームとモックアップ
私たちは新しいデザインとスタイルの作成に素早く取りかかりました。デザインをスケーラブルにする必要があったため、テンプレートレベルの作業でも、各デザインごとに数えきれないほどの修正を繰り返しました。
将来アップデートを行う際、スタイルが全面的に変更される可能性があることを考慮しなくてはならなかったのです。私がさまざまなワイヤーフレームを作成してはテストを繰り返すあいだ、David CarberryとAmelia Towleはビジュアルの方向性を検討していました。このプロセスの一例を下の画像でご覧ください。
ワイヤーフレームとモックアップ
グローバルヘッダー、フッター、CSS
最終的に、ワイヤーフレームの変更を100回繰り返し、60のビジュアルデザインと、InVisionのフルプロトタイプを4つ作成しました。これほどの数に至った理由は、私たちがデザインをテストしては修正を繰り返していたからですが、一方で、コピーとデザインを並行して作成するという強硬スケジュールを取っていたこともあったと思います。
（クリック回数を示すヒートマップ）
その後、デザインの仕上げに入る前に、コンバージョン、見た目の好み、操作性について、最終的なテストを行いました。その間、私たちは製品の画像やビデオなどを並行して制作し、デザインにはめ込んでいくコンテンツをすべて完成させました。
動画
リサーチの結果から、ソフトウェアの説明を受ける方法として、動画の視聴を好む人が65％いることがわかっていました。そこで、各製品ごとにメインページで表示する動画を作成し、さらに、ホームページで自動再生されるMP4動画も、各製品ごとに作成しました。
MVPと最終的なデザインの動画へのクリック回数を示すヒートマップ
上の画像から、MVPの画面でも動画のCTAにエンゲージメントが多く集まっていることがわかります。この傾向は私たちが修正を繰り返し、最終的なデザインを完成させた後も変わりませんでした。
ウェブサイトを立ち上げた後に、動画のエンゲージメントとコンバージョン率の関係をトラッキングしたところ、動画を表示することで、コンバージョン率が300％も向上したことがわかりました。
開発ボリューム
今回の開発ボリュームは、HubSpotの標準的なプロジェクトと比較してもかなり大規模なものになりました。130ページ以上を.com（英語）、.es（スペイン語）、.de（ドイツ語）、.fr（フランス語）、そして.br（ポルトガル語）で、しかもINBOUND開催中に公開したからです（.jp（日本語）に関しては2017年6月時点でリニューアル最中です）。
さらに大変だったのは、この130ページのうち39ページを、主要なページとしてHubSpot.comにまったく新しく追加したことです。「Get Started」のコンバージョンフロー用のホームページのほか、製品ごとのページ（合計4ページ）、製品全体を紹介するページ（合計2ページ）、そして主要な各機能を紹介するページ（合計31ページ）が新規作成されました。
それに加えて、タイポグラフィーを作成し、各言語ごとにスタイルガイドを準備し、ページの読み込み時間を短縮し、セールスラインの簡素化、ライブチャットのツール変更、ナビゲーションやフッターの一新、モバイル専用ページの作成と、作業は多岐に及びました。そしてこれらすべてを完成させ、INBOUNDイベントでChristopher O'Donnellが基調講演を行っているタイミングで、完璧に発表しなくてはなりませんでした。
私たちチームは発表をスムーズに行うだけでなく、オーディエンスの期待を超える、いつも以上に素晴らしいリニューアルを実現しようと、毎日遅くまで働きました。そして、発表を予定していた130ページすべてが、1ページも欠かすことなく、11月9日の基調講演の最中に稼働を開始したのです。ついでに言えば、CSSを67％も縮小させましたが、新しいウェブサイトの動作に支障をきたすことはありませんでした。
成果
新しいウェブサイトの稼働後に、90を超えるさまざまなコンバージョンパスでトラッキングを開始しました。HubSpot Analytics、Google Analytics 360、Amplitudeの3つを組み合わせて実装し、ウェブサイトの重要な指標をすべて表示する堅牢なダッシュボードを作成しました。これを毎日チェックし、パフォーマンスの詳細な調査を行った結果、以下のような成果が明らかになりました。
- HubSpot.comの新しい「Get Started」フローによって、コンバージョン率が2倍に上昇しました
- デモリクエストの数が合計で35％増加。質の高いMQL（マーケティング活動で獲得した見込み客）を多数獲得しました
- この結果には、デモ用のランディングページのデザイン変更によってコンバージョン率が57％上昇したことが大きく貢献しています
- セールスとのチャットの回数が38％増加し、問い合わせの電話を受ける回数も倍増しました。つまり、顧客化率の非常に高いチャネルを選んでコンタクトするユーザーが増えたと言えます
- 結果的に、製品の登録者数が合計で27％増加しました。これによって収益の増加と、ユーザーの維持が企業には見込まれます
私たちはこれまで、ユーザーエクスペリエンスやCROの改善などを最重要課題として、ウェブサイトのリニューアルを繰り返してきましたが、今回のプロジェクトではこれまで以上に偉大なパフォーマンスを実現できると予想しています。
今回の経験から学んだこと： 複数の分野のエキスパートが集まってチームを作り、各自が視野を広く持って、何をデザインするかだけでなく、なぜデザインするかを理解しながらプロジェクトを進めれば、配慮の行き届いた、パフォーマンスが非常に高いウェブサイトが完成します。
実際にリニューアルされたウェブサイトをご覧になられたい方はこちらまでどうぞ。
編集メモ：この記事は、2017年3月に投稿した内容に加筆・訂正したものです。Austin Knightによる元の記事はこちらからご覧いただけます。
