スマホユーザーに合わせた改行と対応策とは?

こんにちは、水瀬です^^

 

ほんの数年前まではスマホユーザーなんて
一部の”新しいもの好き”が使っているだけ
という印象だったのですがいまでは

”20代のスマホ所持率が94%越え”

 

という事もあってサイトに訪れるユーザーの半数以上がスマホからの
アクセスだったりするんですよね^^

 

いつでもスキマ時間に気軽にアクセスできるようになったので
「ふーん、そりゃいいことだ。」と思うかもしれませんが

そこで問題になってくるのが、記事の改行の点なんです。

 

今までの記事では、PCを意識した記事改行だったので
PCのモニターから見ると、見やすい位置で改行されるのですが
これがスマホの画面から表示させてみると

 

”超”見づらかったりするんです 笑

このページでもPC表示ではこんな感じで
ちょうどいい感じに改行されるのですが↓

 

miyasui

スマホの画面から見てみるとこんな感じ↓

 

mizurai

 

1文字2文字とかで改行されてしまうんで、非常に見づらいし
どんなに有益な記事を書いたとしても”見づらい”というだけでも
離脱率はあがってしまう物なんですよね^^;

 

このサイトは情報系を扱っていて
ほぼPCからのアクセス多いのでPC向けに合わせているのですが
スマホユーザーからのアクセスが多いという人もいると思うんですよね。

 

なので今回はスマホでも見やすい位置で改行する対策について
触れていきたいと思います。

 

 スマホ画面で見やすく表示させる方法とは?

 

6a42236a47828190a6d5a99f0beed716_s

 

PC向けに記事を書く場合であれば読点(、)をつけるタイミングで
改行するという人も結構多いです。

 

ただ、自分のサイトに訪れるコンテンツがスマホユーザーの方が多い場合や
コンテンツがどちらかと言えばスマホユーザー向けの物であれば
句読点(。)のポイントで改行すればスマホ画面からでも見やすく
表示させることができます。

 

例 PC向けに改行した文↓

1文字2文字とかで改行されてしまうんで、非常に見づらいし
どんなに有益な記事を書いたとしても”見づらい”というだけでも
離脱率はあがってしまう物なんですよね^^;

 

スマホ画面向けに開業した文↓

1文字2文字とかで改行されてしまうんで、非常に見づらいしどんなに有益な記事を書いたとしても”見づらい”というだけでも離脱率はあがってしまう物なんですよね^^;

 

スマホ画面向けの画面でも、PC画面から見る分には
それほど見づらいという感じでもないですが

逆にPC向けの文章をスマホから見ると、3文字とかで改行されてしまうので
非常に読みづらいんですよね。

 

ただ、句読点で改行を意識するだけで、スマホからもPCからも
そこそこ見やすい表示になるのでスマホユーザーが多いという場合は
改行の仕方を句読点(。)に変えるようにしてみましょうね^^

 

 

スマホ表示時のみ改行しない方法

 

PC表示の時はPCに見やすいように改行したいけど
スマホ表示だけ改行したくない!という場合もありますよね。

 

PC表示じの改行は<br>タグで改行されているので
画面表示が640以下の場合はbrが機能しないように
cssに以下のコードを追加すればOKです

 

@media screen and (max-width: 640px) {

br {
display: none;
}
}
このコードをサイトのCSSに貼り付ければ
PC表示の時は改行され、小さい画面で見ている場合は
改行が反映されなくなるので、スマホからでも見やすくすることができるんです。

重要なのはコンテンツの内容

 

ただ、いくら見やすく改行しようとも当然の話ですが
コンテンツの内容がダメだと精読率は恐ろしく極端に下がります 笑

 

逆に面白い有益な記事であれば、多少読みづらくても
精読率はそこまで極端に下がらないし、収益も上げ続けてくれますからね。

 

僕もスマホが復旧するまえから運営しているサイトもあって
スマホから見ると”嫌がらせ”レベルで見づらいサイトもあるんですが 笑

 

結構頑張ってコンテンツ詰めたサイトは読みづらくても
なかなか精読率は高いですね。

 

記事の中身がよければ、読み手側も一生懸命読んでくれますからね^^

 

やっぱりそういう意味でも、質の高いコンテンツで
資産サイトを構築する手法とかは学んでおくべきだなぁと感じますね^^

最終的に半自動で資産サイトを構築する手法

 

もちろんいまからサイト作りする場合はスマホユーザーも意識すべきだけど
それ以前に人に役に立つ記事、面白い記事を意識しましょうという事です。

 

それでは参考にしてみてくださいね^^

 

おすすめの記事