パソコンのChromeで拡張機能なしでUser Agentを変更してスマホ表示を確認する方法

スポンサーリンク

皆さんはブログのデザイン変更をしたとき、スマホ表示をどのように確認されていますか?

ベストなのはもちろん実機で確認することなのですが、手元にスマホがなかったり、いちいちスマホで確認するのがめんどくさかったりしますよね。

私はというと、実機で確認できない場合はChromeの拡張機能「User-Agent Switcher for Chrome」を使って確認していました。

User-Agent Switcher for Chrome – Chrome ウェブストア

でもこれが最近動かなくなってしまったんですよね。Chromeがバージョンアップしたのが原因なのかはよくわかっていないのですが。

そこで代替手段を探していたら、なんてことはない、特別な設定や拡張機能のインストールなどしなくてもChromeの標準機能でUser Agentを変更できることがわかりました。

知っておくと便利な小技だと思いますのでご紹介します。

スポンサーリンク

Chromeの標準機能でUser Agentを変更する方法

それではさっそくやり方を見ていきましょう。

まず、Chromeのデベロッパーツールを開きます。やり方はいろいろですが、

  • F12を押下
  • Webページ上で右クリック→要素を検証
  • Chromeの右上の設定アイコンをクリック→「ツール」をクリック→「デベロッパーツール」をクリック

上記のいずれかの操作をすれば良いです。

▼するとこんなウィンドウがChromeブラウザの下部に開くはず。

左上のスマホアイコンをクリックしてみてください。

▼するとなんか縮小されたような画面が表示されました。ここで「Responsive」と表示されている部分をクリックします。

▼するとスマホの機種を選ぶことができます。お好みの機種を選択しましょう。一覧になければ「Edit…」からさらに多くの機種を選択することができます。

▼機種選択後、一度リロード(再読み込み、F5押下でできます)すればiPhone 6 Plusの画面イメージが表示されます。

確認できる端末はiPhone、Nexus、Xperia、Galaxy、Kindleなどの主要機種はカバーされています。

タッチ操作も再現されているので、マウスのクリックでタップ、ドラッグでスワイプのような操作が可能です。

右上のローテーションアイコンをクリックすれば、縦画面だけでなく横画面の表示も確認できます。

スポンサーリンク

まとめ

  • PCのChromeからスマホ表示を確認したいときはデベロッパーツールを使うと良い
  • 様々な機種が選択できる

特別なアプリなどを使わなくてもChromeの標準機能だけでできるので、知っておくと便利なTipsではないでしょうか。

<関連記事>

【2018年版】おすすめChrome拡張機能・アプリまとめ

これは便利!Chromeブラウザで覚えておきたいショートカットキー一覧

HTMLやCSS修正の確認はChromeの標準機能「デベロッパーツール」を使うと便利!