いつもお疲れ様です。
この記事では、Google Chromeの検証モード(デベロッパーツール)でスマホ表示した際に、デバイスフレームも表示する方法についてご紹介します。
Chromeでは、サイト訪問時に右クリックメニューから検証モードにすることができますよね。このとき、レスポンシブ表示(スマホから見た場合のサイト表示)を確認することができますが、選択したデバイスのフレームもエミュレートさせることができました。

上の画像のとおり、デバイスフレームを表示させることが可能です。
この表示設定自体は簡単でした。しかし、検証ツール内で選択できる全てのスマホデバイスのフレームを表示させることはできないようでした。記事前半でフレーム表示させることのできるデバイスを整理しつつ、記事後半で実際にデバイスフレームを表示する方法について解説します。
Contents
デバイスフレームを表示できる端末は限られている

確認したところ、一部のApple製品のデバイスのみ対応しているようでした。Apple製品の中でも、iPhone Xなどではデバイスフレームを表示できなかったので注意が必要です。対応しているデバイスを表にまとめます。
自分の環境にて、Chrome検証モード時に選択することができたデバイス名を対象しています。おそらく、ほぼほぼデフォルトだと思います。
デバイス名 | フレーム表示可否 |
Moto G4 | × |
Galaxy S5 | × |
Pixel 2 | × |
Pixel 2 XL | × |
iPhone 5/SE | ○ |
iPhone 6/7/8 | ○ |
iPhone 6/7/8 Plus | ○ |
iPhone X | × |
iPad | ○ |
iPad Pro | × |
Surface Duo | × |
Galaxy Fold | × |
ご覧のとおりですので、使用する際はお気をつけください。
Chromeの検証モードで『デバイスフレーム』も表示する方法

簡単3ステップで表示できます。
- 手順①:検証モードを開く
- 手順②:レスポンシブ表示に切り替える
- 手順③:デバイスフレームを表示させる
順番に見ていきます。
手順①:検証モードを開く

対象サイト内で右クリックし、メニュー内の「検証」をクリックします。

検証モードの画面が表示されました。
デフォルトですと、デスクトップで出力した場合の画面が、左側に表示されているはずです。
手順②:レスポンシブ表示に切り替える

「Elements」横にあるタブレットとスマホのようなアイコンをクリックします。

すると画面左側に表示されていたデスクロップでの出力画面が、レスポンシブでの画面表示に切り替わりました。
手順③:デバイスフレームを表示させる

スマホの画面表示がされているペイン右上からオプションメニューを開き、「show device frame」をクリックします。
これで、デバイスフレームを表示する準備は完了しました。
あとは、選択しているデバイスがフレーム表示に対応していれば、画面に自動的に表示されるはずです。

上の画像の場合は「iPhone 6/7/8 Plus」を選択しているので、デバイスフレームが表示されています。
先述のとおり、「show device frame」を有効化した状態でデバイスを選択しても、全てのデバイスでフレーム表示できるわけではないのでご注意ください。
デバイスフレーム全体が表示されない場合

環境によっては、デバイスフレームを表示したときに画面全てが表示されきらない場合もあります。僕の環境でも、表示倍率「100%」だと見切れてしまうようです。
デバイスフレーム上部にあるメニューに「〜%」という項目があるので、調整してみてください。⬆の画像では、「75%」で設定しています。

無事、デバイスフレーム全体が表示されました。
画面を切り離すこともできる

⬆の画像のとおり、デバイスフレームの画面を独立して表示させることもできます。

ソースコードが表示されているペインの右上のメニューをクリックし、Dock side内の一番左のアイコンをクリックします。

これで、独立して表示できました。

元に戻したい場合は、再度Dock sideから同じアイコンをクリックするだけです。
まとめ

というわけで、Google Chromeの検証モード(デベロッパーツール)でスマホ表示した際に、デバイスフレームも表示する方法についてでした。
この機能を使うことで、視覚的にスマホデバイスでの表示だと理解しやすくなりますので、ぜひ活用してみてください。
今回は、以上です!
最後までお読み頂きありがとうございました。