この記事は、下記項目が当てはまる方のお役に立てます。
- Google Chromeのデベロッパーツールを使う作業をしている（主にWebデザイン）
- レスポンシブ表示を確認する際にスマホフレーム（デバイスフレーム）を表示したい
- スマホフレームを表示する方法を画像つきで知りたい
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 | × |
ご覧のとおりですので、使用する際はお気をつけください。
デベロッパーツールで『デバイスフレーム』も表示する方法（Google Chrome）
簡単３ステップで表示できます。
- 手順①：デベロッパーツール（検証）を開く
- 手順②：レスポンシブ表示に切り替える
- 手順③：デバイスフレームを表示させる
順番に見ていきます。
手順①：デベロッパーツール（検証）を開く
対象サイト内で右クリックし、メニュー内の「検証」をクリックします。
検証モードの画面が表示されました。
デフォルトですと、デスクトップで出力した場合の画面が、左側に表示されているはずです。
手順②：レスポンシブ表示に切り替える
「Elements」横にあるタブレットとスマホのようなアイコンをクリックします。
すると画面左側に表示されていたデスクロップでの出力画面が、レスポンシブでの画面表示に切り替わりました。
手順③：デバイスフレームを表示させる
スマホの画面表示がされているペイン右上からオプションメニューを開き、「show device frame」をクリックします。
これで、デバイスフレームを表示する準備は完了しました。
あとは、選択しているデバイスがフレーム表示に対応していれば、画面に自動的に表示されるはずです。
上の画像の場合は「iPhone 6/7/8 Plus」を選択しているので、デバイスフレームが表示されています。
先述のとおり、「show device frame」を有効化した状態でデバイスを選択しても、全てのデバイスでフレーム表示できるわけではないのでご注意ください。
デバイスフレーム全体が表示されない場合
環境によっては、デバイスフレームを表示したときに画面全てが表示されきらない場合もあります。僕の環境でも、表示倍率「100％」だと見切れてしまうようです。
デバイスフレーム上部にあるメニューに「〜％」という項目があるので、調整してみてください。⬆の画像では、「75％」で設定しています。
無事、デバイスフレーム全体が表示されました。
デベロッパーツールではウィンドウを切り離すこともできる
⬆の画像のとおり、デバイスフレームの画面を独立して表示させることもできます。
ソースコードが表示されているペインの右上のメニューをクリックし、Dock side内の一番左のアイコンをクリックします。
これで、独立して表示できました。
元に戻したい場合は、再度Dock sideから同じアイコンをクリックするだけです。
デベロッパーツールでデバイスフレームを活用していこう
というわけで、Google Chromeのデベロッパーツール（検証モード）でスマホ表示した際に、デバイスフレームも表示する方法をご紹介しました。
Webデザイナーをされている方のなかには、プレゼンテーションでデザインの提案・説明をする機会がある方もいるかもしれません。そんな時に、今回のデベロッパーツールを表示する機能を使うことで、より説明に説得力を増すことができるかもしれません。ぜひご活用してみてください！
今回は、以上です！
最後までお読み頂きありがとうございました。
