2014年3月10日

[ CSS ] 一列の文字数ってどのくらいがいいの? 読みやすさを比較したよ

number-letters-row-250

こんにちは! ヨス(@yossense)です。

前回の記事で<br />タグは使わない方が良いというものを書きました。

今回はその続き的な内容です。サイトやブログで文章を書いた時の、横並び一列に表示する文字数についてです。

文字がヨコに並びすぎると読みづらい

文字(文章)って画像を見るよりも大変です。画像は見たらすぐに内容がわかりますが、文章は読まないといけません。

なので文章が長いと、ウッときます(って言いながら、いつも長くてすみませんw)。そのウッとなる原因ですが、実は横に並んだ文字数と関係あります。一列の文字数でその「ウッ!」をマシにできます。

こちらでは横に並んだ文字数を変えた3つの例を見てみましょう。

文字が横に約70文字続いた場合

ではまずは横に70文字ぐらいが続いた場合です。

横に70文字ぐらい並んだ例
横に70文字ぐらい並んだ例

1カラムだと横幅があるので、普通にやるとこうなってしまいます。私はこれは結構見づらいです。好きなサイトならそれでも読みますが、初めて来たサイトがこんなでは、しょげてしまいます。

文字が横に約50文字続いた場合

お次は横に50文字ぐらいが続いた場合です。

横に50文字ぐらい並んだ例
横に50文字ぐらい並んだ例

横70文字から50文字に減っただけでかなり見やすくなった感があります。いい感じではないでしょうか。

文字が横に約35文字続いた場合

次は横に35文字ぐらい。

横に35文字ぐらい並んだ例
横に35文字ぐらい並んだ例

おおー。見やすいですね。デザイン学校で35文字ぐらいがいいよーって習うんですが、これ本当ですね。私が習った時代はネットなんて一般的に全く普及してなかった時代でしたので紙媒体での話でした。でも、こういうのはネットとか関係ないですね。

文字が横に約20文字続いた場合

今度は横に20文字ほど。スマホで見るとこんな感じですよね。

横に20文字ぐらい並んだ例
横に20文字ぐらい並んだ例

見にくくはないんですが、今度は縦が長くなりすぎます。

文字数の調整のやり方

ではHTMLやCSSではどうやったら、この文字数を調整できるのでしょうか? 答えは超簡単。<p>にCSSのwidthで指定するだけ!

HTML

まずはHTMLです。

<p>ここの文章の文字数を調整したいんですよね。なんというか、こういう時の例文って何を書いていいのか、結構考えるのが面倒くさいんですよ。こんな感じでいいすか?</p>

CSS

お次はCSSです。

p { width : 70% ; }

とりあえず「70%」って入れていますが、フォントの大きさや、カラムの横幅なんかによって変わってくると思います。なので、ここは適宜調整して下さい。

という訳で、こんな風に大分違って見えることが分かりました。実際のところ、サイトのレイアウトとか、本人の好みによっていろいろ意見は分かれると思います。

個人的な意見では35~50文字ぐらいだったら問題ないかと思います。ぜひ、自分のサイト、ブログに合った文字数を見つけて下さい。

WEB関係のスキルを学ぶのって独学では時間がかかりますが、今ならオンラインで学べるスクールもあります。

たとえば完全にオンラインで学べるTechAcademy [テックアカデミー]なら、「Webリニューアル集中プログラム」という超ターゲットを絞ったコースがあります。

このコースがオススメな理由は、今現在運営しているサイトをリニューアルすることがゴールであること。

つまり、例えば学生なら10万円以下で今のサイトのリニューアルができ、さらに技術が身につくという一石二鳥なコースです。

プロにお願いするとものすごく制作費がかかるので長い目でみると、今学ぶことはかなり合理的です。

この記事が気に入ったら
「いいね!」で情報GET!

Twitterでヨスをフォローしよう!

この記事のシェアはこちら♪

※ 微妙だったら、そっと閉じるか、ほかの記事を見ていただけるとうれしいです!