みなさんこんにちは!CB部広報担当のさいまりです!

ブログやWEBサイトの文章を更新するとき、意外と見落としがちなのが

「スマホで見たときどう表示されているか」

「うちのサイトはスマホ対応してるから大丈夫」という企業さんは多いと思いますが、

「スマホ閲覧時の視認性の良さ」と「スマホ対応」は全く別物です。

今回は、スマホ閲覧を意識したブログ更新のポイントについて紹介していきます!

PC編集のワナ

ちょっとこちらの画像をご覧ください。

わーーーーーーー!!!!!!

 

何これもう絶対無理。読めない。文字として認識できないですよね。韓国海苔みたい

しかしこちら、PCで閲覧してみると…?

 

たしかに文字多いけど!!わりと普通!!

 

このように、PCで編集してプレビュー→公開していると、スマホユーザーが置いてけぼりになることがあります。CBplusのユーザーも60%近くがスマホからの閲覧です。これは疎かにできません。

スマホで見やすい編集のために

必ず150字で改段落しよう

機種にもよりますが、150字を超える連続した文章は、スマホ表示にすると10行近くなります。

体感ですが、8行を超えたあたりから若干の読みにくさによるストレスを感じる(主観)ので、どんなに長くとも150字以内に段落(ひとかたまりの文章)をまとめましょう。

このポイントは「改行」ではなく「改段落」であることです。

▲改行してみたブログ

あ、あんまり変わらない……!

PC表示だとちょっと見やすくなるのですが、スマホ表示において改行はスペース確保にあらず

必ず段落を分けましょう。おすすめは50~140字です。

▲だいぶ見やすくなりました!

見出しや強調、画像を入れよう

上の文章に、見出しを入れてみましょう。

続いて強調を入れてみましょう。

▲だいぶそれらしくなりました!

最後に画像を入れれば…

スマホユーザーに親切なブログの出来上がりです!

画像は1節に1つ程度あることが望ましいです(主観)

▲最初の画像と比べるとその差は歴然

画像作りにはこちらがおすすめです~

 

デベロッパーツール使ってる?

このブログを書いていてつくづく思ったのが、PCで書いてスマホで確認するの、

ものすごい面倒ですよね…!( ˘ω˘)

そこでおすすめなのが、PCブラウザ上からそのままスマホ表示を確認できる。

GoogleChromeのデベロッパーツールです。

使い方はかんたん。

表示を確認したいページ(どこでも良い)で右クリックし、
メニューの中から「検証」をクリック

出てきたデベロッパーツールの左上にあるスマホとタブレットっぽいマークをクリック

上部に表示された「[Responsive▼」をクリック。
するとたくさんの端末名が表示されるので、表示を確認したい機種名をクリック。

 

すると、機種ごとのサイズで表示されるのです…!これは便利…!

(スクショもこれで撮れば良かったことに今気がついたーーー!)

スマホユーザーに優しい編集を!

編集というと経験やセンスが問われそうですが、誰もが見た時に読みやすくなるよう想像力を働かせるだけで、見やすさは大きく変わります。

そのためにもツールを使いこなしてみましょうー!

WRITER
さいまり
さいまり
ビールが好きな広報担当です。会社にビール部を作ることをもくろんでいます。