レスポンシブデザインが求められる時代

レスポンシブデザインとは

レスポンシブデザインとは、パソコンやスマートフォンなど、ユーザーインターネットの利用環境に合わせたホームページを表示させることです。

前述したように、年々スマートフォンの利用率が高まっています。そのため、自社ホームページでもレスポンシブデザインを導入し、ユーザーにとって見やすいホームページを構築することが重要です。

レスポンシブデザインに関しては、以下の記事も参考にしてみてください。

参考:
レスポンシブデザインとは|今更きけない基礎知識とメリット・デメリット|ferret

ユーザーエージェントを偽装し、デバイスごとの表示画面を確認しよう

レスポンシブデザインを導入し、それぞれのデバイスからの表示画面を確認したいと思っても、あらゆるデバイスを実際に利用してホームページを確認するのは困難です。そんなときは、開発ツールを使ってユーザーエージェントを偽装してみましょう。

ユーザーエージェントは、本来のデバイスとは異なる情報を送ることで偽装できます。ユーザーエージェントを偽装することで、パソコンからでも「スマートフォンで閲覧した場合のページ」を表示させることができます。

今回は、「Safari」「Google Chrome」「Firefox」の開発ツールを使った確認方法を解説します。ソフトウェアをインストールする必要もなく簡単に確認できるので、試してみてください。

1.Safari

3.jpg
Safari」メニューから「環境設定…」をクリックします。

4.jpg
詳細」のタブを開き、「メニューバーに“開発”メニューを表示」にチェックを入れます。

5.jpg
表示を確認したいホームページを開き、「開発」メニューから「レスポンシブ・デザイン・モードにする」をクリックします。

6.jpg
画面が切り替わり、Appleのデバイスごとに表示を切り替えられるようになります。上の画像は「iPhone 8」での表示画面です。

2.Google Chrome

7.jpg
Google Chrome」メニューから、「表示」「開発/管理」「デベロッパーツール」の順にクリックします。

8.jpg
左側に表示される開発画面の左上のアイコンをクリックし、右側の画面の上部にあるプルダウンから、表示させたいデバイスを選択します。

9.jpg
右側の画面が、指定したデバイスでの表示に切り替わります。上の画像は「Galaxy S5」での表示画面です。

3.Firefox

10.jpg
Firefox」メニューから、「ツール」「ウェブ開発」「レスポンシブデザインモード」の順にクリックします。

11.jpg
プルダウンから表示させたいデバイスを選択します。

12.jpg
帯域(通信規格)も指定できます。

13.jpg
上の画像は、「iPad Air 2」での表示画面です。