変換するモバイルランディングページを作成するための究極のガイド
ランディングページはモバイルフレンドリーである必要があります。
モバイルランディングページは、もはや「便利な」機能ではありません。彼らは交渉の余地がありません。
しかし、Googleの最新のベンチマークによると、ほとんどの企業はまだそれを正しく理解していません。
そして、マークを逃すことは、たくさんのビジネスを失うことを意味するかもしれません。
実際、あなたは実際にあなたのモバイルランディングページに最初のディブを与えたいかもしれません。
デスクトップブラウザバージョンよりも多くのトラフィックを獲得し、最終的にはさらに重要になる可能性があります。
「インターネットの時代」でも、モバイルの利用は急速に増加しました。しかし、事業主にとって、それは非常に重要です。
あなたの目標が電話、電子メールの申し込み、または他のほとんどすべてであるかどうかにかかわらず、モバイルを念頭に置いて構築された素晴らしいランディングページは違いの世界を作ります。
モバイルのランディングページのパフォーマンスが低下するリスクを冒すことはできません。
ありがたいことに、モバイルランディングページが（文字通り）高速で、コンバージョンを促進する準備ができていることを確認する方法はいくつかあります。
コンバージョンはあなたにとって重要だと思いますので、すばらしいモバイルランディングページを組み合わせて仕事をこなす方法を見ていきましょう。
モバイルの台頭：デスクトップのみのランディングページが機能しなくなった理由
では、なぜモバイルがそれほど重要なのでしょうか。なぜ私のようなブロガーはそれを強調し続けるのですか？
ニール・パテルとの協議
私の代理店があなたのウェブサイトへの大量のトラフィックをどのように促進できるかをご覧ください
SEO-大量のSEOトラフィックのロックを解除します。実際の結果をご覧ください。
コンテンツマーケティング-私たちのチームは、共有され、リンクを取得し、トラフィックを引き付ける壮大なコンテンツを作成します。
有料メディア-明確なROIを備えた効果的な有料戦略。
電話を予約する
モバイルは今や人々がインターネットにアクセスする一番の方法だからです！
マーケティングマスターはこれが2010年に戻ってくるのを見ましたが、モバイルは2016年10月にデスクトップの使用を追い抜いたばかりです。
そして2016年11月までに、モバイルスマートフォンとタブレットのブラウジングがインターネットブラウジングの51.3％を占めました。
すべての兆候は、モバイルがここにとどまっていることを示しています。
実際、今ではデジタルマーケティングとウェブデザインの最前線にいます。
そして、それは私たちにモバイルランディングページのパフォーマンスの低下の問題をもたらします。
多くの人が、ラップトップやデスクトップではなく、電話やタブレットでランディングページにクリックスルーします。
実際、これが潜在的な顧客の大多数に当てはまる可能性は十分にあります。
考えてみてください。携帯電話で広告やGoogle検索からのリンクをたどった後、読み込み速度が十分でなかったためにバウンスしたことがありますか。
読み込み時間のバウンス率1
そうでない場合は、他の人よりも辛抱強くなります。
また、電話を使って閲覧する頻度はどれくらいですか。
おそらくたくさん。実際、インターネットを利用する人の80％がスマートフォンも所有しています。
たぶん、特に仕事をしていないときは、ほとんどの時間電話を使用しています。
もしそうなら、あなたは一人ではありません。
モバイルインターネット使用2017
モバイルの利用は毎日増加しています。
これらの統計を見てください：
キャプチャー
モバイルとタブレットのトラフィックは、勤務時間後に急増します。
そして、人々がビジネスを行っていないときは、当然のことながら、勤務時間外のトラフィックが増えることを期待できます。
したがって、トラフィックの多くがおそらくモバイルの使用にシフトしていることは理にかなっています。
結局のところ、モバイルデバイスは過去10年間で贅沢から必需品になりました。
それらは便利でアクセスしやすく、そして最も重要なことに、どこにでもあります。
消費者の48％は、デスクトップではなくモバイル検索エンジンからトピックや製品の調査を開始します。
現実的には、トラフィックの少なくとも50％がモバイルデバイス上のユーザーからのものであると予想できます。
モバイルの割合
したがって、現時点では、モバイルを念頭に置いてマーケティング活動のほぼすべてにアプローチしないことはまったく意味がありません。
もちろん、ランディングページも含まれます。
では、モバイル向けのランディングページをどのようにデザインしますか？
人々が自分の携帯電話とデスクトップで探すものに違いはありますか？
モバイルユーザー間のコンバージョンを最大化するためにランディングページに必要な主な機能は何ですか？
すぐに飛び込みましょう。
すべてのモバイルランディングページに必要な6つのこと
モバイルランディングページのデザインには、レスポンシブであることを確認するだけではありません。
実際、Googleは最近、ランディングページ専用に設計された評価ツールを公開しました。
モバイルフレンドリーなランディングページは、Googleの大きな優先事項です。
ランディングページの画像8.22.17aコピー
そして、正当な理由があります。モバイルユーザーの71％は、小さな画面では正しく表示されないデスクトップサイトにクリックスルーすると、バウンスします。
しかし、それは単なるバウンス以上のものです。
人々の目標と行動は、携帯電話とノートパソコンで少し異なる場合があります。
また、ユーザーが異なる方法で使用するデバイスで、まったく異なるユーザーインターフェースを扱っています。
ノートパソコンのキーボードで簡単にタッチタイピングするのに比べて、親指で入力するのは面倒な作業になる可能性があります。
また、画面上のスペースが少なくなり、「折り目の上」に収まるものと収まらないものに影響を与えます。
そして、あなたがあなたの電話で誰かのランディングページを見ているとき、あなたはおそらくそれに多くの時間を費やしたくないでしょう。
これらすべてのものは、mにとって何が機能し、何が機能しないかに影響します
モバイルユーザー間のコンバージョン率を最大化します。
では、モバイルランディングページを作成する際に留意すべき重要な領域は何ですか？
注目すべき点は次のとおりです。
1.シンプルに保ちます。
何度も何度も登場し続ける大きな要因が1つあります。それはシンプルさです。
そしてそれは非常に重要です。
ニールセン視聴率は、「ハザード関数」のグラフを公開し、現場での時間と相関して跳ね返る可能性を示しています。
ニールセン。ページを離れる確率とページにアクセスする確率。 17
では、持ち帰りは何ですか？そして、それは単純さとどのように関係していますか？
誰かが必要なものを探し回るWebページに長く留まらなければならないほど、彼らは去る可能性が高くなります。
人々は自分が探しているものを早く手に入れたいと思っています。
サインアップフォームにたどり着くために、たくさんの雑然としたものをスクロールしたいと思う人は誰もいません。
これは、Squarespaceによるデスクトップランディングページとモバイルランディングページの優れた例です。
デスクトップのランディングページは次のとおりです。
スクエアスペースデスクトップバージョン
優れたデザイン、ミニマル、強力で明確なCTA —これは優れたランディングページです。
シンプルで、潜在的なコンバージョンを促進する可能性のある混乱がありません。
次に、モバイル版を見てみましょう。
スクエアスペースモバイル
では、違いは何ですか？
モバイル版では、絶対に存在する必要のないものがすべて削除されていることに気付くでしょう。
デスクトップ版はそのままミニマルですが、モバイル版はハンバーガーメニューやログインボタンなど上部の要素を削除します。
今回はモトローラの見事なモバイルランディングページの別の例を次に示します。
moto360モバイルバージョン
モバイルランディングページに関しては、シンプルさが鍵となります。
2.コピーを短くします。
今日、ブログの投稿はトラフィックを生成するために長い形式である必要があります。
2,000語未満のものは、標準以下のトラフィックを生成する可能性があります。
同時に、ランディングページの長さに関しては、さまざまな情報源からの矛盾するアドバイスがたくさんあります。
2,000語以上を意味する大規模なコピーを推奨する人もいます。
他の人は、より控えめなサイズの記事をお勧めします。
これの多くは最終的にあなたの聴衆に依存します、そしてそれはあなたが常に心に留めておくべきです。
たとえば、誰かがあなたの配管事業を見つけた場合、彼らはおそらく悪い状況を修正するための即時の助けを探しています：
貼り付けた画像01188
したがって、この場合、必要なすべての情報がそこにあることを確認して、毛羽立ちを減らします。
モバイルのランディングページにもう少し肉が必要な場合もあります。
コンテキストによって異なります。
配管サービスを購入する方法は、会計ソフトウェアや高級時計を購入する方法と同じではありません。
それは、「あなたの聴衆を知っている」と言っているその古いマーケティングに戻ります。
ただし、一般的な経験則として、モバイルランディングページのコピーには「少ないほど多い」アプローチを採用することをお勧めします。必需品までそれを切り詰めます。
シンプルに保つというルール＃1に準拠しているので、それは理にかなっています。
ランディングページのコンテンツを60％減らすことで、Crazy Eggでのコンバージョンを実際に13％増やしました。
だから、それをいじって、あなたの聴衆にとって何が最善かを見てください。
これを行う1つの方法は、A / Bテストを使用することですが、これについては後で詳しく説明します。
3.短くて簡潔な見出しを探します。
ページ上のコピーのように、モバイルランディングページの見出しは短くてもインパクトのあるものにする必要があります。
力強い「クリックベイト」の見出しに焦点を当てないでください。
それは少し直感に反するかもしれませんが、この場合、最も重要な要素は明確で簡潔であることです。
何が必要ですか？
具体的にしてください。ランディングページの見出しを曖昧にしないでください。訪問者がそこで何をすべきかはすぐに明らかになるはずです。
1つの望ましいことに焦点を当てます。後で「1つのこと」の概念に戻ります。見出しでは、1つの重要なバリュープロポジションのみに焦点を当てたいと考えています。誰かがページで行動を起こすことから何を得ますか？
これは、ユーザーテストと調査のためのソフトウェアプラットフォームであるUserTestingの優れた例です。
ユーザーテストの見出し
短く簡潔です。
明確な価値提案があります。
読むのにそれほど時間はかかりません。UserTestingとは何か、それが何をするのか、そしてなぜサインアップして試してみたいのかをすぐに理解できます。
もう1つの優れた見出しの例は、ヘルプスカウトにあります。
貼り付けた画像01199
凝縮されていますが、彼らが何をしているのか、そして彼らがどのようにあなたを助けることができるのかを正確に教えてくれます。
4.ロード時間が非常に速いことを確認します。
以前の「ハザード機能」グラフを覚えていますか？
ロード時間はその一部です。
ページ速度が遅いと、コンバージョンキラーになります。
毎秒が重要です。
貼り付けた画像01193
数字は厳しい真実を語っています：
モバイルでは、人の忍耐力が薄くなるのにそれほど時間はかかりません。
大部分の人は、ページが読み込まれるまで最大10秒以上待つことはありません。
もっと時間がかかると、彼らは消えてしまいます。
これらすべての利点は、ページの速度を向上させるだけで、バウンスや変換の失敗の可能性を減らすことができることです。
そして幸いなことに、それは修正可能な問題です。
Googleのモバイルフレンドリーテストを使用して、速度を修正するための実用的な方法を見つけてください。
貼り付けた画像01206
5.1つのCTAだけに焦点を合わせます。
モバイルのランディングページを1つの主要なバリュープロポジションだけに集中させる必要があるのと同様に、1つの主要なCTAを中心に展開するように設計する必要もあります。
複数の行動を呼びかけることは、聴衆を混乱させることに他なりません。
また、CTAボタン自体を大きくてわかりやすくする必要があります。
このPayPalの例では、上部に大きな画像があるにもかかわらず、下部にある大きな青いボタンに目が向けられていることがわかります。
ペイパル576x1024
私が何を意味するのか分かりますか？
このページには、「仕組みを見る」という別のオプションがあります。
しかし、それは重要な焦点ではないため、ビジュアルデザインでは軽視されています。
対照的に、その大きな青いボタンは親指の痛みのように突き出ています。
このページで何をしてほしいかを正確に知る必要はありません。
それは私が話しているものです。
コンバージョンにつながる優れたモバイルランディングページは、明確でシンプルです。
6.申し込みフォームがある場合は、最小限に抑えてください。
ランディングページが、人々に何かにサインアップさせることを目的としている場合はどうなりますか？
モバイルでは、最小限に抑える必要があります。
ここでは、キーボードではなく親指で入力していることを忘れないでください。
人生の全貌を伝える10項目のフォームに記入することは誰も望んでいません。彼らの親指ではありません。
クリーンでシンプルなものにする必要があります。
貼り付けた画像01187
自問する必要があります。
人々から絶対に必要な情報は何ですか？
一部のフォームフィールドはそのままにしておく必要があります。名前、メールアドレスなど。
しかし、他の何でも、あなたは投げ出すことができます。
顧客の立場になってください。
多くの場合、モバイルトラフィックは移動中であるため、ユーザーが座ってフォームに入力するために多くの余分な時間を費やしてサイトにアクセスすることはありません。
優れたモバイルランディングページを作成するための6つの簡単なステップ
すべてのモバイルランディングページに必要な6つのことを明確にしたので、次はそれらを自分のページで実行します。
開始方法は次のとおりです。
1.あなたの目標を理解する
始める前に、達成しようとしていることが何であるかを正確に知る必要があります。
ランディングページは特殊化されていることを忘れないでください。
それぞれが明確に定義された目的、つまり人々に回心させるために注意深く作成する必要があります。
「変換」は、さまざまなもので構成されます。
これは、無料の電子書籍と引き換えにメーリングリストに登録する、アプリをダウンロードする、または無料のソフトウェアトライアルに登録することを意味する場合があります。
ランディングページで人々に何をしてほしいかを正確に把握する必要があります。
これを念頭に置いて、ランディングページを全体として幅広いカテゴリに分類できます。
リード生成用に設計されたページ：これらは、リードマグネットを使用して、連絡フォームに記入するように人々を誘導します。
クリックスルー用に設計されたページ：これらは、オーディエンスに詳細情報を提供し、購入の準備をするために使用されます。
リードジェネレーションのランディングページの例を次に示します。
潜在顧客のランディングページ
ページで何をすべきかは最初から明らかです。
そして、お問い合わせフォームはちょうどいい長さです。
クリックスルーに使用されるランディングページの例を次に示します。
貼り付けた画像01229
それはもう少し深く行き、読者にもっと学びそして相互作用する機会を与えます。
あなたに最適なものを決定するためにあなたの目標を理解してください。次に、測定するメトリックを決定します。
2.ジョブに適したツールを選択します。
ページを設定するには、コーディング方法を知らなくてもよいツールをいくつでも使用できます。
Leadpagesは最も人気のあるオプションの1つです。
それらのインターフェースは、直感的なドラッグアンドドロップビルダーを使用して、ランディングページをカスタマイズできるようにします。
あなたは彼らの様々な無料のテンプレートのどれからでも始めることができます。ほぼすべての業界またはユースケースに対応するものを見つけることができます。
テンプレート
同様の機能を提供する他のツールもあります。
多くの人がInstapageを使うのが好きです。 Leadpagesと同様に、これは単純なドラッグアンドドロップビルダーです。
instapageはランディングページを作成します
次に、ClickFunnelsがあります。これは実際には、ランディングページの作成に加えて、他の多くのサービスを提供します。
Capturerwerew
ClickFunnelsの背後にある考え方は、最初から最後まで、販売ファネル全体を作成できるようにすることです。
したがって、ページを作成する準備ができたら、さまざまなオプションから選択できます。
3.すっきりとした、合理化された、ユーザーフレンドリーなビジュアルデザインを作成します
誰かがあなたのランディングページにアクセスすると、そこで何をすべきかを正確に知る必要があります。
そうでなければ、彼らは見つけ出すために固執していません。
単純な設計に関して言えば、B2BビデオホスティングサービスであるWistiaのこの例が本当に気に入っています。
wisitaランディングページの例
とても整頓されていてきれいです。
もちろん、ページを圧倒することなく、もう少し詳細を追加することができます。
ブランディングとデザインのエージェンシーであるIMPACTのこのランディングページのように。
貼り付けた画像01210
情報をあまり無駄にすることはありませんが、何千ものコピーの言葉であなたを圧倒することもありません。
そして、それはあなたが何にサインアップしているのかについてあなたが知る必要があることを正確に教えてくれます。
さらに、CTAに視覚的な矢印を向けて、製品の入手に焦点を合わせ、注意を促します。
バランスがいいです。
4.叫び声を使う
明確なCTAと簡潔なコピー。
ページには、強力で明確なCTAとシンプルなコピーが必要です。
販売しているものによっては、これは一見するとかなり一般的に見えるものになる可能性があります。
Evernoteのこのランディングページのように。
Evernote CTA
「RememberEverything」はかなり野心的なようです！
しかし、見出しの下には、それらが何を意味するのかを説明するのに十分なテキストがあります。
そして、「サインアップ」ボタンは太字で見やすくなっています。
Netflixには、シンプルでありながら強力なランディングページもあります。
Netflixのテレビ番組をオンラインで見る映画をオンラインで見る
上部のヘッダーを除いて、このページには12語しかありません。
しかし、これらの12語は、あなたが知る必要のあるすべてを教えてくれます。
5.サインアップフォームの場合は、必要なものまで削除します
ニュースレターに登録するだけの場合は、いとこの親友の犬の名前を取得する必要はありません。
特にモバイルの場合は、10種類のフォームフィールドに入力する時間がありません。
旅行計画サービスであるHipmunkのこのすばらしい例をご覧ください。
格安航空券格安ホテルと旅行検索Hipmunk
これがいかに簡単かを見てください。ここには綿毛はありません。
また、「Googleで続行」、「Facebookで続行」、「Concurで続行」オプションに注意してください。
人々にあなたのサービスのアカウントにサインアップさせようとしている場合、これらのオプションはプロセスを大幅にスピードアップすることができます。
6. A/Bテスト
ランディングページを最適化するには、常にA/Bテストの力を使用する必要があります。
ランディングページの複数のバージョンを作成します。
さまざまなレイアウト、グラフィック、コピーなどの変数を導入できます。
abテスト
一部のアイテムは他のアイテムよりもうまく機能し、針を動かしていないアイデアを投げながら、うまく機能するものを2倍にすることができます。
Unbounceのようなツールを使用すると、バリアントを作成することで、さまざまなランディングページを簡単にA/Bテストできます。
貼り付けた画像01186
結論
モバイルブラウジングはここにとどまります。
そしてそれが人々がインターネットにアクセスする支配的な方法になり始めているので、マーケターは彼らの戦略を調整する必要があります。
そのため、ビジネスのランディングページを作成するときに、モバイルに焦点を当てないのはほとんどおかしなことです。
これは、モバイルで適切に表示されるデザインとインターフェースを使用することを意味します。
また、お問い合わせフォームのサイズを微調整することも意味します。これは、ラップトップよりもスマートフォンで入力するのが面倒です。
ページがモバイルで正しく表示されない場合、ユーザーはバウンスします。
また、バウンスが多いほど、コンバージョンが少なくなります。
モバイルを念頭に置いてランディングページを作成すると、ほぼ確実に全体的なコンバージョン率が向上します。
モバイルユーザーのランディングページをどのように調整しますか？
