モバイルフレンドリーなウェブサイトのための7つのWordPressのヒント

見栄えの良いデスクトップWebサイトと正しく機能しないモバイルサイトがあることほど悪いことはありません。

ほとんどの設計修正は単純ですが、訪問者がモバイルデバイスで閲覧している間、サイトにとどまりたい場合は注意が必要です。

この記事では、モバイルフレンドリーな7つのWebサイトの問題とその修正について説明します。

  • 加えられた変更がモバイルに(Are)表示(Mobile)されない
  • 不親切なナビゲーション
  • レスポンシブレイアウト(Responsive Layout)が突然機能しなくなる
  • 画像の読み込みに時間がかかりすぎる
  • 最も重要なコンテンツは明白ではありません
  • 多すぎる情報
  • 小画面のデータ

モバイルフレンドリーなウェブサイトの更新が表示されない(Mobile Friendly Website Updates Not Showing Up)

あなたはちょうどあなたのウェブサイトを更新するのに多くの時間を費やしました。デスクトップでは見栄えがしますが、モバイルデバイスには表示されません。

最も一般的な理由の1つは、キャッシュです。モバイルブラウザに、以前にダウンロードした古いバージョンのサイトが表示されている可能性があります。もう1つの理由は、Webサイトが古いバージョンのページを保持していて、変更が表示されていないことである可能性があります。

これが問題である場合は、改訂版をダウンロードするためにキャッシュをクリアする必要があります。WP Super Cache、W3 Total Cache、またはWP Fastest Cacheなどのキャッシュプラグインは、この問題の解決に役立ちます。

以下は、ウェブサイトのキャッシュとブラウザをフラッシュして、新しいバージョンをモバイルフレンドリーサイトに表示できるようにするための4つの手順です。

  1. デスクトップとモバイルデバイスでブラウザを数回更新します。
  2. さまざまなモバイルデバイスでWebサイトをテストします。
  3. キャッシュプラグインを使用してサイトをクリアします。
  4. ホスティング会社に問い合わせて、サーバー上にクリアする必要のある別のキャッシュシステムがあるかどうかを確認してください。

不親切なナビゲーション(Unfriendly Navigation)

モバイルデバイスでうまく機能するナビゲーションメニューを作成するのは難しい場合があります。Webサイトのナビゲーションに多くの項目とサブメニューがある場合、小さな画面ですべてを圧縮するのはさらに難しいです。

たとえば、Webサイトのナビゲーションに3つまたは4つのアイテムしかない場合、モバイルでは問題なく表示されます。ただし、アイテムやサブメニューが多い場合は、それらが重なり合って混雑しているように見えます。

以下(Below)は、モバイルフレンドリーなWebサイトでこの問題を解決するためのいくつかの方法です。

  • ナビゲーションをモバイルデバイスのドロップダウンメニューに変えます。
  • ナビゲーションメニューをブロック要素として表示し、垂直に表示されるようにします。
  • スペースを節約するために切り替えることができるメニューアイコンを使用します。
  • jQueryを使用してモバイルナビゲーションメニューを作成します。
  • ハンバーガー(Hamburger)メニューを使用します（多くのテーマにはこれがオプションとして含まれているか、プラグインを使用( use a plugin)できます）。

レスポンシブレイアウトが突然機能しなくなる(Responsive Layout Stops Working Suddenly)

モバイルフレンドリーサイトが突然機能しなくなった場合は、サイトのプラグインが原因である可能性があります。

新しいプラグインをインストールしたり、既存のプラグインを更新したりすると、レスポンシブレイアウトに影響を与える他のプラグインとの競合が発生する可能性があります。

まず、各プラグインを一度に1つずつ非アクティブ化して、それが原因であるかどうかを確認します。それらを一度に非アクティブ化しないでください。そうしないと、どのプラグインが原因である可能性があるかわかりません。

コード(Code)の変更も考えられる原因です。誤ってまたは意図的にコードを変更した場合は、元のコードベースを復元して、レスポンシブWebサイトが再び機能するかどうかを確認してください。

サイトのモバイル応答性を確認するときは、常にモバイルデバイスでテストする必要があります。 

デスクトップのブラウザウィンドウのサイズを変更すると機能するように見えても、モバイルでは正しく表示されない場合があります。

HTMLヘッダーファイルから1行のコードが欠落していると、レスポンシブデザインが破損する可能性があります。この1行の欠落したコードにより、モバイルデバイスは、表示しているサイトがフルサイズのWebサイトであると見なします。

レンダリングされるサイトは、ビューポートのサイズ（ユーザーに表示されるWebページの領域のサイズ）になります。

モバイルフレンドリーサイトを修正するには、ヘッダーセクションに次のコード行を追加します。

<meta name=”viewport” content=”width=device-width”>

テーマが更新されると、このコードが消えることがあります。

画像の読み込みに時間がかかりすぎる(Images Are Taking Too Long to Load)

画像を最適化し、画像ファイルのサイズ(reducing image file size)を小さくすることは理にかなっています。最適化されていない大きな画像は、Webページの読み込み速度を低下させる可能性があります。これは、モバイルユーザーにとって苛立たしいものになる可能性があります。

WordPressバージョン4.4以降では、サーバー上の画像の最小バージョンが自動的に提供されます。

すでに最新バージョンのWordPress(WordPress)を実行しているが、サイトの読み込み速度が十分でない場合は、次のことができます。

最も重要なコンテンツは明白ではありません(Most Important Content Isn’t Obvious)

一部のWebサイトには、デスクトップで開いたときに空のスペースを埋めるために多くの不要なコンテンツがロードされています。

モバイルユーザーを意識せずに開発されたウェブサイトは、一般的にこのカテゴリに分類されます。これらのサイトのロードには、より多くの時間と帯域幅が必要です。

ページがモバイルデバイス用に適切に設計されていない場合、コンテンツの一部は、多くのスクロールなしではモバイルに表示されない可能性があります。

ほとんどの場合、Webページ上の要素は、コンピューターでは一方向に見え、モバイルデバイスでは完全に異なります。

たとえば、3つの列がある価格設定ページには、コンピューター上でそれらを並べて表示します。

ただし、モバイルデバイスでは、画面サイズが小さいため、列は互いに積み重ねられます。この動作は予想されるものです。

価格(Make)表がウェブページの一番上にあることを確認して、モバイルで表示したときに最初に表示されるようにします。テーブルの上にたくさんのテキストがある場合、モバイルユーザーはそれを表示するために下にスクロールする必要がありますが、表示されない場合があります。

最適なモバイルユーザーエクスペリエンスを実現するには、最も重要なコンテンツをページの上部に配置します。ユーザーがコンテンツを表示する前に多くのスクロールを行う必要がある場合、おそらくそうはなりません。

多すぎる情報(Too Much Information)

テーブル、マルチステップフォーム、高度な検索機能などの複雑なユーザーインターフェイス要素を備えたサイトでは、モバイルユーザーエクスペリエンスが低下する可能性があります。

これらの要素には情報が多すぎるため、モバイル画面が混雑し、ユーザーが必要な情報を見つけるのを妨げる可能性があります。

1つのアプローチは、モバイルユーザーから一部のコンテンツを削除または非表示にすることです。ただし、これは、これらの要素にアクセスしたい訪問者にとって理想的なソリューションではありません。

この問題を回避するには、モバイルフレンドリーサイトを可能な限り最適化します。また、ウェブサイトのコア構造に焦点を合わせながら、不要な要素を削除します。

小さな画面のデータ(Data For Small Screens)

行と列が多い複雑なテーブルは、小さなモバイル画面で表示すると問題になる可能性があります。最善の解決策は、レスポンシブテーブルを使用することです。

WP Responsive Tableなどのプラグインを使用すると、これを簡単に実行できます。

上記の料金表と同様に、モバイルデバイスで表示すると、小さい画面に合わせて列が積み重ねられます。

モバイルデバイスにデータを表示する他の方法は次のとおりです。

  • 水平スクロールの必要性を回避するために、グリッドレイアウトなしで小さなテーブルを作成します。
  • 小さい画面にぴったり合うようにテーブルを横に倒します。
  • 大きなテーブルを、フルバージョンにリンクする小さなテーブルに置き換える。
  • 表を円グラフに変換します。

モバイルの使用が飛躍的に増加しているため、ビジネスWebサイトをモバイル対応バージョンで最適化することが不可欠です。上記の手順に従うことで、機能を犠牲にすることなくユーザーエクスペリエンスを向上させます。(Enhance)

また、常にサイトのパフォーマンスを監視し、パフォーマンスとユーザーエクスペリエンスを向上させるために、必要に応じて微調整する必要があります。



七夏 田辺

About the author

私は 10 年以上の経験を持つコンピューターの専門家です。余暇には、オフィスのデスクを手伝ったり、子供たちにインターネットの使い方を教えたりしています。私のスキルには多くのことが含まれますが、最も重要なことは、人々が問題を解決するのを助ける方法を知っていることです. 何か緊急のことを手伝ってくれる人が必要な場合や、基本的なヒントが必要な場合は、私に連絡してください!


Related posts