パソコンでブログの記事を書いていて、「スマホ画面ではどうやって見えるのだろうか…」と疑問に思った人もいるのではないでしょうか。
今時のサイトのテンプレート（WordPressではテーマと呼ぶ）では、スマホに対応していないものはまず無いので、そこまで気にしなくても良い部分ではあります。
・・・とはいえ、今やウェブサイトはスマホからの閲覧率が7割を超えるとも言われ、如何にスマホのユーザーにストレスなく見せることが重要だと言えます。
ウェブ業界では、「モバイルファースト」と言ってスマホユーザーにとって最適化したデザインが主流となっているくらいです。
これは、ブログ運営でも非常に重要な考え方で、いくらサイトの構成（テンプレート/テーマ）がスマホに対応しているからと言っても、記事の書き方によっては見難くなることも少なくありません。
なので、「スマホでの見え方」をしっかりと確認しつつ記事作成をしたいと思う人もいるはずです。
実は、パソコンでスマホ画面からの見え方を確認する方法がありますので、その方法をいくつか紹介してみたいと思います。
ブログ運営の「モバイルファースト」にお役立て頂ければ幸いです。
もくじ
GoogleChromeの「デベロッパーツール」を使いこなす
プログラミング（ウェブ業界）をやっていると良く使うツールになりますが、「デベロッパーツール」と言うものを使えばパソコン上でスマホからの画面を一発で確認することが可能です。
これはかなり便利な機能となりますので、覚えておいて絶対に損はないです。
GoogleChromeのダウンロード
GoogleChromeをまだインストールしていない方は、以下のページよりダウンロードすることが出来ます。
⇒ GoogleChromeのダウンロードはコチラ（公式ページ）
GoogleChrome「デベロッパーツール」の使い方
画像がデベロッパーツールを立ち上げた画面ですが、コレを立ち上げるには以下のコマンドを入力します。
・Windows：「F12」または「Ctrl + Shift + Iキー」
・mac：「Command ＋ Option ＋ Iキー」
※スマホ表示を見たい画面で上記のコマンドを入力します。
コマンドを入力してデベロッパーツールを開くと、画像のようにプログラムコードがいっぱい出てきます。
一見、何だか難しそうな画面に見えるかもしれませんが、このコードの部分は主にプログラミングをしている人なんかが良く使う部分なので今回は完全にスルーで大丈夫です。
見る部分は、画面上が映し出されている部分だけです。
①の部分に「iPhone X」と表示されているのが確認できるかと思います。
もしこの部分が表示されていない場合はパソコン表示になっているので、②のボタンを押すことでスマホ画面に切り替わって表示されるようになります。
「iPhone X」の部分をクリックすると、画像のようにスマホの機種がズラリと表示されます。
・・・これはつまり、選択した機種の画面でどのようにサイトが表示されるのかを見ることが出来るというものなんですね！
簡単なコマンド入力でデベロッパーツールを開くだけで、簡単にパソコン上からスマホでの見え方を確認することが出来るので、是非使ってみて下さいね！
※上手く表示されない場合は、いったん閉じて再度開くと正常に表示されることがあります。
⇒ 使いまくれば操作にも慣れてくるので、頻繁に使う癖をつけて慣れていくと良いですね！
画面を狭くしてスマホ表示することも可能
スマホに対応しているサイトと言うのは、例えばですがウィンドウの幅が300px以下はスマホ表示、600px以上はパソコン表示と言ったような感じでプログラムされています。（←レスポンシブデザインというやつです）
※実際にサイトの幅を縮めたり伸ばしたりすると、ある地点で表示が変わるのが確認できるので色々なサイトで試しにやってみて下さいね！
上記のように幅によって表示方法が変更するという仕組みから、幅を最小まで縮めれば基本的にそれがスマホで表示される画面と同様のものが表示されるようになります。
なので、デベロッパーツールを使わなくてもウィンドウの幅を縮めるだけでスマホ表示が確認できることもあります。
※実際に表示されるものとは多少は異なる事がありますので、デベロッパーツールも併用しつつ確認するのが良いですね！
スマホに対応していないサイトは論外
今ではスマホに対応していないデザインというのはまずあり得ませんが、古いサイトだと希にスマホに対応していないサイトあったりします。
なぜスマホに対応しなくてはいけないのかと言うと、冒頭でも書いたようにスマホユーザーの圧倒的な多さ、そしてSEO（検索順位で上位表示させる施策）的な観点の2つが挙げられます。
スマホから見ている人の割合の方が圧倒的に多い今、ユーザー目線で利用しやすいサイトを追求するのは当然の事ですよね。
また、以前からGoogleでスマホに対応してくださいねといった警告メッセージが来たり、スマホに対応していないサイトの検索順位“降下”などからみても、SEO的にスマホに対応していないサイトはそれだけで不利となる可能性「大」なんですね。
なので、ブログ運営において常に「モバイルファースト」を意識することは、ユーザー目線で良いという事だけでは無く、SEOでも有利に働くと考えて良い部分なので、しっかりとスマホデザインも確認するようにするべきです。
最後に一言…
上記では、パソコン画面から「スマホの表示」を確認する方法を紹介させて頂きました。
確認するのに難しい操作は何一つ無いので、実際にお使いのパソコンで試していただければと思います。
⇒ 特にデベロッパーツールは便利なので使い慣れておくことをお勧めします！
スマホユーザーの多さから「モバイルファースト」の流れは今後ますます加速するのは間違いないので、使えるものは使って少しでもスマホユーザーにとって使い易いサイトを作っていくことが大切ですね！
コメントを残す