今やスマートフォンを持っていない人の方が少ないというくらい、「スマホ」が普及しております。
スマートフォンからは、PC同様にWEBサービスが利用できる、まさに「PCを1台携帯」しているのとほぼ変わらない便利さがあります。
私も含め、ブログ等のネットコンテンツを配信する人々にとって、スマートフォンのページの作りというのは外せなくなっております。
あのグーグルでも、スマートフォン用に対応していないページは検索順位で不利になると発表があったくらい、スマートフォンからのアクセスが多いということが伺えます。
パソコン画面で見るのと、スマホ画面で見るのとでは、表示が異なりますよね。
そして、レイアウトを編集したり、記事を更新すると実際にスマホで自分のサイトを開いて確認する人も多いでしょう。
ただし、編集や更新するたびにスマホ画面で自サイトを開くのも面倒だとは思いませんか？
そこで、ぜひ活用していただきたいのがグーグルクローム（Google Chrome）の「デベロッパーツール」です。
このデベロッパーツールでは、簡単にパソコン画面と、スマートフォン画面に切り替えて表示確認できる非常に便利な機能です。
「Google Chrome」デベロッパーツールの使い方
Google Chromeをお持ちではない方は、まずはダウンロードする必要があります。
Google Chrome：ダウンロードページ（パソコン用）
https://www.google.co.jp/chrome/browser/desktop/
Google Chromeで私のブログ（当ブログ）を開いて説明していきます。
まずは、右上の横三本線の「メニュー」をクリックします。
そうするとメニュー一覧が開き、次に「その他のツール」を選択して出てきたメニューの一番下に「デベロッパーツール」があります。
そのデベロッパーツールをクリックしてください。
デベロッパーツールを開くと、画面ひだり側にパソコンとスマートフォンの表示が出てきます。
矢印の「青色」で表示されているところをクリックすると、パソコンとスマートフォンの表示切替が簡単に出来ます。
Google Chromeは、デベロッパーツールを開くだけで更新作業やレイアウト編集しながらすぐ確認できるので本当に便利ですよ。
矢印のスマートフォン機種が表示されているところをクリックすると、色んなバリエーションの機種名がズラリと出てきます。
各機種名をクリックすると、画像が切り替わってその機種ごとの表示のされ方が確認できるんですね。
スマートフォンは、基本的に1台しか持っていないという方の方が多いと思いますので、ここでは自分で持っていない機種の表示方法を確認するのに役立つのです。
ちなみに、一番下の「Edit・・・」をクリックすると、さらに多くの機種が選べるようになっているので必要に応じて利用するのもいいでしょう。
デベロッパーツールで表示される画面は、普通にインターネットを利用するように、ツール上でコンテンツをクリックして、そのコンテンツも見れるようになっています。
なので、いちいちページを変えてデベロッパーツールを開くという作業をしなくて大丈夫です。
では、上記の赤枠で囲った記事をクリックして、そのコンテンツに飛んでみます。
自分で作成した記事も、スマートフォンでどうやって表示されているのかを簡単に見ることができます。
特に「アドセンス広告・アフィリエイトなど」と表示している場所に、アドセンス広告を張っている方が多く見られますが、ここの広告の右端が画面を突き抜けてはみ出してしまっているということも多くあるんです。
グーグルでは、アドセンス広告がスクロールしなければ見えない位置まで広告が押しやられてしまっているものを禁止とし、そのようなサイトに警告を促すことがあります。
利用規約に違反しないよう、アドセンス広告を張っている方は、広告の表示もしっかりと確認するようにしましょう。