アフィリエイト Wordpress

パソコンで簡単にスマホサイトでのデザインを確認する方法

更新日:

どうもみなさんこんにちは

みなさんはブログやサイトを、どの端末で制作しているでしょうか?ご自分でサーバー契約をしてWordpressをインストールして構築されている方はパソコンで作業されている方が多いかと思います。

私もパソコンで作業をしながら、片手にiPhone、脇にiPad、奥にandroidと何だか一昔前のimode,ezwebなど携帯3キャリア対応を思い出しそうな、さらに昔のInternetExplorer、NetscapeNavigater対応を思い出しそうな状態です。

どうにかならないかなぁと思っていたら、意外にも簡単にブラウザで確認する方法がありました。これを見つけてからは作業効率が大幅アップしましたのでご紹介です。

でも、最終的な確認は実際の端末で確認されることをお勧めします。(若干異なることもありますので)

スポンサーリンク

Google Chromeでのスマホサイトの確認

まず、調べたいページにchromeでアクセスします。

右上の【GoogleChromeの設定】(三本線)-【その他のツール】-【デベロッパーツール】を開きます。
pc-smartphone-check1

デベロッパーツールでは、左側に画面イメージ、右側にソースコードなどが表示されます。
pc-smartphone-check2

この画面を一度リロードする(F5キーなど)と指定のデバイスでの表示イメージが出ます。Nendなどのオーバーレイ広告も再現されます。

さらにデバイスの指定が豊富で、デベロッパーツールの左上(黄色の部分)のプルダウンを選択することで、iPad、iPhoneはもちろんのことKindleFire、Nexusシリーズ、Galaxyシリーズなど様々な画面サイズでの確認ができます。
pc-smartphone-check3

終わりたいときは、ソースコードの右上の×を押せば元に戻ります。

InternetExplorerでのスマホサイトの確認(IE11)

まず、調べたいページにIneternetExplorerでアクセスします。

右上の【ツール(歯車)】-【F12開発者ツール】を開きます。
pc-smartphone-check-ie1

すると画面下に開発者ツールが開くので黄色い部分のエミュレーションを選択します。
pc-smartphone-check-ie2

ユーザーエージェント文字列を、確認したい端末の文字列を入れればリロードして再現されるのですが、これが結構手間です。
pc-smartphone-check-ie3

なので、私はユーザーエージェントを「Apple Safari(iPad)」にして、ブラウザの大きさを変えることで確認したりしてますが、正直Chromeに比べて動作は遅いですし、使い勝手も悪いです。Choromeのデベロッパーツールをお勧めします。
pc-smartphone-check-ie4

参考までに、ユーザーエージェント一覧がまとめられているサイトをご紹介します。
User-Agent (ユーザー エージェント) 一覧

こちらも終わりたいときは、開発者ツールの右上の×を押せば元に戻ります。

意外にスマホサイトを確認するとadsenseが4つも出ちゃってる!とか、文字がギチギチで読みづらい!とか有りますのでユーザー目線に立つためにも確認は必要ですね。

-アフィリエイト, Wordpress

Copyright© 上善如水 , 2019 All Rights Reserved.