Chromeで、どんなサイトもスマホ表示にする方法

パソコンのChromeでWebサイトをスマホ表示にする方法は3つあります。それぞれに使いどころがあり、どれが合うかは、どこまで実際のスマホに近づけたいかで決まります。

Chromeに無料で追加Chrome、Edge、Braveで動作。アカウントは不要です。

SimlordはパソコンのChromeで動作します。追加するには、パソコンでこのページを開いてください。

スマホ表示にする3つの方法

ウインドウを狭くする
ウインドウの端をドラッグして狭めます。手軽ですが、サイトはデスクトップだと認識したままなので、見えるのはスマホ版のサイトではなく、幅の狭いデスクトップ版のページです。
Chromeのデバイスツールバーを使う
F12（MacではCmd+Option+I）でデベロッパーツール（DevTools）を開き、Ctrl+Shift+M（MacではCmd+Shift+M）を押します。デベロッパーツールの中で、Chromeがページをスマホのサイズにし、モバイルのユーザーエージェントを送ります。
スマホシミュレーターの拡張機能を使う
Simlordなら、アイコンをクリックしてスマホを選ぶだけ。ページがスマホのフレーム、ブラウザバー、タッチ操作とともにタブいっぱいに表示され、ログインもそのままです。

デベロッパーツールのデバイスツールバーは標準搭載で無料、デバッグしながらブレークポイントを確認するのに最適です。ただし表示されるのはビューポートで、スマホそのものではありません。ブラウザバーも最新機種のデバイスフレームもなく、デベロッパーツール自体が画面の半分を占めます。

Simlordは、Chromeでスマホ表示をそのまま再現する拡張機能です。SafariやChromeのツールバーが実際の領域を占め、ステータスバー、ノッチやDynamic Islandも表示されます。閲覧中も選んだデバイスを保ち、スクリーンショットや録画も撮れます。

SimlordはAlt+Shift+Mで開閉でき、回転、次のデバイス、スクリーンショット、録画のショートカットもあります。ショートカットは、Chromeの拡張機能のショートカット設定で変更できます。

ほかにご質問があれば、support@simlord.euまでご連絡ください。

Chromeでスマホ表示にするショートカットは？

デベロッパーツールを開いたあと、WindowsとLinuxではCtrl+Shift+M、MacではCmd+Shift+Mです。Simlordは、デベロッパーツールなしでAlt+Shift+Mで開きます。

ウインドウを狭くしてもデスクトップ版のサイトが表示されるのはなぜですか？

サイトは幅だけでなく、ユーザーエージェントやタッチ対応も見ているからです。狭いウインドウでも、ブラウザはデスクトップとして報告されます。

どんなサイトでもスマホ表示を確認できますか？

はい。Chrome（クローム）で開けるサイトなら、ログインしているサイトも含めて、どれでも確認できます。

スマホ表示にすると、サイトの動作は変わりますか？

サイトにはスマホのサイズ、識別情報、タッチ操作が渡されるので、スマホに対するのと同じように応答します。ほかのタブには何も影響しません。

無料、アカウント不要。Chrome、Edge、Braveで動作します。

SimlordはパソコンのChromeで動作します。追加するには、パソコンでこのページを開いてください。