Chrome、Firefox、Edgeの拡張機能

モバイルシミュレーター – 無料Chrome拡張機能

任意のサイトのモバイルバージョンをテストし、97台のデバイスでレスポンシブウェブデザインを確認し、ワンクリックでクライアントデモを準備します。ブラウザを離れることなく。

1,600,000+ インストール · Chrome Web Storeで4.93/5

数秒で無料インストール · コンピュータ専用

Chromeで開かれたMobile FIRSTシミュレーター:モバイルバージョンのサイトを表示するスマートフォンとAndroidおよびAppleデバイスの選択パネル
  • 97事前設定されたデバイス
  • 14ブランドAppleからXiaomiまで
  • 5年開発者とデザイナーに採用
  • 162 → 2560 pxスマートウォッチからデスクトップ画面まで

レスポンシブサイトをテストするために必要なすべてのものが1つのパネルに

ワンクリックでモバイルビューに切り替え、もう一度クリックでデスクトップに戻ります。他は本物の電話のように動作します:タッチジェスチャー、ズーム、横向きモード、PWA。

新しい

マルチデバイス比較

複数のデバイスを並べて表示し、同時にテストします。1つのナビゲーションで、すべてのブレークポイントを同時に確認します。

  • 同じタブ内の複数のデバイス
  • デバイス間で共有されるナビゲーション
  • 全体を1枚の画像にキャプチャ
Mobile FIRSTで並べて表示された3台のデバイス:同じサイト上の2台のスマートフォンと1台のタブレット
Mobile FIRSTのビデオ録画パネル:フレーミング、マイク、ビデオ品質、スタートボタン

ワンクリックでビデオキャプチャ

デモやチュートリアル用のWEBM、GIF、MP4を、カメラの有無にかかわらずシミュレーターから直接録画。

Mobile FIRSTからエクスポートされたスクリーンショット、寸法とWEBPおよびPNGのダウンロード付き

透明なPNGキャプチャ

透明な背景の高解像度スクリーンショット、プレゼンテーション、モックアップ、クライアントへのメールに最適。

リアルなタッチスクロール

指のジェスチャーはネイティブにシミュレートされます:慣性、反発、ズーム。ナビゲーションはモバイルのように動作します。

カスタムデバイス

ターゲットの正確な画面解像度とビューポートを持つ独自のデバイスを作成して保存します。

正確なビューポートとピクセル密度

各モデルは実際のCSS解像度、ピクセル比、User-Agentを適用します:メディアクエリとブレークポイントはデバイス上と同様にトリガーされます。

ローカルホスト、プレプロダクション、すべてのフレームワーク

ローカルサーバーを含む任意のURLで動作し、React、Vue、Angular、WordPress、または静的サイトと連携します。

ダークモードと10以上のオプション

PWAモード、全画面表示、ネイティブキーボード、即時横向き切り替え、視覚的快適さのためのダークテーマ。

無料のPNGモックアップ

95台のデバイスモックアップが透明な背景で、納品物のために無料でダウンロード可能。 モックアップを見る

97台以上のデバイスがすぐに使用可能

76台のスマートフォン · 5台のタブレット · 15台のデスクトップ画面 · 1台のスマートウォッチ

古いモデルと新しいモデルがあり、各リリースで更新されます。各デバイスには正確なviewport CSS、ピクセル密度、User-Agentが搭載されています。スマートウォッチ、インタラクティブキオスク、デスクトップ画面も含まれます。

新しい LIVE DEVICE

シミュレーターでデザインし、実機環境で仕上げる

シミュレーターは、あらゆる画面サイズでデザインし素早く反復するための最適なツールです。 検証の段階では、Live device がクラウド上の iOS または Android 端末で引き継ぎ、タブからリアルタイムで操作できます。 有料プランに含まれており、毎月更新される分数のクォータがあります。

  • 本物のレンダリングエンジン。 ネイティブの Safari WebKit と Chrome Android で、表示上のわずかな問題も見逃しません。
  • 本物のモバイル OS のすべての機能 マルチタッチジェスチャー、システムキーボード、実際のカメラと GPS。
  • 30 台の端末が数秒で利用可能。 最新の iPhone から主要な Android 端末まで。 リストを見る
プランを見る

日常的に使用する3つの方法

フロントエンド開発

コードを離れずにブレークポイントを確認

統合中に320 pxから1280 pxにワンクリックで切り替え、実際のモバイルのタッチジェスチャーとズームを使用。

代理店とフリーランス

効果的なクライアントデモ

リアルなデバイスでサイトを表示し、ビデオまたは切り抜きキャプチャをエクスポートしてレポートを作成。

プロジェクトマネージャーとQA

すべてのデバイスでテスト

複数のモデルを並べて比較し、キャプチャで異常を記録し、その後Live deviceで実際のiPhoneまたはAndroidで検証します。

Mobile FIRSTまたはDevToolsのレスポンシブモード?

DevToolsはウィンドウをリサイズします。Mobile FIRSTはデバイスを再現し、それに伴うものを再現します。

Mobile FIRSTとDevToolsのレスポンシブモードの機能比較
機能 DevToolsのレスポンシブモード
事前設定されたデバイス 97、各リリースで更新 短いリスト
デバイスのリアルな表示 はい(ブラウザ&モックアップ) いいえ
複数のデバイスを同時に はい、並べて いいえ
リアルなタッチジェスチャーとズーム ネイティブシミュレーション 部分的
実際のiPhoneまたはAndroidでテスト はい、Live deviceで いいえ
WEBM、GIF、MP4ビデオキャプチャ ワンクリックで いいえ
透明なモックアップ付きキャプチャ 切り抜きPNG 生キャプチャ
クライアントに見せる準備ができている はい デバッグツール

5年以上にわたり開発者とデザイナーに採用されています

Chrome Web Storeでの評価がそれを物語っています。

5,100件のレビューで4.93/5

市場で最高のレスポンシブテスト拡張機能!

非常に直感的で軽量、そして機能満載です。タッチスクロールは驚くほどリアルで、70以上のデバイスがすぐに使えるのは素晴らしいです。フロントエンド開発者やUI/UXデザイナーなら、必須のツールです。全体的に5つ星!

Mohit Halduniya フロントエンド開発者

切り抜きキャプチャは、クライアントレポートや私のPowerPointに直接入ります。手動での編集時間を何時間も節約できます 😊。とても満足しています!

Bianca C フリーランス · ウェブスタジオ

これは本当に過小評価されている拡張機能です。仕事をこなすだけでなく、さらに少し上を行きます。素晴らしい機能を活用するためにProバージョンを試してみたいですが、無料版でもすでに素晴らしいです。

これはウェブ開発者だけに向けたものではありません。サイトを持っていて、さまざまなデバイスでどのように見えるかをいつでも知りたい人にとって役立つでしょう。

Ramy Nassar プロジェクトマネージャー · 代理店

モバイルサイトをテストする方法

3ステップ、約30秒、アカウント作成不要。

モバイルサイトをテストするための完全ガイド

  1. 01 拡張機能をインストール 公式ストアからChromeまたはFirefoxで。無料、アカウント作成不要。
  2. 02 テストするページを開く 本番、プレプロダクション、またはローカルホスト:アイコンをクリックするとページがモバイルビューに切り替わります。
  3. 03 デバイスを変更してキャプチャ モデル間を切り替え、並べて比較し、キャプチャまたはビデオをエクスポートします。

モバイルシミュレーターとは何ですか?

モバイルシミュレーターは、コンピュータのブラウザでスマートフォンやタブレットの表示条件を再現します:viewport CSS、ピクセル密度、User-Agent、向き。これにより、ユーザーが見るようにサイトのモバイルバージョンを確認でき、変更のたびに電話を取り出す必要がありません。

Mobile FIRSTは97の事前設定されたモデルをカバーしています:iPhoneシミュレーター、Androidエミュレーター、iPadシミュレーター、Samsung Galaxyタブレット、ノートパソコンの画面。各デバイスは実際の解像度を適用するため、メディアクエリやブレークポイントはハードウェアと同じようにトリガーされます。縦横の切り替え、ズーム、タッチスクロールはネイティブの動作を再現するためにシミュレートされています。

拡張機能は開いているタブに適用され、URLに関係なく動作します:本番サイト、プレプロダクション環境、または開発中のローカルサーバー。React、Vue、Angular、WordPress、静的サイトと設定なしで動作します。フロントエンド開発者、デザイナー、QAチーム向けに設計されており、レスポンシブウェブデザインの検証やクライアントデモの準備に役立ちます。

よくある質問

シミュレーターは実際の電話でのテストを置き換えますか?

いいえ、それが先行します。シミュレーターは日常の開発に非常に正確ですが、ページはブラウザのエンジンによってレンダリングされます。最終的な検証のために、Live deviceはクラウドにホストされた実際のiPhoneまたはAndroidを、タブを離れることなく操作できます。

Live device とは何ですか?

有料プランの機能で、クラウドにホストされ、ブラウザから直接操作できる30台の実際のiOSおよびAndroidデバイスにアクセスできます:ネイティブのSafariとChrome、マルチタッチジェスチャー、システムキーボード。各プランには毎月更新される分数のクォータが含まれています。

拡張機能はどのブラウザで動作しますか?

Chrome、Firefox、Edge、Opera、Brave、およびすべてのChromiumベースのブラウザ。インストールは数秒で完了し、アカウントは不要です。

利用可能なデバイスは何台ですか?

97台の事前設定されたデバイス:76台のスマートフォン、5台のタブレット、16台のデスクトップ画面とスマートウォッチ。解像度とビューポートを選んで独自のデバイスを作成することもできます。

モバイルナビゲーションのビデオを録画できますか?

はい、ワンクリックでWEBM、GIF、MP4形式で。PNGスクリーンショットは透明な背景でエクスポートされます。

ローカルホストまたはプレプロダクションでサイトをテストできますか?

はい。拡張機能は現在のタブに適用され、URLに関係なく動作します:本番、プレプロダクション、または開発中のローカルサーバー。

DevToolsのレスポンシブモードとの違いは何ですか?

DevToolsは技術検査のためにウィンドウをリサイズします。Mobile FIRSTはデバイスを再現します:リアルなフレーム、タッチジェスチャー、ズーム、複数のモデルを並べて表示、キャプチャとビデオのエクスポート。

新しいモデルは追加されますか?

はい、メーカーが新しい画面をリリースするたびにリストが定期的に更新されます。

97台のデバイスでサイトを直接ブラウザでテスト

電話を購入せず、アカウントを作成せずに。

  • インストール時に利用可能な97台のデバイス
  • 実際のビューポート、User-Agent、およびタッチイベント
  • localhostやプレプロダクションでも動作します
  • エクスポート可能なスクリーンショットとビデオ

無料 · 4.93/5 (5,100件のレビュー)
1,600,000+ ユーザー