スマホサイトのレイアウトをフレーム付きで忠実に表示できる Chrome 拡張機能「モバイルシミュレーター」

PC 版の Chrome にはスマホ用のレイアウトを表示できるデベロッパーモードが標準で搭載されていますが、いまいち忠実に再現しきれていないと感じるのはぼくだけでしょうか？

デベロッパーモードで再現したスマホレイアウト

Chrome 標準のデベロッパーモードだといまいちイメージが湧かないんです。

もっとこう…スマホ本体のフレーム付きでレイアウト表示して欲しくないですか？

今回紹介する Chrome 拡張機能「モバイルシミュレーター – レスポンシブテストツール」を利用すると・・・▼

モバイルシミュレーターで表示した当ブログ

こんな風に、スマホ本体に当てはめたフレーム付きレイアウトでスマホサイトの見た目を表示してくれます。

これならレスポンシブデザインの確認もイメージしやすくて良いですよね！

今回の記事内容

今回は『スマホやタブレット用のサイトレイアウトをフレーム付きで忠実に表示できる便利な Chrome 拡張機能「モバイルシミュレーター」』を紹介します。

モバイルシミュレーターは Chrome ウェブストアから入手

「モバイルシミュレーター – レスポンシブテストツール」は Chrome の拡張機能なので、Chrome ウェブストアから誰でも無料で入手できます。

モバイルシミュレーターの利用に関しては「機能制限 + 広告が表示される無料版」と「すべての機能が開放された有料の Pro 版」があります。

無料版の機能制限といっても、最新スマホ機種の見た目が利用できないとかそのぐらいの些末なことなので、無料版で十分活用できます。

Chrome で「モバイルシミュレーター」追加ページにアクセスします。
「Chrome に追加」ボタンを押します。
「拡張機能を追加」ボタンを押します。
モバイルシミュレーターが Chrome に追加された後、① Chrome ツールバーにある「拡張機能」アイコンをクリックします。拡張機能一覧の中にあるモバイルシミュレーターの右側にある「画鋲」アイコンをクリックします。
ツールバーの拡張機能アイコン表示エリアにモバイルシミュレーターのアイコンが表示されたら利用する準備完了です。

右サイドにあるメニューアイコンから「PC とスマホ」のアイコンをクリックします。
スマホフレームが変更できるスマホやタブレット機種の一覧が開きます。機種名をクリックすると見た目が対応機種に変更されます。水色で「PRO」と表記されている機種は有料版のみ利用可能（無料版では使えません）。
試しに Google Pixel 5 にフレーム変更してみました。見た目変わりましたよね。
タブレットの見た目にも変更可能です。画像は iPad mini のフレームです。