デスクトップ専用ウェブサイトをモバイルフレンドリーにする方法（簡単な手順） 

WordPressサイトがまだデスクトップ専用の場合、訪問者を失っています。Statistaによると、現在、ウェブトラフィックの約60％はモバイルデバイスから来ており、サイトがモバイルフレンドリーでない場合、訪問者はすぐに離れてしまいます。

私はこのことを苦労して学びました。古いサイトの1つはデスクトップでは問題なく表示されていましたが、モバイルでは完全に壊れていました。テキストは小さすぎ、メニューは機能せず、直帰率が急上昇しました。修正後、トラフィックとサインアップはほぼ一晩で改善しました。

このガイドでは、デスクトップ専用のWordPressウェブサイトをモバイルフレンドリーにする方法を正確に説明します。これらの手順は、コードに触れたことがない場合でも、どのWordPressサイトにも適用できます。

1.サイトがすでにモバイルフレンドリーか確認する

何かを変更する前に、サイトがすでにモバイルフレンドリーかどうかを確認してください。多くの新しいWordPressテーマはデフォルトでレスポンシブなので、気づかないうちに半分は完了しているかもしれません。

確認する最も簡単な方法は、Googleの無料のモバイルフレンドリーテストを使用することです。URLを貼り付けてEnterキーを押すと、数秒で結果が表示されます。

レポートには、サイトが合格したかどうか、電話での表示方法のスクリーンショット、および問題がある場合の修正の提案が表示されます。

古いサイトの1つでこれを実行したとき、結果は驚くべきものでした。フォントが小さすぎ、ボタンが重なり、メニューが開かない状態でした。そのテストにより、明確なToDoリストができました。

さらに詳しく調べるには、次の2つのオプションがあります。

• Google PageSpeed Insights: Core Web Vitalsスコアを含む、実際のパフォーマンスデータが記載された専用のモバイルタブがあります。
• Chrome DevTools デバイスエミュレーション: DevTools（F12）を開き、デバイス切り替えアイコンをクリックして、ブラウザで任意の電話画面サイズを直接シミュレートします。電話は不要です。

サイトが合格しない場合は、これを最優先事項にしてください。合格した場合でも、読み続けてください。さらにモバイルエクスペリエンスを向上させる方法が見つかるはずです。

確認する価値のあることの1つは、テーマがビューポートメタタグを出力していることを確認することです。次のように表示されます。

<meta name="viewport" content="width=device-width, initial-scale=1.0">。

これがないと、モバイルブラウザはサイトをデスクトップの全幅でレンダリングし、縮小するため、一部のサイトは電話で非常に小さく見えます。ほとんどの最新のレスポンシブテーマには自動的に含まれていますが、古いテーマでは省略されることがあります。モバイルフレンドリーテストは、欠落している場合にフラグを立てます。

2.モバイル対応のWordPressテーマを選択する

現在のテーマがモバイルフレンドリーでない場合、最も簡単な修正方法は、レスポンシブWordPressテーマに切り替えることです。レスポンシブテーマは、任意の画面サイズに合わせて自動的に調整されるため、訪問者はズームしたり横スクロールしたりする必要がありません。

WordPress内で無料のオプションを見つけることができます。「外観 » テーマ » 新規追加」に移動し、「Responsive」を検索します。ワンクリックでインストールできる、モバイル対応のさまざまなテーマが表示されます。

古いサイトでこれを初めてテストしたとき、レスポンシブテーマに切り替えることで、レイアウトの問題の半分がすぐに解決しました。それは私ができた最も簡単な改善でした。

優れたレスポンシブテーマは、画面の向きも自動的に処理します。訪問者がスマートフォンを縦向きに持っても、横向きに回転させても、レイアウトは正しく再フローします。固定幅のセクションやカスタムCSSを使用している場合、それらは横向きモードで問題が発生する可能性があるため、プレビュー時に両方の向きを確認する価値があります。

独自のものを構築したい場合は、SeedProdをお勧めします。これは、コードを書かずに独自のレスポンシブWordPressテーマをデザインできるドラッグアンドドロップのウェブサイトビルダーです。

既成のテンプレートから始めることも、各セクションを段階的に構築することもできます。どちらの方法でも、ビジュアルエディタで変更がリアルタイムに反映され、作成したものはすべて完全にモバイル対応になります。

つまり、ウェブサイトは、追加の調整なしで、スマートフォン、タブレット、デスクトップで素晴らしく見え、スムーズに機能します。

3.ナビゲーションメニューを簡略化する

長くて複雑なメニューは小さな画面では機能しません。メニューを3〜5個の主要な項目に制限して、訪問者がズームしたり横スクロールしたりすることなく、目的の場所に移動できるようにします。

私自身のメニューを3つの主要なリンクに簡略化したところ、ユーザーは必要なものを見つけることができたため、サイトでの滞在時間が長くなりました。

また、最も重要なコンテンツがどこにあるかも考えてください。モバイル訪問者は通常、特定のものを探しています。それは、簡単な回答、連絡先情報、または最も重要なサービスです。その情報が隠されている場合、訪問者はそれを見つける前に離れてしまいます。

主要な情報を表示するための簡単な方法をいくつか紹介します。

• 上部に簡単な回答を含む小さなFAQセクションを追加する
• ファーストビューで主要な機能やサービスを強調する
• スクロールせずに電話番号または連絡先ボタンが見えるようにする

ステップバイステップのウォークスルーについては、モバイル対応WordPressメニューの作成に関するこのガイドを参照してください。

4. 大きくて読みやすいフォントサイズを使用する

スマートフォンでの小さな文字はほとんど読めません。訪問者がコンテンツを見るためだけにピンチズームしなければならない場合、彼らは長居しません。

経験則として、本文のテキストは少なくとも14〜16pxに保ちます。見出しとボタンはさらに大きくして、スキャンやタップを容易にします。

すばやく読み込まれる、クリーンで標準的なフォントを使用してください。派手なカスタムフォントはデスクトップでは見栄えが良いかもしれませんが、モバイルではサイトが遅くなり、読みにくくなる可能性があります。

ブログのフォントサイズを大きくしたところ、その違いはすぐに現れました。直帰率が低下し、読者はスマートフォンで快適に読めるようになったため、ページに長く滞在するようになりました。

詳細については、ウェブデザインにおけるタイポグラフィに関するガイドをご覧ください。

5. 連絡先フォームとオプトインフォームを短く保つ

長いフォームは、モバイルで最も敬遠されるものの1つです。小さな画面で多くの詳細を入力するのはイライラし、ほとんどの人は完了しません。

フォームを確認し、すべてのフィールドが本当に必要かどうかを尋ねてください。たとえば、メールリストを作成している場合、通常は名前とメールアドレスだけで十分です。

販売が目標の場合、チェックアウトフォームはできるだけ短くします。請求情報と配送情報のみです。追加の詳細を要求すると、手間が増え、カート放棄が増加します。

以前、クライアントのサインアップフォームを6つの項目から2つに減らしたところ、コンバージョン率がほぼ倍増しました。モバイルでは、短い方が常に勝ちます。

6. ランディングページをモバイルレスポンシブにする

ランディングページはコンバージョンが発生する場所ですが、モバイルでうまく機能しない場合、機会損失となります。デスクトップでは完璧に見えたページが、スマートフォンではボタンが切れたり、テキストが重なったり、フォームが入力できなかったりして、完全に崩壊するのを何度も見てきました。

最も簡単な解決策は、モバイルコントロールが組み込まれたドラッグアンドドロップのウェブサイトビルダーを使用することです。そうすれば、一度デザインすれば、すべての画面で正しく表示されることがわかります。

SeedProdは、コードを書かずに完全にレスポンシブなWordPressページとテーマを構築できるドラッグアンドドロップのウェブサイトビルダーです。ワンクリックでインポートできるレスポンシブランディングページテンプレートのライブラリが含まれています。そこから、ビジュアルエディターですべてをカスタマイズできます。

真の利点は、ローンチへの自信です。モバイルバージョンをライブでプレビューし、小さな画面に合わせてスペーシングやボタンの配置を調整し、ページがデスクトップとモバイルの両方でコンバージョンすることを確信して公開できます。

SeedProdを使用すると、デスクトップビューとモバイルビューを即座に切り替えることができます。同じページから、スペーシング、フォントサイズ、ボタンの配置を特に小さな画面用に調整できます。

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

あなたのコールトゥアクション（CTA）ボタンはあなたのページの最も重要な部分ですが、モバイルではしばしば見失われます。訪問者が簡単に見たりタップしたりできない場合、コンバージョンを逃すことになります。

ボタンを親指でタップできる十分な大きさにして、ユーザーが自然にスクロールする場所、通常は画面の中央または下部に配置します。混乱を招くため、1ページに多くのCTAを積み重ねすぎないようにしてください。

以前、ランディングページでサインアップボタンを上に移動させたところ、モバイルでのコンバージョンが倍増しました。簡単な配置変更が最大の差を生むことがあります。

8. モバイルポップアップを削除または簡略化する

ポップアップはデスクトップではうまく機能することがありますが、モバイルではしばしば良いことよりも害を及ぼします。小さい画面では閉じるのが難しく、ユーザーが間違った場所をタップすると、誤って別のページに移動してしまう可能性があります。

最善の解決策は、ポップアップを軽量で邪魔にならないようにすることです。全画面ポップアップの代わりに、フローティングのハローバーや、画面全体をブロックしない小さなスライドインを試してみてください。

私が関わったあるサイトでは、大きなエントリーポップアップを小さなボトムバーに置き換えたところ、苦情が減り、実際にコンバージョンが向上しました。ユーザーは中断されたと感じることなく、ブラウジングを続けることができました。

さらにアイデアが必要な場合は、訪問者をイライラさせないモバイルフレンドリーなオプションに関する最高のWordPressポップアッププラグインのガイドをご覧ください。

9. モバイルフレンドリーなWordPressプラグインを使用する

すべてのWordPressプラグインがモバイルを考慮して作られているわけではありません。適切なものを選択することで、スマートフォンでのサイトの使いやすさが大きく変わる可能性があります。

軽量でレスポンシブであり、小さな画面でテストされたプラグインを探してください。3種類のプラグインがモバイルパフォーマンスに最も大きな影響を与えます。

• 軽量なフォームプラグイン：重いフォームスクリプトは、モバイルの読み込み時間が遅くなる一般的な原因です。WPFormsのような軽量オプションは必要なものだけを読み込むため、ページを高速に保ちます。
• キャッシュプラグイン：WP RocketやLiteSpeed Cacheのようなキャッシュプラグインは、ページの静的バージョンを保存するため、モバイル訪問者は毎回サーバーが再構築するのを待つ必要がありません。
• レスポンシブメニュープラグイン：現在のテーマのメニューが小さな画面でハンバーガーメニューにきれいに折りたたまれない場合、レスポンシブメニュープラグインはテーマ全体を切り替えることなくそれを修正します。

私のサイトの1つで、より軽量なフォームプラグインに切り替えたところ、モバイルでの読み込み時間が半分になりました。操作がスムーズになり、すぐにコンバージョンが向上しました。

この最高のWordPressモバイルプラグインのまとめで、さらに多くの推奨事項を確認できます。

10. モバイル向けに画像を最適化する

画像はモバイルの読み込み時間が遅くなる最大の原因ですが、ほとんどのWordPressサイトは電話ユーザーにフルサイズのデスクトップ画像を配信しています。これは修正可能な問題です。

テーマの変更やプラグインのオーバーホールなしで、画像のみを処理するだけでモバイルの読み込み時間を大幅に短縮できるサイトを見たことがあります。以下にその方法を示します。

• アップロード前に圧縮：SquooshやShortPixelのようなツールを使用して、画像がメディアライブラリに到達する前にファイルサイズを縮小します。
• WebPに切り替える：WebP画像は、同等の品質でJPEGよりも通常25〜35％小さくなります。ほとんどのWordPress画像最適化プラグインは、既存のライブラリを自動的に変換できます。
• 遅延読み込みを有効にする：WordPressはデフォルトで遅延読み込みを有効にしています。これは、画面の下部にある画像はユーザーがスクロールして初めて読み込まれることを意味します。テーマがこれを無効にしていないことを確認してください。
• ブロックエディターで画像サイズを設定する：常に画像の幅と高さを定義します。これにより、累積レイアウトシフト（CLS）を防ぐことができます。これは、ユーザーエクスペリエンスが悪く、Googleがランキングに使用するコアウェブバイタルのシグナルでもあります。

ShortPixelやImagifyのようなプラグインを使用している場合、アップロード時に圧縮とWebP変換が自動的に行われます。一度設定すれば、それについて考える必要はありません。

11.ウェブサイトの速度を優先する

遅いサイトはモバイルでは取引不成立です。Googleの調査によると、53％のモバイル訪問者は、ページが3秒以上かかる場合、離脱します。人々が即時の結果を期待する小さな画面では、速度はさらに重要になります。

サイトを高速に保つ最も簡単な方法は、クリーンなデザインを使用し、不要な混乱を避けることです。追加のスクリプト、画像、プラグインごとに読み込み時間が追加されます。

サイトの速度を向上させるための実績のある方法には、次のようなものがあります。

• 大きな画像をリサイズして圧縮する（ステップ10を参照）
• コンテンツ配信ネットワーク（CDN）を使用する
• 画像と動画の遅延読み込みを有効にする
• WordPress、テーマ、プラグインを最新の状態に保つ
• CSSおよびJavaScriptファイルを最小化する
• 重いバックグラウンドプロセスを削減する

私のサイトの1つで画像を最適化し、CDNを追加したところ、モバイルでの読み込み時間が半分になりました。直帰率がすぐに低下し、ユーザーは各ページでより長く滞在しました。

測定する価値のあることの1つは、コアウェブバイタルのスコアです。Googleはモバイルページのランキングに3つのシグナルを使用しています。それが、Largest Contentful Paint (LCP)、Cumulative Layout Shift (CLS)、Interaction to Next Paint (INP)です。これら3つすべてを、Google PageSpeed Insightsのモバイルタブで確認できます。

より詳細なヒントについては、このWordPressの速度とパフォーマンスに関する究極のガイドをご覧ください。

ウェブサイトをモバイルフレンドリーにするためのよくある質問

ウェブサイトをモバイルフレンドリーにすることはSEOに影響しますか？

はい、大きく影響します。Googleはモバイルファーストインデックスを採用しており、これはデスクトップ版ではなくモバイル版に基づいてサイトをクロールおよびランク付けすることを意味します。モバイルでのエクスペリエンスが壊れていたり遅かったりすると、デスクトップ版が完璧であってもランキングは低下します。

Googleはコアウェブバイタル（LCP、CLS、INP）もランキングシグナルとして使用しており、これらはモバイルで測定されます。モバイルフレンドリーなサイトは、単なる「あれば嬉しい」ものではなく、SEOの直接的な要件です。

モバイルで壊れて見えるWordPressサイトを修正するにはどうすればよいですか？

何が壊れているのかを正確に特定するには、まずGoogleのモバイルフレンドリーテストから始めましょう。最も一般的な原因は、古いレスポンシブでないテーマ、ビューポートメタタグの欠落、固定幅レイアウト、またはカスタムCSSによる要素の重なりです。

レスポンシブテーマに切り替えることで、ほとんどのレイアウトの問題はすぐに解決します。それ以外のすべてについては、このガイドの手順で、影響の大きい順に各問題に対処します。

テーマ全体を変更せずに、個々のページをモバイルフレンドリーにすることはできますか？

はい。SeedProdのようなツールを使用すると、ランディングページ、セールスページ、ホームページなどの特定のページを、完全にレスポンシブなドラッグアンドドロップエディターで再構築できます。これにより、サイトの他の部分は既存のテーマのままにできます。

これは、テーマはほとんど問題ないが、いくつかの重要なコンバージョンページがモバイルで壊れている場合に役立ちます。サイト全体を再設計することなく、最も重要な箇所でモバイルの修正を行うことができます。

ビューポートメタタグとは何ですか？また、必要ですか？

ビューポートメタタグは、ブラウザにモバイルデバイスでのページの表示方法を指示します。これがないと、モバイルブラウザはデスクトップ幅でサイトを表示し、それを縮小するため、すべてが非常に小さく見えます。

タグは次のようになります：<meta name="viewport" content="width=device-width, initial-scale=1.0">。ほとんどの最新のレスポンシブテーマには自動的に含まれています。お使いのテーマに含まれていない場合、Googleのモバイルフレンドリーテストで問題としてフラグが立てられます。

電話なしでWordPressサイトをモバイルでテストするにはどうすればよいですか？

Chromeを開き、F12キーを押してDevToolsを開き、デバイスの切り替えアイコン（またはWindowsではCtrl+Shift+M、MacではCmd+Shift+M）をクリックします。これにより、デバイスエミュレーションモードがアクティブになり、任意の電話の画面サイズをシミュレートできます。

より現実的な結果を得るには、Google PageSpeed Insightsを使用してください。これはモバイルの読み込み条件をシミュレートし、レイアウトがどのように見えるかだけでなく、実際のパフォーマンスデータも表示します。

この投稿で、デスクトップ専用サイトをモバイルフレンドリーにする方法を学べたことを願っています。また、WordPressの最高のSEOプラグインに関するこの記事も気に入るかもしれません。

その間、Facebook、Twitter、YouTubeでフォローすることを忘れないでください。さらに役立つヒントやチュートリアルをお届けします。