サイトを訪問する人の半数以上がスマートフォンやタブレットでサイトを閲覧している可能性があることをご存知でしたか ? このガイドでは、レスポンシブテーマの選択からコンテンツの微調整まで、どの画面サイズでもシームレスなユーザーエクスペリエンスを提供するために必要な手順について説明します。
WordPress サイトでモバイル対応のテーマを選択することは、さまざまな端末でシームレスかつ最適化されたユーザーエクスペリエンスを提供し、アクセシビリティを向上させ、検索エンジンの表示順位に良い影響を与えるうえで重要です。
WordPress.com で提供されるテーマは、すべてモバイルレスポンシブです。つまりモバイルブラウザーでもデスクトップでも適切に表示されるようにデザインされています。
サードパーティのテーマを使用する場合は、モバイル対応がうたわれていること、モバイル端末で問題なく表示されることを確認してください。モバイルでのテーマの外観を管理するためのカスタマイズオプションや設定については、テーマのドキュメントをご確認ください。
多くの場合、モバイルレスポンシブのテーマを選択した後は、 デフォルトのコンテンツを変更して独自にカスタマイズすることになります。サイトを WordPress エディターで編集する際は、すべての端末で問題なく表示されるようにすることが重要です。
WordPress に独立した「モバイルエディター」はありません。サイトに加えた変更はモバイル端末とデスクトップ端末の両方に反映されます。サイトにモバイル対応のテーマを使用している限り、コンテンツはサイズを問わず、すべての画面に対応します。このことを「レスポンシブネス」といいます。
エディターの右上にある「プレビュー」アイコンをクリックすると、訪問者にサイトがどのように表示されるかを確認できます。「モバイル」または「タブレット」を選択すると、エディターで大まかな表示を見ることができます。
ここで大まかな表示としている理由は、エディタービューの多くの要素がサイトのテーマから情報を得ているためです。テーマのスタイルはエディターには表示されません。新しいタブでページをプレビューするか、端末のブラウザーでサイトを表示した場合のみ表示されます。テーマのスタイルが適用されたコンテンツを表示するには、「新しいタブでプレビュー」オプションをクリックします。
「新しいタブでプレビュー」オプションをクリックすると、ブラウザーの検証ツールを使用してモバイルバージョンを表示できます。ブラウザーの検証モードを使用してモバイルビューでページや投稿がどのように表示されるかをプレビューする手順は次のとおりです。
- WordPress エディターの右上にある「プレビュー」アイコンをクリックします。
- 「新しいタブでプレビュー」オプションを選択します。
- プレビューページを右クリックして「検証 」 (Chrome、Firefox、Edge) または「要素の検証」 (Safari) をクリックします。
- ブラウザーの検証モードでモバイルアイコンをクリックしてプレビューをモバイルビューに切り替えます。
変更をパブリッシュした後、一般のユーザーがサイトを閲覧するのと同じように、ご自分のスマートフォンやタブレットを開いてサイトを表示し、意図したとおりに表示されているか最終確認をすると安心です。
サイトのデザインのレスポンシブネスを最大限に高め、モバイル、タブレット、デスクトップでコンテンツを適切に表示するためのヒントを紹介します。
画像内のテキストが画像自体に配置されている場合、画面が小さくなると次のようにテキストが途切れることがあります。
これは画像内に配置されたテキストがレスポンシブでないためです。
WordPress エディターを使用すると、画像の上にテキストを書き込むことができます。この方法で画像にテキストを追加すると、テキストがレスポンシブになります。以下の動画では、カバーブロックを使用して上の画像と同じものを再現し、画面が小さくなった場合のレスポンシブネスを実証しています。
ページのフォントサイズのレスポンシブネスを最大限に高めるには、ピクセル (px) の代わりに em や rem単位を使用します。フォントサイズにピクセルを使用すると、基本的に特定のフォントサイズをページにハードコードします。つまり画面サイズに関係なく、フォントは常に指定したとおりのサイズで表示されます。一方、em 値と rem 値は相対的なサイズ指定単位であり、読者の画面の表示可能なスペースに応じてサイズが加減されます。
モバイルレイアウトにテキストメニューを使用する代わりに、オーバーレイメニュー (別名「ハンバーガーメニュー」または「ケバブメニュー」) というモバイル用メニューを表示するようにサイトのナビゲーションブロックをカスタマイズできます。この機能により、ヘッダーをよりコンパクトにすることができ、モバイルでのメニューの見やすさと使いやすさが向上します。
一部のブロックには、小さい画面でスペースを有効活用するための「モバイルで重ねる」オプションがあります。デスクトップ画面ではコンテンツが横並びで表示される場合、小さい画面ではコンテンツが縦並びになり、モバイルユーザーにとって読みやすくなります。
「モバイルで重ねる」設定は次のブロックで使用できます。
ボタンやメニューは、複数行に折り返すことで小さい端末でも読みやすくなります。
「複数行への折り返しを許可」オプションは、次のブロックのレイアウト設定で使用できます。
AMP (Accelerated Mobile Pages) は、モバイル端末でほぼ瞬時に読み込まれるサイトを作成できるサードパーティのオープンソースフレームワークで、サイト訪問者のブラウジングエクスペリエンスを高速化します。サイトに AMP を追加するには、AMP プラグインをインストールします。2022年6月13日以前に作成されたプラグイン対応の WordPress.com サイトでは、 AMP プラグインがデフォルトでインストールされていました。
ただし AMP を使用する場合、モバイルでの訪問者がサイトをすばやく読み込めるようにするため、サイトのさまざまな機能 (レイアウト、各種機能) が削除されます。AMP を念頭に置いてテーマが作成されている場合のみ使用することをお勧めします。WordPress.com では、すべてのテーマがすでにモバイルに対応しているため、AMP を使用しなくてもモバイルに最適化されたエクスペリエンスを提供できます。
サイトで表示の問題が発生していて、 AMP がインストールされている場合は、 AMP プラグインを無効化してサイトのパフォーマンスが改善されるかどうかを確認することをお勧めします。サイトに「モバイルバージョンを終了」というオプションが表示されていて、これを完全に削除する場合は、AMP プラグインも無効にしてください。
サイトでしばらく AMP を使用していた場合、 Google は結果をすぐには更新しないため、無効化した後もしばらくの間は AMP ページが表示され続けることに注意してください。AMP を無効化した後にページリダイレクトを設定することもできます。検索エンジンは AMP ページの URL をインデックス化しますが、それらの URL をリストから削除するには時間がかかります。そのためモバイルでの訪問者の一部が404エラーページに転送される可能性があります。
人気の無料転送プラグインは複数あり、その中から選択できます。301リダイレクトを設定する際に、/(.*)\/amp のような正規表現が必要になる可能性があります。何度かテストしてリダイレクトが正しく設定されていることを確認し、転送プラグインの手順ガイドを参照することをお勧めします。
日本語サポート 
コメントを投稿するにはログインしてください。