WordPressサイトをモバイルフレンドリーにする方法

公開: 2023-02-12

モバイルフレンドリーな WordPress サイトが新しい標準であることは周知の事実ですが、どれだけ一般的なように見えても、美しくレスポンシブなサイトを作成するには、まだ少し手間がかかる場合があります。このガイドは、モバイルフレンドリーなサイトを持つことがなぜ重要なのか、WordPress でサイトを構築する方法を理解し、レスポンシブサイトを作成するための最適なツールを紹介するのに役立ちます。

WordPress サイトをモバイルフレンドリーにするには、次のことを行う必要があります。

レスポンシブ Web デザインが重要な理由を理解する
Google モバイルフレンドリーテストを受ける
レスポンシブ WordPress テーマを使用する (または独自のテーマを作成する)
モバイルフレンドリーな WordPress プラグインを検討する
モバイルフレンドリーなオプトインを使用する
レスポンシブメディアの観点から考える
サイトのパフォーマンスを優先する

準備？飛び込みましょう！

1. モバイルフレンドリーなサイトが重要な理由

2019 年第 4 四半期には、Google 検索の 61% がモバイルデバイスで行われました。つまり、人口の半分以上が従来のデスクトップデバイスから携帯電話やタブレットに切り替えていることを意味します。そのため、それらに対応するには、Web サイトをあらゆる画面サイズで表示できるようにする必要があります。モバイルフレンドリーなデザインは、ポジティブなユーザーエクスペリエンスを実現し、ユーザーが外出中に探しているものを見つけるのに役立ちます。

UX 以外にも、サイトをモバイルフレンドリーにする必要があるもう 1 つの重要な理由があります。Google です。 2015 年 (「Mobilegeddon」の年) から、Google は検索アルゴリズムの大幅な見直しを実施し、「モバイルフレンドリー」と見なされたサイトに報酬を与えました。この変更は、Web サイトがレスポンシブであるかどうかという 1 つの重要なデータポイントに帰着します。

これは、サイトがモバイルデバイスで適切に読み取れる場合、そうでないサイトよりも検索結果でのパフォーマンスが向上することを意味します。モバイルフレンドリーなサイトを作成する作業を行った場合、これは非常にうれしい特典です。ただし、小さな画面に表示するタスクに完全に対応していない場合、サイトのトラフィックを損なう可能性もあります.

幸いなことに、WordPress サイトがまだモバイル対応になっていない場合でも、完全に機能する応答性の高いサイトを迅速に構築するのに役立つツールがたくさんあります。最初のステップ？現在の設計をベンチマークします。

2. モバイルフレンドリーテストを受ける

Web サイトは 1 つのモバイルデバイス (個人の携帯電話など) で見栄えがするかもしれませんが、本当にレスポンシブかどうかを確認するには、さまざまな画面サイズでテストする必要があります。たまたまたくさんの古い電話が横たわっていたとしても、すべての画面でテストするのは時間のかかるプロセスになる可能性があります.

簡単にするために、Google は無料のモバイルフレンドリーテストツールを提供してくれました。このツールを使用すると、サイトが「モバイルフレンドリー」であるかどうかがわかります。サイトの URL を入力するだけで、サイトのモバイルデザインをすばやく評価できます。 Web サイトがモバイルデバイス用に完全に最適化されている場合は、次のような熱狂的な小さな成功メッセージが表示されます。

赤く表示されている場合は、少し作業が必要です。（すぐに説明します！）

かなりきちんとした小さなツールですよね？まあ、それはさらに良くなります。

開発者の皆様のために、Google は、自動化されたツールで URL をテストできるモバイルフレンドリーテスト API もリリースしました。これの利点は、より多くのページをすばやくテストできることですが、常に手動でブラウザーツールに切り替えることなく、サイトの最も重要なページを監視することもできます。スコア！

Google のモバイルフレンドリーツールを使用してサイトのベンチマークを行ったら、改善を開始します。 WordPressのテーマから始めましょう。

3.レスポンシブWordPressテーマを使用（または作成）する

最近新しい WordPress テーマをインストールした場合は、この部門で問題ない可能性が十分にあります。ただし、テーマがしばらくの間存在している場合は、少し更新する時期かもしれません.

まず最初に、WordPress のバージョンと現在のテーマのバージョンを再確認します。保留中の更新がある場合は、それらから始めます。すべてのテーマについて話すことはできませんが、一部のアップデートにはモバイルフレンドリーな要素が含まれており、問題を解決するのに十分な場合があります。たとえば、WordPress 4.4 では、レスポンシブ画像用の優れた機能がいくつか追加されました (詳細については、こちらを参照してください)。

更新しても問題が解決しない場合は、新しいテーマを探すか、独自のテーマを作成することを検討してください。両方のオプションを調べてみましょう。

最高のモバイルフレンドリーな WordPress テーマ

現実的には、最近の多くの WordPress テーマはレスポンシブです。テーマがモバイルフレンドリーでないことはおそらくまれです。そうは言っても、テーマを購入する前に、どの画面サイズでも適切に表示されることを再確認してください. デモサイトをテストし、ブラウザーウィンドウを拡大して、見つけたレビューを読んで、実際のユーザーの経験を探してください。

あなたが見ているものに満足しているなら、それを手に入れてください！しかし、何かが正しく見えない場合は、避けてください。完璧にマッチすると思ったとしても、たくさんの WordPress テーマから選択できるので、あなたのサイトにぴったりの別のテーマがきっと見つかります。

無料のテーマを見ている場合は、独自のコンテンツが配置された状態でどのように見えるかを必ず確認してください。モバイルで望む方法。

どこから始めればよいかわからない場合WordPress サイトを WP Engine でホストすると、StudioPress テーマ (Genesis Framework を含む!) に無料でアクセスできるようになります。これらのテーマは完全にレスポンシブであるため、どのデバイスでも見栄えがよく、さらに簡単に切り替えることができます (購入することに決めた「1 つの」プレミアムテーマに行き詰まるのではなく)。

独自のレスポンシブ WordPress テーマを作成する方法

DIY ルートでモバイルフレンドリーなサイトを作成する場合は、ゼロから始めるか、テスト環境から始めるようにしてください。実際のサイトでは、そのような大幅な変更を行うべきではありません。

Local を使用して、マシン上でローカルの WordPress サイトを作成することをお勧めします。この無料アプリを使用すると、現在のサイトを壊すことなく、心ゆくまで実験を行うことができます (これは、再設計を行う際に不可欠です)。既存のサイトを Local にインポートすることもできるので、必要に応じて最初から始める必要があります。

ローカルサイトへの共有可能な URL を生成する Live Links と呼ばれる機能もあります。これにより、クライアントに送信したり、電話でプルアップしたりできるため、モバイルデバイスでサイトがどのように見えるかを簡単にテストできます.

レスポンシブな親テーマに基づいて子テーマを作成すると、かなり良い状態になります。まったく白紙の状態から始めて独自のテーマを作成する場合は、必ずメディアクエリを使用してデザインの境界を確立し、要素を 1 つずつ検討してください。

画像をどのようにスケーリングするか、ナビゲーションはどのように表示するか、モバイルデバイスで非表示になるコンテンツがあるかどうかを自問してください。以下に、役立つチュートリアルをいくつか示します。

WordPress でレスポンシブナビゲーションメニューを作成する方法
レスポンシブ Web デザインの 7 つのベストプラクティスのヒント
WordPress でレスポンシブ画像を操作する

4.レスポンシブプラグインを使用する

プラグインは WordPress サイトに機能を追加するため、常にフロントエンドに視覚的に何かを追加するとは限りません。ただし、物理的な要素 (ウィジェットや CTA ボタンなど) をサイトに追加する場合は、すべての画面サイズで適切にスケーリングされるようにするか、少なくとも小さい画面サイズでは無効にするオプションを提供してください。

たとえば、サイドバーウィジェットをデスクトップサイトに追加するのは素晴らしいことですが、モバイルデザインを支配したり縮小したりしなければ、優れたユーザーエクスペリエンスにはなりません。

テーマと同様に、プラグインの機能に注意を払い、購入する前にレビューを読んだり、デモを見つけたりしてください. また、新しいプラグインを有効にするときはいつでも、サイトの品質を簡単にチェックして、画面サイズ全体で正しくスケーリングされていることを確認してください.

モバイルで適切に動作するレスポンシブテーマとプラグインを使用している限り、サイトは小さな画面に表示するのに非常に適した状態になります。

5. モバイルデバイスにポップアップを追加しない

WordPress サイトでメーリングリストを作成しようとしている場合は、サイトにさまざまなオプトインがあると思います。ほとんどの電子メールオプトインフォームは、モバイルデバイスで問題なく機能します (拡張性があり、使いやすいと仮定します)。

ただし、ポップアップは別の獣です。 Google は、煩わしいインタースティシャル (サイトのコンテンツをカバーするオプトインとも呼ばれる) でサイトにペナルティを課し始めました。これには、ポップアップ (すぐに表示されるか、ユーザーがしばらくサイトにアクセスした後に表示されるか) や、ユーザーがページのコンテンツにアクセスする前に閉じる必要があるその他の種類のオプトインが含まれます。この件に関する Google のスタンスについては、こちらをご覧ください。

WordPress サイトをモバイルフレンドリーに保ち、ベストプラクティスに従うには、モバイルデザインでポップアップを避けてください。それをどのように行うかは、オプトインを強化するサービスによって異なりますが、ほとんどのプロバイダーには、モバイルデバイス上の煩わしいポップアップを無効にするオプションが必要です。

6. レスポンシブメディアの戦略を立てる

ポートフォリオサイト、毎日のブログ、e コマースサイトのいずれを扱っている場合でも、レスポンシブパズルの重要なピースは、サイトのメディアを考慮することです。ホームページの大きな背景画像は、デスクトップマシンでは見栄えがするかもしれませんが、適切に拡大縮小しないと、すべてのコンテキストが失われ、携帯電話での表示が難しくなる可能性があります。では、レスポンシブメディアに対するルールナンバー 1 は? 物事がどのようにスケールするかを考えてください。

スケーリングが実際にサイトにとって最適なソリューションではない場合、サイトがモバイルデバイスに読み込まれるときに特定の要素を非表示にすることも検討できます。これにより、エクスペリエンスが簡素化され、ユーザーが最も重要なコンテンツにすばやくアクセスできるようになります。

最後に、サイトに含めるメディアのファイルサイズにも注意する必要があります。これにより、モバイルエクスペリエンスが向上するだけでなく、デスクトップの読み込み時間も向上します。多くの場合、メディアファイルは Web サイトで最大のサイズのものであり、読み込みバーや長い待ち時間の原因になります。サイトを合理化し、モバイルパフォーマンスを向上させるには、必要な品質を維持しながら、できるだけ小さいファイルサイズを使用して画像を最適化してください。 (たとえば、モバイルサイトでは、デスクトップよりも小さいバージョンの画像が読み込まれる可能性があります!)

7. サイトのパフォーマンスを優先する

ページ速度は、Google デスクトップ検索でサイトがランク付けされる方法に関して長い間重要でしたが、2018 年 7 月の時点で、モバイルランキングにも当てはまります。上記の統計と合わせて、インターネット検索の 60% 以上がモバイルデバイスを使用しており、(すべてのデバイスでの) サイトのパフォーマンスがこれまで以上に重要になっています。

画像はパフォーマンス方程式の大きな部分を占めますが、コードと WordPress ホストも大きな役割を果たします。

コードに関しては、縮小などのアクションを検討してください (特にカスタムテーマを使用する場合)。サイトにインストールされているすべてのプラグインのインベントリを作成し、不要になったプラグインを無効にしてアンインストールします。基本的に、サイトを強化する要素をより整理しておくほど、サイトの状態は良くなります。

WordPress ホストに関しては、キャッシングテクノロジー、CDN、Google クラウドプラットフォームなどの信頼できるプロバイダーが提供するインフラストラクチャなどのサービスを含む、質の高いパートナーを使用していることを確認してください。 WP Engine でサイトをホストしている場合は、これらすべての領域に設定されています。

スマートフォンやタブレットを使用してインターネットにアクセスする人が増えるにつれて、サイトデザイナーはこれらの使用パターンに対応する必要があります。あなたのサイトはモバイルユーザーに対応していますか? サイトのどの部分を変更する必要がありましたか? レスポンシブデザインを作成するためにどのツールを使用しましたか? コメントであなたの経験を共有してください！

30 以上のプレミアム (そしてモバイル対応!) テーマにアクセス

WP Engine による WordPress ホスティングと、StudioPress テーマおよび Genesis Framework へのアクセスを取得することで、時間 (およびお金) を節約できます。テーマは完全にレスポンシブで簡単にカスタマイズできるため、モバイルフレンドリーなサイトを構築する際の時間を節約できます。さらに、WP Engine の強力なプラットフォームにより、サイトのパフォーマンスが最適化され、ページの速度が速くなり、サイトのランキングが向上します。