hamashun.com

サイトリニューアルについて色々と考えています。
目的というか目標をいくつか設定しているんですけど、その中の一つが「読みやすいデザイン」という事。
やっぱりBlogがメインコンテンツですしね。

と言う訳で、BlogやWebサイトの、テキストの読みやすさについて考えてみました。 文章の素人なりに。
素人の言う事ですから、あんまり真に受けない方が良いです。 多分。

最初に結論

まず最初に結論を書いてしまいます。
それは読みやすさは個人差が激しいという事です。 視力などによる最適なフォントサイズが最たる例ですね。
よって、Aさんが最高に読みやすいBlogをBさんはそう思わない、なんて事は十分あり得ります。

2種類の読みやすさ

読みやすいBlogを作るには、大きく分けて2つの事を意識する必要があります。
一つは構成や言葉使いなど、文章自体に関する事。
もう一つは、CSSのプロパティで言う所のfont-sizeやline-heightなど、デザイン的な事。

Blogに適した文章

書いておいてなんですけど、ぶっちゃけ国語力と言うか文章力が重要だと思うので、余り深く書きません（書けません）。
書けたとしても、それこそ本一冊分になりそうですｗ

一つ意識したいのは、句読点についてでしょうか。
これも激しく好みに左右されるんですけど、まあ「全くいれない方が読みやすい」という人は、余りいないんじゃないかと思います。
かといって、このように、入れすぎるのも、なんだか、息切れしてしまっているような、気になります（繰り返しになりますけど、個人によって意見は異なります）。
なので僕は入れすぎず入れなさ過ぎずを意識しています。

上記のように太字部分の直前など、入れなくても読みやすく感じる事もあると思いますので、その辺りは本当にケースバイケースだと思います。
句読点の他にも、文章の雰囲気を統一する事を意識したりすると良いと思います。

Blogに適した設定

さて、ここからがいよいよメインの項目です。
ここで意識したいのは、コントラスト、フォントサイズ、一行の文字数、行間、文字間隔、段落間隔です。
これも殆どにおいて個人差が関係してきます。

コントラスト

これに関しては、割と明確な基準が見つかりました。
W3Cでは、色差120以上、明度差500以上を推奨しています。
詳細を知りたい方は色の組み合わせチェック - 読みやすい前景色と背景色を読んでみると良いと思います。
読みやすいHTML色作りツール - 配色の見易さも考慮したHTML色作成ツールという便利なソフトもありました。

フォントサイズ

基本的に、%やemなど相対単位を使います。
デザインを重視したサイトなら小さめのフォントもアリだと思いますけど、テキスト中心のBlogでは読みやすさを重視したいところです。
肝心の読みやすさは個人差が以下略。

一行の文字数

これはカラムの幅も関係してきますが、おおむね25～40文字程度なようです（って結構振れ幅広いですね）。
よく「読みやすい」として紹介されるほぼ日刊イトイ新聞でも、25文字程度で折り返していますね。

行間

気になりだすと止まりません。 ちょっとづつ調整していたら、我に返った時に恐ろしい間隔になっていたりします（しませんか？）
適正な値はフォントサイズや文字色にも影響を受けますけど、1.2～1.7程度かな、と思っています。
なお、line-heightプロパティには単位を付けない方が良いと言われています（このBlogでは指定しちゃってますけれど･･････）。
その理由はLucky bag::blog: line-height の値には単位なしが良いとされる理由やhxxk.jp - line-height プロパティに関する簡単なまとめで詳しく解説されています。

文字間隔

これは余りメジャーではないかもしれません。 letter-spacingプロパティを使用します。
こちらも、ついついエスカレートして間隔を広げすぎないようにご注意をｗ

段落間隔

上下marginなどで調整します。
このBlogは、ちょっと空きすぎな気がします･･････。

まとめ

大体の目安はあれど、結局は人それぞれなんですよね。
ユーザビリティって難しいなあ。