ブログのスマホ表示を1クリックでチェック!Chameleonでモバイル端末での見え方を一括チェックする方法。

こんにちは、みてみて(@look_mam_look)です。


・ブログはPCで書いている
・自分のブログをスマホで見ることは少ない
・タブレットは持っていない


ひとつでも当てはまってる方に ぜひおすすめのプラグインを紹介します。(※Google chromeをお使いの方向けでーす!)


拡張機能:Chameleon



Google chromeの拡張機能、Chameleonを使えばPC画面上でスマホやタブレットでのプレビューを確認できます。さっそく使い方を解説していきます。


導入方法

chromeストアへ

Chromeストアのページでプラグインのインストールをしましょう。

インストール



chromeに拡張機能を追加します。



追加完了を確認

正しく追加出来たらアイコンが増えます。



これで導入は完了です!

めっちゃ簡単やん!


使い方

プレビュー表示したいページで1クリック!

さっそく試してみましょう!



プレビューを確認したいページ(自分のブログ)を開いて、Chameleonのアイコンをクリックするだけ!



するとスマホやタブレットでの表示が一括で表示されます!


めっちゃ簡単やん!

※実際の画面では横長に表示されるのでスクロールが必用。 この画像は少し縮小してます。

4種類の端末表示が確認できる

  • i Phone 5
  • HTC one
  • i Phone 7+
  • i Pad mini



と4つのタイプの端末での表示が確認できます。


活用法

持っていない端末での表示が確認できる

このツールを使うと タブレットを持っていなくても表示の確認ができます。

スマホの画面サイズ機種によってイロイロなので、「こんなに違うんだな」と参考になりますよ。

3つすべてにマッチさせる書き方はできないので、私は中間のHTCでの表示を確認するようにしています。

投稿前のプレビュー段階でもモバイルビューを確認できる

普段は自分のスマホからブログにアクセスしてプレビューをチェックしていましたが、Chameleon導入後はPCで確認できるので楽です。

Chameleonは投稿する前のプレビュー画面からでも使える ので、改行などの微調整がやりやすくなりました。


モバイルビューの重要性



ブログを書いている人はPCを使いますが、今はスマホしか使っていない人がほとんど。ブログへのアクセスもスマホからが多いです。

スマホの画面は横幅が狭いし、サイドバーや余白がありません。なので自然と文字ばかりの画面になりがち。

  • 改行を入れる。(スマホ表示で3~4行ごと)
  • 画像を入れる
  • 装飾やCSSを使ってデザインにメリハリをつける

など、読者がつかれたり飽きて離脱されないための工夫が必用です。


まとめ



クリック一つで便利にプレビュー比較ができるようになりました。

スマホでの見え方をちょっと意識するだけで、本文の書き方や見た目の工夫など「記事力を上げるための技術」の重要性に気づかされます。

せっかくの集客。1秒でも1ページでも多くブログを楽しんでもらえるように試行錯誤は続きます。

スポンサーリンク

シェアする

フォローする