【レスポンシブ】ビジュアル重視なモバイルデバイスシミュレータ機能拡張「Mobile FIRST」

レスポンシブサイト制作に必須なグーグルクロームのデベロッパーツールなのですが、使いづらいわけではないのですが、何かこうデベロッパーツールはあまりカッコよくない。上はデベロッパーツール、iPhone 12 Proでのシミュレーション。

もう少しプレゼンでも利用できそうなものがないものかと探しておりました。

ビジュアル重視なモバイルデバイスシミュレータ機能拡張「Mobile FIRST」

そしたらいいのがありました！グーグルの機能拡張「Mobile FIRST」。

Mobile FIRSTというフランスの企業のようです。名前がそのままだから詳細がヒットしづらい。

Mobile FIRSTは、ChromeとFirefoxの拡張機能で、ワンクリックでリアルなスマートフォンやタブレットを簡単にシミュレートできます。 Webサイトのテスト、プレゼンテーションや電子メール用の美しいスクリーンショットやスクリーンキャストの作成、クライアント向けのデモの作成などに非常に役立ちます。

インストール

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

さっそくインストールします。上記ページにてグーグルクローム機能拡張「モバイルシミュレーター-レスポンシブテストツール」をインストールすれば利用できます。

ブラウザに直接URLを打ち込むだけ

チェックしたいページを開いて「モバイルシミュレーター-レスポンシブテストツール」を起動するだけです。シミュレーターなので別のサイトを見たい場合は、そのままブラウザに直接URLを打ち込めばシミュレーター内に別のサイトを表示します。なんといっても余計な飾りがない、ビジュアルがいいですね。

無料での利用は広告が入ってしまいます。消そうとすると料金案内が表示。ちょっと高い。

各種スマホに対応

右側の「デバイスを変更する」ボタンでデバイス一覧が表示されます。一部有料でないとチェックできないデバイスもありますが、ほぼ網羅。これだけ利用できれば問題ありません。

もちろん、PCやタブレットも対応

もちろん、PCのサイズもOK。上はMacbook Airでのシミュレーション。

タブレットの各種サイズも用意されている。上はMicrosoft Surface Duoのシミュレーション。こういった需要がありそうな新しいデバイスも順次投入してくれるというのはいいですね。

なんと、Appel Watchも対応していた！

個人的におもしろいなと思ったAppel Watchのシミュレーション。プレゼンでも利用できそうですね、Appel Watchのブラウジング自体にあんまり需要ないすけど（笑）。

スクリーンショットやスクリーンキャスト機能

スクリーンショットやスクリーンキャスト（動画として記録）機能も利用できる。上のボタンはスクリーンショット。

クリックすると撮影が開始され、

撮影終了ボタンで保存やシェアができる仕組み。
「こんな感じで動きます」みたいなプレゼンもできますね。

逆にクライアントから「この部分直してください」ってものありそうですねどね（笑）