WordPress をモバイル対応にするためのヒント
読書の続きを読んだり、オンラインで何かを検索したりするために携帯端末を使用している人をよく見かけます。あるレポートでは、検索の 60% がモバイル デバイスから開始されていると推定されています。ターゲットとするユーザーが絶えず移動するこの人口の一部である場合、実際には選択肢はありません。Web サイトの見栄えが良く、携帯電話でも適切に機能することを確認する必要があります。この投稿では、WordPress ウェブサイトをモバイル対応にするためにできることをいくつか見てみましょう。
モバイル フレンドリーな Web サイトは、通常の Web サイトの小さなバージョンのように見えます。この外観を実現するには、Web サイト上のすべての要素を画面のサイズに合わせて最適化する必要があります。また、トラフィックを引き付けて維持するには、Web サイトの読み込みが高速であることを確認する必要があります (特にモバイルでは)。
Googlebot は、ウェブページがモバイル フレンドリーかどうかをチェックする際に、次のようなさまざまな側面を調べます。
- ページに多すぎる広告が含まれているかどうか、または Flash や Java などのモバイル デバイスに適していないソフトウェアが含まれているかどうか。
- コンテンツのサイズが画面に収まり、ズームや水平スクロールなしでテキストが読める場合。
- タップしやすいようにリンクが明確に離れて配置されているかどうか。
WordPress ウェブサイトをモバイルフレンドリーにする必要があるのはなぜですか?
WordPress Web サイトをモバイル対応にすることは、モバイル数の爆発的な増加、ネットワーク接続の改善、公共の場所での Wi-Fi へのアクセスの自然な結果です。より説得力のある理由であればあるほど、
- 検索エンジンは、モバイルフレンドリー性をランキング要素として考慮します。モバイルフレンドリーかどうかはページごとに判断されます。つまり、Web サイトのモバイル対応領域は検索結果で上位にランクされ、残りのコンテンツは下位にランクされます。
- Web ページが閲覧しにくいと直帰率が高くなり、サイトの SEO に悪影響を与える可能性があります。対照的に、モバイル フレンドリーな Web ページは、サイトの速度と SEO の向上につながります。
- Web ページをモバイル対応にするということは、多くの場合、クリーンなグリッドとレイアウト、そして場合によっては 1 つのユニバーサル URL と 1 つのコードベースを用意することを意味します。
- モバイルフレンドリーによりブランド強化と売上が向上します。
WordPress ウェブサイトをモバイル対応にする方法
現在、Total などの最新の WordPress テーマは応答性が高く、どのデバイスでも Web サイトを表示できます。ただし、レスポンシブ テーマを使用する以外にも、Web サイトをモバイル向けに最適化するためにさまざまなことができます。
1. モバイルファーストのアプローチを採用する
現在のデジタルシナリオでは、モバイルフレンドリーであることの重要性はどれだけ強調してもしすぎることはありません。米国では、モバイルのデジタル メディア時間はデスクトップの 42% と比較して 51% と高くなります。このタップアンドスワイプのユーザーにリーチするために、Web サイト所有者は単に既存の Web サイトのデザインを複数の画面サイズに合わせて最適化するだけではありません。彼らは一歩進んで、モバイルファーストのアプローチを採用しています。
モバイル ファーストのアプローチでは、モバイルに特化した UX デザインを作成し、小さい画面サイズに合わせたコンテンツ戦略を優先します。単に既存の通常のデスクトップ Web サイトをモバイル用に最適化するだけではありません。
モバイル ファーストを目指すもう 1 つの重要な理由は、2016 年 11 月に Google がモバイル ファースト インデックスに段階的に移行すると発表したことです。このインデックス作成方法では、Google はデスクトップ ページより先に、まずサイトのモバイル ページのインデックス作成をチェックします。モバイル ファースト インデックスのサイトを選択する際、Google は「分類子」を使用して、サイトがモバイル ファースト インデックスにどの程度対応しているかを調べます。分類子は、コンテンツ、リンク、スキーマ、マルチメディアなどに関して、デスクトップ サイトがモバイル サイトとどの程度同等または同等であるかを決定します。実際、10 月に Google の Gary Illyes 氏は、ニューヨーク市で開催された SMX East カンファレンスで聴衆に次のように述べました。一部のサイトはすでにモバイル インデックス リストに掲載されており、今後さらに追加される予定です。
2. 画像を最適化する
画像ファイルは通常、バイト数が多くなります。テキストや HTML などの他のリソースよりも読み込みが遅くなります。 Web サイトをモバイル対応にするには、小さな画面に合わせて画像を最適化する必要があります。バージョン 4.4 以降、WordPress がこれの大部分を処理しますが、いつでも WordPress プラグインを使用して画像をさらに最適化することもできます。
画像の最適化にはユーザー エクスペリエンス、視覚的な魅力、ページのパフォーマンスのバランスが必要であることを常に念頭に置いて、画像を最適化するためにさらに多くのことを行うことができます。まず、価値を付加しない画像を削除します。次に、画像をアップロードする前でも、より小さいファイル サイズに圧縮して画像を最適化します。 Photoshop を使用している場合は、[Web 用に保存] オプションを使用します。 TinyPNG などのオンライン ツールや WPSmush などのプラグインも、非常に効率的に作業を行うことができます。また、さまざまな圧縮ツールの比較に役立つ Github ページもあります。画像の最適化について詳しくは、画像の最適化ガイドをご覧ください。
3. 高速化されたモバイル ページの実装
Accelerated Mobile Pages は、モバイル上で高速に読み込まれるコンテンツを提供するための Google によるオープンソース イニシアチブです。これにより、パブリッシャーはモバイル フレンドリーなコンテンツを 1 回作成するだけで、モバイル ウェブ上のどこにでも瞬時に読み込むことができるようになります。 AMP は実際には、Google の要求に応じて統一された方法で行われる Web サイトへのさまざまな最適化です。標準的な範囲の広告フォーマット、広告ネットワーク、テクノロジーが利用可能になります。同時に、速度を妨げない限り、出版社は独自のフォーマットを選択することもできます。 AMP ページを作成するための独自の AMP for WordPress チュートリアルが用意されており、すぐに始めることができます。また、すぐに使用できる AMP テンプレートとコンポーネントを使用して、見栄えの良い AMP ページを作成するには、「AMP Start from Google」もおすすめします。
AMP コンテンツは Google 検索ですぐに利用できるようになり、Twitter、LinkedIn、Pinterest などのソーシャル プラットフォームからもアクセスできます。
モバイル向けのページの特別なフォーマットと配信により、モバイル デバイスでのページの速度が大幅に向上します。 Google から AMP ページを読み込む平均読み込み時間は 0.5 秒未満です。 2017 年 10 月の時点で、2,500 万を超える Web サイト ドメインが 40 億を超える AMP ページを公開しています。 AMP により、Web サイトのトラフィックが 10% 増加し、ページの滞在時間が 2 倍になります。 AMP を搭載した e コマース ウェブサイトでは、非 AMP ページに比べて販売コンバージョンが 20% 増加しました。
AMP はまだランキング要素ではありませんが、ユーザー エクスペリエンス、ひいては SEO に大きな影響を与える可能性があります。
4. 全画面ポップアップを避ける
ポップアップが機能することに疑いの余地はありません。ただし、ポップアップを使用するときは、ユーザー エクスペリエンスを常に最前線に置く必要があります。コンテキストに関連しており、キャッチーな見出しがあり、読者に真の価値を提供するポップアップは、コンバージョン率が高くなります。一方、メインコンテンツの上に広告を表示するスパム的で閉じるのが難しいポップアップは、訪問者を急いで遠ざけるのに十分です。
ユーザーが Google のページをクリックすると、モバイル検索でインデックス付けされたコンテンツがすぐに利用できるようにする必要があります。そうしないと、モバイル検索結果で上位にランクされない可能性があります (2017 年 1 月以降)。 Cookie や年齢確認などの法的義務に応じたポップアップや、ロックインされたコンテンツへのアクセスを許可するログイン ダイアログは、Google では問題ありません。最小限の画面スペースしか占有せず、簡単に消去できる広告の場合も同様です。
逆に、訪問者が検索からページに到達するとすぐに表示されるポップアップ、メイン コンテンツをカバーするポップアップ、または訪問者が閲覧中に表示されるポップアップは、Google の好意を得ません。ユーザーがメイン コンテンツにアクセスする前に閉じる必要があるスタンドアロン インタースティシャルも同様です。
モバイルでのポップアップに関して従うべきその他の優れたプラクティスには、全画面ポップアップを回避することや、モバイル サイトにアコーディオンや拡張可能なボックスなどの拡張可能なコンテンツを含めることなどが含まれます。バナー、インライン、スライドインなどの小さなメッセージを使用したり、コンテンツをタブの後ろに隠したりします。
Googleのジョン・ミューラー氏は、検索クリックからコンテンツへのアクセスの間に表示されるインタースティシャルはランキングに悪影響を与えるとアドバイスしている。したがって、ページ間移動中のポップアップや終了意図のポップアップはランキングに影響しない可能性があります。
5. モバイルアプリの作成を検討する
モバイル アプリは、電話や時計などのモバイル デバイス上で実行されるコンピューター プログラムです。たとえば、AmazonにはショッピングアプリAlexaがあります。ユーティリティ、生産性、ナビゲーション、エンターテイメント、スポーツ、フィットネスなど、あらゆる用途でアプリが利用可能になり、ダウンロードできるようになりました。 Facebook は最もダウンロードされているアプリで、月間 1 億 4,000 万回のアプリがダウンロードされています。
多くの Web サイトにはモバイル Web サイトとモバイル アプリの両方があります。アプリは具体的な情報をわかりやすい形式で提供します。直感的に使用でき、より対話性が高くなります。現在、支払いを含む電子商取引活動の多くはモバイル経由で行われています。そのため、モバイル アプリは今後も存続し、その数は増加します。最も良い点は、WordPress Web サイトをアプリに変えたり、中小企業向けのアプリを作成したりするのが簡単であることです。
モバイル アプリは、ユーザーが携帯電話から直接タップできるようにすることでトラフィックを増加させます。ユーザーは数回クリックするだけですぐにアクセスできます。アプリは、より多くの顧客にリーチし、ソーシャル ネットワークとうまく統合するのに役立ちます。アプリを使用して製品リストを定期的に更新し、割引やオファーを行うことができます。または、パートナー Web サイトと提携して、アプリにアクセスし、可視性を高めます。
まとめ
ウェブサイトをモバイル対応にするための最適化をすべて実行したら、PageSpeed Insights でテストすることを忘れないでください。 Google モバイル フレンドリー テストでは、URL ごとにウェブサイトもテストします。
この投稿のヒントは決して網羅的なものではありません。モバイルでの Web サイトの改善に役立つ最適化 WordPress プラグインやその他のガイドがたくさんあります。追加したいことや質問がある場合は、以下のコメント欄で共有してください。