ブラウザに標準搭載されているデベロッパーツール（Google Chrome / Microsoft Edge / Firefox）や拡張機能を使って、Webサイトのスマホ画面表示を効率的にチェックする方法10選を紹介します！
目次
1. Google Chrome デベロッパーツール
Google Chromeのデベロッパーツールを利用してスマートフォンサイトの確認を行う方法
- ChromeでWebページを開く
- F12 またはCtrl + Shift + I で開発者ツール起動
- スマホアイコンをクリックしてデバイスモードに切り替え
- 上部のデバイス一覧から端末を選択して表示確認
特徴
標準搭載。多くの端末プリセットがあり、レスポンシブ確認に最適。
操作方法
2. Microsoft Edge デベロッパーツール
- Edgeで表示したいWebページを開く
- F12 または Ctrl + Shift + Iで開発者ツール起動
- スマホアイコンをクリック
- 端末を選択して表示確認
特徴
標準搭載。スマホ表示のエミュレーションが可能。
操作方法
3. Safari 開発メニュー（Mac専用）
- Safariの「環境設定」→「詳細」→「メニューバーに“開発”メニューを表示」にチェック
- メニューバーの「開発」→「ユーザーエージェント」から端末を選択
- iPhoneやiPadの表示をシミュレート可能
- 実機をMacに接続すれば、Safari上で実機のWeb表示を確認できる
特徴
Macユーザー向け。iOS端末の表示確認に最適。iPhoneやiPadの実機と連携も可能。
操作方法
4. Responsive Viewer（Chrome拡張）
- Chromeウェブストアから「ResponsiveViewer」をインストール
- 拡張機能アイコンをクリックして起動
- 表示したいURLを入力
- 複数端末（iPhone, Pixel, Galaxyなど）を選択して並べて表示
特徴
複数のスマホ画面を同時に並べて表示可能。開発者やデザイナーに人気。
操作方法
5. Google モバイルシミュレーター
- ChromeでWebページを開く
- F12 またはCtrl + Shift + I で開発者ツール起動
- スマホアイコンをクリックしてデバイスモードに切り替え
- 上部のデバイス一覧から端末を選択して表示確認
特徴
特定のデバイス画面をシミュレートし、そのデバイスでの表示を単独で確認します。
操作方法
6. Firefoxレスポンシブデザインモード
- 開発者ツールからF12キーを押して、開発者ツールを起動し、ツールバーにある「スマホとタブレットのアイコン」をクリックします。
- 画面上部に表示されるプルダウンメニューから、チェックしたいデバイス（iPhone、iPad、Galaxyなど）を選択します。
- 選択したデバイスの画面サイズでウェブサイトが表示されます
特徴
ブラウザに標準搭載。多様なデバイスのシミュレーションが可能。
操作方法
7. BrowserStack
- BrowserStackにアクセスし、アカウントを作成（無料トライアルあり）
- 「Live」または「Responsive」モードを選択
- 表示したいURLを入力
- 端末・OS・ブラウザを選択して表示確認
特徴
実機に近い環境で表示確認ができるクラウドサービス。多くのOS・ブラウザに対応。
操作方法
8. LT Browser
- LT Browserをダウンロードしてインストール
- 起動後、表示したいURLを入力
- 画面左側から端末を選択（iPhone, iPad, Androidなど）
- 横並びで複数端末を表示し、リアルタイムで確認
特徴
開発者向けの無料ツール。複数端末の表示を同時に確認でき、スクリーンショットやパフォーマンスチェックも可能。
操作方法
9. Remote TestKit
- Remote TestKitのサイトでアカウント登録
- 利用したい端末を選択（iPhone, Androidなど）
- ブラウザ上で端末を遠隔操作し、表示や動作を確認
特徴
実機をクラウド経由で操作できる。精度が非常に高く、アプリの動作確認にも使える。
操作方法
10. スマキチ(スマホサイト確認ツール）
- 確認したいウェブサイトのURLを直接入力します。
- アドレスバーの右にある「リサイズアイコン」をクリックすると、複数の画面サイズが選択できます。
- よく見るページは、アドレスバーの横にある「☆（星）アイコン」をクリックすると、お気に入りに登録されます。
特徴
Google Chromeのオープンソース版であるChromiumをベースに開発された、スマホサイト閲覧に特化したデスクトップアプリケーションです。ブラウザの機能だけでは物足りないと感じる方におすすめです。
操作方法
これらのツールをうまく活用することで、Webサイトのデザインやレイアウトを効率的にチェックすることができます。特に、ブラウザに標準搭載されている開発者ツールは非常に強力なので、まずはこちらから試してみることをおすすめします。
また、ホームページを制作する際の注意点として、これらのツールは「すべての表示を完璧に変換できる機能ではない」ということも知っておく必要があります。
