モバイルトラフィック用にWordPressレイアウトを最適化する方法
公開: 2020-12-16モバイルデバイスとそれを使用する人々の数は絶えず増加しています。 すべてのインターネットトラフィックの半分以上がモバイルであり、実行される検索エンジンクエリのほとんどがモバイルデバイス上で行われるのは当然のことです。 さらに、Googleはモバイルデバイス用に最適化されていないウェブサイトにペナルティーを科します。
モバイルトラフィック用にWordPressレイアウトを最適化するには、テーマをインストールする以上のことを行う必要があります。 UXの観点だけでなく、SEO、CRO、広告、パフォーマンスの観点からも、モバイル版のWebサイトに投資する必要があります。
したがって、この記事では、WordPressサイトをモバイルトラフィックで機能させ、ユーザーがモバイルデバイスでWebサイトにアクセスしたときに最高のエクスペリエンスを確実に得られるようにするために、WordPressサイトで対処する必要があることについて説明します。
モバイルトラフィックが重要な理由
2016年には、初めてモバイルインターネットトラフィックがデスクトップを上回りました。 これに対応するには、あらゆるタイプのデバイスから着信するトラフィック用にWordPressサイトを準備する必要があります。
最適化とは、スマートフォンで見栄えがするだけでなく、機能的なWebサイトを持つことも意味します。 モバイル対応のウェブサイトを持つことは、UXを強化し、コンバージョン率を向上させるでしょう。そして、広告に基づいて収入を得るウェブサイトにとって重要です。
強化されたUXに加えて、モバイルフレンドリーなレイアウトはSEOにもプラスの影響を与えます。 2015年のGoogleの更新以降、検索エンジンのアルゴリズムが大幅に改訂されました。 現在、モバイルフレンドリーは、検索ランキングの向上とWebトラフィックの増加にとって重要な要素の1つです。
Statistaのこのグラフに示されているように、モバイルWebトラフィックは継続的に増加しています。
したがって、ウェブサイトがモバイルデバイスで優れたものになると、SERPでのランクが上がり、モバイル経由の売り上げが増えることになります。 Walmart Canadaのような大規模小売業者でさえ、モバイルWebレイアウトの最適化の恩恵をさらに受けており、モバイルの売り上げが98％増加しています。
同社は、ターゲット顧客のほぼ50％がタブレットを使用する母親であることに気付いたとき、モバイルエクスペリエンスについて何かをしなければならないことに気づきました。 モバイルレイアウトの問題にうまく対処するために、次のソリューションを実装しました。
- モバイルファーストプランの確立：チームは、デザインにタッチ中心のアプローチを採用する必要があると判断し、タブレットやスマートフォンで非常に見栄えを良くしました。
- モバイルデザインの最適化の実装：レスポンシブデザインアプローチにより、サイトはすべての画面サイズで優れたレンダリングになりました。 さらに、モバイルWebトラフィック用に製品ページも最適化しました。
その結果、前述のように、全体的なコンバージョン率が20％増加し、モバイル販売が98％増加しました。
Googleはモバイルウェブサイトのレイアウトをどのように評価しますか？
モバイル検索からトラフィックを受信するサイトの機能を評価するとき、Googleは次の要素を考慮します。
- ページレイアウト： Googleは、ページがモバイル画面で正しくレンダリングされるかどうかを調べます。
- アクセシビリティ：ボタン、メディア、テキストが、ユーザーを拡大せずに簡単にアクセスできる大きさであるかどうかを確認します。
- パフォーマンス：ページ速度はデスクトップおよびモバイルWebエクスペリエンスに不可欠であり、GoogleはSERPでデスクトップよりもモバイルページのパフォーマンスを優先します。
- 広告の配置：広告でいっぱいのページは多くの人にとって邪魔であり、Googleにとっても問題です。 そのため、広告を使用するときは、広告の配置ガイドラインに違反していないことを確認する必要があります。
いくつかのテストから始める
最初に行う必要があるのは、現在のサイトがモバイルWebトラフィックに適切に応答しているかどうかを調べることです。 この目的のために、Googleのモバイルフレンドリーテストツールを使用できます。
サイトのモバイルレスポンシブレイアウトを調べるための最良のツールの1つとしてのGoogleのモバイルフレンドリーテスト。
サイトのURLを入力し、[テストURL]を選択するだけです。 分析には数秒以上かかりません。 あなたのウェブサイトがモバイルデバイスで機能している場合、ツールはサイトがスマートフォンでどのように見えるかのスクリーンショットであなたに知らせます。 または、サイトがモバイルフレンドリーでない場合、ツールは調整が必要なものを指摘します。
モバイル対応をテストするために使用できる他の便利なツールがいくつかあります。
- Varvy Mobile SEO
- W3Cモバイルバリデーター
- レスポンシブデザインチェッカー
ツールは素晴らしいですが、実際に最初の経験に勝るものはありません。 サイト全体に行き、ユーザーにとって優先度が高いと思われるアクションを実行することを常にお勧めします（カートへの製品の追加、フォームの送信、ページへの移動、投稿の共有など）。 プロセス全体を通じて潜在的な問題に注意してください。 これは、UXテストの最も単純な形式です。
パフォーマンスをテストする
スピードはかつてないほど重要になっています。 Googleは、速度を最も重要なランキング要素の1つと見なしており、最大85％のユーザーが、モバイルサイトの読み込みがデスクトップバージョンよりもはるかに速いと予想しています。
Webサイトの速度をテストするために使用できるツールは次のとおりです。
- PageSpeedインサイト
- GTMetrix
- Pingdom
モバイルでコンテンツを高速化したい場合、CDNは、キャッシュと多数の場所からの配信を通じて、コンテンツをより高速に提供するのに役立ちます。
たとえば、ホスティングサーバーがカリフォルニア州サンフランシスコにあり、モバイルWeb訪問者がパリから来ているとします。 これは、コンテンツの横断を遅くする可能性のある距離です。 CDNは、パリ近郊のフランスのサーバーにサイトのバージョンを保存し、その結果、コンテンツをはるかに高速に提供できます。
さらに、WordPressWebサイト用の強力なマネージドホスティングプロバイダーを選択する必要があります。 共有ホストは一度に数百のWebサイトを実行し、サイトの1つで通常よりも高いトラフィックの急増が発生すると、他のサイトの速度が低下します。
PagelyなどのWordPressホスティングにアップグレードすると、パフォーマンスが大幅に向上する可能性があります。 Pagelyはサーバーインフラストラクチャを使用しており、ウェブサイトをすぐに高速化します。 また、最新のPHP 7バージョンを利用し、サイト資産を急増させる可能性のあるCDNを備えています。
シンプルさを維持する
スマートフォンはデスクトップレイアウトよりも画面がはるかに小さいため、ユーザーに表示できる要素の量は少なくなります。 したがって、大量のコンテンツを表示したい場合は、ユーザーエクスペリエンスを妨げるだけです。
たとえば、トヨタのブラジル支社のWebサイトを見てみましょう。 それはラップトップ上で本当にしっかりしているように見えます。
見栄えの良いデスクトップWebサイトは、モバイルレイアウトがそれに続くことを意味するものではありません。 画像出典：トヨタブラジル
しかし、スマートフォンで彼らの車を閲覧したい場合はどうでしょうか。
雑然としたモバイルWebレイアウトは、トラフィックの減少とコンバージョン率の低下につながります。 画像出典：トヨタブラジル
それほど悪くはありませんが、トップバーとメインメニューが少し多すぎて、エクスペリエンス全体が時代遅れで雑然としています。
デザインをシンプルに保つことでモバイルUIが向上し、ユーザーはページをより効率的にナビゲートできます。 さらに、ブラウザがロードする必要のある要素が少ないほどページが高速になるため、シンプルなレイアウトはモバイルページの速度スコアを向上させます。
Swellのモバイル向けのシンプルなWordPressレイアウト
モバイルレイアウトを設計するときは、ページのスクロールを促進するために、1列のページレイアウトに焦点を合わせるのが最善です。 考えてみてください– FacebookとInstagramがモバイルプラットフォームほど成功しているのはなぜですか？
ユーザーは自然に垂直方向にスワイプします。 画像ソース：Giphy
さらに、「ハンバーガーメニュー」など、シンプルなモバイルWebデザインで受け入れられる他の機能を検討する必要があります。
左上のハンバーガーメニューボタン。 画像ソース：AMC
これは現在、モバイルWebデザインの標準コンポーネントであり、ユーザーが別のページを閲覧したい場合は、ページレイアウトの上部を検索します。 豊富なドロップダウンメニューは使用しないでください。 彼らはスマートフォンでナビゲートするのに挑戦しており、時にはデスクトップWebサイトの使いやすさを妨げることさえあります。
不要なコンテンツを除外する
不要な要素を削除することでページのモバイルデバイスへの移行を合理化するだけでなく、余分なコンテンツも削除できます。 もちろん、コンバージョン率を向上させるコンテンツは絶対に削除しないでください。 ただし、モバイル版のサイトには必要のないコンテンツがいくつかあります。
ページに表示するコンテンツを確認するときは、次のことを自問してください。
- このコンテンツはページにどの程度関連していますか？
- コンテンツはユーザージャーニーにとって重要ですか？
- このコンテンツを含める必要がある場合、モバイル向けにどのように簡素化できますか？
- モバイルで削除できる場合でも、デスクトップでは必要ですか？
不要なコンテンツを排除することで、ユーザーエクスペリエンスとコンバージョン率が向上します。 モバイルWeb訪問者にとって最も重要なコンテンツのみを保存します。 可能な限りコンテンツを簡素化しますが、ユーザーに製品を選択するように説得する可能性のある重要なコンテンツを排除しないでください。
BuildFireモバイルWebサイトからのシンプルなユーザーインターフェイス。
クリック可能な領域を制限する
人々がモバイルデバイスでウェブサイトにアクセスするとき、彼らはクリックするためにあまり多くのオプションを望んでいません。 それは圧倒される可能性があり、操作可能なモバイルUXを提供できなくなります。 代わりに、ページ上の最も重要な行動を促すフレーズとクリック可能な領域を強調する必要があります。
Todoistには、行動を促すフレーズといくつかの美しいグラフィックしかありません。
スマートフォンでウェブサイトを閲覧することは、矢印で指すのではなく、指でタッチスクリーンを見てクリックすることであることに注意してください。 したがって、限られた数のリンクを含め、それらの間隔を適切に設定することで、モバイルデバイスユーザーがナビゲートできるアクセス可能なページを確保できます。
QuicksproutモバイルWebサイトには、クリック可能な大きな領域があります。
クリック可能な領域がモバイル画面上で近くにある場合、人々は間違ったリンクをクリックする可能性があるため、これは非常に重要です。 さらに、Googleはあなたのサイトをモバイルユーザーにとって不親切であるとフラグを立てることができ、あなたは多くの潜在的なオーガニック検索トラフィックを逃すでしょう。
ハーネスレスポンシブデザイン
デスクトップとモバイルでウェブサイトを適切に表示したい場合は、レスポンシブにする必要があります。 レスポンシブウェブサイトは、デスクトップバージョンとモバイルバージョンで同じページ要素を使用します。 デバイスに応じて、デザインは画面に合うように形を変えます。
モバイルデバイスでのWeb訪問者のUXの向上に加えて、レスポンシブデザインは、サイトに次の利点ももたらします。
- 柔軟性：レスポンシブデザインを使用すると、2つのWebサイトでデザインを変更することを考える必要がありません。 要素を修正または追加する必要があるのは1回だけで、モバイルバージョンとデスクトップバージョンの両方で実行できます。
- 費用対効果：デスクトップとモバイルサイトの運営には費用がかかる場合があります。 レスポンシブデザインを利用することで、これらの不要なコストを排除します。
- SEOの利点：記事の冒頭で説明したように、GoogleはSERPのモバイルフレンドリーサイトを優先するため、レスポンシブデザインは検索ランキングに役立ちます。
ただし、注意が必要です。 ほとんどのレスポンシブWebサイトは、デスクトップコンテンツの3列を1列に変換するだけです。
レスポンシブサイトは、すべての画面に適合するサイトです。 デスクトップからモバイルバージョンに同じデータをロードします。 たとえば、300ピクセルのモバイル画面に1,200ピクセルのデスクトップ写真を表示する場合、1,200ピクセル全体が読み込まれ、小さくレンダリングされます。
画像ソース：Giphy
画像に関しては、WordPressはすでにより良い体験に向けて大きな進歩を遂げています。 4.4バージョン以降、CMSはsrcsetHTML属性を使用して最大の画像でも自動的に拡大縮小します。
PNGとJPEGは、最も一般的な画像ファイル形式です。 しかし、最新の技術とデジタル画像の開発により、WebPおよびSVG形式がますます存在するようになっています。
SVGはベクター画像であり、任意の画面サイズに合わせて拡大縮小できます。 通常、SVGはPNGよりもはるかに小さいため、読み込み中の貴重な時間を節約できます。
ただし、それでも注意する必要があります。 ビデオ、写真、グラフィックスなどの視覚要素は、Webサイトの重要なパフォーマンスを損なうものの1つになる可能性があります。 メディアファイルサイズに厳密に定義されたルールはありませんが、ファイルが小さいほど読み込み時間が短縮されます。
デスクトップバージョンのWordPressサイトと同じ視覚要素が、モバイルデザインで常に機能するとは限らないことに注意してください。 そのため、大きな背景画像を削除し、モバイルでのUXを妨げない画像と交換する方がはるかに優れたオプションです。
例として、HubSpotのホームページを見てみましょう。 ヒーローセクションのグラフィックは、CRMが物事をどのように動かすかを完全に表しています。 各ウィンドウに多くの人がいるオフィスビルのリアルなイメージを想像してみてください。 これほどうまく機能しないでしょう。
出典：HubSpot
フォームの最適化
スマートフォンでフォームに入力することは、特にユーザーが送信するデータが多すぎて、フィールドをナビゲートしすぎる場合は、難しい場合があります。 そのため、モバイルフォームを簡素化し、最も重要な情報のみを収集する必要があります。
モバイルページのフォームはできるだけシンプルにしてください。 出典：Copyblogger
WordPressでは、WPFormsなどのプラグインをインストールして、モバイルWeb訪問者の変換に役立つレスポンシブフォームをすばやく簡単に作成できます。
開発者の観点からは、最も柔軟性のあるContact Form7を使用します。 ただし、そのUIは、フォームのカスタムデザインを必要とする技術者以外のユーザーにとってはユーザーフレンドリーではないことに注意してください。
Contact Form 7は、開発者の観点から優れたフォーム最適化ツールです。
まとめ
モバイルフレンドリーなWordPressレイアウトを持つことは、今日非常に重要です。 あなたのターゲットユーザーと検索エンジンがあなたのサイトを受け入れるために必要な要件です。
モバイルフレンドリーなWordPressWebサイトには、より多くのオーガニックトラフィックをもたらし、新しいリードや顧客を引き付ける力があります。
これで、何をテストするか、モバイルUIの問題を探す方法、および追加の問題を特定する方法をよりよく理解できました。 上記のアドバイスに従って、WordPressサイトのモバイルUXが常に適切であることを確認できます。
最高のCMSの背後にいる人々も、強化されたネイティブモバイルUXに向けて大きな進歩を遂げています。 モバイルブラウザでの画像のスケーリングからバックエンドの改善まで、別のCMSを使用するWebサイトの所有者よりも進んでいるので安心できます。
さらに質問がある場合、またはモバイルUXの問題やデバイスでの最新のWebエクスペリエンスの作成についてサポートが必要な場合は、遠慮なくご連絡ください。