こんにちは(^^♪山ばりゅです。
今回は、PCでスマホやタブレットの閲覧状態でコンテンツをWindows10で確認する方法についてご紹介したいと思います。これは特に私たちブログを運営するものにとってはありがたい機能で、この方法でPC、モバイル両方の見え方を確認することによって、離脱率を防ぐ記事づくりに非常に役立つかと思います。そしてやり方は超簡単で、知っておくと損はないかと思いますので、ぜひ今回も最後までお付き合いいただけましたらと思います。
ブログを運営するうえでは、今や必須 レスポンシブビューを駆使して閲覧者の離脱を防ごう
携帯電話が出始めた時は、全く気にする必要もありませんでしたが、携帯電話にネット検索機能が備わり、スマホやiPad、タブレットが普及するにしたがって、ネットで何かを検索する、調べるという動作は今や、PCよりも機動性、利便性に優れたスマホ、タブレットが主流になってきており、それは閲覧者の方が私たちのブログをご覧になってくださる時でも、やはり例外ではありません。
現在のデバイスの使用用途をザックリと分けるとすれば
- PC→主にコンテンツを制作するためのもの
- モバイル・タブレット→自分が気になるものを検索したり、調べたりしてネットを楽しむ・見るためのもの
という風にそれぞれの役割・位置づけがより一層最近明確化されてきているような気がします。
ということは、PCのみならず、スマホやタブレットなどのデバイスで自分のブログがどのように表示されているか。これは、私たちブログを運営するものにとっては常に意識しておかねばならず、これを疎かにしてしまうと、簡単に閲覧者はブログから離脱してしまい、ご自身にあった別のブログを探してしまいます。
これは、アクセス数が命運を左右する、私たちにとっては致命的ですよね。
やはり、これを防ぐためにもブログを作成するときは、PCでの表示はもちろん、モバイルやタブレットではどのように表示されているのか。こちらもしっかりと気に留めながらコンテンツ制作に打ち込みたいものです。
とはいえ、なかなかスマホやタブレットで表示を確認しながらPCでコンテンツの作成をするというのは手間のかかる作業でもあります。手軽にPCでその確認を行うことができればスムーズにコンテンツ作成が進みますよね。
今のPCにはそれを行う方法はもちろん搭載されており、かなり簡単にその機能を使うことができます。どの機能を使うかと申し上げれば、「レスポンシブビュー」機能を活用すれば簡単にモバイルでどのようにコンテンツが表示されているのか、確認することが可能です。
では早速、レスポンシブビューの表示のさせ方をご紹介していこうと思います。
Windows10において、各種用ブラウザでレスポンシブビューを表示させる方法
方法はいたって簡単。では利用者の多い主要ブラウザ、Google chrome、Microsoft edge、Mozilla Firefoxの順にご紹介していきましょう。
Google chromeでの表示方法
まずは、サイトの何もない場所で右クリックし、「検証」もしくは「要素を検証」を選択します。
これにはショートカットキーも用意されており、
サイトを表示した状態で
- F12キー
- CTRL+SHIFT+Iボタン
でダイレクトに表示させることも可能です。
ちなみにこれは、どのブラウザも統一されており、Firefox、Edge共に同じになります。
するとそのサイトのソースコードが表示されるかと思いますので、その上部に表示されているモバイル・タブレットアイコンをクリックすれば完了です。
Mozilla Firefoxでの表示方法
Google chrome と同じ方法で「要素を検証」を選択します。
次に同じくソースコード上部に表示される、モバイルアイコンの「レスポンシブデザインモード」をクリックし、起動させます。
Microsoft Edge での表示方法
Google chrome、Mozilla Firefox と同じ方法で「要素を検証」を選択します。
次に表示されている、エミュレーションタブを選択し、ファイルボックス右にある下向き三角をクリックします。すると、デフォルトの「デスクトップ」の下に「Windows Phone」が表示されるので、それを選択します。
では、どのように表示パターンが変わるか確認してみましょう。
いかがでしょう。各ブラウザ、このようにデスクトップでの表示状態から、モバイルでの表示状態に変わったのが確認できたのではないでしょうか。
元に戻したいとき
元のデスクトップビューに戻したいときは、Google chrome と Mozilla Firefox は再度モバイルアイコンをクリックする。Microsoft Edgeの場合は、「デスクトップ」を再度選択していただくと、元のデスクトップビューに戻すことが可能です。
いかがでしょう。もちろん、正確な表示を見るにはスマホやタブレットから実際に確認するのが良いですが、大体の表示を確認するのであれば、十分すぎる機能ですよね。簡単でややこしい行程も必要ないので、ぜひ活用したいところです(^^♪
最後に
いかがだったでしょう。今回は、PCのレスポンシブ機能を利用して、簡単にモバイル・タブレットビューでコンテンツの表示を確認する簡単な方法についてご紹介させていただきました。
スマホやタブレットはファーストビューがかなり大事とされており、サイトを閲覧した時、閲覧者が、最初に飛び込んで来る文字や雰囲気を見て自分に役立つものではないと少しでも感じれば、スクロールして下のコンテンツを確認することなく離脱するといわれております。
パッと見て離脱されてしまっては、その後にいくら役立つコンテンツが書かれていたとしても、全て無駄になってしまうというもの(TT)
せっかく苦心して仕上げた記事コンテンツ。やはり訪問者の方にはすべてのコンテンツをしっかりとご覧になってほしいですよね。
そういった離脱を防ぐためにも、モバイル・タブレットビューには細心の注意をもって記事コンテンツの制作に臨みたいところです。では、今回はこの辺りで。今回も最後までお付き合頂き、ありがとうございます(^^♪
あ、そうそう。Windows10での作業として、ご紹介しましたが、ブラウザは最新のものを使用する必要がありますが、Win7でも同じ方法で確認が可能です(^^♪
