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