パソコンのブラウザでスマートフォン表示を確認する方法

2016年09月27日

パソコンのブラウザでスマートフォン表示を確認する方法自社のWebサイトをスマートフォン対応で制作している時、スマートフォンでの表示をどのようにチェックされているでしょうか?

本日はパソコンのブラウザでスマートフォン表示を確認する方法を解説いたします。

Google Chrome なら簡単

パソコンのブラウザでChromeを使っているのであれば簡単にできます。

まず、Chromeでスマートフォン表示で確認したいページを開きます。

画面右上のメニューをクリックし、「その他のツール」>「デベロッパーツール」と進みます。

画面右上のメニューをクリックし、「その他のツール」>「デベロッパーツール」と進みます。

スマートフォンのアイコンをクリックします。

スマートフォンのアイコンをクリックします。

画面上部の「Responsive」をクリックすると、スマートフォンの機種を選ぶことができます。

一覧になければ「Edit..」からさらに選ぶことができます。

ここでは「iPhone6」を選択してみました。

画面上部の「Responsive」をクリックすると、スマートフォンの機種を選ぶことができます。

機種の選択後、一度ページを更新しましょう。(F5を押す)

すると「iPhone6」での表示が確認できます。

すると「iPhone6」での表示が確認できます。

実際にスクロールやクリックなどの操作も可能です。

まとめ

本日は、パソコンのブラウザでスマートフォン表示を確認する方法をお送りしました。もちろん実機での確認がベストですが、手軽にチェックできる方法として覚えておいて損はありません。

今後スマートフォンサイトの制作も増えてくるかと思いますので、是非お試しください。

お役立ちレポートダウンロード

製造業Web担当者のためのWebサイト制作ガイド(全30ページ)

製造業Web担当者のためのWebサイト制作ガイド(全30ページ)

本レポートではサイト制作やリニューアル時に考えると『良い』と思われるコトをWebサイトをディレクションする側の目線でまとめました。サイト制作の技術的な話ではなく、考え方の部分にフォーカスした内容です。 サイト制作でお困りの方は、ぜひご一読ください。

※本レポートは「Webディレクターが教える、サイト制作時に考えるべき7つのこと(全7回)」のコラムを再編集したものです。

レポートをダウンロード

 

カテゴリー: ツール紹介