インターネットビジネスで自由に生きる!早期退職して海外移住したJINのブログ

スマホや携帯でのサイトの表示をブラウザで確認する方法!Google Chromeを使ってワンタッチで確認するその技とは?!

 2016/09/26   あとで読む

約 4 分で読めます

2016-09-26_113416

サイトやブログを運営する上で、うっかりしがちなのが「携帯やスマホでどう見えるか」の確認です。

「パソコンはないけど、スマホは勿論持ってます」っていう人がどんどん増えている中、このスマホなどモバイル機器でブログやサイトがどう見えるかの確認(モバイル表示の確認)は必須ともなっています。

パソコンでブログの記事を書いていると、わかってはいても中々スマホで改めて表示を確認してみる、といったことをしない場合も多いですが、いやいや、実はGoogle Chromeなど、お使いのブラウザで簡単に確認ができたりするんですね。

そもそもこのモバイル表示に対応しているかどうか(スマホなどで正しく見えるようになっているかどうか)は検索順位やアドセンスの審査通過にも非常に大きく影響してきます。

実はスマホを持ってないくて確認できないんですが… (; ̄Д ̄)o という場合には、もう利用しない手はないですね(笑)

グーグルクロームでスマホ表示確認

ここではブラウザは「グーグルクローム」を使っての確認の仕方を見てみます。グーグルクロームのインストールやそのメリットなどは以下の記事を参考にしてみてください。

関連記事 >
2015-09-03_221838
インターネットでいろいろと検索する時に使うブラウザ。あなたはいつも何を使ってますか? パソコンにしてもスマホにしても、必ず最初から入っているブラウザですが、 Windowsでは「e」マークの「IE」(イ

グーグルクロームを使ってモバイル表示を確認するのは非常に簡単で、手順は以下の2つだけ。

  • 1)グーグルクロームの開発者ツールを起動する
  • 2)モバイル表示切り替えのアイコンをクリック

では具体的に見てみましょう。

グーグルクロームの開発者ツールを起動する

まず確認したいブログやサイトをグーグルクロームで表示し、それ上で右クリックしてメニューを表示します。

2016-09-26_114454

↓↓↓↓↓↓

この表示されたメニューから、一番下あたりの「検証」をクリックしてグーグルの開発者ツール(デベロッパーツール)を表示します。

2016-09-26_114838

※)開発者ツール(デベロッパーツール)の一発起動
開発者ツール(デベロッパーツール)は「F12」キーで一発起動もできます

↓↓↓↓↓↓

モバイル表示切り替えのアイコンをクリック

続いて、表示された開発者ツールの一番上から、四角が重なったアイコンをクリック!

2016-09-26_115036

以上を行うと、左側に普通にパソコン表示されていたサイトが、以下のようにモバイル表示となってブラウザ上で確認できる!というわけですね。

2016-09-26_115127

表示するスマホの変更

一番上に、スマホなどのモバイル表示の種類とその画面の大きさ(この場合ではiPhone4で、画面の大きさは320×400)が表示されます。

ここで「iPhone4」をクリックすると、以下のように他に表示を確認したいモバイル機器が選択できるんですね。

2016-09-26_115424

全てを確認する必要もないと思いますが、一般によく使われているiPhoneシリーズ、タブレットではiPad, iPad miniなどは一通りどういった表示になるか見てみる、ということは必要だと思います。

設定の追加もできる!

実は設定の追加(確認したい画面の大きさの追加)もできます。上の画面にある表示の一番下の「Edit…」をクリックすると...

2016-09-26_115734

これでもか、というぐらいに色々スマホやタブレットが出てきます(笑)上図のように他にも一杯モバイル機器が登録されているんですね。

Blackberry, Galaxy, Nexus, Kindle, LG Optimus, Microsoft Lumia, Nokia …

この中から、このモバイル機器での表示が確認したい!といたものを選択して選択できる項目を増やすか(先頭の四角にチェックを入れる)、画面の大きさを独自に設定したい、という場合には、一番上の「Add custom device」をクリックすることで選択項目の追加ができたりします。

あまりに多くて目が回りますが、基本的にはよく利用されているiPhoneシリーズなどを確認する、ということで良いかと思います。

いやー、とっても便利ですね。^-^)

モバイル表示から元に戻すには

以上のようにしてスマホなどのモバイル表示を確認後、パソコンの表示に戻したい!という場合には、以下のようにすればOKです。

  • 元の表示に戻すには、
    • ①始めにクリックした「四角が重なったアイコン」をクリック、
    • ②または、グーグルの開発者ツール自体を閉じる

2016-09-26_123351

スマホ表示とは異なりますが、記事を実際に投稿する前にいろいろなブラウザで見え方を確認しておきたい、という場合があります。

そういった場合には、以下の記事を参照してみてください。

関連記事 >
2015-08-16_185553
ワードプレスで記事を書いていると、実際に投稿する前の下書きを誰か他の人に確認して欲しい、という場合があったりします。 そんな場合には、意を決して実際に投稿して記事のURLを確認して欲しい第三者に送るか、プレビュー画

スマホ表示とモバイルフレンドリーテスト

スマホ表示の確認の必要性

スマホなどのモバイル表示の確認がなぜ必要か、は言うまでもなく、スマホで記事が検索されて見られる場合が非常に多くなった、ということです。

単純に確認してみる、という以上に、そもそも運営するサイトやブログが、

実はスマホ表示に対応していなかった!

なんてことになっていないように1度は必ず確認してみてくださいね。

スマホ表示はグーグルでは「モバイル表示」(スマホやタブレットなどのモバイル機器における表示)といってますが、このモバイル表示に対応していない、とグーグルで判断されると、検索結果にも大きく影響してきます

ワードプレスを使っている場合では、特にテーマを変えた時や、テーマのバージョンアップをした、等の場合、またワードプレス以外では、何かレイアウトに関して変更を加えた場合では、あらためてグーグルから見て「モバイル表示」に対応している、と認識されるブログやサイトになっているかの確認が必要です。

モバイルフレンドリーテスト

グーグルから見て「モバイル表示に対応しているかどうか」の確認は、以下のページで簡単に確認ができます。

なぜか2つのテストツールが用意されてますが、どちらもテスト内容は同じです。各々のURLからみると、1つ目は以前からのもので、2つ目が新しいもののようですね。
(以前”ウェブマスターツール”とよばれていたものがありましたが、今は名称を変えて”グーグルサーチコンソール”となっています。URLを見ると、その名残が見えます)

ちなみに、1つ目のツールでこのサイト(tabibitojin.com)をテストすると以下のような表示になります。

2016-09-26_120624

「問題ありません。このページはモバイル フレンドリーです」と、ハッキリ言ってくれるところが嬉しいですね。

では、2つ目のツールで確認するとどうなるかと言えば...

2016-09-26_120750

”このページはモバイルフレンドリーなページのようです”
といった、今風な表現と謙虚な言い回し。

微妙にゆるい感じとアバウトなところが好き(笑)

今回のまとめ

  • スマホなどの表示確認は、グーグルクロームを利用すればパソコン上でも確認できる
  • 確認の仕方は、右クリックで開発者ツールを立ち上げて、それ用のアイコンをクリックするだけ
  • この開発者ツールでは、いろいろな種類のモバイル機器が選択できる
  • 最低限、良く使われているiPhoneシリーズなどは確認する

実際にお手持ちのスマホやタブレットで確認するのも良いですが、これが実は結構手間で面倒なんですね。

ここで見たように、ブラウザの機能を使うことで、作業中にそのままモバイル表示が確認できたりしますので、作業短縮、効率化を含めて、こういった便利機能はジャンジャン活用してみましょう。

時間短縮、効率化を少しでも行い、その分より良い記事作成、サイト作りに時間をかけるようにしましょうね。

ネットでの収益化については、以下のメルマガに登録してみてください。

早期退職して海外で奮闘する JIN のメールマガジン

時間や場所に縛られず稼いだJINが教える

~ 最短最速で月収10万円を手に入れる方法 ~

苗字(必須)

隣のあの人にも、思わず教えたくなる秘密

配信停止は、いつでもできます

お預かりした情報は保護されます

迷惑メールは一切配信されませんので、ご安心くださいね

この記事を読んだ人はこんな記事も読んでます

Message

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