WordPressサイトがスマホでどう表示されるかをPCから確認する方法

チャオ(・∀・)♪

 

質問
WordPressサイトのコンテンツがスマホでどう見えているか確認するために、いちいちスマホを起動してサイトにアクセスするのは面倒くさい…。PCで手っ取り早く確認する方法はありませんか?

 

こんな質問に答えます。

 

MFI(モバイルファーストインデックス)が2021年3月以降から殆どのWebサイトで本格的に実行され、今後はよりモバイル版ページの品質が重要になってくる流れです。

 

つまり、「自分の作ったサイトやコンテンツのページレイアウトが、スマホで見ても美しく綺麗になっているか?」を重視する必要があるってことです。要はレスポンシブ対応ですね。

 

しかし、それを確認するために毎回わざわざ手元のスマホを起動してサイトにアクセスするのは、ちょっと面倒ですよね。

 

ということで今回は、PCでの操作だけで、スマホで見た場合のサイトレイアウトがどうなっているのかを確認する方法について解説していきます。

 

 

WordPressサイトがスマホでどう表示されるかをPCから確認する方法

 

方法は2つあります。

 

  1. WordPressのテーマカスタマイザーを使う方法
  2. Google Chromeのディベロッパーツールを使う

 

順番に解説していきます。

 

WordPressのテーマカスタマイザーを使う方法

 

WordPressメニューの「外観」→「カスタマイズ」を開きます。

 

 

左側にカスタマイズメニューが展開されるので、右下のスマホアイコンをクリックします。スマホアイコンの左にあるのは、iPadなどのタブレットでの表示切り替えアイコンです。

 

 

クリックすると、右側に出ているサイトプレビューがスマホ表示になります。

 

 

自身が使っているスマホの機種によって若干見え方が異なりますが、「モバイルでのレイアウトがどうなっているか?」の確認に役立ちます。

 

Google Chromeのディベロッパーツールを使う

 

Google Chromeなどのブラウザには、開発者用のディベロッパーツールというのが標準で備えられています(Edgeにもあります)。これを使うことでも確認できます。

 

まず、ページの何もない所で右クリックをしてメニューを開き、「検証」をクリックします。

 

 

右側でディベロッパーモードが立ち上がるので、左上のアイコンをクリックします。

 

 

クリックすると、左側に表示されているサイトプレビューがスマホ表示に切り替わります。また、上の「□×□」の数値を変更すると表示サイズが変わります。

 

 

「Responsive」のプルダウンを展開させ、各機種に応じたレスポンシブに切り替えることも可能です。

 

 

ちなみに、ここをクリックすると横向きの表示になります。多分iPad用だと思うのですが。

 

 

確認方法については、以上です。

 

 

まとめ

 

できる限り、コンテンツを作成した時はスマホでの表示も確認しておいた方が良いですね。いくらPC版ページの出来がよくても、モバイル版ページが微妙だとページランクを上げにくい的なことをGoogleも言っているので。

 

将来的に Google のアルゴリズムはモバイル版のコンテンツを主に使用するようになります。つまり、ページのランキングを決定したり、構造化データを理解したり、検索結果にスニペットを表示する際も、モバイル版のコンテンツが使用されるようになります。

Google ウェブマスター向け公式ブログ [JA] : モバイル ファースト インデックスに向けて

 

それでは、ここまで読んでいただきありがとうございました。

チャオ(・∀・)

 

PS.
記事が参考になったら、ぜひRSS登録お願いします!毎日更新しているので、RSSとの相性バツグンですよ(・∀・)♪

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です