ウェブをパソコンで開いている状態では、スマホやタブレットの画面からどのように見えているかはまったく分からない。確認のためにデバイスを用意するのは大変なので、Chromeのユーザーエージェント（UA）を変更し、擬似的に別デバイスから開いた状態にする拡張「MobileLayouter」で確認しよう。

「MobileLayouter」は、Chromeのユーザーエージェントを変更する拡張機能だ。スマホやタブレットのブラウザで開いた状態を、Chrome上で再現できる。特筆すべきは対応デバイスの種類。スマホ、タブレット、携帯電話など1400以上のデバイスを再現してくれる。
ウェブサイトを作っていて、「これスマホでちゃんと表示されるっけ……？」と不安になったときに利用するのがオススメ。

■ ChromeのUAを変更してスマホやタブレットの表示をテスト

「MobileLayouter」をChromeWebStoreからダウンロードし、インストールしよう

インストールが完了するとツールバーにアイコンが追加されるのでクリックしよう

ポップアップが表示される。iPhoneやAndroidなどの主要なデバイスが表示される。表示を設定したい項目をクリックしよう

ユーザーエージェントが変更され、指定したデバイスのサイズで表示中のサイトが表示される。これはiPhone5Sの画面サイズでYahoo!Japanを表示した状態

ポップアップ内に表示されているデバイス以外にも項目を追加することが可能。「+」をクリックしよう

スマホ、タブレット、携帯電話の機種名が大量に表示される。1400以上の機種に対応しているぞ

左下の「Option」をクリックしてみよう

「Device」で画面サイズを指定すると新たなデバイスを追加できる。また「Screen」では背景色や境界線を表示する設定にできるぞ