モバイルランディングページのコンバージョンを最適化する6つのヒント | Optimizely 正規代理店イー・エージェンシー

Optimizely X ブログ

  • 2017年12月21日

モバイルランディングページのコンバージョンを最適化する6つのヒント

▼こんな方に役立ちます。
・モバイルページ最適化の実験アイデアを検討している
・モバイルランディングページのコンバージョンを最適化したい

スマートフォンでウェブサイトを見ていて、見づらいコンテンツを拡大、縮小した経験が皆さんもあると思います。モバイルに最適化されていないページは、文字が読みづらく、画像はクリックしづらいと感じます。ボタンやリンクを操作することは、ほぼ不可能と言っても良いかもしれません。

そのため、モバイルに最適化されていないサイトにアクセスしたユーザーは、すぐにサイトから離れてしまう傾向があります。ユーザーが商品を購入する可能性は少なく、長時間滞在することもないでしょう。このような状況を防ぎ、コンバージョンを向上させる為に、モバイルのランディングページを最適化することは重要です。

モバイルページを最適化する理由

アメリカの統計サイトの Statista では、2015年にモバイル機器の買い手ユーザーが1億2千万以上存在し、2019年までにはその数は大幅に1億6.2千万にまで増加すると報告しました。また、 IAcquire 社とSurvey Monkey社による「モバイル機器を使用して商品を購入するユーザーの行動調査」では、次のことが報告されています。

  • ユーザーが検索した70%のモバイル検索結果は、一時間以内にウェブサイトに反映されます。
  • ランディングページがモバイルに最適化されていない場合、モバイル機器から検索したユーザーの40%が別の検索結果を選択する可能性があります。

モバイルページを最適化する理由

コンバージョン率の高いモバイルランディングページを作成するヒント

前述の統計データから、モバイルランディングページを最適化する重要性は無視できないことがわかります。では実際のところ、あなたのモバイルランディングページはコンバージョンを向上するために、どれくらい正確に最適化されているのでしょうか?デジタルマーケティング業界の専門家が手がけるランディングページ最適化の基本に基づいて、以下の6つの方法をご紹介します。

1. 読み取りスピードを最適化する

ページの読み込みが遅いと、ユーザーを退屈させてしまいます。ユーザーの関心を引くためにも、モバイルのランディングページが読み込まれるまでの時間を短縮する必要があります。たった1秒遅れただけでも、モバイルコンバージョンに重大な悪影響が及ぶ可能性があります。これは Soasta 社が実施した実例研究で明確に証明されています。この調査では、平均読み込みスピードが2.4秒のページで1.9%のコンバージョン率が得られました。デスクトップのコンバージョン数が平均2〜3%である点を考慮すると、相当な割合です。また、 1秒遅く読み込んだページでは、コンバージョンが27%減少することが判明しました。

読み取りスピードを最適化する

モバイルウェブページの読み込み速度を上げるにはいくつかの方法があります。

  • ページの速度を落とさないように、画像は適切なサイズにリサイズします。これにより、HTMLファイルとCSSファイルを圧縮し、ファイルサイズを50〜70%削減することができます。( Varvy から)
  • Flashやその他のプラグインを使用すると、ページの読み込み速度が大幅に低下する可能性があります。また、Flashやプラグインがユーザーのデバイスと互換性がない場合は、Flashやその他のプラグインを使用しないでください。目標は、モバイルのランディングページのサイズを約20キロバイトあたりに保つことです。
  • 2. 注意散漫を最小限に抑える

    モバイルまたはデスクトップ用のランディングページを作成する場合であろうとなかろうと、画像とテキストに焦点をあててしまうことがあります。その結果、すべての空白スペースを画像やテキストで埋めてしまうことがあります。あまりにも多くのことがランディングページで起こると、ユーザーがサイトから離れてしまうかもしれません。そのため、CTAのボタンと見出しに注目を集めるよう、画像やテキストは最小限に抑えてください。 画像の重いページは読み込みに時間がかかり、それはまた別の欠点となります。

    SquareSpace の例(下の画像)を見てください。デザインとレイアウトが美しく最小限に配置されています。 テキスト、画像、その他の要素の間には充分なスペースが確保されています。空白をうまく使うことで、ユーザーは他の要素に気を散らすことなく、見出しとCTAボタンをはっきりと確認することができますので、次にどこに行けばいいのか、何をする必要があるのかを正確に知ることができます。

    SquareSpaceのモバイルサイト
    左 SquareSpaceのモバイルサイト

    3. インパクトが強い短い見出しを書く

    モバイルのランディングページでは、見出しを短くする必要があります。可能であれば、5単語以下にしてみてください。 すでに見出しのドラフトを作成している場合でも、2〜3個余分にドラフトを作成してください。後で製品の詳細を確認することができますので、 製品の説明などの不要な単語は見出しから削除してください。モバイルランディングページの見出しの唯一の目的は、ユーザーにあなたの製品が何かを知らせることです。

    Motorola’s Moto 360 のモバイルランディングページは良い例です。また、SquareSpaceの例でわかるように、5語以内の見出しを利用し、最も重要な細部(商品名と価格)だけが表示されています。 CTAボタンが明確に表示され、製品に関する詳細が少しだけ表示されています。 「Build Yours」は、時計がカスタマイズできることを示しています。

    これらのモバイルランディングページは、魅力的で短い見出しに簡潔なボタンのCTAを組み合わせた商品説明となっています。

    Motorola’s Moto 360のモバイルランディングページ
    右 Motorola’s Moto 360のモバイルランディングページ

    4.電話番号をクリック可能にする

    製品やサービスについて質問がある場合、ユーザーはどうするでしょうか?連絡をとるために、電話番号を必要とするでしょう。ウェブサイトから電話番号をコピーし、ブラウザと通話画面を切り替えるのは面倒です。ランディングページを作成するときは、使いやすさを重視する必要があります。電話番号をクリック可能にすることで、問い合わせがより簡単になります。

    電話番号にクリック可能なリンクを追加した場合、ユーザーが誤って他の行をクリックしてしまう可能性があるので、クリック要素の周りに余白を入れたボタンとしてデザインするとよいでしょう。 Timber Mantels のモバイルウェブページの例をご参考ください。

    電話番号をクリック可能にする

    5.CTAを最適化する

    説得力が失われないように注意して、CTA(行動喚起 ”Call to action”の略)を短く、明確にします。 ユーザーがモバイルページを開いたときに、見出しとCTAが最初に目にはいるレイアウトが理想的です。まずは視認性を確保することが優先されますが、CTAのコピーを見て訪問者が何をするべきか明確に理解できるようにしましょう。モバイルランディングページの目的がコンバージョンであれば、説得力のある明確なコピーに焦点を当てます。

    Shyp’s のモバイルランディングページの例を見てみましょう。より暗い背景で強調されたCTAボタンにすぐ目がいきます。もちろん見出しも重要ですが、主の目的はCTAです。このCTAはしっかりと説得力を失わずに、短く明確に調整されています。また、ユーザーの注意を外らさないように、デザインは最小限に抑えられています。

    CTAを最適化する

    6.モバイルランディングページをテストする

    モバイルランディングページに加えた変更が有効か、どのバリエーションを選べばいいのか?どのように知ることができるでしょうか?

    A/Bスプリットテストや多変量テストを実行することは、モバイルとデスクトップそれぞれで効果的なランディングページを構築するために必要不可欠です。ランディングページのさまざまなバージョンを比較することで、サイト固有のユーザー層に有効かどうかを判断できます。すべての変更が必ずポジティプな影響を与えるわけではありません。もしかすると、CTAコピーの実験は、あなたが期待したような効果がないかもしれません。しかし、目的にプラスの影響を与える可能性のある選択肢を試すいい機会です。

    Veggie Tales の例によると、モバイルに最適化されたイーコマースのページをテストすることで、モバイルショッパーからの収益を増加することができました。 以下は、オリジナルのモバイルページです。明らかに、モバイル画面に合わせてサイズが変更されておらず、CTAはほとんど見えず、テキストも読みにくい状態です。

    モバイルランディングページをテストする

    下記のバリエーションを参照してください。モバイル画面のサイズに合わせ変更されており、CTAもモバイル画面に配置されています。このモバイルに最適化されたユーザーエクスペリエンスにより、訪問者あたりの収益は28.1%向上しました。

    モバイルランディングページをテストする

    このように、CTAのボタンの配置、フォント、色、リンク先ページなど、モバイルランディングページの全体的なデザインを実験し、完全に最適化することは、コンバージョンを増やす最も効果的な方法になります。

    まとめ

    コンバージョン向上のためにモバイルページの最適化を実施されていますか?まだ、お済みでない場合は、ご紹介したヒントを活用して、コンバージョン数が増加するかお試しください。

    この記事は、Optimizely社の以下記事を翻訳、編集しております。
    https://blog.optimizely.com/2016/08/08/mobile-landing-page-optimization/


Optimizelyのサポートに関するお問い合わせはこちらまで

前へ
次へ

ブログの関連記事

A/Bテストの実験結果から行動を起こす手法
敗北したアイデアを行動につなげるには?
A/Bテストと検索エンジン最適化
ロード速度がPVに与える影響を実験により定量化 – イギリスメディア大手The Telegraph社

ブログのよく読まれている記事

コメントは受け付けていません。