Stable Life
サイトアフィリやメルマガを駆使して稼ぐ元公務員社長井野瑛太のオフィシャルブログ
サイト制作

スマートフォンでの表示確認をGoogleChromeブラウザ標準機能のみで行う方法【動画解説】

近年では、スマートフォンの普及が急速に進んでいます。

運営するサイトのジャンルにもよりますが、アクセス解析を見ていると、かなりの割合でスマートフォンからのアクセスがあることが分かります。

このことからも、サイト運営者は、パソコンのみならずスマートフォン等から、どのようにサイトが表示されているかについても考慮してサイト作りを行っていく必要があります。

今回は、スマートフォン等の実機を持っていなくても、ブラウザの標準機能のみで行う方法としてGoogle Chromeを用いた方法について動画を用いて丁寧に解説していきたいと思います。

忙しい方は、動画下の倍速視聴方法をご覧ください。

YouTube動画を倍速再生する方法【動画解説】
YouTube動画を倍速再生する方法【画像解説】

せっかくの運営サイトに訪れてくれた訪問者が
サイト表示の不具合等のために、離脱してしまわないように、
サイト運営者は、パソコン以外の端末から見た時の
サイト表示についてもチェックして気を配る必要があります。

そのような際には、下記のような方法により確認することができます。

・実機により確認する方法
 自分でスマートフォンを持っていれば、その端末を用いて実際にサイトの表示を確認することが出来ます。
 しかしながら、いまだにフィーチャーフォン(ガラケー)ユーザーも相当数いるようですので、必ずしもスマートフォンを持っているサイト運営者ばかりではないでしょうし、すべての端末を網羅することは、スマートフォン収集が趣味のような方でない限り出来ないでしょう。

・ウェブサービスを利用する方法
 下記のサイトを利用すれば、複数のパターンのブラウザサイズで一度にページを表示してくれますので、レスポンシブ対応のチェックをする際などには便利です。

⇒ Responsive Design Testing

 こちらのサービスも使いやすいです。

⇒ screenfly

・ソフトウェアを利用する方法
 こちらは、ダウンロードの上、インストールして利用しますので、オフラインでの表示確認が可能です。
 以前は、無料で利用できたようですが、2014年11月現在は有料になっている模様です。

⇒ Mobilizer

・ウェブブラウザの拡張機能を利用する方法
 GoogleChromeでもFirefoxでも各種端末での表示をシミュレーションできる拡張機能(アドオン)があります。
 ブラウザのバージョンアップ等により、突如利用ができなくなることもありえます。

・ウェブブラウザのデベロッパーツールを利用する方法
 今回ご紹介する方法ですが、Google Chromeのデベロッパーツールを利用すれば、拡張機能を導入することなく各種端末での表示確認が行えます。
 今回、この方法について動画内で詳細かつ丁寧に解説していますので、ぜひご覧になってくださいね。

動画でなく、文字と画像での解説をご覧になりたい方は下記の記事をご覧ください。
スマートフォンでの表示をブラウザ標準機能のみで行う方法【画像解説】