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

この記事は、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」での表示画面です。

まとめ

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

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

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