レスポンシブの確認が簡単に！ iPhone, iPad, Androidなど各モデルのサイズ、操作や動画にも対応した優れもの -モバイルシミュレーター
Post on:2022年8月4日
sponsors
iPhoneをはじめ、PixelやGalaxyのAndroidスマホ、iPadやGalaxyのタブレット、ラップトップ、ワイドスクリーンなど各モデルのサイズでWebページを表示して確認ができるChromeの機能拡張を紹介します。
デベロッパーツールのデバイスモード（command+shift+M）で各デバイスの表示を確認できますが、モバイルシミュレーターはさらに多くのデバイス、スクリーンショット・動画撮影など機能も充実しています。また、モバイルシミュレーターでデベロッパーツールを使用することも可能です。
無料で、多くのデバイスをサポートしているのがいいですね。
WinでもMacでも、ツールバーと右クリックから1クリックで簡単に起動できます！
モバイルシミュレーターの特徴
モバイルシミュレーターは、Webページをさまざまなデバイスのスクリーンサイズで確認・検証できるChromeの機能拡張です。
- レスポンシブの確認を簡単にできます。
- スクロール・スワイプなどの操作をはじめ、リンクをクリックしてのページ移動もできます。
- iPhone 15モデル、Android 16モデル、タブレット 5モデル、Apple Watchなどほか7つのでデバイスに対応。
- 各デバイスでのスクリーンショット。
- 動画（アニメーションgif）にも対応。
サポートしているデバイスは、下記の通り。
「PRO」は有料ですが、それ以外は無料で利用できます。無料版でこれだけ利用できれば、十分ですね。
サポートしているデバイス一覧
モバイルシミュレーターは動画にも対応しており、スクロールやリンクをタップしてのページ移動なども撮影できます。ここまでできて無料はすごいですね！
モバイルシミュレーターは動画にも対応
モバイルシミュレーターのインストール
Chromeの拡張機能なので、Chrome ウェブストアからインストールできます。通常の拡張機能と同様に「Chromeに追加」をクリックするだけです。
インストールが完了すると、ツールバーからモバイルシミュレーターを利用できます。
モバイルシミュレーターの使い方
モバイルシミュレーターの使い方は、簡単です。
まずは、レスポンシブの確認したいページを表示します。
当ブログを表示
ツールバーからモバイルシミュレーターを起動すると、すぐに表示されます。また、右クリックからでも簡単に起動できます。
モバイルシミュレーターを起動
あとは、一覧からデバイスを選択するだけです。
一覧からデバイスを選択
横向きのランドスケープモードにも対応、右側のくるっとしてるアイコンをクリックします。
横向きのランドスケープモード
ライトモード・ダークモードにも対応、右下の太陽・月のアイコンをクリックします。
ライトモード・ダークモードにも対応
各デバイスでの表示は、スクリーンショットも撮影できます。
スクリーンショットの撮影
さらに、アニメーションgifによる動画も撮影できます。
動画の撮影
タッチのポインターが表示されるので、それで操作しながら、動画を撮影できます。アニメーションgifはクリックするだけで、ダウンロードできます。
動画のダウンロード
右下の歯車アイコン（設定）から、デバイスを非表示にしたり、ブラウザのヘッダ・フッタを非表示にしたり、デフォルトのデバイスを変更したりできます。
モバイルシミュレーターの設定
sponsors
