ユーザーエージェントとは？パソコンで「スマホ用ページ」を確認しよう

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

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

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

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

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

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

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

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

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

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

1.Safari

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

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

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

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

2.Google Chrome

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

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

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

3.Firefox

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

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

*帯域（通信規格）*も指定できます。

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