スマホでの動作確認に便利なChrome拡張機能「モバイルシミュレーター-レスポンシブテストツール」。「Responsinator」の代わりとなるお役立ちツール
【景品表示法に基づく表記】本サイトのコンテンツには、商品プロモーションが含まれている場合があります。
カイエダです。
2021年にこちらの記事「スマホでの動作確認に便利なWebサイト『Responsinator』」にてモバイルの動作確認ができるWebサイトを紹介しておりましたが、2023年4月現在、どうやらご紹介していたサイトが閉鎖されてしまったようです。
残念ですね。
そこでこの記事では、Responsinatorの代わりとなる便利なツールを紹介いたします。
今度はChromeの「拡張機能」です。
この記事の目次
便利ツールはChrome拡張機能「モバイルシミュレーター-レスポンシブテストツール」
モバイルレスポンシブウェブサイトをテストするためのいくつかのモデルを備えたコンピューター上のスマートフォンとタブレットのシミュレーター。
モバイルサイトのテストに使用できるいくつかのモデルを備えた、コンピューター上の非常にリアルな電話およびタブレットシミュレーター。
15 models of Android smartphones :
- – Samsung Galaxy S20 (CSS resolution 360px)
- – Huawei P30 PRO (CSS resolution 360px)
- – Google Pixel 5 (CSS resolution 393px)
- – Oneplus Nord 2 (CSS resolution 412px)
- – Samsung Galaxy Z Flip3 (CSS resolution 360px)
- – OPPO Find X3 PRO (CSS resolution 360px)
- – Samsung Galaxy A12 (CSS resolution 360px)
- – Samsung Galaxy S21 Ultra (CSS resolution 360px)
- – Google Pixel 6 PRO (CSS resolution 360px)
- – Xiaomi 12 (CSS resolution 360px)
- – Samsung Galaxy Note20 Ultra (CSS resolution 412px)
- – Samsung Galaxy S22 (CSS resolution 360px)
- – Samsung Galaxy S22+ (CSS resolution 360px)
- – Samsung Galaxy S22 ULTRA (CSS resolution 360px)
19 models of Apple smartphones :
- – iPhone 5 (CSS resolution 320px)
- – iPhone SE (CSS resolution 320px)
- – iPhone X (CSS resolution 375px)
- – iPhone XR 2018 (CSS resolution 414px)
- – iPhone 11 (CSS resolution 414px)
- – iPhone 11 PRO (CSS resolution 375px)
- – iPhone 11 PRO MAX (CSS resolution 414px)
- – iPhone 12 Mini (CSS resolution 360px)
- – iPhone 12 (CSS resolution 390px)
- – iPhone 12 PRO (CSS resolution 390px)
- – iPhone 12 PRO MAX (CSS resolution 428px)
- – iPhone 13 Mini (CSS resolution 375px)
- – iPhone 13 (CSS resolution 390px)
- – iPhone 13 PRO (CSS resolution 390px)
- – iPhone 13 PRO MAX (CSS resolution 428px)
- – iPhone 14 (CSS resolution 390px)
- – iPhone 14 MAX (CSS resolution 428px)
- – iPhone 14 PRO (CSS resolution 390px)
- – iPhone 14 PRO MAX (CSS resolution 428px)
5 models of tablets :
- – Samsung Galaxy Tab S7 (CSS resolution 1280px landscape mode)
- – iPad Air 4 (CSS resolution 1180px landscape mode)
- – iPad Air Mini (CSS resolution 1024px landscape mode)
- – iPad PRO 11″ (CSS resolution 1194px landscape mode)
- – Microsoft Surface Duo (CSS resolution 1114px landscape mode)
7 special devices :
- – Apple Watch Serie 6 (CSS resolution 162px)
- – Samsung Galaxy Fold 2 (CSS resolution 884px)
- – Apple Macbook Air (CSS resolution 1280px)
- – Apple Macbook PRO 16″ (2021) (CSS resolution 1728px)
- – Samsung Smart TV NEO 4K (CSS resolution 1920px)
- – Self service kiosk (CSS resolution 1080px)
- – Zebra MC330 (CSS resolution 480px)
chrome ウェブストア
ブラウザヘッダーの動作とキーボードの開きが再現されます。
目標は、可能な限り最も現実的な条件で簡単にテストできるようにすることです。
透明なPNGで電話をキャプチャして、メールやプレゼンテーションなどに挿入することもできます。
無料版では邪魔にならない広告が表示されます
モバイルシミュレーター-レスポンシブテストツール 使い方
Chrome ウェブストアで「モバイルシミュレーター」を検索
検索で一番最初に出てきたアプリをクリック
拡張機能を追加します
つづいて、Chromeの右上にあるこのピクトグラムを探してクリックします
つづいて、Chromeの右上にあるアイコンを探してクリックします
このアイコンです。
開いた別ウィンドウ内でこの行を探してください
モバイルシミュレーターの右に出ている、「ピン」アイコンをクリックします
最後にモバイルシミュレーター-レスポンシブテストツールのアイコンが右上に表示されます。
アイコンをクリックすると、選択したサイトでシミュレーターをアクティブにできます。
ただし無料版だと閲覧できないデバイスもあります。
かなり便利!で高機能ですが、最新のデバイスは有料会員の方のみ利用できるようです。
PROアイコンが出ているデバイスの閲覧は、有料会員さんしか試せません。
まとめとして
いかがでしたでしょうか。
サービスにも諸行無常あるものです。
無料で使わせてもらうのも限界があるように…。
ですが代替サービスは確実に存在しますので、研究し甲斐はありますね。
今回ご紹介しました便利なツールも、気軽に使ってみてくださーーい!
用語解説★
レスポンシブウェブデザインとは
レスポンシブウェブデザイン (Responsive Web Design, RWD) は、閲覧者の画面サイズまたはウェブブラウザに応じてデスクトップウェブページが閲覧できることを目指したウェブデザインの手法。
加えて、1つのウェブサイトで多様なデバイスを同様にサポートすることもレスポンシブウェブデザインのタスクに含まれている点を理解しておくことが重要である。
Wikipediaの説明だと少し難しいですが、要は同じブログやWebサイトを、パソコンからみてもスマホから見ても、そのデバイスに即した幅やサイズ感で閲覧することが可能なデザイン、ということです。
昨今、スマホが普及したことにより、Webサイトは「モバイルファースト」となっています。
つまり、スマホで見づらいことはNGで、スマホでの見栄えがよいほうが、検索エンジンからも評価されます。
そうすると自ずと訪れる人も多くなるわけです。
スマホアプリとの連携も、スマホでの見た目がよいほうがスムーズですもんね。
たとえばLINEからブログへ、インスタからブログへ、など。
ちなみに、WordPressでWebサイトをつくったり、ブログをつくっている方は、間違いなくレスポンシブWebデザイン対応済みです。
相当昔に作ったサイトでない限り。