WordPressサイトをモバイルフレンドリーにする方法
公開: 2020-10-02モバイルフレンドリーなWordPressサイトが新しい標準であることは周知の事実ですが、どれほど一般的に見えるかもしれませんが、美しくレスポンシブなサイトを作成するには、まだ少し手間がかかる可能性があります。 このガイドは、モバイルフレンドリーなサイトを持つことが重要である理由、WordPressでサイトを構築する方法を理解し、レスポンシブサイトを作成するための最良のツールを紹介するのに役立ちます。
WordPressサイトをモバイルフレンドリーにするには、次のことを行う必要があります。
- レスポンシブウェブデザインが重要である理由を理解する
- Googleモバイルフレンドリーテストを受ける
- レスポンシブなWordPressテーマを使用する（または独自のテーマを作成する）
- モバイルフレンドリーなWordPressプラグインを検討してください
- モバイルフレンドリーなオプトインを使用する
- レスポンシブメディアの観点から考える
- サイトのパフォーマンスを優先する
準備？ 飛び込みましょう！
1.モバイルフレンドリーサイトが重要なのはなぜですか？
2019年第4四半期には、Google検索の61％がモバイルデバイスで行われました。 つまり、人口の半数以上が従来のデスクトップデバイスではなく電話やタブレットに目を向けているため、それらに対応するには、Webサイトを任意の画面サイズで表示できるようにする必要があります。 モバイルフレンドリーなデザインは、優れたユーザーエクスペリエンスを実現し、ユーザーが外出先で探しているものを見つけるのに役立ちます。
UXに加えて、サイトをモバイルフレンドリーにする必要があるもう1つの重要な理由があります。それはGoogleです。 2015年（「Mobilegeddon」の年）から、Googleは、「モバイルフレンドリー」と見なされるサイトに報酬を与えるために、検索アルゴリズムの大幅な見直しを実施しました。 変更は、Webサイトが応答性があるかどうかという1つの重要なデータポイントに帰着しました。
これは、サイトがモバイルデバイスでよく読めば、そうでないサイトよりも検索結果でパフォーマンスが向上することを意味します。 あなたがモバイルフレンドリーなサイトを作成するための仕事をしたなら、それはかなり甘い特典です！ ただし、小さい画面に表示するタスクに完全に対応していない場合は、サイトのトラフィックを損なう可能性もあります。
幸いなことに、WordPressサイトがまだモバイルフレンドリーでない場合は、スピードを上げて完全に機能するレスポンシブサイトを構築するのに役立つツールがたくさんあります。 最初のステップは？ 現在のデザインをベンチマークします。
2.モバイルフレンドリーテストを受ける
Webサイトは1つのモバイルデバイス（個人の携帯電話など）で見栄えがする場合がありますが、実際に応答性があるかどうかを確認するには、さまざまな画面サイズでWebサイトをテストする必要があります。 古い電話がたくさんある場合でも、すべての画面でテストするには時間のかかるプロセスになる可能性があります。
物事を単純化するために、Googleはあなたのサイトが「モバイルフレンドリー」であるかどうかを教えてくれる無料のモバイルフレンドリーテストツールを私たち全員にプレゼントしました。 サイトのURLを入力するだけで、サイトのモバイルデザインをすばやく評価できます。 Webサイトがモバイルデバイス用に完全に最適化されている場合は、次のような熱狂的な小さな成功メッセージが表示されます。
赤が表示されている場合は、やるべきことが少しあります。 （すぐにわかります！）
かなりきちんとした小さなツールですよね？ まあ、それはさらに良くなります。
Googleは、開発者の皆様のために、自動化されたツールを使用してURLをテストできるモバイルフレンドリーテストAPIもリリースしました。 これの利点は、より多くのページをすばやくテストできることですが、ブラウザツールを常に手動で使用しなくても、サイトで最も重要なページを監視することもできます。 スコア！
Googleのモバイル対応ツールを使用してサイトのベンチマークを行ったら、次は改善を開始します。 WordPressのテーマから始めましょう。
3.レスポンシブなWordPressテーマを使用（または作成）します
最近新しいWordPressテーマをインストールした場合は、この部門で大丈夫である可能性が十分にあります。 ただし、テーマがしばらく前から存在している場合は、少し更新する必要があるかもしれません。
まず最初に：WordPressのバージョンと現在のテーマのバージョンを再確認してください。 保留中の更新がある場合は、それらから始めます。 すべてのテーマについて話すことはできませんが、一部のアップデートにはモバイルフレンドリーな要素が含まれており、問題を解決するのに十分な場合があります。 たとえば、WordPress 4.4は、レスポンシブ画像用の非常に優れた機能をいくつか追加しました（これについてはすべてここで読むことができます）。
更新してもうまくいかない場合は、新しいテーマを探すか、独自のテーマを作成することを検討してください。 両方のオプションを見てみましょう。
最高のモバイルフレンドリーなWordPressテーマ
現実的には、最近のWordPressテーマの多くは応答性が高く、テーマがモバイルフレンドリーでないことはおそらくまれです。 そうは言っても、テーマを購入する前に、どの画面サイズでもうまく表示されることを再確認してください。 デモサイトをテストし、ブラウザウィンドウを拡大縮小し、見つけたレビューを読んで、実際のユーザーのエクスペリエンスを探します。
あなたが見たものに満足しているなら、それのために行ってください！ しかし、何かが正しく見えない場合は、明確に操縦してください。 完璧にマッチしていると思っていたとしても、WordPressのテーマはたくさんあるので、自分のサイトで機能する別のテーマを見つけることができます。
無料のテーマをお探しの場合は、ご自身のコンテンツを配置した状態でどのように表示されるかを確認してください。ご存知のとおり、物事は必ずしも同じように見えるとは限らないため、コンテンツが表示されることを確認してください。あなたがモバイルで望む方法。
どこから始めればいいのかわからない？ FlywheelでWordPressサイトをホストすると、プランで30を超えるプレミアムStudioPressテーマ（Genesis Frameworkを含む！）に無料でアクセスできます。 これらのテーマは完全に応答性が高いため、どのデバイスでも見栄えがよく、さらに簡単に切り替えることができます（購入することにした「1つの」プレミアムテーマにとらわれるのではなく）。
独自のレスポンシブWordPressテーマを作成する方法
モバイルフレンドリーなサイトを作成するためにDIYルートを使用したい場合は、最初から、またはテスト環境で開始するようにしてください。ライブサイトでそのような大幅な変更を加えないでください。
ローカルを使用して、マシン上でローカルのWordPressサイトを起動することをお勧めします。 この無料アプリを使用すると、現在のサイトを壊すことなく、心ゆくまで実験することができます（これは再設計を行う際に不可欠です）。 既存のサイトをローカルにインポートすることもできるので、必要な場合にのみ最初から始める必要があります。
ローカルサイトへの共有可能なURLを生成するLiveLinksと呼ばれる機能もあります。 これにより、クライアントに送信したり、携帯電話でプルアップしたりできるため、モバイルデバイスでサイトがどのように表示されるかを簡単にテストできます。
レスポンシブな親テーマに基づいて子テーマを作成すると、かなり良い状態になります。 完全に白紙の状態から始めて独自のテーマを作成する場合は、メディアクエリを使用してデザインの境界を確立し、要素を1つずつ考えてください。
画像をどのように拡大縮小するか、ナビゲーションをどのように表示するか、モバイルデバイスでコンテンツのいずれかが非表示になるかどうかを自問してください。 これがあなたを助けることができるいくつかのチュートリアルです：
- WordPressでレスポンシブナビゲーションメニューを作成する方法
- レスポンシブウェブデザインの7つのベストプラクティスのヒント
- WordPressでレスポンシブ画像を操作する
4.レスポンシブプラグインを使用する
プラグインはWordPressサイトに機能を追加するため、フロントエンドに視覚的に何かを追加するとは限りません。 ただし、サイトに物理的な要素（ウィジェットやCTAボタンなど）を追加する場合は、すべての画面サイズで適切に拡大縮小できることを確認するか、少なくとも小さい画面サイズで無効にするオプションを提供します。
たとえば、サイドバーウィジェットはデスクトップサイトへの素晴らしい追加ですが、それがモバイルデザインを支配している場合、または縮小しない場合、それは非常に優れたユーザーエクスペリエンスにはなりません。
テーマと同様に、プラグインの機能に注意を払い、レビューを読んだり、デモを見つけてから購入してください。 また、新しいプラグインをアクティブ化するときはいつでも、サイトの品質チェックを行って、画面サイズ全体で正しくスケーリングされていることを確認することを忘れないでください。
モバイルで適切に動作する応答性の高いテーマとプラグインがある限り、サイトは小さな画面に表示するのに非常に適した状態になります。
5.モバイルデバイスにポップアップを追加しないでください
WordPressサイトでメーリングリストを作成しようとしている場合は、サイトにさまざまなオプトインがあると思います。 ほとんどの電子メールオプトインフォームは、モバイルデバイスで問題なく機能します（拡張性があり、使いやすいと想定しています）。
ただし、ポップアップは別の獣です。 Googleは、サイトのコンテンツをカバーする侵入型インタースティシャル、別名オプトインでサイトにペナルティを科し始めました。 これには、ポップアップ（ポップアップがすぐに表示されるか、ユーザーがサイトにしばらくアクセスした後に表示されるか）や、ユーザーがページのコンテンツにアクセスする前に閉じる必要のあるその他のタイプのオプトインが含まれます。 この問題に関するGoogleのスタンスについてはすべてここで読むことができます。
WordPressサイトをモバイルフレンドリーに保ち、ベストプラクティスに従うために、モバイルデザインのポップアップを避けてください。 それをどのように行うかは、オプトインに電力を供給するサービスによって異なりますが、ほとんどのプロバイダーには、モバイルデバイスで煩わしいポップアップを無効にするオプションが必要です。
6.レスポンシブメディアの戦略化
ポートフォリオサイト、毎日のブログ、またはeコマースサイトのいずれで作業している場合でも、応答性の高いパズルの重要な部分は、サイトのメディアを検討することです。 ホームページ上のその大きな背景画像は、デスクトップマシンでは見栄えがするかもしれませんが、正しく拡大縮小されないと、すべてのコンテキストが失われ、電話での表示が困難になる可能性があります。 では、レスポンシブメディアのルールナンバーワン？ 物事がどのように拡大するかを考えてください。
スケーリングが実際にサイトに最適なソリューションではない場合は、サイトがモバイルデバイスに読み込まれるときに特定の要素を非表示にすることを検討することもできます。 これにより、エクスペリエンスが簡素化され、ユーザーが最も重要なコンテンツにすばやくアクセスできるようになります。
最後に、サイトに含めるメディアのファイルサイズにも注意する必要があります。 これにより、モバイルエクスペリエンスが向上するだけでなく、デスクトップの読み込み時間も向上します。 メディアファイルは、多くの場合、Webサイトで最大のものであるため、バーの読み込みと長い待機時間の原因になります。 サイトを合理化し、モバイルパフォーマンスを向上させるには、必要な品質を維持しながら、可能な限り最小のファイルサイズを使用して画像を最適化してください。 （たとえば、モバイルサイトがデスクトップよりも小さいバージョンの画像をロードする場合があります！）
7.サイトのパフォーマンスを優先する
ページの速度は、Googleデスクトップ検索でのサイトのランク付けの観点から長い間重要でしたが、2018年7月の時点で、モバイルランキングにも当てはまります。 これを上記の統計と組み合わせると、インターネット検索の60％以上がモバイルデバイスを使用しており、サイトのパフォーマンス（すべてのデバイスで）がこれまで以上に重要になっています。
画像はパフォーマンスの方程式の大きな部分を占めていますが、コードとWordPressホストも大きな役割を果たします。
コードに関しては、縮小化などのアクションを検討してください（特にカスタムテーマを使用する場合）。 サイトにインストールされているすべてのプラグインのインベントリを作成し、不要になったプラグインを非アクティブ化してアンインストールします。 基本的に、サイトを強化する要素を整理すればするほど、より良い結果が得られます。
WordPressホストについては、キャッシュテクノロジー、CDN、GoogleCloudPlatformなどの信頼できるプロバイダーが提供するインフラストラクチャなどのサービスを含む高品質のパートナーを使用していることを確認してください。 Flywheelでサイトをホストしている場合は、これらすべての領域に設定されています。 さらに、パフォーマンスインサイトアドオンも提供しています。これは、トラブルシューティングをさらに進めて、サイトがすべてのデバイスで最高のパフォーマンスを発揮していることを確認するのに役立ちます。
ますます多くの人々がスマートフォンやタブレットを使用してインターネットにアクセスするにつれて、サイト設計者はそれらの使用パターンに対処するために調整する必要があります。 それで、あなたのサイトはあなたのモバイル訪問者のために準備ができていますか？ サイトのどの側面を変更する必要がありましたか？ レスポンシブデザインを作成するためにどのツールを使用しましたか？ コメントであなたの経験を共有してください！
30以上のプレミアム（そしてモバイルフレンドリー！）StudioPressテーマにアクセスできます
Flywheelでホスティングし、StudioPressテーマとGenesis Frameworkにアクセスすることで、時間（およびお金）を節約できます。 テーマは完全に応答性が高く、簡単にカスタマイズできるため、モバイルフレンドリーなサイトを構築する際の時間を節約できます。 さらに、Flywheelの強力なプラットフォームは、サイトのパフォーマンスを飛躍的に維持し、これらのページ速度を高速に保ち、サイトのランキングを向上させます。
この記事はもともと2017年22月17日に公開されました。 最終更新日は2020年10月2日です。