パソコン(PC)の画面からスマホ表示を確認する方法。iphoneとandroidのどちらにも対応

自分が作ったサイトが、「スマホやタブレット」から「 どのように表示されているのか 」すごく気になりますよね。

最近では、グーグルが「 モバイルファースト 」を強調して、「スマホやタブレットからの閲覧のしやすさ」を重視するようになりました。

自分が、たとえ「iphone」や「android」のスマホを1台持っていたとしても

・もう片方ではどう表示されてる？

・変に見づらくなってない？

と感じ、気になるものです。

また、タブレットの種類も

・ipad

・microdsoft surface

・amazon fire

など、たくさんあるため、それら1つ1つを購入して確認してみたり、いちいち人に借りて確認するのは、あまり現実的とは言えません。

なので、今回は自分のサイトが「 スマホ＆タブレットの各機種・各端末ごと 」に、「実際にどのように表示されているのか」を確認する方法を見ていきます。

ブラウザから確認する方法

自分のサイトが「 スマホやタブレットからどう表示されているか 」を確認する最も簡単な方法は、今使っているブラウザの画面上から

“左クリックして「サイト情報の検証」をする” というやり方です。ブラウザの

・Firefox

・Google Chrome

の順に説明します。

Firefoxから、サイトのスマホ表示を確認する方法

1.自分のサイトを開き、「 左クリック→要素の調査 」をクリックします。

2.表示された「開発ツール」の「スマホアイコン」をクリックします。

3.すると、自分のサイトのスマホ表示がわかります。

デフォルトは「320×480」サイズですが、上の「 端末が選択されていません 」をクリックすると「他の端末」の表示もわかります

人気の

・iPad

・iPhone

・各種android端末

・amazon kindleタブレット

などから、どう表示されているかわかります。

たとえば「 iPad air2 」をクリックしてみると、画面が大きくなりました。

わざわざ自分の「 ipad air2」 を開いて確認しなくても、パソコンの画面上から十分確認できるわけです。

また、カメラのアイコンを押すことで「画面のスクリーンショット」を撮ることもできます。

いちいち「自分のスマホやタブレット」を開いて「スクリーンショット」を撮る必要もありません。パソコン上からできます。

撮った画面の「スクリーンショット」は、右上のダウンロードアイコンから確認できます。

「Screen Shot~」というファイル名で保存されていました。これでサイトなどで使えます。

最後に一番右の「スマホ回転」マークをクリックすると「横向き」の表示画面も確認できます

タブレットはもちろんスマホも、人によっては「横向き」にして見る人もいるので、一応確認してみてください。

1通り、各種の機種で確認し終わったら、上の「×」アイコンをクリックして、スマホやタブレット画面の表示を終了してください。

次は「Google Chrome」からの表示確認方法になります。

Google Chromeから確認する方法

1.自分のサイトを表示させて、「 左クリック→検証 」をクリックします。

2.すると、左側で「スマホやタブレットの表示」が確認できます。

デフォルトでは「 iPhone 6 Plus 」の「 414×736 」の画面サイズになっています。

デフォルトの「iPhone 6 Plus」の部分をクリックすると、「 他の端末 」の表示画面も確認できます。

試しに「 iPad  Pro 」をクリックすると、こんな感じに見えます。

サイズは「1024×1366」で大きめですが、「縦向き」だと少し小さく感じます。

「回転」アイコンを押すことで、画面が「横向き」で表示されます。

こっちの方が、 実際のタブレット っぽく表示されます。

また、一番下の「edit」を選ぶことで、「他の端末」も追加できます。

「追加したい端末」の左にチェックを入れて、「 add custum device 」をクリックするだけです。

1通り、各種の機種で確認し終わったら、一番右の「×」マークをクリックして終了させてください。

終わりに・まとめ

このように、今使っているパソコンのブラウザ画面上からでも十分に、「 スマホやタブレット、各種端末ごと 」の見え方や表示のされ方がわかります。

自分のサイトを公開するなら、どのデバイスからでも閲覧しやすく、わかりやすいものになるように確認しておきたいものです。

「 スマホやタブレット＆各種端末ごとの表示 」を気にすることは「 モバイルフレンドリー 」を訴えるグーグルからの評価も高くなりますので、できるだけしっかりと確認するようにしましょう。