WordPress サイトをモバイル対応にする方法
公開: 2023-02-12多くのユーザーが主にモバイル デバイスでブラウジングしているため、レスポンシブ Web サイトは現在業界標準になっています。 この影響がどれほど深刻かを示すために、Google などの業界の巨人は現在、検索ランキングでモバイル フレンドリーなサイトに報酬を与えており、より多くのサイトをデスクトップ以外のデバイスにケータリングするよう後押ししています。
つまり、レスポンシブ Web サイトは、すべてのプラットフォームで同じサイト コードを使用しますが、表示媒体に関係なく、エクスペリエンスごとに最適化を提供します。 結果として、レスポンシブ サイトを設定することは、デザイン全体を再構築すること、または単に既存のデザインを微調整することを意味する場合があります。
この記事では、レスポンシブ デザインを使用して WordPress サイトをモバイル フレンドリーにする方法について説明します。 また、検索エンジン最適化 (SEO) における応答性の重要性についても説明します。 クラッキングしよう！
WordPress はモバイルフレンドリーですか?
WordPress は、正確な要件を満たすようにサイトのフロント エンドを設計できるようにするコンテンツ管理システム (CMS) です。 これは、簡単にモバイルフレンドリーにすることができることを意味します。
レスポンシブのデフォルト テーマは 2011 年から利用可能です。現在、多くのサードパーティ テーマは、すぐに使えるレスポンシブ デザインも提供しています。 そうでないものは、多くの場合、他の多くの分野では時代遅れです。
レスポンシブデザインとは？
レスポンシブ デザインが WordPress サイトにどのように適用されるかについて説明しましょう。 レスポンシブ デザインは、Web サイトのコンテンツを整理して、表示される画面のサイズに動的に応答できるようにする方法です。 これは、ユーザー エクスペリエンスがラップトップと同じくらいスマートフォンでも優れていることを意味します。
デバイス全体でこの優れたエクスペリエンスを実現するために、デザイナーは流動的なコンテンツ グリッドを作成し、画面のサイズと解像度に直接対応して HTML を再配置するために、サイトの CSS を介して画像に柔軟性をコードします。
すばらしい例が必要な場合は、Mashable.com を新しいウィンドウで開きます (まだモバイル デバイスを使用していないと仮定します)。 そこにアクセスしたら、ブラウザー ウィンドウのサイズを変更して小さくし、それに応じて Web サイトがどのように再配置されるかを確認します。
ウィンドウを縮小すると、デザイナーが作成した流動的なグリッドに従って、画像とコンテンツ ブロックが競って小さなウィンドウに収まります。 最小でも、iPhone で Mashable のサイトがどのように見えるかが残ります。 美しく、読みやすいです。 ウィンドウを再び大きくすると、「デスクトップ」構成に急いで戻ります。
サイトを表示しているデバイス (この場合はブラウザー ウィンドウ) のサイズに応じて、ページに異なるルールを適用する CSS メディア クエリがあるため、サイト自体が再配置されます。 HTML は同じままで、CSS によって再配置されているだけです。 CSS ルールを適用して、デバイスの解像度に応じてさまざまな画像サイズを提供するなど、サイト上のすべてを再配置できます。 これは、特に iOS デバイスに網膜強化画像を提供するようなことをしたい場合に非常に便利です。
モバイル アプリとレスポンシブ サイト
アプリとレスポンシブ サイトの選択は、サイトの目的に帰着します。 ほとんどの Web サイトは、デバイスに適応できるレスポンシブ デザインで問題ありません。 モバイル アプリは、ユーザーが完全なサイトが提供するものとは異なる非常に特定の機能をモバイル デバイスで必要とする場合に役立ちます。 スターバックスの列に並んで残高をすばやく確認できるように、銀行がモバイル アプリを提供している可能性があります。 Facebook と Twitter も、モバイルの使用に合わせてアプリの機能を調整しています。
ユーザーが携帯電話の特定の機能セットを必要とする場合にのみ、メインの Web サイトから必要なものとは別に、ネイティブ アプリを検討する必要があります。
レスポンシブ サイトのパフォーマンスに関する考慮事項
レスポンシブ デザインは、サイトの全体的なパフォーマンスに影響します。 デバイスのサイズに対応するために大量の CSS とさまざまなサイズの画像を読み込むと、バックエンド処理の観点からコストがかかる可能性があります。 レスポンシブ デザインの評価の一環として、機能としてのパフォーマンスを優先することが重要です。 ユーザーは依然としてモバイル サイトが少し遅いことを期待していますが、友人やデート相手を表示するためにサイトを立ち上げようとすると、数秒以上待たなければならなくなります。
技術的な観点からは、セルラー データを使用しているモバイル デバイスにサイトを配信すると、最初から 0.5 秒のハンディキャップが発生します。 たとえば、4G で 40KB を取得するには、最適な条件下で 700 ミリ秒かかります。 ネットワークの遅延と状況の変化は、読み込み時間も増加させるだけです. セルラー ネットワークの変数を制御することはできないため、最初からパフォーマンスを備えたレスポンシブ サイトを構築することが重要です。
サイトがモバイル向けに最適化されていることを確認するには、次のことを行ってください。
- 画像を最適化する:デバイスの画面サイズを自動的に検出して、適切な画像サイズを作成、キャッシュ、配信します。
- HTTP リクエストを減らす:使用する必要のある CSS と JavaScript の量を最小限に抑え、それ以外はすべてキャッシュします。
- アセットを条件付きで読み込む:大きなソーシャル メディア ボタン、画像などは、大きなデバイスには適していますが、小さなデバイスのユーザー エクスペリエンスには影響しません。 絶対に必要なものだけをロードするように設計を計画してください。
- 遅延読み込み:特定のアセット、特に JavaScript を、最も重要なページ要素の後に読み込むことができる場合は、それを行います。 ユーザーが最初に必要なコンテンツを消費するまでに、それらの他のアセットが読み込まれます。
WordPress サイトはレスポンシブである必要がありますか?
特にレスポンシブな WordPress テーマが広く利用できるようになったことで、この質問に対するデフォルトの答えはますます「はい」になりつつあります。 サイトの再設計が予定されている場合、または設計中の場合は、ユーザーが使用しているデバイスに関係なく、質の高いエクスペリエンスをユーザーに提供することが重要です。
それを念頭に置いて、WordPress をレスポンシブに設計する必要があるかどうかを評価するために、自分自身とチームに尋ねるいくつかの質問で締めくくります.
- あなたのサイトのユースケースは何ですか? モバイル消費は重要か？ おそらく、これに対する答えは「はい、年々ますますそうです」です。 例外はありますが、多くはありません。
- あなたのユーザーは誰ですか？ 彼らが技術的であるほど最先端であるほど、関連するすべてのブランドに対して応答性の高いサイトを期待する可能性が高くなります.
- 予算はありますか？ これは大きなものです。 レスポンシブ サイトを最初に構築するには少し費用がかかりますが、サイトの 2 つの別々のバージョンを構築してから両方の維持費を管理するよりも、1 つのレスポンシブ サイトを構築する方が安価です。
- 新しいタイプのデザインを学ぶ準備はできていますか? レスポンシブ デザインは、デジタル コンテンツを理解するための多くの新しい概念と方法を導入します。 美しいものをデザインするだけでなく、その過程であなたを教育できるデザインチームと協力することが重要です.
レスポンシブ WordPress Web デザインの作成
多くの場合、既存の静的デザインはレスポンシブ テーマに変換できます。 変換プロセス全体で考慮すべき要素のいくつかを次に示します。
- デフォルトのブラウザのズーム
- 流体要素の幅と高さ
- 画像の最適化
- デザイン固有のブレークポイント
- モバイル デバイス用の個別のレスポンシブ メニュー
また、複数のデバイスで更新されたデザインをテストし、テストでレスポンシブ テーブルなどの追加要素を検討する必要があります。 ただし、WordPress をレスポンシブにする最も簡単な方法は、最初からビルド済みのレスポンシブ テーマを選択することです。
適切な WordPress テーマの選択
現在利用可能な 10,000 を超える WordPress テーマを検索する前に、サイトに追加したい機能のリストを作成し、そのリストを出発点として使用することをお勧めします.
検索する機能の種類がわからない場合は、検索エンジンの最適化 (SEO) と高速なページ読み込み時間 (デバイスに関係なく) を絞り込むために主張できるいくつかのベースラインがあります。どんなテーマにもあるべき2つのこと。
この機能が組み込まれていない WordPress テーマはたくさんありますが、両方の機能を備えたテーマを使用すると、サイトでのエンドユーザー エクスペリエンスが大幅に向上します。
たとえば、WP Engine のプレミアム WordPress テーマ スイートはすべて検索エンジンに最適化されており、モバイル対応です。つまり、どのデバイスでもすばやく読み込まれます。 これらの見栄えの良いテーマは、さまざまなユースケース向けに作成されており、あらゆる形態と規模の企業がそれらを使用してオンラインでの存在感を高めています.
これらのテーマへのアクセスは、すべての WP Engine プランにも含まれています。つまり、WP Engine のお客様は、それらすべてを追加料金なしで使用できます。
モバイル WordPress プラグイン
携帯電話は、プッシュ通知や低速接続での継続的な読み込みなど、多くの可能性を秘めています。 ただし、Web サイトをモバイル Web アプリに変え、モバイル フレンドリーなコンセプトを次のレベルに引き上げるソリューションは存在しますが、多くはまだ開発およびテスト段階にあります。
これは、期待する機能の一部が欠けている可能性があることを意味します。 ただし、さまざまな方法でサイトを改善するのに役立つモバイル WordPress プラグインが多数あります。
1.ジェットパック
利用可能なソリューションは多数ありますが、Jetpack プラグインは非常に人気のあるオプションです。 プラグイン ディレクトリにありますが、サイトにシンプルなモバイル テーマを作成するためのオプションもあります。
Jetpack の最も優れた点の 1 つは、メンテナンスが行き届いていることです。 これは、セキュリティと機能を確保するために頻繁に更新されることを意味します。 また、最も機能が豊富なツールの 1 つでもあります。 基本プラグインは無料で、多くのオプションが付属しています。 欠点は、非常に多くの機能があることです。最初はインターフェイスがわかりにくいかもしれません。
さらに、毎日のバックアップ、カスタム テーマ、および SEO ツールが必要な場合は、Jetpack のプレミアム バージョンに投資する必要があります。 必要に応じて、個人用のプレミアム プラグインを年間 39 ドルで入手できます。最上位層は年間 299 ドルです.
2.WPタッチ
さらに、既存のサイトからモバイル Web サイトを作成できる人気のプラグインである WPtouch を調べることもできます。 このプラグインを使用する主な利点の 1 つは、元の Web サイトを中断または変更することなく、モバイル バージョンをカスタマイズできることです。
無料版にもかなり堅牢な機能があります。 ただし、別のルック アンド フィールを探している場合は、プロ バージョンを購入する必要があります。 プロの価格プランは年間 79 ドルから始まり、エンタープライズ レベルのライセンスでは年間 359 ドルまでの範囲です。
3. WordPress モバイルパック
WordPress Mobile Pack は最新バージョンの WordPress でテストされていませんが、既存の Web サイトからプログレッシブ Web アプリケーション (PWA) を作成するための人気のあるプラグインです。 つまり、サイトのユーザーは、アプリ ストア用のダウンロード可能なアプリケーションのプログラミングにリソースを投入する必要なく、「アプリのような」エクスペリエンスを得ることができます。
このプラグインを使用すると、バナー メッセージをユーザーにプッシュして、Web サイトをホーム画面に追加するオプションを知らせることができます。 その後、ページは非常に高速にキャッシュおよびロードされます。 このプラグインの基本機能は無料ですが、より多くのテーマ、カスタマイズ オプション、および特定のコンテンツを同期する機能にアクセスするには、プロ バージョンを購入する必要があります。
プラグインのプロ バージョンには、選択できる 3 つの層があります。 Freelancer パッケージは年間 99 ドルからで、3 つのドメインで使用できます。 価格帯は VIP オプションで最高になり、10 ドメイン ライセンスで年間 499 ドルです。
レスポンシブ画像
WordPress は、バージョン 4.4 以降、デフォルトで注目のレスポンシブ画像を提供しています。 ただし、特に古いコードを使用しているサイトの場合は、スタイルシートに簡単なスニペットを追加して、小さなデバイスで画像が大きくなりすぎないようにすることができます。
img {
max-width: 100%;
height: auto;
}
レスポンシブ画像の最適なパフォーマンスを確保する方法は多数ありますが、このスニペットは、すべての画像がベースラインとしてレスポンシブであることを保証します。
最後に、ほとんどの画像はレスポンシブ サイトに含めるのに適していますが、スケーラビリティも考慮する必要があります。 たとえば、テキストの多い画像を含めると、モバイル デバイスでは読みにくい場合があります。 この場合、別の画像を選択するか、画像とは別にテキストを読む方法を提供する方がよい場合があります。
レスポンシブ メニュー
レスポンシブ メニューの作成に関しては、主に 2 つの考え方があります。
- すべてのサイズで機能する 1 つのメニューを作成します。
- 大画面用と小画面用の 2 つのメニューを作成します。 使用している画面サイズに応じて、一度に 1 つだけ表示されます。
モバイルで読みやすいように CSS を最適化するには、いくつかの簡単な調整のみが必要なため、フリーサイズのアプローチは小さなメニューに最適です。 その場合、デバイスのサイズに関係なく、メニューは常にユーザーに表示されます。
ただし、メニューが大きすぎてモバイル デバイス用に簡単に縮小できない場合は、小さな画面専用の 2 つ目のバージョンが必要になることがあります。 この場合、大きなメニューは大きな画面でのみ表示され、モバイル メニュー アイコンは小さな画面に表示されます。
このアプローチの典型的な例はハンバーガー メニュー アイコンです。このアイコンをクリックすると、モバイル メニュー全体がスライドして表示されます。 また、WordPress のさまざまなプラグインを利用して、レスポンシブ メニューの作成を支援することもできます。 3つのオプションを見てみましょう。
1. ウーバーメニュー
試すことができるオプションの 1 つは UberMenu です。 25 ドルで、将来のアップデートと 6 か月間のサポートにアクセスできます。 UberMenu は、完全にレスポンシブでタッチフレンドリーなメニューを作成するのに役立ちます。 残念ながら、テーマが UberMenu 固有のものでない限り、テーマを適切に機能させるには手動で変更を加える必要があります。
2.マックスメガメニュー
もう 1 つのオプションは、Max Mega Menu プラグインです。 このツールには、WordPress プラグイン ディレクトリに無料のオプションがあり、既存のメニューと連携してそれらを「メガ」メニューに変換します。
無料版には、タッチ スクリーンのネイティブ サポートなど、多くのモバイル メニュー機能もあります。 より多くのフォントとモバイル トグル オプションにアクセスするには、3 つの価格レベルのいずれかを確認する必要があります。 プラグインのプレミアム バージョンは、年間 29 ドルから始まり、複数のサイト ライセンスで年間 99 ドルまでの範囲です。
3.レスポンシブメニュー
メニューをモバイルフレンドリーにするためにチェックできる、評価の高い人気のあるプラグインは、レスポンシブ メニュー プラグインです。 このソリューションには、150 を超えるさまざまなカスタマイズ オプションがあり、すべて使いやすいインターフェイス内にあります。
プラグイン設定ページから、メニューのほぼすべての側面を柔軟に変更できます。 ただし、アニメーションやその他のフォントを探している場合は、Responsive Menu プラグインのアップグレードを確認する必要があります.
オプションのリストが非常に広範囲であるため、プラグインの無料バージョンは必要な機能を提供する場合があります。 アップグレードすると、29 ドルで単一サイトのライセンスを取得するか、99 ドルで無制限のライセンスを取得できます。 プラグインの費用は 1 回限りの料金で、一生無料でアップデートを受け取ることができます。
レスポンシブ テーブル
デフォルトでは、テーブルはコンテンツと同じ (またはそれ以上) のスペースを占有します。 これにより、非常に幅の広いテーブルがモバイル レイアウトを台無しにする可能性があります。
残念なことに、モバイル ページの幅に合わせて縮小すると、コンテンツでいっぱいの表が読みにくくなります。 レスポンシブ デザインは、小さな画面にデータを押し込むことだけがすべてではありません。 代わりに、デバイスに関係なく、すべてをユーザーフレンドリーにすることが重要です.
簡単な解決策として、次の CSS スニペットを使用して基本的な応答性をテーブルに追加できます。
table {
width: 100%;
border-collapse: collapse;
}
ただし、そこで停止する必要はありません。 テーブルが小さい場合を除き、表示されるコンテンツの種類に基づいて各テーブルを最適化することをお勧めします。 テーブル内のデータに応じて、可能な限り最高の可読性を得るために選択できるレスポンシブ オプションが多数あります。
ただし、レスポンシブ テーブル用のプラグイン ソリューションを探している場合は、幸運です! いくつかのオプションがありますが、特に 3 つをお勧めします。
1.テーブルプレス
まず、TablePress プラグインは人気があり、よく管理され、評価の高いオプションです。 ショートコードで美しいテーブルを作成して埋め込むことができます。 ただし、真にレスポンシブなテーブルを実現するには、TablePress 拡張機能をインストールする必要があります。 これらも無料ですが、開発者に寄付することをお勧めします。
2.WPテーブルビルダー
5 つ星のドラッグ アンド ドロップ テーブル ビルダー オプションを探している場合は、WP テーブル ビルダーが最適です。 やや新しいが評判の良いプラグインで、そのドラッグ アンド ドロップ インターフェイスにより、Web サイト用のレスポンシブ テーブルを簡単に作成できます。
これも完全に無料のプラグインです。 このオプションの唯一の欠点は、現時点では 5 つのデータ オプションしかないことです。 テキスト、画像、ボタン、リスト、および星評価にいくらか制限されます。
3. wpDataTables
チェックアウトをお勧めする 3 つ目のプラグインは wpDataTables です。 このツールを使用すると、既存の Excel、CSV、PHP、またはその他のデータから表やグラフをすばやく作成できます。 つまり、大規模なデータ セットを取得して、Web サイトでアクセスできるようにすることができます。
このプラグインは Gutenberg にも対応しているため、プラグインの設定でテーブルをカスタマイズすると、サイトのページや投稿にテーブルを簡単に追加できます. ただし、このプラグインの無料版では多少の制限があります。
たとえば、アップグレードしない限り、MSQL クエリ ベースのテーブルを作成したり、Google スプレッドシートから情報を取得したりすることはできません。 プレミアム バージョンは、基本価格帯で年間 59 ドルから始まり、開発者パッケージで年間 249 ドルに達します。
多言語機能の追加
WordPress の採用が世界中で増加し続けているため、ユーザーの場所に基づいてサイトを現地の言語に翻訳できる多言語機能の必要性が高まっています。
このタイプの機能は、複数の国に顧客を持つ企業にとって非常に大きなものであり、WordPress を使用すると、サイトに追加することは思ったほど難しくありません. 実際、Weglot などのプラグインをインストールすることで実現できます。これにより、コードを必要とせずに、数分で Web サイトを多言語化できます。
Weglot はすべての WordPress テーマとプラグインとも互換性があります。つまり、最終的に使用するテーマで動作し、他のプラグインで問題が発生することはありません。 Weglot を WP Engine のプレミアム WordPress テーマの 1 つに追加すると、サイト所有者は、あらゆる言語でアクセスできる SEO フレンドリーでモバイル対応のサイトを構築できます。
このガイドをチェックして詳細を確認し、WP Engine にアクセスして、WordPress 用のデジタル エクスペリエンス プラットフォームに付属するさまざまなプランやその他の機能について学習してください。
SEOのためのモバイル応答性
簡単に言えば、モバイル フレンドリーなウェブサイトは、Google のオーガニック検索結果に表示されます。 2015 年から 2016 年の間に、レスポンシブ Web サイトを優先するためにランキング アルゴリズムに多くの更新が追加されました。 速度はモバイル ユーザーの使いやすさに大きな影響を与えるため、検索エンジンのランキング向上にも貢献することに注意することが重要です。
もちろん、読み込みの速いレスポンシブ Web サイトを成功させるには、優れたホスティングが必要です。 WP Engine などの高品質のホスティング会社を選択すると (PHP 7 が標準で提供され、上位プランでは無料のコンテンツ配信ネットワークが提供されます)、読み込み時間が短縮され、操作がスムーズになります。
WP Engine でレスポンシブにビルドする
レスポンシブ Web サイトに向けて取り組むことは、モバイル依存の世界では優先事項であるべきです。 追跡しなければならないことはたくさんありますが、ここ WP Engine では、最高の WordPress 開発者リソースとモバイル ユーザー向けの応答性の高いテーマを紹介することができます。
さらに、私たちはあなたのウェブサイトのための多種多様な計画とソリューションを持っています. 当社のデジタル エクスペリエンス プラットフォームでレスポンシブな構築を支援します。画面サイズが原因で訪問者を失う心配はありません。