新しい
マルチデバイス比較
複数のデバイスを並べて表示し、同時にテストします。1つのナビゲーションで、すべてのブレークポイントを同時に確認します。
- 同じタブ内の複数のデバイス
- デバイス間で共有されるナビゲーション
- 全体を1枚の画像にキャプチャ
Chrome、Firefox、Edgeの拡張機能
コンピュータ上のスマートフォンとタブレットのシミュレーター
任意のサイトのモバイルバージョンをテストし、81台のデバイスでレスポンシブウェブデザインを確認し、ワンクリックでクライアントデモを準備します。ブラウザを離れることなく。
1,500,000+ インストール · Chrome Web Storeで4.9/5
数秒で無料インストール · コンピュータ専用
- 81事前設定されたデバイス
- 14ブランドAppleからXiaomiまで
- 5年開発者とデザイナーに採用
- 162 → 2048 pxスマートウォッチからデスクトップ画面まで
レスポンシブサイトをテストするために必要なすべてのものが1つのパネルに
ワンクリックでモバイルビューに切り替え、もう一度クリックでデスクトップに戻ります。他は本物の電話のように動作します：タッチジェスチャー、ズーム、横向きモード、PWA。
ワンクリックでビデオキャプチャ
デモやチュートリアル用のWEBM、GIF、MP4を、カメラの有無にかかわらずシミュレーターから直接録画。
透明なPNGキャプチャ
透明な背景の高解像度スクリーンショット、プレゼンテーション、モックアップ、クライアントへのメールに最適。
リアルなタッチスクロール
指のジェスチャーはネイティブにシミュレートされます：慣性、反発、ズーム。ナビゲーションはモバイルのように動作します。
カスタムデバイス
ターゲットの正確な画面解像度とビューポートを持つ独自のデバイスを作成して保存します。
正確なビューポートとピクセル密度
各モデルは実際のCSS解像度、ピクセル比、User-Agentを適用します：メディアクエリとブレークポイントはデバイス上と同様にトリガーされます。
ローカルホスト、プレプロダクション、すべてのフレームワーク
ローカルサーバーを含む任意のURLで動作し、React、Vue、Angular、WordPress、または静的サイトと連携します。
ダークモードと10以上のオプション
PWAモード、全画面表示、ネイティブキーボード、即時横向き切り替え、視覚的快適さのためのダークテーマ。
無料のPNGモックアップ
78台のデバイスモックアップが透明な背景で、納品物のために無料でダウンロード可能。 モックアップを見る
81台以上のデバイスがすぐに使用可能
66台のスマートフォン · 5台のタブレット · 9台のデスクトップ画面 · 1台のスマートウォッチ
古いモデルと新しいモデルがあり、各リリースで更新されます。各デバイスには正確なviewport CSS、ピクセル密度、User-Agentが搭載されています。スマートウォッチ、インタラクティブキオスク、デスクトップ画面も含まれます。
日常的に使用する3つの方法
フロントエンド開発
コードを離れずにブレークポイントを確認
統合中に320 pxから1280 pxにワンクリックで切り替え、実際のモバイルのタッチジェスチャーとズームを使用。
代理店とフリーランス
効果的なクライアントデモ
リアルなデバイスでサイトを表示し、ビデオまたは切り抜きキャプチャをエクスポートしてレポートを作成。
プロジェクトマネージャーとQA
すべてのデバイスでテスト
複数のモデルを並べて比較し、キャプチャで異常を記録し、テスト時間を節約。
Mobile FIRSTまたはDevToolsのレスポンシブモード？
DevToolsはウィンドウをリサイズします。Mobile FIRSTはデバイスを再現し、それに伴うものを再現します。
| 機能 |  | DevToolsのレスポンシブモード |
|---|---|---|
| 事前設定されたデバイス | 81、各リリースで更新 | 短いリスト |
| デバイスのリアルな表示 | はい（ブラウザ＆モックアップ） | いいえ |
| 複数のデバイスを同時に | はい、並べて | いいえ |
| リアルなタッチジェスチャーとズーム | ネイティブシミュレーション | 部分的 |
| WEBM、GIF、MP4ビデオキャプチャ | ワンクリックで | いいえ |
| 透明なモックアップ付きキャプチャ | 切り抜きPNG | 生キャプチャ |
| クライアントに見せる準備ができている | はい | デバッグツール |
5年以上にわたり開発者とデザイナーに採用されています
Chrome Web Storeでの評価がそれを物語っています。
5,100件のレビューで4.9/5
市場で最高のレスポンシブテスト拡張機能！
非常に直感的で軽量、そして機能満載です。タッチスクロールは驚くほどリアルで、70以上のデバイスがすぐに使えるのは素晴らしいです。フロントエンド開発者やUI/UXデザイナーなら、必須のツールです。全体的に5つ星！
切り抜きキャプチャは、クライアントレポートや私のPowerPointに直接入ります。手動での編集時間を何時間も節約できます 😊。とても満足しています！
これは本当に過小評価されている拡張機能です。仕事をこなすだけでなく、さらに少し上を行きます。素晴らしい機能を活用するためにProバージョンを試してみたいですが、無料版でもすでに素晴らしいです。
これはウェブ開発者だけに向けたものではありません。サイトを持っていて、さまざまなデバイスでどのように見えるかをいつでも知りたい人にとって役立つでしょう。
- 01 拡張機能をインストール 公式ストアからChromeまたはFirefoxで。無料、アカウント作成不要。
- 02 テストするページを開く 本番、プレプロダクション、またはローカルホスト：アイコンをクリックするとページがモバイルビューに切り替わります。
- 03 デバイスを変更してキャプチャ モデル間を切り替え、並べて比較し、キャプチャまたはビデオをエクスポートします。
モバイルシミュレーターとは何ですか？
モバイルシミュレーターは、コンピュータのブラウザでスマートフォンやタブレットの表示条件を再現します：viewport CSS、ピクセル密度、User-Agent、向き。これにより、ユーザーが見るようにサイトのモバイルバージョンを確認でき、変更のたびに電話を取り出す必要がありません。
Mobile FIRSTは81の事前設定されたモデルをカバーしています：iPhoneシミュレーター、Androidエミュレーター、iPadシミュレーター、Samsung Galaxyタブレット、ノートパソコンの画面。各デバイスは実際の解像度を適用するため、メディアクエリやブレークポイントはハードウェアと同じようにトリガーされます。縦横の切り替え、ズーム、タッチスクロールはネイティブの動作を再現するためにシミュレートされています。
拡張機能は開いているタブに適用され、URLに関係なく動作します：本番サイト、プレプロダクション環境、または開発中のローカルサーバー。React、Vue、Angular、WordPress、静的サイトと設定なしで動作します。フロントエンド開発者、デザイナー、QAチーム向けに設計されており、レスポンシブウェブデザインの検証やクライアントデモの準備に役立ちます。
よくある質問
シミュレーターは実際の電話でのテストを置き換えますか？
いいえ。Mobile FIRSTは日常の開発には非常に正確ですが、完全な検証には実際のデバイスでの最終テストが必要です。
拡張機能はどのブラウザで動作しますか？
Chrome、Firefox、Edge、Opera、Brave、およびすべてのChromiumベースのブラウザ。インストールは数秒で完了し、アカウントは不要です。
利用可能なデバイスは何台ですか？
81台の事前設定されたデバイス：66台のスマートフォン、5台のタブレット、10台のデスクトップ画面とスマートウォッチ。解像度とビューポートを選んで独自のデバイスを作成することもできます。
モバイルナビゲーションのビデオを録画できますか？
はい、ワンクリックでWEBM、GIF、MP4形式で。PNGスクリーンショットは透明な背景でエクスポートされます。
ローカルホストまたはプレプロダクションでサイトをテストできますか？
はい。拡張機能は現在のタブに適用され、URLに関係なく動作します：本番、プレプロダクション、または開発中のローカルサーバー。
DevToolsのレスポンシブモードとの違いは何ですか？
DevToolsは技術検査のためにウィンドウをリサイズします。Mobile FIRSTはデバイスを再現します：リアルなフレーム、タッチジェスチャー、ズーム、複数のモデルを並べて表示、キャプチャとビデオのエクスポート。
新しいモデルは追加されますか？
はい、メーカーが新しい画面をリリースするたびにリストが定期的に更新されます。
81台のデバイスでサイトを直接ブラウザでテスト
電話を購入せず、アカウントを作成せずに。
- インストール時に利用可能な81台のデバイス
- 実際のビューポート、User-Agent、およびタッチイベント
- localhostやプレプロダクションでも動作します
- エクスポート可能なスクリーンショットとビデオ
無料 · 4.9/5 (5,100件のレビュー)
1,500,000+ ユーザー