おすすめ機能

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

パソコンからスマホ表示

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

 

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

 

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

 

[voice icon="https://mirai-kitte.co.jp/wp-content/uploads/2017/08/6.jpg" name="まさお" type="l big icon_blue"]めんどくせー[/voice]

 

なんて、思っていませんか?(2か月前のわたし)

 

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

 

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

 

[voice icon="https://mirai-kitte.co.jp/wp-content/uploads/2017/08/6.jpg" name="まさお" type="l big icon_blue"]話変わっとるでな[/voice]

 

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

 

 

 

[topic color="green" title="あなたがお使いのブラウザは?"]

💡[keikou]Googlechromeグーグルクロームを使っている[/keikou]

コチラから読んで下さい(ページ内リンクへジャンプします)

[su_divider top="no" divider_color="#000000" link_color="#f3b07e" size="1" margin="10"]

💡[keikou]Googlechromeグーグルクローム以外を使っている[/keikou]

コチラから読んで下さい(ページ内リンクへジャンプします)

[/topic]

 

 

 

[voice icon="https://mirai-kitte.co.jp/wp-content/uploads/2017/08/2.jpg" name="殿" type="l line"]

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

 

ブラウザの種類は

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

・・・・・

などがあるよ

[/voice]

 

パソコン(Googlechrome)から1クリックでスマホ表示させる方法

パソコンからスマホ表示

 

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

 

 

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

 

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

 

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

 

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

 

 

[aside type="sky"]

  • わたしはGooglechromeじゃないわ!
  • それ以外のブラウザから、スマホ表示出来る方法が知りたいのよ!

 

そんなあなたは⇒ココをクリック

(ページ内リンクへ飛びます)

[/aside]

 

 

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

 

Googlechrome拡張機能『[ruby]chameleon[rt]カメレオン[/rt][/ruby] 』のインストール手順

 

Googlechrome

 

①まず、右上の点々?をクリック(説明が下手)

[su_divider top="no" divider_color="#000000" link_color="#f3b07e" size="1" margin="10"]

 

Googlechrome拡張機能

 

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

[su_divider top="no" divider_color="#000000" link_color="#f3b07e" size="1" margin="10"]

 

Googlechrome拡張機能

 

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

[su_divider top="no" divider_color="#000000" link_color="#f3b07e" size="1" margin="10"]

 

Googlechrome拡張機能

 

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

[su_divider top="no" divider_color="#000000" link_color="#f3b07e" size="1" margin="10"]

 

Googlechrome拡張機能

 

⑤検索結果に『chameleon』が現れます。⇒『+CHROMEに追加』をクリック

[su_divider top="no" divider_color="#000000" link_color="#f3b07e" size="1" margin="10"]

 

Googlechrome拡張機能

 

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

 

[voice icon="https://mirai-kitte.co.jp/wp-content/uploads/2017/08/34bbd51748d6e02491ea70f2036702a9.jpg" name="エリザベス" type="l big icon_blue"]これで、目玉の青おやじみたいなアイコンをクリックするだけで、レスポンシブ表示されるようになるよ^^!(詳しくは最初に出てきたgif動画を見てね!)[/voice]

 

確認できるデバイスは?

 

標準では

  • iPhone5
  • HTC ONE
  • iPhone7+
  • iPad mini

 

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

 

変更手順

 

Googlechrome拡張機能

 

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

[su_divider top="no" divider_color="#000000" link_color="#f3b07e" size="1" margin="10"]

 

chameleon

 

『settings』をクリック

[su_divider top="no" divider_color="#000000" link_color="#f3b07e" size="1" margin="10"]

 

chameleon

 

『Add a device』(デバイスを追加する)をクリック

[su_divider top="no" divider_color="#000000" link_color="#f3b07e" size="1" margin="10"]

 

chameleon

 

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

 

 

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

 

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

 

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

 

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

 

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

 

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

pcrecord2

 

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

 

[keikou] 『F12』をクリックすると[/keikou]

 

レスポンシブ

 

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

 

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

スマホアイコン

 

ココをクリックすると、レスポンシブ表示されますよ^^※レスポンシブ表示になっていない場合(画面からはみ出して表示されてしまっている場合は『Ctrl』+『F5』をクリックしてみてください)

 

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

 

[keikou] 以下が、Googlechromeグーグルクロームでのgif動画です。

 

[/keikou](こちらも『F12』をクリックした後の動画になります)

pcrecord3

 

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

 

レスポンシブ

 

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

 

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

 

[aside type="pink"]今回は、firefoxとGooglechromeで解説しました。それ以外のブラウザでは、表示されない可能性もあります[/aside]

 

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

 

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

 

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

 

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

 

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

パソコンからスマホ

 

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

 

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

 

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

 

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

 

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

 

[voice icon="https://mirai-kitte.co.jp/wp-content/uploads/2017/08/34bbd51748d6e02491ea70f2036702a9.jpg" name="エリザベス" type="l big icon_blue"]キミ!ちゃんと一語一句読みたまえ!チュン![/voice]

 

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

 

[voice icon="https://mirai-kitte.co.jp/wp-content/uploads/2017/08/6.jpg" name="まさお" type="l big icon_blue"]読み流す奴は放っておけばイイじゃん![/voice]

 

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

 

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

 

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

 

  • 改行
  • 文字の装飾
  • 画像

 

 

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

 

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

 

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

 

[keikou] パソコンからだと綺麗に表示されていても、スマホから見ると切れてしまう時がある[/keikou]ので、投稿前に確認してみると良いですね^^

 

まとめ

 

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

 

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

 

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

 

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

 

 

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

 

おっしまーい^^

 

次はコチラの記事がおススメ!

[kanren url="https://mirai-kitte.co.jp/archives/5065.html"]

 

ABOUT ME
のりこ
ライターのお役立ち情報、主婦に役立つ情報、キャリア、キャリアコンサルタントの情報を発信しています! お腹が減ると、ちょっと不機嫌になります!
起業したい!在宅で働きたい!