ChromeでUserAgent(ユーザーエージェント)を変更する方法【UA偽装】

User Agentとは、ウェブサイトにアクセスしている時のChromeなどのブラウザやOSの種類などのユーザーの情報です。User Agentを変更することで、Chrome上でIEやスマホのブラウザに偽装してページを確認することができます。

ChromeでUserAgent(ユーザーエージェント)を変更する方法【UA偽装】のイメージ

目次

  1. 1Chromeのユーザーエージェントとは?
  2. どんな時に使うの?
  3. 選び方は機能性と選べる対象で決めよう
  4. 2ChromeのUA偽装方法!~デベロッパーツールを利用する~  
  5. デベロッパーツールの開き方
  6. デベロッパーツールでUAを変更する方法
  7. 3ChromeのUA偽装方法!~拡張機能User-Agent Switcher for Chromeを利用する~ 
  8. User-Agent Switcher for Chromeをインストールしよう
  9. User-Agent Switcher for ChromeでのUAの変更方法 
  10. 4ChromeのUA偽装方法!~デバイスエミュレータを利用する~
  11. スマートフォンをエミュレータする
  12. デバイスツールバーからデバイスを選択
  13. 5ChromeのUA偽装方法!~Network conditionsを利用する~
  14. Network confitionsを表示する
  15. Network conditionsからUAを変更する

Chromeのユーザーエージェントとは?

PC

User Agent(ユーザーエージェント )とは、ユーザーがあるサイトにアクセスしたときに伝える、ソフトウェアやハードウェアなどユーザーの利用環境の情報です。

利用している OS(WindowsやMac OS)、Webブラウザ(ChromeやInternet Explorerなど)、スマートフォンの機種などの情報を伝えます。

どんな時に使うの?

パソコン、スマホ、タブレット

近年、レスポンシブデザインが重要視されています。

レスポンシブデザインとは、デバイスの画面サイズに依存しないwebサイトを構築する方法です。PCやスマートフォンなど、 ユーザーの インターネットの利用環境に合わせたWebサイトを表示させることができます。

レスポンシブデザインを採用すれば、PC用サイトとスマートフォン用サイトを別々に作る必要がありません。共通のWebサイトを1つ構築して、ページごとに1種類ずつ管理すればいいのです。

User Agent(ユーザーエージェント)により、ユーザーの利用環境を伝えることで、Webサイトはその ユーザーに合わせた情報を送信することができます

選び方は機能性と選べる対象で決めよう

機能

レスポンシブルデザインを採用してWebサイトを構築する際、それぞれのデバイスからの表示画面を確認したくても、あらゆるデバイスを実際に用意するのは難しいでしょう。

User Agentを偽装(UA偽装)してデバイスエミュレータを表示できます。User Agentは、本来のデバイスとは異なる情報を送ることで偽装することができます。UA偽装をすることで、PC上でも「スマートフォンで閲覧したページ」を表示することができます。

UA偽装をするには、Chromeに付属しているデベロッパーツールを使う方法やChromeの拡張機能を使う方法などがあります。

ガラケーなど用意されたUA以外のユーザーエージェントが必要になった場合は、デベロッパーツールを利用する必要があるなど、それぞれのメリットデメリットがあります。機能性と選べる対象を考慮して偽装方法を決めましょう。

ChromeのUA偽装方法!~デベロッパーツールを利用する~  

デベロッパー

Chromeに付属しているデベロッパーツール(Web開発のための要素の検証機能)を使用し、User Agent(ユーザーエージェント)を偽装をすることができます。

User Agentを偽装することで、Chrome上でInternet Explorerの画面やスマートフォンの画面を表示させたり、デバイスエミュレータとして表示することができます。

デベロッパーツールの開き方

デベロッパーツールの表示

Chromeメニューから、「その他のツール」「デベロッパーツール」の順にクリックします。

また、Chrome画面上で、Windowsなら「F12」キーを押す、または「Control + Shift + I」を同時に押す、Macなら「Control + Option + I」を同時に押すことで、デベロッパーツールが開きます。

デベロッパーツールでUAを変更する方法

デベロッパーツール

Chrome画面の左側にデベロッパーツールが表示されます。

デベロッパーツールの「Hide drawer」(Settingsボタンの左にある >>ボタン)をクリックします。

「Emulationタブ」をクリックします。タブがない場合は、「Settings」をクリックし、「General」を表示して、「Show 'Emulation' view in console drawer.」をチェックします。

「User Agent」を表示し、「Spoof user agent」をチェックします。

User Agentをセレクトボックスから選択します(Spoof user agentにチェックを入れるとセレクトボックスがアクティブになります)

ThumbChromeデベロッパーツールの機能と使い方【初心者向け】
Chromeというブラウザには、デベロッパーツールというGoogleが提供しているツールが存...

ChromeのUA偽装方法!~拡張機能User-Agent Switcher for Chromeを利用する~ 

Googleブラウザ

Chromeの拡張機能「User-Agent Switcher for Chrome」で、User Agentを変更することもできます。Chromeで、スマートフォンやIEなどのブラウザにUA偽装をして、ページを見ることができます。

Chromeのデベロッパーツールよりも、手軽に利用できます。確認するページが多い場合は、拡張機能「User-Agent Switcher for Chrome」を使うほうが便利です。

User-Agent Switcher for Chromeをインストールしよう

拡張機能の追加画面

「chrome ウェブストア」から「拡張機能」を開きます。検索ボックスに「User-Agent Switcher for Chrome」を入れます。

インストール画面が表示されます。右端の「Chromeに追加」ボタンをクリックしてChromeの拡張機能「User-Agent Switcher for Chrome」をインストールします。

拡張機能追加

Chromeに拡張機能「User-Agent Switcher for Chrome」のアイコンが追加されました。

User-Agent Switcher for ChromeでのUAの変更方法 

一覧表

追加されたChromeの拡張機能「User-Agent Switcher for Chrome」のアイコンをクリックすると、UAを変更できるブラウザの一覧表が表示されます。

「User-Agent Switcher for Chrome」で変更できるUAの種類は、
Chrome、Internet Explorer、iOS、Android、Windows Phone、Firefox、Opera、Safari

ブラウザのバージョン

偽装したいブラウザをクリックすると、変更できるブラウザのバージョン一覧が表示されます。ここでは、Internet Explorerをクリックしました。

また、任意のUAを追加することもできます。

「User-Agent Switcher for Chrome」アイコンを右クリック→「オプション」をクリックします。「User-Agent Switcher for Chrome」の画面が表示されます。

「Custom User-Agent List」欄から次の項目を入力します。
 

  • New User-agent name:UAの名称
  • name New User-Agent String:任意のUAを入力

ここから、GooglebotのUAも追加することができます。

ChromeのUA偽装方法!~デバイスエミュレータを利用する~

Chromeのデバイスエミュレータ機能で、User Agent(ユーザーエージェント)を変更して、Chrome上にブラウザを表示させることができます。

デバイスエミュレータ機能では、UA偽装だけでなく、ページの表示領域の再現などもできます。

スマートフォンをエミュレータする

デバイスエミュレータ

Chromeのデベロッパーツールを起動します。

デベロッパーツールの左上にあるスマートフォンのアイコンをクリックします。

デバイスツールバーからデバイスを選択

デバイスの選択

スマートフォンのアイコンをクリックすると、Webページの表示が変わり、デバイスエミュレータが表示されます。

デバイスエミュレータの画面上にデバイスツールバーが表示されます。デバイスツールバーから、エミュレートしたいデバイスを選択します。

ChromeのUA偽装方法!~Network conditionsを利用する~

開発

デベロッパーツールのNetwork conditionsからGoogle Chromeが用意したUserAgentに設定したり、任意のUserAgentを入力して設定することができます。

Network conditionsを利用すれば、デバイスエミュレータ機能よりも、細かい粒度の動作確認ができます。

Network confitionsを表示する

Network conditions

Chrome上で、Windowsなら「F12」キーを押す、または「Control + Shift + I」を同時に押す、Macなら「Control + Option + I」を同時に押すことで、デベロッパーツールを表示させます。

「︙」をクリックし、「More Tools」→「Network conditions」をクリックします。

デベロッパーツールに「Network conditions」が追加されます。「Network conditions」にある「Select automatically」のチェックを外します。

Network conditionsからUAを変更する

UA

「Network conditions」の「Select automatically」のチェックを外すと、その下のセレクトボックスやテキストボックスの表示されます。ここから、ユーザーエージェント (UA) が変更できるようになります。

ブラウザの選択

「User agent」のセレクトボックスから、User Agentを設定することができます。

セレクトボックスに一覧表示されるUser Agentには、主要なブラウザが一通り用意されています。また、Googlebotなど特殊なUser Agentもあります。

任意のUser Agentを設定する場合は、セレクトボックス下にあるテキストボックスに直接、設定したいUser Agentを入力します。

User Agentを設定後、目的のページを開いたり、再読込したりして設定を反映させます。

ThumbChromeを高速化する拡張機能や設定方法は?flagsでChromeを高速化しよう【2018年最新版】
Chromeが公開されて2018年で10年が経ちます。機能が充実するほど、パソコンが重い・遅...
ThumbGoogle Chromeをアンインストールするとどうなる?できないときのやり方は?
動作が重くなった、挙動がおかしいなどの理由でChromeをアンインストールしようとしても、で...

関連するまとめ

Original
この記事のライター
松子
よろしくお願いします。