Google chromeでスマートフォン表示画面(レスポンシブデザイン)を確認する方法




Google chromeを使ってパソコンからスマホの表示画面(レスポンシブデザイン)を確認する3通りの方法を紹介します。

  • mobile browser emulator(グーグルクローム用プラグイン)
  • Google chromeデベロッパー ツールでスマホ表示画面を確認
  • Web開発者向けのブラウザ「Blisk」でレスポンシブ表示
プラグイン mobile browser emulator

プラグイン mobile browser emulator

Google chromeデベロッパー ツール

Google chromeデベロッパー ツール

なぜスマホ表示画面をするのか?

年々、スマホユーザーの利用率は増えています。

そのため、ネットショップ運営でもウェブサイトの運営でも、ユーザーがスマホからWEBサイトを閲覧してときにどう見えているか?使いすくなっているか?という確認は欠かせません。

あなたの運営サイトに訪れるユーザーがどの端末の利用比率が大きいかぜひ確認してみて下さい。
Googleの提供している無料のアクセス解析ツール「googleアナリティクス」を導入すれば確認に確認できます。

どのサービスを使っている場合でも大抵は、googleアナリティクスの導入ができます。
もし、対応していないなら、利用サービスの変更を考えた方がよい位です。

Googleアナリティクスの導入方法

ネットショプの運営者としては出品するときPCから作業することが多いので、スマホで閲覧したときの見え方は忘れてしまいがちです。

ネットショップ運営でパソコンから商品ページを閲覧したときには問題なくても、スマホから見たときに見づらいことがありますす。
例えば、「商品画像のキャッチコピーの文字が小さすぎて読めない!」などです。

商材やカテゴリにもよりますが、一般消費者がネットで買い物するとき、およそ7割がスマホです。

以下の画像は私が運営しているネットショップの一つのデバイス別の比率です。

 

さらに商材別にみていくと、9割がスマホという場合も商品もあります。

スマホでの表示を確認したい時にパソコンからすぐさ確認できれば便利です。

mobile browser emulator(モバイル・ブラウザ・エミュレーター)

グーグルクローム用プラグイン(拡張機能)「mobile browser emulator」を導入すればパソコンからスマホでの表示を確認できます。

mobile browser emulatorの追加

導入するには、mobile browser emulatorにアクセスし「クロームに追加」をクリックします。

「拡張機能を追加」をクリックします。

ブラウザメニューにアイコンが追加されます。


これで、「mobile browser emulator」の追加は完了です。

mobile browser emulatorの使い方

mobile browser emulatorの使い方は簡単です。

まず、なんでもいいので目的のWEBサイトを開きます。

Chromeの「mobile browser emulator」アイコンをクリック後、「Phones」をクリックします。

ウィンドウが開きました。

mobile browser emulatorで確認できるスマホ画面サイズ

以下の5サイズに対応しています。

  • Mobile – Portrait:320×480(スタンダードなモバイル解像度)
  • + Mobile – Portrait :320×533(Samsung、HTC、LG)
  • ++ Mobile – Portrait:320×568(iPhone5)
  • ++ Mobile – Portrait:360×640(Galaxy:S3,S4,S5、Nexus、Xperia:P,S,Z)
  • ++ Mobile – Portrait:375×667(iPhone6)

Google chromeデベロッパーツールでスマホ表示画面を確認

Google chromeデベロッパー ツールでスマホ表示画面を確認する方法を説明します。
「デベロッパーツール」はあらかじめ、Google chromeに備わっている機能です。

スポンサーリンク

使い方

デベロッパー ツールを起動させます。起動にはショートカットキーを覚えておくと便利です。
(Macショートカットキーを使う場合「⌥+⌘+I」→⌘R)

  1. Google Chromeの「メニュー」>「その他のツール」>「デベロッパー ツール」を選択する。
  2. デベロッパー ツールがブラウザのウィンドウ内に表示されます。
  3. 「Toggle device toolbar」ツールバーボタンをクリックします。
  4. すると、エミュレーターが立ち上がります。

  5. ブラウザの画面を更新します。(Macショートカットキー:⌘+R)
    すると、スマホ画面からの表示状態を確認できます。
  6. メニューから端末の切り替えができます。

デベロッパー ツールの表示位置を変更

デベロッパー ツールの表示位置を変更するには、以下のボタンをクリックします。

表示位置が変更されました。

 

スマホ端末のフレーム表示

スマホ端末のフレームを表示させることもできます。
「Snow device frame」をクリックします。

 

すると、端末のフレーム表示されました。

Web開発者向けのブラウザ「Blisk」

Blisk-use-3

「Blisk」というブラウザを知ってしますか?Web開発者向けのブラウザでレスポンシブ表示機能も使いやすいです。

 

  • 1画面でパソコンとモバイル表示を同時に表示確認可能
  • Bliskの場合は、何か操作したり拡張機能を使わなくても、開いた瞬間にモバイルの表示も同時確認が可能
  • パソコンとモバイル表示のスクロールが同期する

詳しくは以下ページを参照してください。

Web開発者向けのブラウザ「Blisk」の使い方(外部サイト)

最後に

Google chromeを使ってパソコンからスマホの表示画面(レスポンシブデザイン)を確認する3通りの方法を紹介しました。

  • mobile browser emulator(グーグルクローム用プラグイン)
  • Google chromeデベロッパー ツールでスマホ表示画面を確認
  • Web開発者向けのブラウザ「Blisk」でレスポンシブ表示
Pocket
[`evernote` not found]

スポンサーリンク