あんこぱんのつぶやき

格安SIMフリースマートフォンを中心としたモバイルモバイルの情報ブログ。ときどき雑記も掲載します!

ブロガーはマスターすべし!PC版Chromeでモバイルサイトを確認する方法

スポンサーリンク

どうもこんにちは、ウェブブラウザは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を起動し、ウェブサイトまたはブログの表示したいページにアクセスします。

f:id:ankopan01:20151004083353p:plain

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

f:id:ankopan01:20151004083540p:plain

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

f:id:ankopan01:20151004131214p:plain

  • ウェブページを更新(Windowsの場合、F5を押下)します。
  • 選択したデバイスでモバイル用ページが表示されます。

f:id:ankopan01:20151004084025p:plain

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

3.まとめ

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

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

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

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

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

それではまた。