どうもこんにちは、ウェブブラウザはChromeオンリーのブログ住民のあんこぱん（@ankopan01）です。

モバイルでウェブサイトを閲覧するために、Safari、Chrome、Firefoxなどのウェブブラウザがあります。

また、iOS、Android、WindowsなどOSのほか、ディスプレイサイズも様々です。

特にディスプレイサイズは、サイズが同じでも機種ごとに解像度が違うことから、利用しているスマートフォンによってモバイル用ページの見え方が違くなります。

そこで今回は、ブロガーはマスターすべし！と題して、PC版Chromeでモバイルサイトを確認する方法をご紹介します。

1.モバイルサイトの重要性

多くのブロガーの方はご存知かと思いますが、今年4月（2015年4月）から実施されたGoogleのモバイルフレンドリーによって、ウェブサイトやブログなどではモバイルサイト（スマートフォン最適化）の設置が重要となっています。

モバイルフレンドリーについては、次のページが参考になります。

モバイルフレンドリーアルゴリズムの重要性－Googleの新しいアルゴリズムにどう対応するべきか？ | SEO Japan

幸い、「はてなブログ」には簡単にモバイルサイトを構築できます。しかもカスタマイズも可能です。

また、レスポンシブデザインのテンプレートを導入することで、1つのデザインで、PCとモバイルの両方に対応することが可能です。

ちなみに、自身の運営するウェブサイトやブログがモバイルフレンドリーであるかどうかを分析できるページが提供されています。

こちらリンクからモバイルフレンドリーのテストができます。

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

実は、モバイルフレンドリーで合格しても、スマートフォンやタブレットの種類によってモバイル用ページの見え方は様々です。

なので、モバイルデバイスでのモバイル用ページの見え方を確認する必要があります。

2.PC版Chromeでモバイルサイトを確認する方法

PC版Chromeには、デベロッパーツールという便利な機能があります。

この機能を使うことで、モバイルサイトの確認ができます。

PC版Chromeでモバイルサイトを確認する方法
それでは実際にやってみましょう！

• PC版Chromeを起動し、表示したいウェブサイトまたはブログにアクセスします。

• ページを表示した状態で、Chromeの「設定メニュー＞その他のツール＞デベロッパーツール」を選択します。

• デバイスセレクトモードになりますので、表示させたいデバイス（例：iPhone6）を選択します。

• ウェブページを更新（Windowsの場合、F5を押下）します。

• 選択したデバイスでモバイル用ページが表示されます。

このように、PC版Chromeでモバイルサイトやモバイル用ページを確認することができます。

3.まとめ

対応機種がiPhone、iPad、Nexus端末、Kindle Fire、Galaxy端末と少ないですが、概ねメジャー機種を網羅しているので、ブログのモバイル用ページの確認に利用できるでしょう。

筆者の場合、Androidデバイスを所持しているので、iPhoneをメインにモバイル用ページの確認に利用しています。

本当はiPhoneとAndroidの両方を持っていると便利なのでしょうが、所持には費用もかかりますので、無料で確認できる今回の方法で代替しています。

ブログの内容によっては、モバイルデバイスごとにモバイル用ページ確認をする必要は多くありませんが、ディスプレイの解像度の違いによって画像がページからはみ出してしまう場合があるので、そのような場合に確認できる方法です。

ブロガーの方は、モバイル用ページを確認する裏技的な方法として参考にしてください。

それではまた。