モバイルフレンドリーなWordPressサイトを作る11の方法（専門家のヒント）

WPBeginnerを立ち上げた当初は、モバイルフレンドリーを最重要視していませんでした。しかし、世界中のウェブトラフィックの半分以上がモバイル端末からのものであり、Googleがモバイルファーストインデックスを優先するようになった今、私たちはアプローチを大幅に調整しなければならなくなりました。

最近、多くのテーマやプラグインがモバイルファーストのアプローチを採用しているとしても、あなたのサイトがすべての端末で自動的に見栄えが良くなったり、パフォーマンスが良くなったりするわけではありません。レスポンシブ・デザイン、ページの読み込み速度、小さな画面でのユーザー体験など、まだまだ注意が必要です。

幸いなことに、モバイルフレンドリーなWordPressサイトを作ることは、見た目ほど複雑ではありません。この投稿では、WordPressサイトを見栄えよく、モバイル端末でスムーズに機能させる方法について、専門家のヒントをご紹介します。

なぜモバイルフレンドリーなWordPressサイトが必要なのか？

年々、検索にスマートフォンを利用する人が増えている。実際、全世界のウェブトラフィックの55％以上がモバイル端末からのものであり、アジアやアフリカではモバイル検索がさらに普及している。

Googleはモバイルファーストインデックスを採用しており、クローラーはデスクトップ版よりもモバイル版のコンテンツを優先的にインデックスします。

つまり、デスクトップ版のサイトは完璧でも、モバイルへの最適化を怠れば、検索順位に悪影響を及ぼすことになる。

また、ほとんどの人が毎日6時間も携帯電話を使用しているため、あなたのビジネスは訪問者の注意を引く機会が多い。

画面を見る時間を確保することは、他のメリットにもつながる：

• より多くの購入：61％の消費者がモバイルフレンドリーなサイトから購入する可能性が高く、オンラインショップを持つ製品ベースのサイトでは特に重要です。
• より多くのインプレッション：モバイル検索は、デスクトップ検索よりも85.8%もインプレッション数が多い。そのため、シームレスなモバイルユーザーエクスペリエンスを提供することは、ブランド認知の向上に役立ちます。
• 滞留時間の増加： 滞在時間とは、ユーザーがサイトに滞在する時間のことです。ユーザーの注意を引くことで、WordPressブログを読んだり、商品やサービスをチェックしたりする時間を増やすことができます。

しかし、モバイルフレンドリーなサイトとは実際には何を意味するのだろうか？

上の画像がそれを要約している。

サイト上のコンテンツは、モバイル画面にぴったりと収まる必要があります。そうすることで、訪問者は拡大や縮小をすることなく、簡単にナビゲーションし、ページ上のすべての要素にアクセスすることができます。

あなたのサイトがモバイルフレンドリーかどうかをチェックする方法

改善を行う前に、あなたのサイトが実際に検索エンジンの基準を満たしているかどうかを知ることは良い考えです。

あなたのサイトがモバイルフレンドリーかどうかをチェックする最良の方法は、GoogleのPageSpeed Insightsツールを使用することです。それはあなたのウェブページを分析し、モバイルとデスクトップ用のスコアを与える.さらに、あなたのスコアを向上させる方法についての提案を得る.

開始するには、ツールを開いてサイトのURLを入力し、「分析」をクリックする。

2つのタブがあります：モバイルとデスクトップ。

モバイル」レポートをクリックして、コアウェブ・バイタル・アセスメントをご覧ください。

つまり、コアウェブバイタルとは、サイトのスピード、インタラクティブ性、視覚的な安定性を測定する指標です。Googleは、コアウェブバイタルをSEOのランキング要因として組み込んでおり、検索結果で上位にランクされたい場合は、このテストに合格することが重要であることを意味します。

次に、「パフォーマンスの問題を診断する」までスクロールダウンすると、モバイルフレンドリースコアが表示されます。基本的に、パフォーマンス・スコアは90から100の間が望ましいでしょう。

良いニュースは、PageSpeed Insightsは、そのスコアを向上させるための提案を提供することです.

診断』までスクロールすると、いくつかの改善エリアが見つかる。各項目の下にあるドロップダウンの矢印を押すと、その項目が具体的にどのような要素やエリアを参照しているのかを詳しく見ることができる。

そのため、ファイルサイズを小さくするか、他のものに置き換えるなどして、画像を最適化する必要がある。

レポートはすぐに複雑になるので、私たちのブログでそのトピックを取り上げていないか検索してみるといいだろう。

とはいえ、このガイドに従えば、モバイルフレンドリーに関する問題のほとんどは解決するはずだ。

それでは、モバイルフレンドリーなサイトを作るための最も効果的な方法をご紹介しましょう。以下のリンクから、投稿のどの部分にもジャンプできます：

1.モバイルフレンドリーなWordPressテーマを使う

私たちの経験では、デスクトップのWordPressサイトをモバイルフレンドリーに変える最も手っ取り早い方法は、モバイル対応のWordPressテーマをダウンロードすることです。

最も人気のある最高のWordPressテーマの多くはモバイル対応で、モバイル端末に自動的に適応します。これは、異なる画面解像度にシームレスに適応するためにメディアクエリーを使用することによって実現されます。

モバイル・レスポンシブ・テーマは、WordPressダッシュボードの外観 ” テーマから見つけることができます。そして、「新規テーマを追加」をクリックしてください。

検索ボックスに『レスポンシブ』と入力してください。

これで、すぐにインストールできる無料のレスポンシブWordPressテーマの全リストが得られるはずだ。

とはいえ、有料のWordPressテーマは通常、より機能的で視覚的に魅力的なサイトを提供するためのカスタマイザーオプションを最も多く提供しています。無料のWordPressテーマとプレミアムWordPressテーマの違いについては、ガイドをご覧ください。

より質の高いテーマをお望みなら、私たちの一番のお勧めはSeedProdです。私たちが試したすべてのテーマビルダーの中で、このプラグインは市場で最も使いやすい。開発者を雇ったり、コードを一行も書くことなく、カスタマイザーのWordPressテーマを作成することができる。

テーマの.zipファイルをたくさんインストールするのではなく、必要なのはすべてSeedProdプラグインをインストールし、WordPress内でテーマの構築を開始することだけです。

SeedProdには300以上のテンプレートが用意されているので、あなたの好みや使用ケースに合ったものが見つかるでしょう。

あらかじめ用意されたスターターテーマのテンプレートを選択すれば、簡単に始めることができる。

そうすれば、テーマの各ページを一度に1つずつ作ることができる。

ビジュアルなドラッグ＆ドロップエディターを使って、サイトの各セクションをパーソナライズできます。追加する要素をポイント＆クリックするだけで、魅力的なレイアウトを構築し、リアルタイムで変更を表示できます。

テーマ全体がモバイルレスポンシブなので、回転するテスティモニアルや カウントダウンタイマーなど、追加したすべての要素がモバイル画面にフィットします。

その上、テーマビルダー内では、モバイルデザインをプレビューし、モバイル版サイトのみに変更を加えることができる。

詳しくは、カスタマイザーWordPressテーマの作成方法のチュートリアルをご覧ください。

また、Elementor vs Divi vs SeedProdのレビューで、テーマビルダーと他の人気オプションとの比較もご覧いただけます。

2.WordPressエージェンシーにサイトリニューアルを依頼する

モバイルフレンドリーなテーマを探すためにあちこちを回ったが、まだ自分の基準に達していないのかもしれない。さらに、ページビルダーの使い方を学ぶ時間もほとんどないかもしれない。

そのような場合は、WPBeginner Pro ServicesのようなWordPressのプロフェッショナルサービスにサイトのリニューアルを依頼することをお勧めします。

プロを雇うには初期費用がかかるが、それは投資に値する：

• お客様のブランドを完璧に反映した、モバイルフレンドリーなカスタムデザインのサイトをご提供します。
• 自分でやろうとする時間とフラストレーションを節約できる。
• WordPressのベストプラクティスと最新のWeb標準に関する専門知識を活用できます。
• サイトのスピード、SEO、ユーザー・エクスペリエンスを最初から最適化します。

WPBeginnerプロサービスには、あなたの夢のサイトを実現する専任のプロジェクトマネージャー、最終デザインを気に入っていただけるよう何度も行うリビジョン、そしてあなたのウェブサイトを問題なく維持できるようにするためのトレーニングセッションがすべて含まれています。

ウェブサイト・リデザインの料金は599ドルからで、これにはWordPressの最新規格による既存サイトの再構築、最大5ページ、WordPressセットアップ、ブログセットアップ、AI生成コピー、お問い合わせフォーム、レスポンシブデザイン、SEO最適化などが含まれます。

本当に〜してもよいですか？経験豊富なWordPressのエキスパートチームが、お客様のビジョンについて話し合い、どんな質問にもお答えし、お客様のサイトに合ったソリューションを提供いたします。

3.モバイルフレンドリーなフォームを作成する

ニュースレター登録フォーム、お問い合わせフォーム、アンケート、支払いフォーム、ユーザー登録フォーム、会話フォームなど、あなたのサイトにはたくさんのフォームがあることでしょう。

フォームによって訪問者はあなたにお問い合わせし、あなたとつながることができます。だからこそ、どの端末にも自動的に適応するモバイル対応のフォームが必要なのです。

WordPressに最適なお問い合わせフォームプラグインの第一候補はWPFormsです。

私たちは何年もこのフォームプラグインを使用しており、このプラグインで作成されたすべてのフォームは常に完全にモバイルフレンドリーです。訪問者がラップトップ、デスクトップ、スマートフォン、タブレットのどれでサイトを表示しても、フォームは常に美しく表示されます。

さらに、すべてのフォームテンプレートはクロスブラウザ互換性を考慮して設計されているため、あなたのサイトはすべてのモダンブラウザで動作します。

WPFormsから作成した複数ページの住宅ローン計算フォームの例です。フォームをプレビューすると、すべての要素とフィールドがモバイル画面に収まっていることに気づきます。また、1ページに多くの情報を詰め込みすぎないように、複数ページの区切りも使用しています。

すべてにおいて優れているのは、コードを書く必要がなく、ドラッグ＆ドロップで簡単にフォームをカスタマイズできることです。

詳しくはWPFormsのレビューをご覧ください。

オプトインフォームとお問い合わせフォームを短くする

通常のデスクトップコンピューターでフォームに入力するのは大した問題ではありません。しかし、モバイルサイトでは、長くて複雑なフォームを入力するのは本当に大変です。

フォームをチェックし、本当にすべてのフィールドが必要なのか考えてみてください。

例えば、こちらはWordPressの無料トレーニングにアクセスするためのオプトインフォームです。主な利点を素早く説明し、訪問者の名前とメール・アドレスだけを求めています。

ユーザーをカスタマイザーにするフォームの場合、好きな色などを知る必要はありません。請求先情報と配送先住所を取得するだけです。

長くて複雑な購入手続きは、しばしば買い物カゴを放棄させてしまいます。そのような事態を防ぎたいのであれば、モバイルフォームをよりシンプルなものにしましょう。

4.サイトスピードを優先する

ページの読み込み速度を最適化することは、モバイルSEOの重要な要素です。Googleはページの読み込み時間をランキング要因として考慮するため、読み込み速度が遅いサイトは順位が下がります。

Pingdomのようなオンラインスピードテストツールを使えば、ウェブページの読み込み速度を簡単に調べることができます。

このソフトウェアでは、特定の場所を設定することもできるので、視聴者の国のページ速度をチェックすることができる。

URLを入力し、目的地を選択するだけです。そして「Start Test」をクリックすると、以下の結果が表示されます。

ページのロード時間が0.5〜2秒であることを本当に〜してもよいですか？

Googleの調査によると、3秒の遅延でもサイト訪問者の半数以上がサイトを放棄する可能性があります。また、ロード時間が長くなればなるほど、直帰率も高くなります。

サイトをできるだけ速く保つための経験則は、ウェブデザインをシンプルにすることです。しかし、上記のステップを踏んでいれば、それほど問題はないはずです。

サイトの表示速度を上げるためにできることは、他にもいくつかあります：

• 重い画像のリサイズと圧縮
• コンテンツデリバリーネットワーク（CDN）の利用
• 画像を遅延ロードする
• WordPressを最新の状態に保つ
• サイトコードの最小化
• バックグラウンドプロセスの最適化

サイトの速度を最大化したい場合は、WordPressの速度とパフォーマンスを向上させる究極のガイドをご覧ください。

高速ホスティングサービスプロバイダーを選ぶ

速度を向上させる最も簡単な方法は、最速のWordPressホスティングサービスを選択することです。モバイルユーザーは通常、デスクトップユーザーよりもインターネット接続が遅いからです。ホスティングサービスが遅いと、モバイル端末でのウェブページの読み込み時間が長くなるだけです。

最も人気のあるWordPressホスティングサービスプロバイダーのパフォーマンステストをすべて実施した結果、SiteGroundのロード時間が最も速いことがわかりました。実際、WPBeginnerのサイトではSiteGroundを使用しています。

WPBeginnerの読者には、ホスティングサービスが81%割引で利用できるほか、ドメイン名も無料で提供される。

詳しくは、WPBeginnerのSiteGroundを利用する理由をご覧ください。

また、より手頃な価格でありながら高速なWordPressホスティングをお探しなら、Hostingerも素晴らしい設定です。彼らはまた、我々の読者に大きな割引を提供し、さらに無料のドメイン名を提供します。

アクセラレイテッド・モバイル・ページの使用

また、AMP（Accelerated Mobile Pages）を使用することで、読み込み速度を向上させることができます。AMPは、モバイル端末で超高速で読み込まれるデスクトップWebページの簡易版です。

ユーザー体験を向上させるため、GoogleはサイトオーナーにAMPの利用を奨励している。デメリットは、コンテンツの2つのバージョンを作成する必要があることと、AMPによってサイトの機能の一部が制限されることだ。

幸いなことに、AMPプラグインを使えば簡単にできます。WordPressサイトにGoogle AMPを適切に設定する方法については、チュートリアルをご覧ください。

5.モバイルSERPに最適化する

モバイル検索エンジンの検索結果ページ（SERP）はデスクトップ版とは異なります。選択したキーワードを閲覧する際には、モバイルとデスクトップの両方の結果をチェックすることが重要です。

また、モバイルのリッチスニペットはデスクトップとは異なって見える。

デスクトップ検索では、タイトルタグとメタ情報でごく普通の結果が表示されるかもしれない。

しかし、モバイルの検索結果では、Googleがプレビューテキストにハウツー画像を添えていることに注目してほしい。

これにより、検索結果がより魅力的になり、クリックされる可能性が高くなる。

リッチなフィーチャード・スニペットを獲得することは、投稿を目立たせるために非常に重要である。

モバイル検索を最適化し、あなたのページにリッチスニペットを獲得する最高のチャンスを与えるには、スキーママークアップを追加する必要があります。これは、Googleがコンテンツを簡単に理解し、表示できるように整理するものです。

レビュー、よくある質問、レシピの星、その他の要素をSERPの結果に追加することができます。

私たちの経験では、schemaマークアップを追加する最も簡単な方法は、All In One SEOのようなSEOプラグインを使用することです。そうでない場合は、通常、スキーマ機能を有効化するためにいくつかのコードを知る必要がある。

AIOSEOでは、特定のページタイプに合うように、多くのスキーマカタログオプションにアクセスすることができます。例えば、レシピブログ投稿をランク付けしたい場合、レシピスキーマを選択することができます。

より詳細なガイドについては、WordPressとWooCommerceでスキーママークアップを追加する方法についてのチュートリアルをご覧ください。

6.ローカル検索に最適化する

モバイル検索の人気の大部分は、ローカル検索を中心に展開されている。実際、インターネットユーザーの3分の1は、週に数回ローカルビジネスを検索している。

SERPでローカルの結果を優先する方法はたくさんある。しかし手始めに、All In One SEOのローカルSEO機能を活用することができる。

ここでは、あなたのビジネスのすべての場所と営業時間を追加することができます。そして、AIOSEOがすべてあなたの代わりに、検索エンジンが潜在的なカスタマイザーにその情報を表示できるように、構造化データ形式でHTMLコードを適切に整理します。

その上、カスタマイザーが知っておくべきビジネス情報をすべて追加できる。

これには、会社名、住所、連絡先、支払い情報などが含まれる。

7.モバイル対応ナビゲーションメニューの使用

ヒートマップツールを使用しているサイトオーナーに見られる最大の間違いの一つは、訪問者がモバイル端末でボタンをクリックするのに苦労していることです。

レスポンシブ・ナビゲーション・メニューを作れば、それは簡単に解決できる。

モバイル画面では、中間ページを避け、オプションの数を減らすとよいでしょう。

例えば、WPFormsのナビゲーションメニューが画面上にポップアップ表示されることに注目してください。拡大する必要がなく、モバイルユーザーにも簡単にボタンが見えます。

最近のWordPressテーマのほとんどは、レスポンシブメニューを最初から提供しています。しかし、そうでない場合は、Responsive Menuのようなプラグインを使ってサイトに追加することができます。

この方法の詳細については、モバイル対応のレスポンシブWordPressメニューの作成方法をご覧ください。

8.ランディングページをモバイル対応にする

WordPressでランディングページを作成するために、多くのサイトオーナーがサードパーティ製のツールやプラグインを使用しています。これはコンバージョンを高めるには最適ですが、ページがモバイル端末でうまく機能することが非常に重要です。

そのため、モバイルフレンドリーな設定を含むWordPressページビルダーを使うようにしたいですか？

SeedProdを使えば、レスポンシブを心配する必要はありません。このページビルダープラグインには、ワンクリックで使用できるモバイルフレンドリーなテンプレートの膨大なライブラリがあります。その後、ビジュアルページビルダーを使って簡単にページをカスタマイズできます。

SeedProdのランディングページ設定では、デスクトップ版とモバイル版を簡単に切り替えることもできます。つまり、すべて同じ場所でデザインを完成させることができるのです。

最後に、ページを公開する準備ができたら、ライブモバイルプレビュー画面でプレビューし、必要な調整を行うことができます。

詳しくは、WordPressでランディングページを作成する方法をご覧ください。

9.邪魔なポップアップを避ける

邪魔で押し付けがましいポップアップ（インタースティシャルとも呼ばれる）は、訪問者にとってイライラさせるものです。画面の大部分を占めるため、モバイルユーザーにとってはさらにイライラさせるものです。

大きなポップアップはコンバージョン率を低下させ、Googleからもサムズダウンを受けることがよくあります。

Googleのランキングシグナルの長いリストの一部として、彼らはより大きく、より侵入的なものに比べて、より微妙なポップアップを承認する。

OptinMonsterの使用をお勧めします。OptinMonsterは、美しくモバイルフレンドリーなインタースティシャルを作成できる最高のポップアッププラグインです。OptinMonsterは、私たちのビジネスサイトすべてで販売キャンペーンやイベントキャンペーンを実施するために使用しています。

OptinMonsterには75以上の専門家がデザインしたテンプレートが用意されており、「モバイル最適化」でフィルターをかけることで、モバイル画面にフィットし、邪魔にならないポップアップを得ることができます。

完全なチュートリアルについては、（SEOを損なうことなく）コンバージョンするモバイルポップアップを作成する方法についてのガイドをお読みください。

10.コンテンツをモバイルフレンドリーにする

大きなテキストブロックは小さな画面では読みづらく、サイトが乱雑に見えてしまいます。

モバイルユーザーは素早く読みやすい情報を好むため、長いパラグラフは圧倒される可能性がある。

そのため、サイトを構築する際には、テキストを読みやすい小さな段落に分割することをお勧めします。

例えば、見出しや小見出しを使い、読者が必要なものを見つけやすくする。

Healthlineが投稿をより読みやすくするために短い段落と見出しを使っている例です。モバイルではさらに長く表示されるため、4、5行以上の段落は避けたほうがよい。

それ以外にも、これらのヒントに従うことができる：

• 視覚的な階層を作る。要点を強調するためにヘッダーをつける。サイトのコピーの場合、各ブロックにヘッダーと短い説明を使うことができます。
• テキストブロックごとに1つのアイデアを先頭に固定表示する。 ホームページやブログでは長い文章は避けましょう。段落は短くし、ブログ投稿ではヘッダーを使ってコンテンツを区切りましょう。
• ホワイトスペースとネガティブスペーシングを使う。 空白は乱雑さを防ぎ、理解度を最大20％向上させる。

これらは小さな変化ですが、訪問者が留まるか去るかに大きな違いをもたらす可能性があります。

WordPressで読みやすさを向上させるためのヒントについては、読みやすさのスコアを追加して向上させる方法のガイドを参照してください。

11.CTAボタンの配置とサイズを変更する

ホームページやランディングページを作成する際には、コール・トゥ・アクション（CTA）ボタンを慎重に検討することが重要です。

モバイルデザインを効果的にしたいなら、CTAは見やすくなければなりません。訪問者がCTAボタンを見逃さないように、CTAボタンは折りたたみ位置の上に配置するのがベストです。

サイトのボタンをデザインする場合、サイズは重要です。小さすぎるボタンは押しにくく、大きすぎるボタンは小さな画面でスペースを取りすぎてしまいます。

10ミリ×10ミリ程度の大きさを維持することで、ボタンの可読性を維持し、モバイルユーザーに最適化されている。

12.重要な情報を見つけやすくする

人々が携帯電話を手にして検索エンジンにアクセスするとき、たいていは特定の目的を持っている。それは、答えを見つけることかもしれないし、地元のレストランを発見することかもしれないし、地元企業の電話番号を入手することかもしれない。

訪問者が求めている情報をすべて掲載しましょう。彼らが検索しているキーワードを考慮し、あなたのページが検索意図に一致していることを確認する必要があります。

さらに詳しく知りたい方は、WordPressサイト訪問者の意図を理解する方法についてのブログ投稿をお読みください。

さらに、重要な情報には簡単にアクセスできるようにしたいものです。以下はそのためのヒントです：

• 短い説明動画を入れる。
• 売れ筋商品や目立つ機能をすぐに紹介できます。
• ページにFAQセクションを追加する。

WordPressのベスト・モバイル・レスポンシブ・プラグイン

プラグインはサイトにより多くの機能を追加しますが、インストールするプラグインはすべてモバイル端末に最適化されていることを確認する必要があります。

サイトが遅くなったり、ユーザーが探しているものを見つけられなかったりしないように、スマートフォンやタブレットでシームレスに動作する必要があります。プラグインがサイトに追加するすべての要素は、スライダーやソーシャルメディアボタンからポップアップまで、すべての端末で動作する必要があります。

サイトへの追加を検討したいモバイル・レスポンシブ・プラグインのおすすめトップリストはこちらです：

• SeedProdは、ランディングページ、サンキューページ、カミングスーンページなど、サイトのすべてのページをデザインするための最高のWordPressテーマとランディングページビルダーです。
• WPFormsは1500以上のフォームテンプレートがあらかじめ用意されている最高のフォームビルダープラグインです。
• RafflePressはWordPressの景品プラグインで、バイラル景品やコンテストを運営することができます。サイトのトラフィックを増やしたり、メール購読者を獲得したり、ソーシャルメディアのフォロワーを増やすのに役立ちます。
• Smash Balloonは 、カスタムInstagram、Facebook、TikTok、YouTube、Twitterフィードをウェブサイトに表示できる、ソーシャルフィードプラグインのNo.1です。
• OptinMonsterは、放置されたサイト訪問者を新しいメール購読者やカスタマに変えるのに役立つ人気のコンバージョン最適化ソフトウェアです。
• PushEngageは、強力なWebプッシュ通知ツールで、サイト訪問者がサイトを離れた後も、その訪問者を維持することができます。この通知は、iOS や Android 端末だけでなく、すべての一般的なブラウザーで動作します。
• FunnelKitは、コンバージョンを高めるための1クリックアップセルやスライド式サイドカートなど、モバイル対応のセールスファネルを作成できるページビルダープラグインです。

これは完全なリストではありませんが、手始めには最適です。これらのプラグインは、サイトのモバイルフレンドリーを確保しつつ、より多くのトラフィックと売上を生み出す機能をサイトに追加するのに役立ちます。

もちろん、これらのプラグインにはそれぞれ無料版が用意されている。

この投稿が、モバイルフレンドリーなWordPressサイトを作成するための最良の方法を知る一助となれば幸いです。また、WordPressサイトのリデザイン方法に関するガイドや、サイト訪問者に尋ねるべきユーザー・エクスペリエンス・フィードバックの質問リストもご覧ください。

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.