パソコンからサイトをスマホ画面表示させる方法！『簡単1クリック！』

ブログの記事を書いていると、スマホからの見え方って気になりますよね。

あなたはパソコンで打ち込んだブログ記事を、自分のスマホでわざわざ確認していませんか？（つい2か月前のわたし）

打ち込むのはパソコンなのに、スマホで確認するの

めんどくせー

なんて、思っていませんか？（2か月前のわたし）

めんどくさいですよね！ちょっと短気な人だったら『いちいちスマホで確認なんかしてられるか！！バキッ（スマホが破壊された音）』となっているところです。

まぁ、こういう短気な人とは、結婚しない方が賢明ですね。物を大事にしない人なんてまず信用できませんし、短気は損気という言葉もあるくらい、得することってありません。そもそも短気とｈ・・・・

話変わっとるでな

はい！という訳で今回は、パソコンから簡単にスマホ表示できる方法について、2パターン説明していきます^^

ちなみにブラウザとは、インターネットを表示させるためのソフトのことだよ！（まさに、あなたが今見てるこのソフトがブラウザになります^^）

 

ブラウザの種類は

• Googlechrome（グーグルクローム）
• firefox（ファイアーフォックス）
• Internetexplorer（インターネットエクスプローラー）

・・・・・

などがあるよ

パソコン（Google　chrome）から1クリックでスマホ表示させる方法

まずは、頑張って作ったgif動画をご覧ください。

gif動画作りにつまづいて結構な時間を消費したので、ぜひあなたも繰り返し繰り返し、目が腐るほどこのgif動画をみて下さい。

目が腐るほどこのgif動画をみて下さったあなたなら、わかるかと思いますが、1クリックです。

たった1クリックでスマホ表示できるので、ブログを書きながら、ちょこちょこ確認することが出来ます^^

これは、 Googlechromeグーグルクロームの拡張機能を使っています。

では、以下で詳しく説明していきますね^^

Googlechrome拡張機能『chameleon』のインストール手順

①まず、右上の点々？をクリック（説明が下手）

②『その他のツール』⇒『拡張機能』クリック

③画面が切り替わるので、ググーっと下へスクロールさせていきます⇒『他の拡張機能を見る』をクリック

④画面が切り替わりますので、左側の検索窓に『chameleon』と入力⇒検索

⑤検索結果に『chameleon』が現れます。⇒『+ＣＨＲＯＭＥに追加』をクリック

⑥画面右上（検索窓の右側）に「白目部分が青い、目玉のおやじ」みたいなアイコンが現れます（例えが下手くそ）

これで、目玉の青おやじみたいなアイコンをクリックするだけで、レスポンシブ表示されるようになるよ^^！（詳しくは最初に出てきたgif動画を見てね！）

確認できるデバイスは？

標準では

• iPhone5
• HTC　ONE
• iPhone7+
• iPad　mini

ですが、好きな大きさに変更することも出来ますよ^^

変更手順

①上記で説明した『白目部分が青い、目玉のおやじ』みたいなアイコンをクリックします。すると、下記図のような画面になります。

②『settings』をクリック

③『Add a device』（デバイスを追加する）をクリック

④指定のサイズを入力して⇒『Save changes』（変更内容を保存）をクリック

お使いのスマホサイズを入力しておくのも、良いかも知れませんね^^

パソコンで簡単にスマホ表示させる方法（その他のブラウザを使用）

上記で説明したGooglechromeグーグルクロームの拡張機能を使う方法よりは、3クリック程手間はかかりますが（クロームは1クリックなので）

こちらもとっても簡単です^^

gif動画は、firefoxファイアーフォックスで試してみたものです。まずあなたが今お使いのキーボードの、一番上にズラッと配置されてる『F』で始まる数字 『F12』をクリックします

※F12をクリックした後の動画が、以下になります^^

こちらは何かをインストールしなくても、ブラウザの画面で『F12』をクリックするだけです^^

『F12』をクリックすると

何が何だか分からないコードが出てきますが、意味プーなんでソコは無視！探すのは

『スマホっぽいアイコンだけ！！』

ココをクリックすると、レスポンシブ表示されますよ^^

Googlechromeグーグルクロームでも試してみたところ、firefoxファイアーフォックスの表示とは差異がありましたが、同じように使うことが出来ました^^

Googlechromeグーグルクロームの場合も、F12をクリックすると、何が何だか分からないコード？が出てきますが、やっぱりそこは無視！

『あーなんか、スマホっぽいなー。これクリックすると、スマホ表示されるっぽいなー』と、直感で分かると思うので（ふわっとしてる説明）ソコをクリックしてくださいね！

ダイジョウブ！あなたなら直感で分かるから！グッジョブ！

パソコンで簡単にスマホ表示！ブロガーにオススメの活用方法

パソコンでブログ記事を書いている時、わざわざスマホでの見え方を気にするのは、読みやすい記事にしたいと思っているからですよね？

ですが、ただ何となくチェックしているだけでは結局意味がありません。

そこでどこを重点的に確認すれば良いか、3つのポイントに絞って解説していきますね^^

①スマホで見たときの行間、詰まりすぎてない？？

パソコンで確認すると改行って、そこまで気にならないですよね？しかしスマホでは、少しの行間の詰まりも読み手にとってはストレスになります。

スマホで見て読みやすさを感じる改行は、3~5行です（多くても7行）。 それを目安に改行すると、読み手がリズミカルに読み進めることが出来ますよ^^

②読み流しても、ある程度内容が頭に入ってくる？

スマホから記事を読む人って、指を結構な速さでスライドさせて読み流しています。

せっかく書いた記事なので

キミ！ちゃんと一語一句読みたまえ！チュン！

と言いたい所ですが、まぁ無理な話です。だからと言って

読み流す奴は放っておけばイイじゃん！

では、冷たすぎますよね。

ですので、ある程度の速さで読み流しても、内容がしっかり頭に入ってくるか？ スマホ表示にして確認するときは、あえて少しだけ速くスライドさせて読み返してみましょう^^

読み流しても、内容が頭に入ってくる記事作りのポイントは、

です。装飾や、改行の一番最初の文字は目に留まりやすいです。また、画像で読み手のモチベーションを保ち、最後までストレスなく読んでもらえる工夫をしましょう^^

③切れてるところはない？

スマホで見ると、時々画像や表（テーブル）が切れてしまってるブログ記事ってありますよね。

まとめ

ボタンひとつでスマホ表示出来るなんて、とっても便利ですよね！

わたしはこの方法（パソコンからスマホ表示）をつい2か月前まで知りませんでした^^；

そこでこの方法を教えて頂いたのですが、それからはブログを書くスピードが少し早くなりましたよ！

もうすでにご存じの方もいるかと思いますが、はじめて知ったわ！素敵！！と思ったあなた。

教えたのん、わたしやで！

おっしまーい^^