フォントの設定を最適化しよう 〜見やすいフォント、読みやすい行幅・文字サイズ、分かりやすいリンク色〜
2015年10月15日

フォントの設定を最適化しよう 〜見やすいフォント、読みやすい行幅・文字サイズ、分かりやすいリンク色〜

今日は、WEBサイトの「文字」についてのお話です。

見やすいブログのデザインとは?


僕はこのブログのカスタマイズを行うにあたって、「ブログ 幅 最適」とか「見やすいフォント」とか「ブログ 文字の大きさ」などで検索し、いくつかのサイトの意見を拝見しました。
そして、「これが一般的」と思われる解を得ました。

ブログ本文の幅:600〜650px
サイドバーの幅:300px程度
ブログ全体の幅:1000px程度(余白含む)
フォント:メイリオ(Macではヒラギノ角ゴ ProN)
フォントサイズ:14〜16px
(結果として)1行の文字数:40字程度

参考:
これが読みやすいブログデザイン!有名サイトの記事幅と余白設定を大公開
http://naifix.com/width/

右サイドバーの幅は300pxが最適
http://www.homepage-tukurikata.com/hp/300px.html


では、この『145cmの考察』はどうかというと……?

ブログ本文の幅:500px
サイドバーの幅:216px
ブログ全体の幅:777px程度(余白含む)
フォント:MS Pゴシック(記事タイトルなど要所ではメイリオ)
フォントサイズ:13px
(結果として)1行の文字数:40字程度

全体的に一回り小さいです。

でもあえてそのままにしてあります。
ちょっとくらい小さい方が、雰囲気が合っていると思うんですよね。

フォントは、すべてメイリオにするより、メニューや記事タイトルなど重要項目のみメイリオにした方が見やすかったので、基本的にはMS Pゴシックの素朴な字体にしてあります。

文字サイズは、12pxだと小さすぎるというのはよく聞きますが、13pxはどうも話題に上がらないみたいです。12pxが小さく14〜16pxがちょうどいいなら、13pxは「やや小さい」でセーフですよね!(希望的観測)

文字サイズを大きくすると、1行に入る文字数が減ってしまいます。
読みやすさにおいて、とりわけ重要なのは行間と1行の文字数。
1行の文字数が多すぎても少なすぎても読みにくくなってしまうのです。1行40字くらいがちょうどいいですね。

行間は190%とたっぷりとってあるので、それなりに見やすいかと思います。

しかし、自分の好みに設定してしまっているので、もし見にくいという方がいらっしゃったら申し訳ありません。そういう時は、是非遠慮なくWEB拍手のコメント機能などでご指摘いただけるとありがたいですm(__)m

WEB拍手


リンクの色は? 下線は必要か?


リンクの色は、青系がいいと言われています。
リンク=青、青=リンクというイメージが、ネットユーザーの意識に刷り込まれているためです。
おそらく、Googleの検索結果ページのリンクが青であるうちは、その「常識」が続くでしょう。

では、リンク文字の下線は必要でしょうか?
僕の考えでは、「是非見てほしいリンク」には下線を引き、「一応参考としてリンクを張るが、別に見てほしいわけじゃないリンク」には下線を引かないのがいいと思います。

全部下線が引いてあると記事の中がちょっとうるさくなります。だからといってまったく線を引かないと、青字でも意外と目立たないんですよね。

よって、CSSではリンクに下線を引かない設定をし、記事を書くときに個別に下線を引きます。
下線をつけるHTMLは<U>〜</U>です。

(今まで、Seesaaブログの記事作成画面に初めから用意してある下線ボタンを使っていましたが、それを押すと<Ins>〜</Ins>で文字が囲まれます。これは下線を引くだけでなく、「後からその部分が付け加えられた」という意味を付加するものなのだと、今知りました\(^o^)/ 今後は使わないようにします^^;)


CSSでフォントを設定しよう!


※Seesaaブログをご利用の方は「デザイン→デザイン設定」=CSSです。

CSSでは、それぞれの要素(ヘッダー部分とか、記事本文部分とか、サイドバー部分とか)によってclassを分け、個別にデザインを指定することができます。
必要な個所に必要な指定を行いましょう!

フォントの指定
font-family: Verdana , "MS Pゴシック", "MS PGothic" , sans-serif;
とか
font-family: Meiryo , "Hiragino Kaku Gothic ProN" , "Hiragino Kaku Gothic Pro" , sans-serif;
とか

【解説】
・「font-family:」はフォントを設定するということ。

・優先度の高い順に左から書いていく。
・例えば「Verdana」のような英字フォントを左に、「MS Pゴシック」のような日本語と英字を両方表示できるフォントを右に書くと、半角英数字だけ「Verdana」で表示することができる。

・フォント名に空白スペースを含むものは" "で囲む。
・日本語表記が正式な場合でも、半角英数字じゃないと反応しないブラウザもあるらしいので、英語版のフォント名も書いておく。(というか多分英語版だけで十分なんだと思います。検証はしていませんが……。両方書いておいた方が安心ではあります)

・「sans-serif」は「ゴシック体でお願いします!」という意味。指定したフォントの中に、閲覧者の環境で表示できるフォントがなかった場合に、閲覧者の環境で表示できるゴシック体で表示してくれる。「serif」にすると、明朝体のように文字の先端にひげ(?)のついた字体になる。

フォントサイズの指定
font-size: ○px;

行間の指定
line-height: ○%; (pxやemでも指定できます)

文字を太字にする
font-weight: bold;

文字の色を指定する
color: #○○; (カラーコード

文章の配置を指定する
text-align: center; (中央寄せ)
text-align: left; (左寄せ)
text-align: right; (右寄せ)

下線の有無を指定する
text-decoration: none; (下線なし)
text-decoration: underline; (下線あり)

リンクのフォントを指定する
a{
色や線の指定ついて、上記で紹介したものを自由に入れる
}

もしサイト全体ではなく、一部のclassのリンク文字にのみ指定したければ、
.○○(クラス名) a{ 同上 }

マウスを重ねたときに色や線を変えたければ、
a:hover{ 変更後のCSSを自由に入れる }

リンクにカーソルを合わせたとき、色が変わったり線がついたりすると分かりやすいですよね!
僕はこんな風に指定しています。
a{
color:#36C;
text-decoration: none;
}
a:hover{
color:#4B93C6;
text-decoration: underline;
}

サンプル ←カーソルを合わせると線がつき、色が変わります。
スポンサーリンク
フォントの設定を最適化しよう 〜見やすいフォント、読みやすい行幅・文字サイズ、分かりやすいリンク色〜
先月の人気記事 TOP5