Webサイトの制作やブログの表示確認をしていると、「パソコンでスマホと同じ表示を確認したい」「画面の横幅をスマートフォンサイズまでキュッと細く縮めたい」という場面がよくあります。
しかし、Chromeなどの通常のブラウザウィンドウは、手動で枠をドラッグして縮めようとしても、一定の幅（約500px前後）より狭くできない制限があります。
この記事では、標準機能であるデベロッパーツールの活用法から、拡張機能、裏技まで、Chromeのウィンドウ幅をスマートフォンと同じサイズまで狭くする7つの方法を分かりやすく解説します！
この記事でわかること
- Chromeで通常ウィンドウが狭くならない理由
- デベロッパーツール（検証）を使った基本的なスマホ表示切替
- 物理的なウィンドウ自体を極小サイズまで小さくする裏技
- ワンクリックでスマホサイズで開くブックマークレットや起動オプション
- 目的や作業スタイルに応じた最適な方法の選び方
Chromeのウィンドウ幅をスマホサイズにする7つの方法
| 方法 | 手軽さ | 物理ウィンドウ縮小 | おすすめの対象 |
|---|---|---|---|
| 1. デベロッパーツール（レスポンシブモード） | ★★★★★ | 画面内切替 | 表示確認だけサクッとしたい |
| 2. ツール起動中のウィンドウドラッグ | ★★★★☆ | ◯ | ウィンドウ自体を狭くしたい |
| 3. ツール画面の切り離し（Undock） | ★★★★☆ | ◯ | 開発ツールが邪魔なとき |
| 4. アプリ化（ウィンドウとして開く） | ★★★☆☆ | ◯ | 頻繁に細いウィンドウで使いたい |
| 5. ブックマークレット（JS） | ★★★★☆ | ◯ (別窓) | ワンクリックで特定サイズを開きたい |
| 6. 起動オプション（引数指定） | ★★☆☆☆ | ◯ | いつもスマホサイズで起動したい |
| 7. 拡張機能（Window Resizer） | ★★★★☆ | ◯ / 画面内 | いろいろな機種解像度を切り替えたい |
方法1：デベロッパーツールを使う（一番簡単・標準機能）
画面の表示確認（レスポンシブWebデザインのテスト）で最もよく使われる標準的な手順です。
- キーボードの
F12キーを押すか、画面上の右クリックメニューから 「検証」 を選択します。 - 画面に現れたツールの左上にある 「スマホとタブレットが重なったアイコン（Toggle device toolbar）」 をクリックします。
- 画面上部に表示されるメニューで、任意のスマートフォン機種（iPhone 14, Pixel 7など）を選択するか、幅の数値（例:
375）を直接指定します。
これで、実際のスマホ画面と同じ表示サイズに一瞬で切り替わります。
方法2：デベロッパーツールを開いた状態でウィンドウ幅を縮める
ブラウザの「ウィンドウ自体」を物理的に小さくしたい場合の手順です。
F12キーを押してデベロッパーツールを開きます。- ツールが開いている間は、Chrome通常の最小幅制限が解除されます。
- ウィンドウの端をマウスでドラッグして縮めると、通常では設定できないスマホ幅まで小さく調整できます。
方法3：デベロッパーツールを別画面に切り離す（Undock）
「方法2」のやり方で、デベロッパーツール画面が邪魔になる場合の対処法です。
F12キーでツールを開きます。- 開発ツールの右上にある 三点リーダー（アイコン） をクリックします。
- 表示位置（Dock side）の設定項目から、「別ウィンドウで分離する（Undock into separate window）」 アイコンを選びます。
- ツールが別画面に切り離され、元のブラウザウィンドウだけを狭い幅のまま快適に利用できます。
方法4：アプリ化して独立ウィンドウで開く
毎回デベロッパーツールを開かずに、独立した細いウィンドウで閲覧したい場合に便利です。
- 狭く表示したいページを開き、Chrome右上のメニュー（縦の三点リーダー）をクリックします。
- 「保存して共有」 ➔ 「ショートカットを作成」 を選択します。
- 「ウィンドウとして開く」 にチェックを入れて「作成」を押します。
- デスクトップに作成されたアイコンから起動すると、枠の制限が少ない独立ウィンドウになり、通常よりかなり細い幅まで縮めることができます。
方法5：ブックマークレット（JavaScript）を使う
ワンクリックで「横幅375px・高さ812px」などのスマホサイズで新しいウィンドウを開く裏技です。
- Chromeのブックマークバーで右クリックし、「ページを追加」を選択します。
- 名前欄に「スマホサイズで開く」と入力します。
- URL欄に以下のコードを貼り付けて保存します。
javascript:void(window.open(location.href,'_blank','width=375,height=812,resizable=yes')); - 見たいページでこのブックマークをクリックすると、即座に指定サイズの独立ウィンドウが立ち上がります。
方法6：Chromeの起動オプション（コマンドライン引数）を指定する
Chromeのショートカットから起動したときに、最初からスマホサイズで開くように設定する方法です。
- デスクトップにあるChromeのショートカットアイコンを右クリックし、「プロパティ」**を開きます。
- 「ショートカット」**タブの**「リンク先」**の末尾に、半角スペースを空けて以下の引数を追加します。
--window-size=375,812 - 「OK」で保存し、このショートカットから起動すると、指定した横幅と高さでブラウザが開きます。
方法7：Chrome拡張機能（Window Resizerなど）を活用する
特定の解像度に素早くワンクリックでリサイズしたい場合は、拡張機能が最も便利です。
- 定番拡張機能:
Window ResizerやResponsive Viewerなど（Chromeウェブストアで無料検索・追加可能） - メリット: iPhone SE、iPhone Pro、iPadなどの各種端末サイズがプリセット登録されており、ツールバーのアイコンからワンクリックで切り替えられます。
目的別・おすすめの選び方
- ちょっと表示を確認したいだけ:
➔ 方法1（デベロッパーツール機能） が最速です。 - 通常のブラウザ操作のままスマホ幅で作業したい:
➔ 方法3（ツールの別窓切り離し） または 方法4（アプリ化） が快適です。 - ワンクリックで特定のスマホ幅（375pxなど）を呼び出したい:
➔ 方法5（ブックマークレット） または 方法7（拡張機能） が便利です。
まとめ
Chromeのウィンドウは通常500px程度までしか狭くできませんが、デベロッパーツールを開く、アプリ化する、ブックマークレットを使うといった簡単な工夫で、スマートフォンと同じ幅まで自由に縮めることができます。
デザイン確認やWeb制作、ながら作業など、用途に合わせて最適な方法を試してみてください！
