【Google Chrome ＆ Firefox】PCから簡単にスマホを表示する方法とは

今や私たちの生活に欠かすことのできないスマートフォン。社会人や学生はもちろん、高齢者や子供がスマホを使いこなす姿も珍しいものではなくなっています。ECサイトの利用においてもスマホからのアクセスが年々増えており、ネットショップとしてスマホ対策は不可欠です。

ページコンテンツ

1 スマホページの確認はなぜ重要か
2 スマホページの確認にデベロッパーツールが便利
3 Google Chromeでのスマホ表示方法
4 Firefoxでのスマホ表示方法
5 Safariでのスマホ表示方法
6 アプリでのチェックは別途必要なことに注意
7 【参考】デベロッパーツールのその他の活用方法
8 【Google Chrome ＆ Firefox】PCから簡単にスマホを表示する方法とは　まとめ

スマホページの確認はなぜ重要か

経済産業省の「令和3年度電子商取引に関する市場調査(PDF)」によると、2021年の物販ECのうちスマホ経由は52.2%となっています。

この数字はその後も増加していると考えられ、PCからのアクセスとともにスマホからのアクセスに対してもしっかり対応していくことが重要です。

ネットショップのページ更新はPCから行うことが多いですが、ページの確認はPCだけでなくスマホでも必ず行うべきです。PCページとスマホページが別である場合、PCページだけを更新してスマホページは元の内容のままというようなミスが起きる可能性がありますし、レスポンシブでPCとスマホが同一ソースである場合もスマホで見た際のレイアウト等に問題がないことを確認する必要があります。

スマホページの確認にデベロッパーツールが便利

とはいえ、ちょっとした更新のたびにわざわざスマホでページを開いてチェックするのは手間がかかります。スマホページの確認には、ブラウザに搭載されている開発者向けのツール「デベロッパーツール」が便利です。PCのブラウザから簡単な操作でスマホからアクセスした際の見え方を確認することができるので、ぜひ活用してください。

Google Chromeでのスマホ表示方法

Chromeでページを開き、右上のアイコン（︙）からその他のツール – デベロッパーツールを開きます。ショートカットキーは「Ctrl + Shift + I」です。

デベロッパーツールが起動します。ソースコードの上に表示されている切り替えボタンを押して青い状態にすると、さまざまなデバイスでの表示が切替可能になります。左側上部の「サイズ：」からデバイスの種類を選択します。

ここでは「iPhone XR」を選択しました。レスポンシブのページではすぐに選択したデバイスでの表示状態が確認できます。レスポンシブではない場合、画面を再読み込みして確認します。

Firefoxでのスマホ表示方法

Firefoxでページを開き、右上のアイコン（≡）からその他のツール – ウェブ開発ツールを開きます。ショートカットキーは「Ctrl + Shift + I」です。

ウェブ開発ツールが起動します。Google Chromeの場合と同様、右下の切り替えボタンを押して青い状態にすると、さまざまなデバイスでの表示が切替可能になります。左側上部のプルダウンからデバイスの種類を選択します。

ここでは「iPhone　11 Pro iOS 14.6」を選択しました。レスポンシブではないページの場合、画面を再読み込みすることでスマホ時の表示を確認できます。

Safariでのスマホ表示方法

MacのSafariでページを開き、メニューの開発 – レスポンシブモードにするを選択します。ショートカットキーは「⌃ + ⌘ + R」です。

上部にさまざまな種類のデバイスが表示されます。ここではiPhone 8を選択しました。レスポンシブではないページの場合、画面を再読み込みすることでスマホ時の表示を確認できます。

Safariの場合、Android系のスマホでの表示をチェックすることはできないので注意が必要です。ちょっとした文言修正やバナー掲載程度であればiPhone / Androidで違いがでることはまずありませんが、レイアウトを大きく変えるような場合はほかのブラウザでiPhone / Android両方をチェックするほうがベターです。

アプリでのチェックは別途必要なことに注意

以上で紹介した方法は、スマホのブラウザでページを見た際の見え方のチェック方法になります。お客様がスマホのブラウザでページを見るケースとしては、例えば待ち受け画面のGoogle検索窓からキーワード検索し商品ページにアクセスする場合、メルマガに掲載されたリンクからショップを訪れる場合などがあります。

スマホで何かを購入する場合、ブラウザで見る以外に例えば楽天のアプリを立ち上げてアプリ内で検索するパターンもあります。アプリで見た際の見え方は、デベロッパーツールでは確認できません。実際にスマホにアプリをインストールして確認する必要があります。

ただし、楽天に関してはスマホページでのCSS・JSの使用が制限されているため、ブラウザで表示したときに問題のないページがアプリでは崩れてしまうということは実際には考えにくいです。

【参考】デベロッパーツールのその他の活用方法

デベロッパーツールは、スマホでの見え方をチェックする以外にもさまざまな機能があります。

ネットショップ運営で活用できる機能のひとつに、CSSの検証があります。

こちらは、楽天Goldに設置した特集ページです。例えば、このページの背景色を黒にしたらどうなるかを検証してみます。

Bodyタグにbackground-color: black; というCSSを設定しました。これは実際のページに修正を加えたのではなく、デベロッパーツールで擬似的にCSSを設定して検証している状態です。実際のページは元のままなのでお客様がアクセスした際の影響はありません。

このように、「ここのCSSを変えてみたらどうなるだろう？」と思ったときにデベロッパーツールを使って気軽に試すことができます。

このほかにも、デベロッパーツールにはWebサイト制作に役立つ本格的な機能が多数搭載されています。

【Google Chrome ＆ Firefox】PCから簡単にスマホを表示する方法とは　まとめ

スマホからのアクセスが全体の半数を超える現在、ネットショップのページチェックはPC・スマホの両方で行うことが必須です。とはいえ、ちょっとした更新のたびに実際にスマホを手に取るのは面倒なため、ついついスマホ側の確認が手薄になってしまいがちです。Google ChromeやFirefoxなどの主要なブラウザにはデベロッパーツールが搭載されており、簡単な操作でスマホからアクセスした際の表示を確認できるのでぜひ活用しましょう。ショートカットキーを覚えれば、さらにスピーディーにチェックが可能になります。