パソコン(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通り、各種の機種で確認し終わったら、一番右の「×」マークをクリックして終了させてください。

終わりに・まとめ

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

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

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

ちなみに、アフィリエイトに必須の

 

・読者の「興味を引き付ける」記事の書き方

・読者に「制約させる」記事の書き方

 

を学びたいなら、「マジカルライティング」がおすすめです。

マジカルライティング 広告バナー

アフィリエイトで「重要な能力」として ・いかに相手を説得できるか? ・いかに説得力のある記事文章を書けるか? とい...

 


1,京大工学部卒
2,MBA取得済み
3,資本金「20万円」の素人経営者から、たった1年で「年商1億円」達成
4,20代にして、億万長者

そんな異色な経歴を持つ「若きカリスマ」が、アフィリエイトビジネスに必須の
仕組み化・自動化」について、"無料セミナー"を大公開中です。

絶対に稼ぎたくない人」以外は、見てください。

加藤将太 アフィリエイト

シェアする

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

フォローする

トップへ戻る