こんにちは、上杉です＾＾

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

”20代のスマホ所持率が９４％越え”

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

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

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

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

句点とかで改行してるとスマホからの閲覧の場合1文字２文字とかで改行されてしまう事とかもあるんで非常に見づらいし、どんなに有益な記事を書いたとしても”見づらい”というだけでも離脱率はあがってしまう物なんですよね＾＾；

このサイトは情報系を扱っていて、今の所はほぼPCからのアクセス多いのですが、今後はスマホユーザーの方が増えると踏んでそれに合わせた改行をしています。

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

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

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

ただ、自分のサイトに訪れるコンテンツがスマホユーザーの方が多い場合やコンテンツがどちらかと言えばスマホユーザー向けの物であれば

句読点（。）のポイントで改行すればスマホ画面からでも見やすく表示させることができます。

例　PC向けに改行した文↓

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

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

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

スマホ画面向けの画面でも、PC画面から見る分にはそれほど見づらいという感じでもないですが、逆にPC向けの文章をスマホから見ると、3文字とかで改行されてしまうので非常に読みづらいんですよね。

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

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

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

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

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

br {

display: none;

}

}

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

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

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

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

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

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

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

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

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