Web制作の方に便利なChrome拡張機能で
サイトのレスポンシブテストを各種デバイスで
視覚化して分かりやすくチェックできます。
ヘッダーやスクロールバーを非表示化も可能です。
![Web制作に便利!! サイトのレスポンシブテストが可能なChrome拡張機能 『モバイルシミュレーター』](https://pc.mogeringo.com/wp-content/uploads/2023/05/mobilesimu-thumb.jpg)
目次
リンク先
インストール
![Web制作に便利!! サイトのレスポンシブテストが可能なChrome拡張機能 『モバイルシミュレーター』](https://pc.mogeringo.com/wp-content/uploads/2023/05/mobilesimu1.jpg)
上記リンク先ページをChromeで開き「Chromeに追加」をクリックします。
![Web制作に便利!! サイトのレスポンシブテストが可能なChrome拡張機能 『モバイルシミュレーター』](https://pc.mogeringo.com/wp-content/uploads/2023/05/mobilesimu2.jpg)
拡張機能を追加をクリックするとインストールが完了します。
![Web制作に便利!! サイトのレスポンシブテストが可能なChrome拡張機能 『モバイルシミュレーター』](https://pc.mogeringo.com/wp-content/uploads/2023/05/mobilesimu3.jpg)
インストール完了時にピン留めしてくださいと表示されるので画面に従ってピン留めをします。
使い方
![Web制作に便利!! サイトのレスポンシブテストが可能なChrome拡張機能 『モバイルシミュレーター』](https://pc.mogeringo.com/wp-content/uploads/2023/05/mobilesimu5.jpg)
モバイルテストしたいページでピン留めしたアイコンをクリックすると
モバイル画面で開いていたWebページが表示されます。
Chromeのデベロッパーでもモバイルでのレスポンシブのテストは可能ですが、
スマホなどの端末の外観も表示されるのでこちらの方が分かりやすいです。
![Web制作に便利!! サイトのレスポンシブテストが可能なChrome拡張機能 『モバイルシミュレーター』](https://pc.mogeringo.com/wp-content/uploads/2023/05/mobilesimu6.jpg)
画面右上のボタンから端末を変更も可能です。AndroidやiPhone、タブレットやスマートウォッチなども
用意されていて各種端末で表示チェックが可能です。
PROと書かれている端末は有料プランになります。
![Web制作に便利!! サイトのレスポンシブテストが可能なChrome拡張機能 『モバイルシミュレーター』](https://pc.mogeringo.com/wp-content/uploads/2023/05/mobilesimu7.jpg)
iPhone12で表示確認をしてみました。Safariなどブラウザのツールバーやヘッダーなども表示されるので
細かくチェックしたい場合に便利です。
![Web制作に便利!! サイトのレスポンシブテストが可能なChrome拡張機能 『モバイルシミュレーター』](https://pc.mogeringo.com/wp-content/uploads/2023/05/mobilesimu8.jpg)
ノートパソコンなどにも対応しています。
幅広くレスポンシブデザインのチェックが可能です。
![Web制作に便利!! サイトのレスポンシブテストが可能なChrome拡張機能 『モバイルシミュレーター』](https://pc.mogeringo.com/wp-content/uploads/2023/05/mobilesimu10.jpg)
設定では端末のブラウザのツールバー、ヘッダーやフッターなどの非表示、キーボードの表示有無、
デバイス固有のスクロールバーの表示有無など細かく設定も可能で
モバイル環境を再現が可能です。
一般的なWebサイトではここまで必要なさそうですが、より細かく確認したい場合、
グリッドデザインなど動作するようなWebサイトではしっかりとチェックできそうです。
コメント