今やインターネットサイト（ホームページ）をパソコンではなくスマホやタブレットで見る時代。

ブログやホームページを作って、モバイル用の機能を追加したりしてみたけど、実際どのように表示されているのか、スマホやタブレット持ってないから確認できない・・・を解消するGoogle Chrome用拡張ツール「MobileLayouter」を紹介します。

Google Chrome以外のブラウザでも同様のツールがあるかもしれませんが、私自身がChromeユーザーなので。

WordPressでサイト作成している際に便利なのが、表示する端末によって自動的にレイアウトを整形してくれるプラグイン「Wp Touch」。これを使うと普通にサイトを作っているだけで、勝手にモバイル用ページを生成してくれるのでとても重宝しているのですが、いったいどのように表示されているかは見当がつかないことないですか？？

これを解消できるのがGoogle Chromeでサイトのモバイル表示が確認できる拡張機能「MobileLayouter」です。

導入方法は他の拡張機能と同じでこちらから「MobileLayouter」を追加するだけです。

追加したら、Chromeブラウザ画面の右上（Chromeの設定ボタンの左側）に「ML」と書いたマークが出てきますので、それをクリックして、表示する環境を選択するだけで、サイトがモバイル環境でどのように表示されるかを確認することができます。

対応しているのは、iphone/ipad/Nexusなどですが、独自サイズのものも追加することができますし、９０度回転させた（縦／横）のレイアウト確認もできますので、ホームページを作られている方は是非導入していただきたいGoogle Chromeの追加機能です。

使ってみてとても便利だってので紹介しました。

Google Chromeの基本機能を使う方法

「MobileLayouter」でも表示はできますが、環境やサイトの設定によってはモバイルとして認識されないことがあり一部が実際とは異なってしまう現象が出ることがあります。

Google Chromeにはデベロッパーツールという機能があり、これを使うとCSSの調整に必要な情報を収集できたり、サイトの表示速度を表示することができたり、今回紹介したモバイルやタブレットでの表示テストを行うことができます。

こちらに詳しく使い方を書いていますので興味のある方はついでにご覧ください