スマホ対応に必須のユーザーエージェントを理解しよう

ホームページをスマートフォン対応させようと、その方法を検索しているとよく出てくる言葉の一つに、「ユーザーエージェント」というワードがあります。
しかし、いざ意味を調べてみると、プロトコルやHTTP、HTMLなどの単語が並ぶ解説が出てくるだけで『あまり理解できない』という方は少なくないのではないでしょうか。

ユーザーエージェントはアクセス解析にも関わってくるので、Web担当者であればしっかり理解しておきたい単語です。今回は、ユーザーエージェントの基本概念の解説と、スマートフォン対応との関連性について解説します。

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

ユーザーエージェントとは、簡単に言うとホームページを訪れた際に伝える自分自身の情報です。
伝える情報は、自分が使用しているOS（WindowsやMac OS)やブラウザ、携帯電話の機種などです。

イメージとしては、平安武士が戦う相手に名乗りをあげるのを想像するとわかりやすいかもしれません。
自分の名前だけでなく通称や出身地、時には官職まで名乗りをあげるように、ホームページに対して「我こそはauのAQUOS K SHF33、ブラウザは〜を使ってきた」と名乗っているわけです。

自分の情報を伝えることで、ホームページはユーザーの状況に合わせた情報を送信できます。
ユーザーが利用しているデバイスがスマホと認識すればスマホ用のページを、パソコンだと認識すればパソコン用のページを表示するといったように、ユーザーエージェントはユーザーに対して最適な情報を表示するために重要な役割を果たしています。

ユーザーエージェントはアクセス解析でも活躍

ユーザーエージェント情報は、アクセス解析にも非常に役立ちます。
実際に、Googleアナリティクスのどこでユーザーエージェントの情報が見られるのかを確認してみましょう。

ブラウザごとのセッション数や新規ユーザー数の確認は以下の項目から行えます。

レポート＞ユーザー＞ユーザの環境＞ブラウザとOS

モバイル端末の機種ごとの情報を知りたい場合は以下の項目を参照します。

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

スマホ時代にはユーザーエージェントの理解が不可欠

ユーザーが利用しやすいホームページを構築するには、大きな画面のパソコンでも小さな画面のスマートフォンでも、それぞれ見やすい環境にしてあげることが大切です。
その中でもスマートフォンの所有率は70％にのぼります。これは消費者を考える上で大きな数字です。

参考:
メディア定点調査2016

ユーザーエージェントを使えば、ユーザーの状況がわかり、こちらから見やすい画面を提示することができるのです。
特に、ECサイトは入力画面の入力や見やすさが売り上げにも直結するので、特に対応する必要があるでしょう。

ユーザーエージェントを使ってブラウザごとの表示画面を確認しよう

先に記載したように、ユーザーエージェントはホームページに対して自己紹介です。
あくまで自己紹介なので、実は事実と異なる情報を送信して、パソコンからでもスマートフォンで閲覧した場合の画面を見ることができます。
運営しているホームページの画面がどの端末でも見やすく表示できているか、少ない手順で確かめられるのでやってみましょう。

Firefox　～拡張機能、User Agent Switcherを使う～

User Agent Switcher

ブラウザの一つ、Firefoxの拡張機能を利用します。

Firefoxをインストールしていない人は、上記のサイトからインストールを行います。
元々、パソコン内にインストールされているものと同様に上記サイトからインストールを行い、再起動をすればUser Agent Switcherの機能が使えるようになります。

レスポンシブデザインモードを利用して表示する

1.　Firefox メニュー (メニューーバーを表示している場合やMac ではツール)を開く
2.　開発ツールから "レスポンシブデザインモード" を選択する

上記は、東京スカイツリーのホームページ（TOKYO SKY TREE）をレスポンシブデザインビューで見た状態です。

3.ユーザーエージェントを入力する

右上にある”カスタムユーザーエージェント”に、見たい端末のユーザーエージェントを入力します。

各端末やブラウザのユーザーエージェントは下記のサイトを参照してください。
ユーザーエージェント一覧

試しにiPhoneのiOS5のユーザーエージェントを入力してみます。

このように表示されました。

4.端末に合わせたサイズで表示する

3.のままだと表示画面のサイズがiPhoneとは異なるので、端末に合わせたサイズにします。画面の右下にある三角のマークをクリックしながら動かすことで、サイズを調節することができます。

このように表示できました。

このホームページでは画面の表示が変わり、ユーザーエージェントに合わせてページの内容が変わるようになっていることがわかるかと思います。
ユーザーエージェントに合わせて表示を変えない場合、2の画像のようにパソコンでは見れるのにスマートフォンでは見えない部分が出てきてしまいます。

今、紹介したもの以外にもスマートフォンから見た表示を簡単に確かめる方法があります。

Google Chrome　～拡張機能、Window Resizerを使う～

WindowResizer

1.Chrome ウェブストアより、Window Risizer をインストールします。
2.画面右上に出るアイコンをクリックすると、変更できる端末が出てきます。
3.見たい端末をクリックすれば、表示がその端末の表示に変わります。

スマホ画面のチェック方法については、ぜひ下記の記事も参考にしてみてください。

知らなきゃ損！パソコン上でホームページのモバイルでの見え方を爆速でチェックする方法
Web担当者なら知っておきたい、スマホ画面チェックツール8選

まとめ

ユーザーエージェントはスマートフォン向けサイトを作る時だけではなく、アクセス解析を行う際にも知っておいたほうがいい概念です。
現代では、スマートフォンだけでなく、タブレットや携帯ゲーム機でもネットサーフィンができます。様々な端末が増える中で、ホームページもユーザーに合わせて変化していくことが大切です。

普段、パソコンやスマートフォンでネットを見ている時にも使っているものなので、意識してみるといいかもしれませんね。