レスポンシブの確認が簡単に! iPhone, iPad, Androidなど各モデルのサイズ、操作や動画にも対応した優れもの -モバイルシミュレーター

iPhoneをはじめ、PixelやGalaxyのAndroidスマホ、iPadやGalaxyのタブレット、ラップトップ、ワイドスクリーンなど各モデルのサイズでWebページを表示して確認ができるChromeの機能拡張を紹介します。

デベロッパーツールのデバイスモード(command+shift+M)で各デバイスの表示を確認できますが、モバイルシミュレーターはさらに多くのデバイス、スクリーンショット・動画撮影など機能も充実しています。また、モバイルシミュレーターでデベロッパーツールを使用することも可能です。

無料で、多くのデバイスをサポートしているのがいいですね。
WinでもMacでも、ツールバーと右クリックから1クリックで簡単に起動できます!

サポートしているデバイス一覧モバイルシミュレーター

モバイルシミュレーター -レスポンシブテストツール

モバイルシミュレーターの特徴

モバイルシミュレーターは、Webページをさまざまなデバイスのスクリーンサイズで確認・検証できるChromeの機能拡張です。

サイトのキャプチャ

Mobile FIRST

  • レスポンシブの確認を簡単にできます。
  • スクロール・スワイプなどの操作をはじめ、リンクをクリックしてのページ移動もできます。
  • iPhone 15モデル、Android 16モデル、タブレット 5モデル、Apple Watchなどほか7つのでデバイスに対応。
  • 各デバイスでのスクリーンショット。
  • 動画(アニメーションgif)にも対応。

サポートしているデバイスは、下記の通り。
「PRO」は有料ですが、それ以外は無料で利用できます。無料版でこれだけ利用できれば、十分ですね。

サポートしているデバイス一覧

サポートしているデバイス一覧

モバイルシミュレーターは動画にも対応しており、スクロールやリンクをタップしてのページ移動なども撮影できます。ここまでできて無料はすごいですね!

モバイルシミュレーターは動画にも対応

モバイルシミュレーターのインストール

Chromeの拡張機能なので、Chrome ウェブストアからインストールできます。通常の拡張機能と同様に「Chromeに追加」をクリックするだけです。

サイトのキャプチャ

モバイルシミュレーター -Chrome ウェブストア

インストールが完了すると、ツールバーからモバイルシミュレーターを利用できます。

モバイルシミュレーターの使い方

モバイルシミュレーターの使い方は、簡単です。
まずは、レスポンシブの確認したいページを表示します。

当ブログを表示

当ブログを表示

ツールバーからモバイルシミュレーターを起動すると、すぐに表示されます。また、右クリックからでも簡単に起動できます。

モバイルシミュレーターを起動

モバイルシミュレーターを起動

あとは、一覧からデバイスを選択するだけです。

一覧からデバイスを選択

一覧からデバイスを選択

横向きのランドスケープモードにも対応、右側のくるっとしてるアイコンをクリックします。

横向きのランドスケープモード

横向きのランドスケープモード

ライトモード・ダークモードにも対応、右下の太陽・月のアイコンをクリックします。

ライトモード・ダークモードにも対応

ライトモード・ダークモードにも対応

各デバイスでの表示は、スクリーンショットも撮影できます。

スクリーンショットの撮影

スクリーンショットの撮影

さらに、アニメーションgifによる動画も撮影できます。

動画の撮影

動画の撮影

タッチのポインターが表示されるので、それで操作しながら、動画を撮影できます。アニメーションgifはクリックするだけで、ダウンロードできます。

動画のダウンロード

動画のダウンロード

右下の歯車アイコン(設定)から、デバイスを非表示にしたり、ブラウザのヘッダ・フッタを非表示にしたり、デフォルトのデバイスを変更したりできます。

モバイルシミュレーターの設定

モバイルシミュレーターの設定

sponsors

top of page

©2024 coliss