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

この記事は、2016年11月11日の記事を再編集しています。

近年、スマートフォンを利用する人は増えています。個人のスマートフォンの保有率は2011年では14.6％でしたが、2016年には約4倍の56.8％まで増加しました。

参考：
平成29年版 情報通信白書|総務省

自社ホームページを運用している方の中にも、パソコンだけでなくスマートフォンからも閲覧しやすいように対応させたいと考えている方も多いのではないでしょうか。ユーザーの端末や画面サイズに応じて適したページを表示することを、レスポンシブデザインといいます。

レスポンシブデザインを導入するために理解しておきたい用語が、「ユーザーエージェント」です。ユーザーエージェントを理解することで、ユーザーにとって適したレスポンシブデザインを導入できているか検証することができます。

今回は、ユーザーエージェントの意味と、様々な端末から見たホームページの確認方法を解説します。レスポンシブデザインを導入したいと考えている方も、ぜひ参考にしてみてください。

ユーザーエージェントとは

ユーザーエージェントとは、あるホームページにアクセスしたときに伝える、自分自身の情報のことです。利用しているOS（WindowsかMac OS）やブラウザ、スマートフォンの機種などの情報を伝えます。

電話をかけたり訪問したりするときに、社名や氏名を名乗って相手に自分を認識してもらうことを想像すると分かりやすいでしょう。

自分の利用環境を伝えることで、ホームページはそのユーザーに合わせた情報を送信できます。例えば、ユーザーがスマートフォンからアクセスしていればスマートフォン用のページを、パソコンからアクセスしていればパソコン用のページを表示できます。

ユーザーエージェントは、ユーザーに最適な情報を表示するために重要な役割を果たしているのです。

ブラウザのバージョンアップに注意

ユーザーエージェント情報を活用すると、例えば特定のブラウザからのアクセスを禁止することも可能です。ただ、ブラウザ自体がバージョンアップすると、制限できなくなることがありますので注意しておきましょう。

ユーザーエージェントはアクセス解析で確認できる

ユーザーエージェントの情報は、アクセス解析にも役立ちます。Googleアナリティクスを例に、どこでユーザーエージェント情報が確認できるか説明します。

ブラウザ別

ブラウザ別の情報の確認は以下の手順で行います。

レポート＞ユーザー＞テクノロジー＞ブラウザとOS

モバイル端末別

モバイル端末別の情報は以下の手順で行います。

レポート＞ユーザー＞モバイル＞デバイス

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

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

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

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

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

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

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

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

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

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

1.Safari

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

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

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

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

2.Google Chrome

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

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

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

3.Firefox

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

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

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

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

まとめ

ユーザーエージェントを理解しておくと、普段のアクセス解析や、レスポンシブデザインの導入の際に役立ちます。ユーザーエージェントの切り替えは主要ブラウザそれぞれで試せるので、開発環境に合わせて試してみてください。

ただ、あくまでユーザーエージェントの偽装によって表示される環境は仮想のものです。実際の導入時・改修時には、実機検証も欠かさず行いましょう。

近年は携帯ゲーム機でもインターネットを利用できるなど、ユーザーの流入経路は多岐に渡っています。多くのユーザーにとって閲覧しやすいホームページになるよう、様々な側面から分析する視点を忘れないようにしましょう。