ブログ作り

ブロガー必須のスキル!PCでスマホ画面の記事を見る方法(windows&mac)

スマホ

次世代バナー

こんちゃす!
ショートカットを知らずにチマチマ実機で画面確認をしていた有川(@arikawa0812)です。

今回は、

パソコンで
スマホ画面を確認する方法

画面の見方

を伝授します。

スマホ閲覧が増えてるから、ブログ作りでもスマホでの見え方は確認してね!

1.chromeで行う

今回は、使っている人が多い「Chrome」というブラウザでの確認方法を紹介します。

Chrome以外のブラウザで見ている人は、↓こちらの記事↓を参考にしてね!

Chromeでのチェック方法

  1. F12を押す
  2. 右クリック→検証
  3. ツール→デベロッパーツール

やり方は上記の3つ。

ちなみに、結果(見れる画面)はどれでも一緒なので「F12を押す」が一番早いです。

1:F12を押す

winに限られますが一番早い方法。
ワードやエクセルだと「名前をつけて保存」でお馴染みのF12。

Chrome上では、デベロッパーツールを開くためのショートカットキーです。

ちなみに、Macだと
command+option+I」
の3つを同時押しというもはやショートカットでも何でもない感じで開くことができます。

2:右クリック→検証

スマホ画面

3:デベロッパーツール

スマホ画面

元の画面に戻すときは、2番目のデベロッパーツールのボタンを押します。

注意

この画面で見る場合、外観設定のすべてが反映されるわけではありません(特にメニュー)

あくまで、記事の見栄えを確認するためなので、
外観設定はスマホ本体で確認しましょう。

1-1.画面の見方

  1. 端末の種類を選ぶ
  2. 画面をリロードする

上にある、端末の種類の選択で、スマホやタブレットの種類を選ぶことができます。

スマホ画面3
全てに合わせることは難しいけど、周りの人がよく使ってる端末で画面チェックをしてみてね。

ちなみに妖精くんは何を使ってるの?

んー?僕ら妖精は文明の利器には頼らなくてもテレパシーが使えるからね!動画も送れるよ。

便利…!

2.スマホ画面で記事の見栄えをチェックするときに見るべき2ポイント

ところで、スマホ画面でチェックしたほうがいい項目ってあるの??

最低限下の二つかな!

  • 画像のサイズ
  • 文章の改行位置
それから、記事の中にあればだけど

  • 表のサイズ

 

は確認したほうがいいよ。はみ出ちゃってると格好悪いし。

 

表が見切れないように設定する方法は

「オマケ1:表が切れるのを防ぐ!どの端末でもうまく表示するには?」(←クリック)

で解説しています。

2-1.画像のサイズ

パソコンで作業しているとそこまで大きく感じない画像でも、

いざスマホで見ると、
スクロールしないと下の文章が見れない…なんてこともあります。

読者さんとしてもそれでは不便なので、サイズの見直しをしましょう。

僕は、大きくても縦400px横400~500pxぐらいがいいかなと思うよ。

画面に合わせて勝手にリサイズしれくれる場合がほとんどです。

が、あまりに大きいと読み込み時間もかかり、読者が離れていってしまうので、ほどほどに。

2-2.文章の改行位置

これもパソコン画面とは見え方が全く違うので注意しましょう。

ちょっと実験してみたよ!

  • 改行なし
  • 改行あり
  • 改行あり:スマホ用

の3つで比較してるよ。

【改行なし】

ブログで結果を出すために重要なことは、継続である。特に、初心者が継続するにあたって、一番の壁は、スタートから約半年間続く「PVが伸びない」という現象である。これはGoogleが評価を下すのにかかる時間であり、この間は基本的に検索流入はない。よって、PV数も上がりにくく、モチベーションが維持できず3~4か月で辞めてしまうのだ。

読む気が全くしないね・・・

【改行あり】

ブログで結果を出すために重要なことは、継続である。

特に、初心者が継続するにあたって、一番の壁は、スタートから約半年間続く「PVが伸びない」という現象である。

これはGoogleが評価を下すのにかかる時間であり、この間は基本的に検索流入はない。

よって、PV数も上がりにくく、モチベーションが維持できず3~4か月で辞めてしまうのだ。

さっきよりは分かりやすいかな。

【改行あり:スマホ用】

ブログで結果を出すために重要なことは、
継続である。

特に、初心者が継続するにあたって、
一番の壁は、スタートから約半年間続く

「PVが伸びない」

という現象である。

これはGoogleが評価を下すのにかかる時間であり、
この間は基本的に検索流入はない。

よって、PV数も上がりにくく、
モチベーションが維持できず3~4か月で辞めてしまうのだ。

こうやって実際見てみると全然印象が違うね!

スマホ用はあんまりにも一文を短くしずぎると違和感だから、適度にね。

一番難しいやつね…。

オマケ1:表が切れるのを防ぐ!どの端末でもうまく表示するには?

この表ってレスポンシブルにならないの??絶対切れちゃうんだけど…

表を切れないようにするには、表のプロパティで幅を設定すればいいよ。

①表のプロパティをクリック

スマホ画面7

②幅「100%」に設定

100%にすると、画面に合わせて勝手に調整してくれるようになります。

空欄にしておくというやり方もありますが、それでも切れてしまうことがあるので、100%と入力するほうがオススメ。(数字は半角で)

オマケ2:誤字脱字

最後は基本中の基本。

何回見ても誤字脱字はあるもので…
記事を書いている以上、あなたは「物書き」なのですから、最低限誤字脱字には気を付けましょう。

有川もね?

はーい…

3.まとめ

以上!

パソコンでスマホ画面を確認する方法

でした!

ひとつひとつ面倒かもしれないけど、そこを怠らずに、スマホ画面での見え方は丁寧に確認してね!

では、ここまでお読みくださりありがとうございました!
次の記事でお会いしましょう。

次世代バナーストーリー

次世代バナー 次世代バナー吹き出し

jisedai-cta

そんなあなたへ!

私が趣味ブログで

わずか2ヶ月

収益0→1万円になった秘訣を公開中★

↓ちょっとでも興味があったらLet’s クリック!↓

 

記事を購読する!
follow us in feedly

COMMENT

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA