スマホで効果の高いランディングページを作るための10の方法

　SEOツールを提供するSISTRIX社の調査によれば、日本における、Google検索エンジンの「75.1%」がモバイル端末から、「24.9%」がデスクトップ端末から行われているそうです。すでに「4分の3がスマホから」という時代に突入しています。

　そのため、皆さまの運用されているWebサイトや、リスティング広告のリンク先ページが、モバイルでの表示に対応していない場合、大きなチャンス（コンバージョン）を逃すことになるかもしれません。

　本記事では、コンバージョンを促進する効果的なモバイルランディングページを作るための方法をご紹介しています。

統計データ引用元：sistrix.com

モバイルフレンドリーなランディングページが重要な理由

　前述した通り、モバイルからの検索がデスクトップを上回るようになってきましたが、モバイルからのコンバージョン率について見てみると、依然としてデスクトップのコンバージョン率に比べて遅れを取っている傾向にあります。

　これは、未だに多くのWebサイトが、モバイルでの表示に全く対応していない、または正しく最適化されていないことが原因です。いくらモバイルからのアクセスが増えたとしても、コンバージョンに繋がらなければビジネスの成功とは言えません。

　逆に言えば、モバイルユーザーの閲覧環境を徹底的に分析して、モバイルフレンドリーなランディングページを作成することができれば、モバイルからの多くのコンバージョンを獲得し、マーケティング戦略を成功へ導ける可能性は高くなります。

効果的なモバイルランディングページを作るための10の方法

　それでは、ここからはコンバージョンを促進するモバイルランディングページの作り方について解説していきます。

1. スマホでの表示スピードを重視する

　モバイルランディングページの表示スピードが遅いと、コンバージョン率は下がります。特にモバイルユーザーは表示速度に敏感です。

　Googleの調査によれば、モバイルからWebサイトに訪れた53%が、ページの読み込みに3秒以上かかると離脱するそうです。それに対して、モバイルランディンページを完全に読み込むのに掛かる平均時間は15秒です。これは、モバイルユーザーの行動統計に対して、多くのWebサイトが読み込みに時間が掛かり過ぎていることになります。

　皆さまは、自社のモバイルランディンページの表示スピードをご存知でしょうか？Googleの提供するPageSpeed Insightsを使えば、ページの平均表示スピードが採点方式で分かります。表示スピードを上げるための改善点もアドバイスしてくれますので、ページの読み込みに時間が掛かっている場合は、まずはこの方法を試してみてください。

2. モバイルで必要のない要素は非表示にする

　モバイルで必要な情報を探す際に、多くの時間を掛けなければならないページは、離脱される可能性が高くなります。

　多くのランディングページが、デスクトップ用に作られているため、デスクトップ用のランディングページをレスポンシブデザインにしただけでは、モバイルで閲覧するには情報が多すぎたり、ページ構成の流れが悪い場合があります。

　デスクトップ用のランディングページの中で、重要な情報に優先順位を付けて、モバイルでは必要ないと判断したものは非表示にしましょう。ランディングページ内のテキスト、画像、ナビゲーションなどの要素は、モバイル用にひとつずつ見直す必要があります。モバイルランディングページでは、情報を詰め込むのではなく、シンプルであることが重要です。

　リスティング広告では、デスクトップのみに配信／スマートフォンのみに配信といった広告表示のターゲティングが可能です。コストや手間は掛かりますが、デスクトップ用とは別に、完全にモバイル専用に最適化したランディングページを一から作成し、コンバージョンに影響があるかどうかを試してみるのも良い方法です。

3. シングルカラムのレイアウト

　モバイルとデスクトップのランディングページのデザインで大きく異なる点といえば、ページレイアウトのカラム（列）の数です。モバイルは、1つのカラムで構成されたシングルカラムレイアウトを採用しましょう。

　なぜなら、モバイルデバイスは、画面サイズが小さいため、デスクトップ用のランディングページと同じように、複数カラムのレイアウトを採用してしまうと、コンテンツの視認性や可読性が低下します。

　シングルカラムレイアウトが優れている良例として、instagramやFacebookなどのモバイル用のソーシャルメディアアプリを見てみてください。ユーザーがスマートフォンを指でスクロールしながら、次々と表示されるコンテンツを眺めたり、関心を持ったりできるように考えられた、シングルカラムレイアウトが採用されています。

　モバイルユーザーの見慣れたシングルカラムを採用することで、結果的にスムーズなユーザー体験を提供し、ページからの離脱を減らし、コンバージョンの促進にもつながります。

4. ホワイトスペースは十分に取る

　ここで言うホワイトスペースとは、ランディングページ内でテキストや画像などが何も記されていない余白スペースのことです。白の背景色に限定せず、何も記されていない背景色がそのまま残っている部分という意味合いです。

　モバイルランディングページでは、ホワイトスペースを十分に取ることを意識するようにしてください。モバイルの小さな画面に多くの情報を隙間なく詰め込んでしまうと、ユーザーは気が散ってコンテンツに集中することができません。

　モバイルユーザーは、垂直方向の画面スクロールには慣れていますので、無理に一画面内に情報を詰め込もうとする必要はありません。テキストや画像の間に、適当な余白スペースを入れながら、スムーズに読み進めてもらえるレイアウトになっているかどうかを意識することが重要です。

5. テキストは短く簡潔に

　モバイルランディングページに、デスクトップ用ランディングページのテキストをそのまま全て入れた場合、モバイルで読むには情報が多すぎる場合があります。これはユーザーのストレスにつながり、ページからの離脱につながる可能性があります。

　ここではテキストを短く簡潔に伝えるための方法をご紹介します。ポイントは、「要点だけを伝えることを意識する」「読みやすい言葉を使う」「分かりやすさまで犠牲にしない」ということです。一文一語、すべてのテキストに意味があることを意識しながらテキストを編集します。

不要な部分を削除する

　デスクトップ用のテキストをもとに、モバイル用にできる限りも短いテキストになるように、不要な部分を削除していきます。冗長な表現、不必要な形容詞や副詞、語弊のあるフレーズなどは削除しましょう。

インパクトのある見出しをつける

　見出しのテキストは、ユーザーが続きを読み進めたくなるような短くてインパクトのあるものにしましょう。大げさな表現や、曖昧な表現は避け、言いたいことを1つに絞った、明確な価値提案ができる見出しをつけましょう。

箇条書きを使う

　箇条書きにすることで、重要なポイントを短く伝えることができます。箇条書きは、文章よりも注目を惹くため、見落とされ難いという利点もあります。

段落は短く区切る

　1つの段落のテキストが長くなり過ぎないように注意しましょう。ページの中にテキストの塊があってはいけません。段落を短く区切って余白を入れることで、読み進めやすくなります。例えば、「1段落3行以内に収める」などのルールを作っておくと良いでしょう。

6. 画像や動画は控えめに

　テキストと同様に、モバイルランディングページに不要だと判断できる画像や動画は削除しましょう。画像や動画は、ページの表示スピードにも大きく影響する部分であるため、最小限の使用に留めるべきです。

　データ容量が大きな画像ファイルは、モバイル用に圧縮して最適化しましょう。動画を使用する場合は、再生時間が長すぎないものにし、自動再生は設定しないようにしましょう。

　ランディングページは、画像や動画で埋め尽くさなくても、限られたイメージ、簡潔なテキスト、ホワイトスペースを巧みに使うことで、シンプルで美しく、自然とCTAへと導くことのできる魅力的なページを作ることができます。ページの表示スピードもかなり速くなっているはずです。

7. スマートなナビゲーション

　モバイルランディングページには、不必要なナビゲーションメニューは設置しないようにしましょう。多くのナビゲーションメニューは、他のページへの遷移につながるため、潜在的なコンバージョンを遠ざけてしまう可能性があります。設置するメニュー項目は、コンバージョンに関わるものだけに限定するのがポイントです。

　例えば、ヘッダーをスクロールしても追従する固定ナビゲーションに設定し、ブランドロゴ、ハンバーメニュー、CTAボタンのみのスマートなナビゲーションにします。ハンバーガーメニュー内の項目も、ランディングページ内の重要な見出し（料金表、仕様など）へのスクロールリンクに留め、他のページへ遷移させないようにすると、ユーザーはCTAに集中することができるでしょう。

8. CTAは1つに絞る

　コンバージョンを促進するモバイルランディングページを作るには、1つのCTAに絞ってページを作成する必要があります。ページ内に複数のCTAがあると、価値提案が曖昧になり、ユーザーは混乱してしまいます。結果的にコンバージョンからは遠ざかってしまいます。

　CTAボタンのデザインは、モバイル画面でタップしやすい大きさにし、コントラストの高い強調色を使います。ボタンの周りには十分な余白を取り、ユーザーの視線がCTAボタンに集まるようにしましょう。CTAが電話での問い合わせの場合は、ボタンをクリックするだけですぐに電話が掛けられるように設定しておくことも大切です。

　また、CTAボタンはランディングページのファーストビューに必ず１つ配置しましょう。ユーザーがページを見始める前に、ページのCTAが何であるかを知ってもらうことで、ページを読み進めやすくなり、価値提案の理解度も高まります。

9. フォームをモバイル用に最適化

　ランディングページ内に、入力フォームを設置している場合は、フォーム項目やフォームのデザインについてもモバイル用に最適化する必要があります。

　フォーム項目については、本当に必要な情報だけを入力してもらうシンプルなフォームにしましょう。モバイルでの文字入力に慣れていないユーザーにとって、大量のフォーム項目に入力するのは大変な作業です。もっと情報を取得したい場合は、後からいくらでもフォローアップできます。モバイルランディングページでは、フォーム入力の完了率を高めることに注力すべきです。

　フォームのデザインについては、短く簡潔なラベル名を付け、入力エリアはモバイル用に適切なサイズに調整します。フォームデザインについては、以下の記事でもっと詳しく解説しています。参考にしてみてください。

10. スマートフォン実機で必ずチェックする

　ランディングページを公開する前に、スマートフォン実機を使って、作成したランディングページを必ずチェックしてください。デスクトップ用のWebブラウザについているモバイル表示シミュレーターでチェックしただけでは、分からないことがあるからです。

　実際にスマートフォンの画面を指で操作しながら、ここまで解説してきたポイントや注意点をひとつずつ、注意深くチェックしてください。モバイルユーザーの目線で、作成したランディングページを体験することによって、コンバージョンさせるための問題点や、改善点を発見することができるはずです。

まとめ

　いかがでしたでしょうか。今後も、モバイル端末からの閲覧は増加するでしょう。マーケティング戦略を成功に導くためには、優れたモバイルランディングページを用意しておくことが重要なポイントになります。

　今回ご紹介したポイントや注意点を踏まえて、適切なモバイルランディングページを作成することができれば、デスクトップと同様、もしくはそれ以上のコンバージョンをモバイルから獲得できる可能性があります。