WordPressのモバイルランディングページは、スマートフォンで見栄えがよく、コンバージョンが高くなるようにデザインされた、1つの集中したページです。ドラッグアンドドロップのページビルダープラグインを使えば、コーディング不要ですぐに作ることができます。
スマホでサイトにアクセスしたら、文字が小さかったり、読み込みに時間がかかったり、ボタンがタップできなかったり......。だから私はSeedProdでモバイルファーストのページを作り始めたのです。
このステップバイステップガイドでは、ドラッグ＆ドロップビルダーを使ってWordPressでモバイルランディングページを構築する方法を具体的に紹介する。
なぜランディングページをモバイルフレンドリーにするのか？
今日、より多くの人がデスクトップよりもモバイルデバイスでインターネットにアクセスしています。つまり、あなたのランディングページがモバイルフレンドリーでなければ、潜在顧客の大きな塊を逃していることになります。
考えてみてください。もし、あなたの携帯電話でウェブサイトの読み込みに時間がかかりすぎたり、ナビゲートが難しかったりしたら、あなたはそのウェブサイトから離れて、もっと良い選択肢を見つけるのではないでしょうか？調査によると、40％のユーザーは読み込みに3秒以上かかるウェブサイトを放棄するそうです。
Googleはモバイルユーザーが重要であることを知っており、検索結果でモバイルファーストデザインを優先しているのはそのためです。つまり、モバイルに対応したデザインは、ユーザーエクスペリエンスに優れているだけでなく、SEOにとっても極めて重要なのです。
さて、"WordPrerssでモバイルのランディングページをデザインするには、どのようなプロセスが最適なのだろうか？"と疑問に思われるかもしれません。主に2つの方法があります：
- WordPressのランディングページ・プラグインを使う：コーディングを必要としないため、これは最も簡単なオプションです。効果的なモバイル・ランディングページのための最高のWordPressプラグインであるSeedProdのようなプラグインは、モバイル対応のテンプレートとドラッグ＆ドロップ・ビルダーを提供し、プロセスを簡素化する。
- カスタムレスポンシブデザインをコーディングする：このオプションはより柔軟性がありますが、コーディングの知識が必要で、時間がかかる場合があります。
このガイドでは、最もシンプルな方法、つまりWordPressのランディングページ・プラグインを使う方法に焦点を当てています。この方法で、コンバージョンの高いモバイルランディングページを素早く簡単に作成することができます。
モバイル・ランディングページの作り方
ステップ1.SeedProdランディングページ・ビルダー・プラグインをインストールする。
モバイルランディングページを作成する準備はできましたか？最初のステップは、SeedProdランディングページプラグインをインストールすることです。
SeedProdは、美しくコンバージョンの高いページを簡単に作成できるパワフルなWordPressモバイルランディングページビルダーです。
コーディングは必要ありません。SeedProdは、ドラッグ＆ドロップのインターフェースとあらかじめ用意されたテンプレートを備えており、誰でも簡単に優れたモバイルランディングページを作成することができます。
SeedProdには無料版が ありますが、このガイドではSeedProd Proを使用しています。プロバージョンは、 コンバージョンのためにランディングページを最適化するための、より高度な機能とカスタマイズオプションを提供して います。
また、エリートプランでは、WooCommerceブロックを使用して、販売を促進するeコマースのランディングページを構築することができます。
ここでは、SeedProd Proのインストール方法を説明します：
- 価格ページからSeedProd Proをご購入ください。
- SeedProdアカウントからプラグインファイルをダウンロードしてください。
- WordPressのダッシュボードに移動し、プラグイン " 新規追加に移動します。
- Upload Pluginをクリックし、SeedProd Proのzipファイルを選択します。
- 今すぐインストール]をクリックし、インストールが完了したら、[プラグインを有効化]をクリックします。
アクティベートされると、ライセンスキーを入力するよう求められます。このキーは、SeedProdアカウントのダッシュボードにあります。このキーを入力すると、ビルドを開始できます。
ステップ2.モバイル対応のテンプレートを選ぶ
SeedProdをインストールしたら、モバイルフレンドリーなランディングページを作成しましょう。
SeedProdは、様々なレスポンシブ・ランディングページ・テンプレートを提供しています。これらのモバイル用ランディングページテンプレートは、すでにモバイル対応に最適化されており、あなたのページがどの画面サイズでも美しく見えることを保証します。
テンプレートを選択する：
- WordPressのダッシュボードに移動し、SeedProd " Landing Pagesをクリックします。
- 新しいランディングページを追加]ボタンをクリックします。
- テンプレートのライブラリが表示されます。オプションをブラウズするか、フィルターを使って検索を絞り込みます。たとえば、ウェビナー用のモバイルページが必要な場合は、ウェビナー用ランディングページのフィルターを選択します。
モバイルフレンドリーなテンプレートを選ぶコツ
- すっきりとシンプルなレイアウトを探しましょう：カラムが多すぎたり、ごちゃごちゃしたデザインのテンプレートは、小さい画面では圧迫感があるので避けましょう。
- 読みやすさを優先する：モバイル端末で快適に読めるよう、文字が十分に大きいことを確認する。
- 大きくてタッチしやすいボタンを選ぶ：ボタンは指でタップしやすいものを選ぶ。
どんなテンプレートでも、あなたのブランドやメッセージに合うようにカスタマイズできることを覚えておいてほしい。
気に入ったテンプレートが見つかったら、その上にカーソルを置いてチェックマークをクリックして選択します。
ページの名前とURLを入力するよう求められます。これらは後でいつでも変更できます。準備ができたら、「保存してページの編集を開始」をクリックして、ドラッグ＆ドロップ・ビルダーを開きます。
ステップ3.ランディングページをモバイル用にカスタマイズする
さあ、ここからが楽しいところです-モバイル・ランディングページをカスタマイズするのです。
SeedProdのドラッグ＆ドロップビルダーは、このプロセスを簡単かつ直感的に行うことができます。画面の左側には、画像、テキスト、ボタン、フォームなどのビルド済みブロックのライブラリが表示されます。
必要な要素をページプレビューにドラッグ＆ドロップするだけ。変更を加えるとリアルタイムで反映されるので、デザインを簡単に視覚化できます。
モバイル特有の設計原則
モバイル向けにデザインする場合は、さらに以下の原則を念頭に置いてください：
親指にやさしいナビゲーションゾーン
親指ゾーン」（スマートフォンを持ったときに親指が届きやすい画面の領域）を考慮しましょう。このゾーンに重要なボタンやインタラクティブな要素を配置することで、ナビゲーションが容易になります。
適切なフォントサイズ
小さな画面でも読みやすいように、フォントサイズを大きくしましょう。目安としては
- 本文16-18px
- 見出し： 22px以上
- コール・トゥ・アクション・ボタン：14px以上
SeedProdでは、フォントサイズを簡単に調整することができます。テキストや見出しブロックを選択し、フォントサイズスライダーを調整するだけです。
複雑なコンテンツを扱う
複雑なコンテンツや大きなテーブルの場合は、次のことを考慮する：
- アコーディオンや折りたたみ可能なセクションを使ってスペースを節約する
- モバイル表示用にテーブルを簡素化するか、水平スクロールを可能にする
- 可能な限り段落の代わりに箇条書きを使用する
SeedProdでアコーディオンを追加する方法を説明します：
合理化されたナビゲーション
ハンバーガーメニューを使用してスペースを節約し、ナビゲーションをすっきりさせましょう。SeedProdのナビゲーションブロックを使えば、モバイルフレンドリーなメニューを簡単に作成できます：
満足のいく外観になるまで、ページにコンテンツを追加し続けます。その後、右上の緑色の保存ボタンをクリックして設定を保存します。
ステップ4.設定を行う
ランディングページがモバイルで見違えるようになったところで、パフォーマンスを追跡してリードを獲得するのに役立つ重要な設定をいくつか行ってみましょう。
メールマーケティングサービスとの接続
SeedProdは、Constant Contact、MailChimpなどの一般的なメールマーケティングサービスとシームレスに統合します。この統合により、モバイルのランディングページから直接リードを獲得することで、簡単にメールリストを増やすことができます。
メールマーケティングサービスに接続する
- SeedProdビルダーで、Connectタブをクリックします。
- リストからEメールプロバイダを選択し、画面の指示に従ってアカウントを接続します。
ページ設定の構成
次に、ページ設定タブをクリックして、ランディングページの設定を表示します。 ランディングページの名前とURLを編集し、隔離モードを有効にするかどうかを選択できます 。
アイソレーション・モードとは？
アイソレーションモードは、WordPressテーマやプラグインとの競合を防ぐことで、ランディングページの読み込みを高速化します。表示の問題が発生した場合は、このオプションを有効にすると解決します。
SeedProdでは、検索エンジン向けにランディングページを最適化し、Google Analyticsで主要な指標を追跡することもできます。ページのタイトルとメタディスクリプションをカスタマイズし、トラッキングコードを追加することができます。
次に、スクリプトタブでは、カスタムヘッダー、ボディ、フッタースクリプトを貼り付けることができます。これは、Facebookトラッキングピクセルでページ訪問者をリターゲティングする場合などに便利です。
ステップ5.モバイル用ランディングページをプレビューして公開する
新しいランディングページを立ち上げる前に、さまざまなデバイスでどのように見えるかを確認することは非常に重要です。幸いにも、SeedProdは内蔵のモバイルプレビュー機能でこれを簡単に行うことができます。
ランディングページをプレビューする方法をご紹介します：
- SeedProdビルダーで、画面の下にある携帯電話のアイコンを探してください。
- アイコンをクリックすると、デスクトップ、タブレット、モバイルの表示が切り替わります。
このプレビューでは、レイアウト、テキストサイズ、ボタンが小さなスクリーンに最適化されているかを再確認できます。もし何か違和感があれば、モバイルプレビューモード内で直接簡単に調整することができます。
出版の準備はできているか？
- 緑色の「保存」ボタンをクリックして変更を保存します。
- 保存ボタンの横にある矢印をクリックして、ランディングページをテンプレートとして保存して後で使用するか、公開をクリックしてウェブサイト上で公開します。
おめでとうございます！WordPressでモバイルフレンドリーなランディングページの作成に成功しました。これで、モバイル訪問者からのリードとコンバージョンを増やす準備が整いました。
これが私のテストウェブサイトで作成したページの最終バージョンだ：
モバイル・ランディングページの事例とインスピレーション
あなたのページをデザインする前に、インスピレーションが必要な場合は、私が見つけた最高のモバイルランディングページの例をチェックしてください。
1.バガブー
まずは、赤ちゃんと子ども向けの商品を扱うオンライン小売業者、Bugabooのモバイルページの例だ。彼らのランディングページのデザインは1カラムレイアウトで、クリーンでモダンで、どのデバイスからでもナビゲートしやすいのが気に入っています。
2.エッツィー
ご覧のように、Etsyはメインページからナビゲーションメニューをモバイルメニューで隠している。画像は鮮明で、ボタンは買い物客がタップするのに十分な大きさだ。
さらに、検索ボックスはモバイルページの幅全体に広がっているため、小さな画面でもタップしやすくなっている。
3.スラック
私がSlackのモバイル・ランディングページを特に気に入っているのは、ユーザーのデバイスに合わせてページをカスタマイズしているからだ。私がiPhoneを使っていたので、アップルストアのページをパーソナライズしてくれました。
このアプローチは、特定のオーディエンスをターゲットにする優れた方法です。そして、そのページはそのオーディエンスのニーズに合っているため、コンバージョンする可能性が高くなる。
4.メープド・ヘリックス
Maped Helixの鮮明なモバイルランディングページのデザインは、チャンスを逃しません。ページ上部には購読を促すスティッキーバーがあり、サイト内の人気セクションに誘導するCTAボタンが明確に表示されています。
さらに良いことに、CTAボタンの色は重要度によって異なり、太い色ほどユーザーが最初にクリックすべきボタンであることを示している。
5.エバーノート
Evernoteはこの例で物事をシンプルに保っています。行動喚起は明確で、行動しやすく、ページの読み込みは非常に速い。このページにはほとんど画像がないことを考えると、驚くほど目を引きます。
テキストのみのモバイルランディングページは、すべての人にとって最適なソリューションではないかもしれないが、適切なブランドにとっては効果的だ。
6.ヘッドスペース
Headspaceのモバイルランディングページは、大きく読みやすいテキストと十分な空白を組み合わせることで、企業の主要な行動喚起に目を向けさせるすっきりとした集中力のある体験を提供しています。
モバイル・ランディング・ページに関するよくある質問
モバイルランディングページにはいくつかのタイプがあり、それぞれがユニークな目的を果たします。
スクイーズページ：
クリックスルーページ：
リードキャプチャーページ：
。セールスページ：ベネフィットや特徴に重点を置き、製品やサービスを直接販売します。
ここでは、モバイルランディングページを優先する必要がある理由を説明します。
ユーザーエクスペリエンスの向上：
コンバージョン率の向上：単一のゴールに集中し、注意散漫を最小限に抑えることで、モバイルランディングページは標準的なウェブページに比べてコンバージョン率を大幅に向上させることができます。
モバイルSEOの向上：検索エンジンはモバイルフレンドリーなランディングページを好むため、モバイル検索結果における貴社の認知度が向上します。
ブランド信頼性の向上：シームレスなモバイル体験を提供することで、あなたのビジネスが現代的で、顧客のニーズにきめ細かく対応していることを証明します。
モバイルランディングページに投資することで、世界中で69億3000万人のスマートフォンユーザーを取り込み、ビジネスの大きな成長を促進することができます。
次は、モバイルフレンドリーのヒント
このガイドが、あなたのWordPressウェブサイトで、コンバージョン率が高く、モバイルフレンドリーなランディングページを作成するために必要な知識とベストプラクティスを提供できたことを願っています。
モバイルファーストの考え方を採用し、パフォーマンスを最適化し、レスポンシブデザインの手法を活用することで、ランディングページがシームレスなユーザー体験を提供し、増え続けるモバイルユーザーからより多くのリードと売上を獲得できるようになります。
この記事を気に入っていただけたなら、モバイルフレンドリーデザインのヒントがお役に立つかもしれません：
- WordPressでモバイルメニューを編集する方法（初心者ガイド）
- コンバージョン率を高めるランディングページのベストプラクティス
- WordPressのモバイル表示で画像を非表示にする方法
- レスポンシブデザインのヒントになるモバイルフレンドリーウェブサイトの事例9選
- デスクトップ専用のウェブサイトをモバイルフレンドリーにする方法（簡単なステップ）
- モバイルフレンドリーなウェブサイトのための11のベストWordPressモバイルプラグイン
お読みいただきありがとうございました！あなたのご意見をぜひお聞かせください。YouTube、X、Facebookで、あなたのビジネスを成長させるために役立つアドバイスやコンテンツを提供していますので、お気軽に会話にご参加ください。
