レスポンシブデザインのイメージその2

スマートフォンが広く普及した今、パソコンでブログを書く時にもスマホ画面表示(レスポンシブデザイン)を意識するようになりました。

 

最近のワードプレス・テーマ(テンプレート)では、基本的にスマホ対応のレスポンシブデザインを自動で行ってくれるものが増えたので、それほど気にしていないという人も多いかも知れません。

それに、いちいちスマホに持ち替えて、投稿した記事やサイトの確認するのも面倒ですからね。

 

そんな時、Google Chromeの『デベロッパーツール』を使えば、あっという間にレスポンシブデザインを確認することができます。

パソコンでスマホ画面を表示させる方法

パソコン上でスマホ表示画面を確認するには、まずGoogle Chromeで対象ページ・サイトを開きましょう。

 

ページを開いたら、Google Chrome画面の右上にある『Google Chromeの設定(縦に並んだ3つの点マーク)』をクリックし、『その他のツール』『デベロッパーツール』を選択します。

パソコンでスマホ画面を表示させる方法

 

 

 

すると、パソコン上のサイト画面がスマホ画面のサイズで表示されます。

パソコン上のサイト画面がスマホ画面のサイズで表示

 

 

 

パソコン画面とスマホ画面の切り替えは、右手のツールバーにあるタグの中から『Toggle device mode』というスマホアイコンをクリックして行います。

ツールバーにあるタグの中から『Toggle device mode』というスマホアイコンをクリック

 

 

 

スマホ機種はテンプレートになっているので、ツールバーにある『Responsive』からお好みの機種を選択して表示を確認します。

ツールバーにある『Responsive』からお好みの機種を選択

 

 

  • Galaxy S5
  • Nexus 5X
  • Nexus 6P
  • iPhone 7
  • iPhone 7 Plus
  • iPhone 8
  • iPhone 8 Plus
  • iPhone X
  • iPad
  • iPad Pro

上記の機種がデフォルト設定されていますが、iPhoneなどは新機種が発売されてすぐに追加されるので非常に便利ですね。

 

 

ちなみに下記画面では『iPad』を選択してみました。

ResponsiveからiPadを選択

 

 

もしも画面が切り替わらない場合は、キーボードにある『F5』ボタンを押してページを更新してみてくださいね。

以上が、Google Chromeを使ってスマホ表示画面を確認する方法です。

 

さらに簡単な方法は、Google Chromeでサイト表示した後、キーボード上の『F12』ボタンを押すだけというもの。

あっという間にデベロッパーツールを表示させることができますよ。

ちなみに私は『F12』で一発表示派です。

パソコンでスマホ画面表示を確認しよう

レスポンシブデザインのイメージ

今回は、Google Chromeのデベロッパーツールを使って、パソコン上でスマホ画面表示を確認する方法を解説しました。

 

特に動画やSNS投稿などの埋め込み表示、固定サイズの広告をしているブログ記事などは、スマホなどの画面でどのように表示されているか必ずチェックしましょう。

そして、無料テーマだと思いがけないヘンテコなデザインになっていることもあるので、こちらもデベロッパーツールを使ってチェックしてみてくださいね。

 

逆に現在有料で販売されているワードプレステーマであれば、ある程度レスポンシブデザインに対応しているケースがほとんどです。ただ、有料のワードプレステーマであったとしても、一応どのような表示になっているか確認しておくことをおすすめします。

ちなみに今回の解説で使った私のサイトのWordPressテーマは『賢威』でレスポンシブデザインに対応しているものです。

 

2017年以降のサイト運営においては、レスポンシブデザインは必須です。Googleもレスポンシブデザインに対応していないサイトについては厳しい評価をすると明言しているので、この辺りはしっかりクリアしていきたいものですね。

ぜひ、参考にして頂ければ幸いです。