レスポンシブテストツール

WordPress を使って製作したホームページ（レスポンシブ対応）が実際のモバイル端末にどのように表示されるかを確認するテストツールが、Googleの拡張機能にあります。現在はWindows11 にインストールされているMicrosoft Edge でも使用が可能です。

アプリのインストール

まず、Microsoft Edge の「…」から「拡張機能」を選択します。拡張機能のページの一番下に「Chromeウェブストア」のリンクがあります。

１．Chromeウェブストアにアクセス　ChromeブラウザでChromeウェブストアに移動し、検索ボックスに「モバイルシミュレーター」と入力し、目的の拡張機能を見つけます。

２．Chromeに追加　表示された「モバイルシミュレーター-レスポンシブテストツール」を選択、インストール（拡張機能の追加）します。拡張機能が追加されると確認をする最後のプロンプトが表示されます。ブラウザのツールバー「拡張機能」から「モバイルシュミレーター-レスポンシブテストツール」を「ツールバーに表示」をクリックすると、アイコンが追加されます。

３．ピン留め　実際に制作したホームページをブラウザ（今回Microsoft Edge）で表示させて、「ツールバー」にある「モバイルシミュレーター-レスポンシブテストツール」のアイコンをクリックすると指定したモバイル端末での表示が確認できます。（Galaxy S20を選択）表示を横向きにすることもできます。

４．表示させることができるモバイル端末の一覧です。（モバイル端末切替をクリックで表示）PROとなっている機種は有償のPRO版です。タブレットの他にApple Watch Serie6も特別欄に含まれています。

手順についてはMicrosoft Edgeの場合ですが、Chromeの場合もほとんど変わりません。

アプリの基本的な使い方

ピン留めしたモバイルシミュレーターのアイコンをクリックします。シミュレーターが起動したら、右端にある「デバイスを変更する」ボタンから、iPhone、Android、iPadなどの様々なデバイスモデルを選択して表示を確認します。

通常のPC表示に戻すには、シミュレーター画面の「×」マークをクリックします。

※ 有償のPRO版を使う場合はアップグレードが必要です。広告部分かPROマークがついているデバイスを選択するとPRO版へのアップグレードの確認画面が表示されますので「購読します」を選択します。Personal１ユーザーの場合は\499/月となります。

ブラウザに表示させたWebサイトの表示動作シミュレーションが出来ますので、便利に活用できます。