Webサイトのスマホ画面表示をパソコンでチェックできるツール10選を紹介します。
レスポンシブデザインに対応したサイトは、様々なデバイス画面に適したサイズに調整されます。自作したサイトや、担当しているサイトのスマホでの表示がレスポンシブに対応できているかどうか、どのように表示されているのかをパソコンの画面で検証することができます。
検証ツールには、無料のものと有料のものがあります。
| chromeのデベロッパーツール | |
| 拡張機能Responsive Viewer | |
| 拡張機能Mobile FIRST | |
| モバイルフレンドリーテスト | |
| Apple | safari開発メニュー |
| Xcode | |
| それ以外 | Browser Stack |
| LT Browser | |
| Remote TestKit | |
| Firefoxのデベロッパーツール |
目次
1.Chrome デベロッパーツール
Googleが開発したWebブラウザ Chromeの画面上で使用できるデベロッパーツールを使います。Google Chromeを使ってスマホ画面での表示を確認したいサイトを開き、キーボードのＦ12を押します。「デバイスのツールバーを切り替え」アイコンをクリックし、サイトの上部に表示されている「サイズ:」の右横の▼をクリックするといくつかのデバイスを選択することができます。このツールを使うことで選択したデバイスでそのサイトがどのように表示されているのかをチェックできます。。
2.Responsive Viewer
https://chrome.google.com/webstore/detail/responsive-viewer/inmopeiepgfljkpkidclfgbgbmfcennb
Google Chromeで使用できる拡張機能Responsive Viewerを使ったチェック方法を説明します。拡張機能とは、Chromeなどのブラウザに追加することで機能を増やすことができるプログラムのことです。「Responsive Viewer」と検索し、「Chromeに追加」をクリックします。拡張機能に追加することで、別のサイトを表示した状態でこの機能を使うことができるようになります。Responsive Viewerのアイコンをクリックすると、デバイスごとの複数の画面表示をパソコンの画面で確認できます。
3.Mobile FIRST
https://www.webmobilefirst.com/ja/
Mobile FIRSTもChromeで使える拡張機能です。「Mobile FIRST」と検索し、「拡張機能をインストールします」をクリックします。Mobile FIRSTのアイコンをクリックして起動し、一覧から表示を確認したいデバイスを選択します。
4.Safari開発メニュー
Macを使っている方は、ブラウザ Safariの設定を変更することでも確認できるようになります。Safariの「設定」を選択して「詳細」をクリックします。「メニューバーに“開発”メニューを表示」をオンにすると、Webサイトを開発するためのツールがツールバーに追加されます。「レスポンシブ・デザイン・モードにする」を選択すれば、表示させたいデバイスの種類を選ぶことができます。
5.Xcode
https://developer.apple.com/jp/xcode/
Xcodeとは、Apple社のアプリ開発ツールです。iPhoneやiPad、MacといったApple社製のデバイスで使用するアプリを作成する際に使用します。Appleの「Developer」サイトの「開発」のページからダウンロードが可能です。
アプリ開発のためのツールですが、シミュレーターとしても使えます。Apple製品の実機と同じ画面表示を検証することができます。
6.Browser Stack
https://www.browserstack.com/responsive
スマホでの画面表示を確認したいサイトのURLを入力してチェックできるWebサイトです。
アドレスバーにURLを入力し、「Check」ボタンをクリックします。アカウントを作成すれば無料トライアルが可能になり、3000以上のブラウザやデバイスでテストできます。
7.LT Browser
https://www.lambdatest.com/lt-browser
Webサイトの開発者に適したブラウザがLT Browserです。
さまざまなデバイスでの表示・動作をチェックでき、スマホを横にした時の表示もタップ1つで確認できます。
8.モバイルフレンドリーテスト
https://search.google.com/test/mobile-friendly?hl=JA
Webサイトがスマホなどのモバイルデバイスで正しく表示される、つまりモバイルフレンドリーであるかどうかをチェックできるのが、Googleが提供しているモバイルフレンドリーテストです。
テストするURLを入力して、「URLをテスト」ボタンをクリックします。通常1～2分で解析できます。「テスト済みのページを表示」から「スクリーンショット」をクリックすると、モバイルでの画面が表示されます。モバイルフレンドリーでない場合には、どこに問題があるのかを確認できるため、その問題点を修正しましょう。
9.Remote TestKit
無料のチェックツールを使うことでレスポンシブデザインに対応できているかどうか、スマートフォンでどのように表示されているかを調べることができます。しかし、実際にユーザーが利用しているスマートフォンの機種は数多くあり、最新機種もどんどん発売されます。Remote TestKitを利用すれば、クラウド上でスマートフォンの実機を直接操作することが可能です。
レイアウト崩れや動作確認を多くの実機でテストすることで予期しないエラーの発生を抑えることができます。最新機種も発売から2週間程度で利用可能です。申し込み初月は無料で利用できます。2000社以上に選ばれているサービスです。
10.Firefox デベロッパーツール
Mozilla Foundationが開発しているブラウザ FirefoxでもGoogle Chromeと同様にデベロッパーツールを使用してスマホ画面での表示を確認することができます。Firefoxを使ってスマホ画面での表示を確認したいサイトを開き、キーボードのＦ12を押すとデベロッパーツールが表示されます。
まとめ
Webサイトがスマホ画面でどのように表示されているかを確認するチェックツール10選を紹介しました。これらの便利なツールを使って、レスポンシブデザインに対応できているかどうか、スマホで正しく表示されているかどうかをチェックすることができます。
- ブラウザのデベロッパーツールを使う
- 拡張機能を使う
- ツールには無料のものと有料のものがある
パソコンでチェックできれば修正もしやすく便利です。どのデバイスからアクセスしても正しく見やすい表示がされるためにこれらのチェックツールが役立ちます。
