vlcsnap-00002

ども!!梅田です!!

最近のサイトはレスポンシブデザインが主流です。
PCやスマホと言ったデバイスからのアクセスを、
それぞれ認識して表示してくれるので大変便利です。

 

Googleが先日、モバイルフレンドリーサイトは、
検索結果、順位の基準となると発表しています。

 

つまり、スマホ対応などにしておかないとSEO上不利って事ですね。
これからの時代には必須ですので、
レスポンシブには対応しているテンプレートを使ってサイト作成してくださいね。

スマホ表示の動作確認方法 解説動画

 

 

スマホ表示の動作確認方法

 

今回はGoogleChromeを使って確認出来る方法を紹介します。

 

まずはChromeでスマホ表示させたいサイトを表示させておきます。
その状態で、F12キーを押してください。このような画面が出てきます。

rapture_20150720125428

画面の下部、もしくは右側に別画面が出てきますので、
その画面の左側にあるスマホマーク(赤枠で囲っている物)アイコンをクリックして、
target device modeに切り替えます。

 

また画面右側にあるアイコン(青で囲っている物)をクリックすると、
画面表示を下側と右側で切り替えれます。
右側に表示していた方が確認しやすいですので、右側表示に変更しておきましょう。

 

rapture_20150720125839

 

モードを切り替えると上部にデバイスを選べるようになりますので、
表示させたいデバイスを選択します。今回はiPhone6を選択してみます。

 

ここでデバイスを選択するだけでは、
表示の大きさがそのデバイスの大きさで表示されるだけになりますので、
ここからブラウザを更新するようにしてください。

 

更新すると表示されていたサイトが、選んだデバイス表示へと切り替わります。

更新前(PC表示)

rapture_20150720130219

 

更新後(iPhone6表示)

 

rapture_20150720130237

 

これでiPhone6での表示をPCで確認する事が出来ました。
その他のスマホ表示なども同じ流れで確認出来ます。

 

まとめ


touch_r1_c1-672x372

これからはスマホユーザーもしっかりと意識してサイト構築していかないと、
直帰率などが上がってしまいます。

またSEO的にもよくありませんので、サイトを構築する時には必ず確認するようにしてください。