スマートフォン閲覧時のウェブサイトをパソコンから確認する方法

最近はスマートフォンからの閲覧比率がかなり上がっていて、ウェブサイトによっては7割とか8割近いアクセスがスマートフォン経由ということもあります。

そのため、スマートフォンからのアクセスにはスマートフォンに適したデザイン・配置で表示させる「スマホ対策」を行っているウェブサイトも多いですし、そもそも最近はまずスマートフォンからの閲覧を主としたウェブサイトの制作・デザインを進めるケースも増えています(モバイルファースト・スマホファースト)。

Chromeでスマートフォンからの閲覧を確認

ウェブサイトの構築や更新、修正等を行うとき、スマートフォンからどのように見えているか確認する作業は必須といえますが、これはスマートフォンから直接行わずとも、パソコンのブラウザ(Chrome)から比較的簡単に確認することができます

Chromeというブラウザをパソコンにインストールしていない人は、まず先にこちらをインストールしてください。

https://www.google.co.jp/chrome/index.html

Chromeを立ち上げたら、メニューから「その他のツール」、「デベロッパーツール」と選択します。

デベロッパーツール

ウィンドウの右にデベロッパーツールが表示されるので、一番上のほうに表示されているスマートフォン・タブレットのボタンをクリックします。(あとでパソコン版の画面に戻すときには、このボタンを再度クリックしてオフの状態に戻してください)

あとは画面中央上に表示されるメニューから、表示させたいスマートフォンの種類を選択すれば、ウインドウにはそのスマートフォンで閲覧した場合の画面が表示されます。

スマホなのにPC版が表示されたり、PCなのにスマホ版が拡大表示される

スマートフォンの表示を選択したのに、パソコン版のウェブサイトが縮小表示されたり、パソコン版の表示に戻したのにスマートフォン版のウェブサイトが拡大表示されるなど、うまく表示されないときはブラウザのキャッシュが邪魔している可能性があります

そんなときは、Chromeのデベロッパーツールにした状態のまま、ブラウザの更新ボタンをを長押ししてください。「通常の再読み込み」のほか、「ハード再読み込み」「キャッシュの消去とハード再読み込み」が表示されるので、一番下の「キャッシュの消去とハード再読み込み」を選択します。

これでブラウザ内に溜まったキャッシュ(ウェブサイトを高速に表示させるため、あらかじめダウンロードされていた画像やファイルなどのデータ)が消去され、あらたにそのウェブサイトの情報が読み込まれることになります。

キャッシュのクリアはパソコン版ウェブサイトを修正するときにも活用できる

最近はブラウザのキャッシュが効きすぎて、上のようにスマートフォンからの閲覧確認だけでなく、パソコン用のウェブサイトをパソコンから修正しているときなどにも「変えたはずの文章が変わってない」とか「古い画像が表示されたままになってる……」とか、困った事態に陥ることも増えてますね。

そんなときも一度デベロッパーツールを開いて、更新ボタン「キャッシュの消去とハード再読み込み」を行うことで、データが読み込み直されて最新の情報に置き換わります。(稀に、ブラウザ側ではなくサーバー側のキャッシュが邪魔することもありますが)

以上、パソコンのブラウザ(Chrome)からスマートフォン閲覧時のウェブサイトを確認する方法でした。最終的にはスマホの実機で確認するのが一番ですが、作業途中に何度もスマホやタブレットを持ち替えるのも面倒なので、デベロッパーツールでの確認を取り入れるとかなり手間を省けますよ。

士業のウェブサイト制作・活用アドバイザー。これまで制作に携わった士業ウェブサイトは、行政書士、司法書士、社会保険労務士、税理士、弁護士、建築士、土地家屋調査士等430件以上。神奈川県横浜市在住。

この記事をシェアする

  • このエントリーをはてなブックマークに追加

関連記事

  1. これならわかる!Googleアナリティクス 今日からはじめるアクセス解析超入門

Tumblr

    https://wamoblr.tumblr.com/post/172855044115https://wamoblr.tumblr.com/post/172511323700https://wamoblr.tumblr.com/post/172475739850https://wamoblr.tumblr.com/post/172440858900

Feedlyで最新情報を確認

ページ上部へ戻る