レスポンシブデザインの確認が簡単に出来るChromeのデベロッパーツールの使い方

こんにちは、開発チームの田中です。普段はレスポンシブと同様のマルチデバイス対応を実現する「GeneCode（ジーンコード）」に携わっています。

今回は、レスポンシブデザインの確認が簡単に出来る、Chromeのデベロッパーツールの使い方についてお話していきます。

レスポンシブデザインでWebサイトを制作する際は色々なデバイスの画面幅を考慮し、それらのデバイスできちんとデザインが崩れていないか確認する必要があります。

しかし、たくさんの画面幅のデバイスが発売されており、確認するためにそれぞれの画面幅の端末をすべて購入して確認するというのは現実的ではありません。

そんな時に使えるChromeのデベロッパーツールを使った簡単なレスポンシブデザインの確認方法をご紹介します。

Chrome デベロッパーツールでの確認

Chromeのデベロッパーツールでは、さまざまな画面サイズの確認を以下の手順で行うことが出来ます。

赤枠で囲われた箇所がデベロッパーツールと呼ばれる箇所です。

赤枠で囲われた箇所がデバイスアイコンです。

クリックすると以下のようにWebページがスマートフォンに切り替わります。

元に戻したいときは再度デバイスアイコンをクリックします。

赤枠の箇所を選択すると、Chromeのデベロッパーツールで確認が出来る端末の一覧が表示されます。

確認したいデバイスを選択すれば完了です。

スマートフォンは横向きにWebページを閲覧することが出来ます。

Chromeのデベロッパーツールでは横表示の場合での確認も行うことが出来ます。

赤枠で囲われたアイコンをクリックすると、表示されているデバイスが回転し横表示を確認することが出来ます。

元に戻す場合はもう一度アイコンをクリックしてください。

デバイスの選択欄に、確認したい端末がない場合は確認したいデバイスを増やすことが出来ます。

赤枠のEditを選択します。

すると以下のように右側のデベロッパーツールにデバイスの一覧が出てきます。

その中から見たいデバイスにチェックを入れると確認できる端末が増えます。

端末の画面サイズを直接指定して確認を行うこともできます。

赤枠のResponsiveを選択します。

すると画面サイズが設定されているテキストボックスの数値が編集可能になります。

こちらに任意のサイズを入力して確認を行うことが出来ます。

今回は、レスポンシブデザインで制作したWebサイトのデザインを確認する方法について紹介しました。

すぐにデザインの確認をしたい場合には、この機能を使って試してみてはいかがでしょうか。

シンメトリックでは、レスポンシブと同様のマルチデバイス対応を実現する「GeneCode（ジーンコード）」を提供しています。
スマホ中心のサイト制作、リニューアルをお考えでしたら、ぜひ使ってみてください。

また、alter.jsを使用したLP制作サービス「スマホからLP制作」も展開しています。
こちらもご興味ありましたら是非お問い合わせください。