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

ホームページをスマートフォン対応させようと、その方法を検索しているとよく出てくる言葉の一つに、「 ユーザー エージェント」というワードがあります。
しかし、いざ意味を調べてみると、プロトコルや 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選

まとめ

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

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