すこしづつではありますが、ブログのデザインを変えています。
今回の変更は、読みやすいブログサイトにするには、どうしたらよいかということを考えながら、デザインを決めてみました。
MacBook Air Station by MattsMacintosh
正直なところ、私はデザイナーではありませんので、とにかく調べたり、情報を集めるところから始めました。
せっかく調べたことなので、ブログにも記事として記録に残しておこうと思い、今回は「ブログデザインを考える：１行の字数とWEB幅」について書いていきたいと思います。
考えたこと
- １行の字数
- 行間、段落間の間隔
- WEB幅
ひとまず上の３点を適当に（ふざけた意味じゃないですよっ、丁度良いって意味で使ってます）設定することで、読みやすいブログサイトにしていこうと考えたわけです。
１行の字数
人の目は読みやすいと感じる字数は、結構短めなのだそうです。
これは印刷物の場合ですが、横書きだと15～35文字くらいが良いと言われるそうです。
無理なく読める1行の文字数は、縦組みの場合は20～45文字程度、横組みの場合は15～35文字程度といわれてます。
また、実際に読みやすさを比較している記事もありました。
[ CSS ] 一列の文字数ってどのくらいがいいの? 読みやすさを比較したよ | yossense
ここで考えたのは、
- 1行の文字数って、フォントサイズと文字間隔、記事幅のバランスによって決まるよね
- WEBサイトでの1行の字数も、多すぎず、少なすぎずが良いと思うけど、他のサイトは具体的にどんな設定なんだろう？
の２点です。
ということで、いつも見ているWEBサイトを調べてみました。
いつも見ているサイトを調べてしてみた
今回調べた設定項目（CSS）は以下の通りです。
- 文字の色（color）
- フォントサイズ（font-size）
- 文字間隔（letter-spacing）
- 記事幅（width）
調査した環境
- WindowsのChromeを使用
- ブラウザの横幅は1280pxにして調査
Googleアナリティクスで当ブログの訪問者のOSを確認すると、Windowsが３割をしめており、やはりOSシェアの高いWindowsで調べた方が良いだろうということで、今回はWindows環境で調査をしています。
調査の仕方
下のスクショのようにChromeのデベロッパーツールを使います。
例えば、調べたいサイトの記事の段落部分を右クリックして「要素の検証」を選んだ後、デベロッパーツールの「Computed」タブを見ると計算されたCSSが表示されているので、簡単に調べることが出来るんですよ。
※調査結果は、ハンドによるものなので、誤差や間違いがあるかもしれません。
※調査結果の並び順は、１行の字数が少ない順で並べています。
WEBデザインで参考にしているサイトの場合
※タイトル横の数字は１行の字数を示しています。
※リンク下の引用文は、該当サイトから１行分の文章を抜き出したものです。
ホームページを作る人のネタ帳:38字
color: rgb(68, 68, 68); font-size: 15px; line-height: 21.559999465942383px; letter-spacing: normal; width: 530px;
ホームページを作る人のネタ帳
先々月から様々な事情により島と北海道を行き来する生活が続いておりまして、どう
バンクーバーのうぇぶ屋:40字
color: rgb(51, 51, 51); font-size: 18px; line-height: 30.600000381469727px; letter-spacing: normal; width: 673.8125px;
バンクーバーのうぇぶ屋
先日、実はひっそりと僕の会社でWEBデザイナーを数名雇うつもりで求人広告を出させて
PhotoshopVIP:41字
color: rgb(34, 34, 34); font-size: 16px; line-height: 25.600000381469727px; letter-spacing: normal; width: 613.3125px;
PhotoshopVIP
海外デザインブログCreative Nerdsで、レスポンシブWebデザインに対応した、無料HTMLテ
Webクリエイターボックス:44字
color: rgb(102, 102, 102); font-size: 16px; line-height: 26px; letter-spacing: normal; width: auto;
Webクリエイターボックス | WebデザインやWebサイト制作、最新のWeb業界情報などを紹介していくサイト。
ECサイトはスピード勝負だとよく言われています。それはページの読み込み時間という体感速度は
コリス:45字
color: rgb(90, 71, 28); font-size: 13px; line-height: 20.598400115966797px; letter-spacing: 0.13120000064373016px; width: 541px;
コリス | サイト制作に関する最新の情報をご紹介
前の会社では新人ウェブデザイナーが必ずやっていたことの一つに、文字詰め1,000本ノックがあり
Webデザインレシピ:53字
color: rgb(51, 51, 51); font-size: 14px; line-height: 25.27199935913086px; width: 700px;
Webデザインレシピ
また、WordPress は PHP で作られているので、テーマを作成する上でも PHP の知識は必要になりますが、「PHP はわ
すげーブロガーさんたちの場合
わかったブログ:35字
font-size: 15px; line-height: 25.5px; letter-spacing: 1px; padding-top: 7.5px; width: 500px;
わかったブログ
スマフォなどで使いたい方は、下記コードをコピペして、ご自分で設定してく
ごりゅご.com:38字
color: rgb(55, 55, 55); font-size: 15px; line-height: normal; letter-spacing: normal; width: 500px;
ごりゅご.com
以前知り合いに触らせてもらったことはあったんですが、お値段がちょっと高級す
ネタフル:42字
color: rgb(51, 51, 51); font-size: 16px; line-height: 25.600000381469727px; letter-spacing: normal; width: 610px;
[N]ネタフル
「JINS MEME（ミーム）」が発表されました。「JINS MEME（ミーム）」は、顔との接触部分に
OZPAの表4:44字
color: rgb(67, 67, 67); font-size: 15px; line-height: 25.5px; letter-spacing: normal; width: 600px;
OZPAの表4
ブログをやっているとよく全知全能の神のお姿をコメント欄などで拝見することがあります。私も
ひとりぶろぐ:45
color: rgb(68, 68, 68); font-size: 16px; line-height: 28.079999923706055px; letter-spacing: normal; width: 620px;
ひとりぶろぐ
この「3W LED USBスポットライト」、捻るとケースが開くことに気がつきました。そこで、明るく
イケハヤ書店 by @IHayato:46字
color: rgb(8, 0, 0); font-size: 16px; line-height: 32px; letter-spacing: normal; width: 640px;
イケハヤ書店 by @IHayato
NewsPicksは「ソーシャル経済ニュースメディア」と銘打っているように、ビジネスパーソンが中心と
男子ハック:46字
color: rgb(51, 51, 51); font-size: 16.363636016845703px; line-height: 23.272727966308594px; letter-spacing: normal; width: 686.178955078125px;
男子ハック
まさかJINS（ジンズ）がこんなウェアラブルデバイスの開発をしていたとは思いませんでした。今回発
IDEA*idea:47字
color: rgb(85, 85, 85); font-size: 13px; line-height: 26px; letter-spacing: normal; width: 563px;
IDEA*IDEA | 百式管理人のライフハックブログ
ブラジルの子供と米国のシニア（いわゆる老人ホームにいる方たち）をつないで英語のレッスンを展開し
あかめ女子のwebメモ:48字
color: rgb(95, 94, 94); font-size: 15px; line-height: 30px; letter-spacing: normal; width: 660px;
あかめ女子のwebメモ
ブログ開設当初、WordPressの知識もなければ、ブログの知識もない。フワッと始めて、最初は継続してブ
あなたのスイッチを押すブログ:48字
color: rgb(77, 82, 95); font-size: 16.363636016845703px; line-height: 24px; letter-spacing: 1.5999999046325684px; width: 620px;
あなたのスイッチを押すブログ
表題の通り、来る5月17日の土曜日のタスクセラピーに、ゲストとして出演することが決まりました！ 5月
ゴリミー:50字
color: rgb(17, 17, 17); font-size: 16px; line-height: 28.799999237060547px; letter-spacing: normal; width: 723px;
gori.me（ゴリミー）
ペットを飼う場合、飼う動物の気持ちになったり気持ちを汲み取れるように勉強することも大事だと言うが、ペ
和洋風KAI:52字
color: rgb(34, 34, 34); font-size: 15px; line-height: 29.03999900817871px; letter-spacing: normal; width: 728px;
和洋風KAI
一見なかなか無愛想なヤツですが話してみるとなかなか仕事のできるやつで、最近はターミナルとの対話が楽しくな
らふらく^^ ~ブログで飯を食う~:55字
color: rgb(0, 0, 0); font-size: 15px; line-height: 27px; letter-spacing: normal; width: 730px;
らふらく^^ ~ブログで飯を食う~
それは、これから紹介するiPhoneアプリ「Lisgo」でPocketに保存した記事を耳でインプットする事です。「Lisgo」を使え
調べた結果から１行の字数を設定するための要素を考える
１行の字数
最小は35文字、最大で55文字でした。
フォントサイズにも依りますが、個人的には40文字を少し超えるくらいが、一目で読みやすいかなと思っています。
読みやすい文字数については、個人的な差はあると思いますので、実際に自分の目で確かめてみるのが一番良いでしょう。
フォントサイズ
調べた最小のフォントサイズは13pxで、最大は18pxでした。
また15pxか16pxのところが多かったですね。私も実際に見たら16pxくらいが読みやすいかなと思いました。
最近のパソコンディスプレイは高解像度のものが増えていたり、タブレットのような画面サイズが小さなものもあったりします。
なので、下記記事も参考にして、フォントサイズは16pxくらいを目安にするのが良さそうです。
タブレットでの閲覧もふまえて、PCサイトでも基本の文字サイズはデバイスを問わず16pxほどはあったほうがいいようです
via タブレット向けサイトの文字サイズは16pxがいいとの調査結果……イマドキの文字サイズの話 | Web担当者Forum
文字間隔
調べたほとんどのサイトが「normal」でした。まれに指定しているサイトもありましたが、「normal」としておけば良いでしょう。
ちなみに「normal」の指定は、以下のような意味になります。
フォントの標準のスペース。 多くの場合 0 を指定した場合と同じ表示結果となりますが、この値は、ユーザエージェントに字間調整を委ねるものであり、そこが 0 を指定した場合と異なる点です。
記事幅
調査したサイトでは、最小が500px、最大で730pxでした。大体600px台のところが多いようです。
１行の字数とフォントサイズ、文字間隔を決めていくと、記事幅も決まっていくと思います。
行間
行間の間隔はどの参考資料をみても0.7行あけるくらいが良いとされています。
結論から言えば、フォントサイズの70％前後（0.7文字分）の行間をとるのが適当です。
via 文章の作り方｜伝わるデザイン
例えば、フォントサイズが16pxだったら、1.7倍のline-heightを設定すれば、0.7文字分の行間が設定されます。
段落の間隔
段落の間隔は1～1.5行くらいスペースをとるのが良いとされているようです。
段落
と段落の間は1～1.5行ぶんの空白をとるのが一般的
段落の間隔を設定するには、<p>タグのmargin-bottomを設定してあげるのが良さそうです。
WEB幅
WEB幅はブログサイト全体の幅になります。
900px～1000pxの間くらいが良いようです。あまり大きすぎても、一目に入ってくる情報は限られてしまうでしょうし、小さすぎれば、下へ下へと情報が伸びてスクロールしなければ見れなくなってしまいますね。
一般的に普及しているディスプレイのサイズは1024×768です。
この横幅である1024px越えてしまうと、ブラウザで横スクロールバーが表示されてしまいます。
横スクロールはマウスではできないので、ユーザビリティとしてはNGです。
かといって1024pxギリギリにしてしまうと今度は縦スクロールバーの分で横スクロールバーが表示されてしまいます。
なので、上記のブログのように900px～1000pxの間で横幅を決めた方がよさそうです。
ちなみに、色々なWebサイトの横幅をまとめたサイトもありますので、参考にしてみてください。
tarのブログるっの場合
一応、「tarのブログるっ」の設定もお見せしますね。
調査結果を元に試行錯誤して設定した内容がこちらになります。
tarのブログるっ by @tarVolcano:43字
color: rgb(69, 69, 69); font-size: 16px; line-height: 27.200000762939453px; letter-spacing: normal; margin-bottom: 20px; width: 630px;
WEB幅は980pxで設定しています。
tarのブログるっ by @tarVolcano
私の家から高速を使ってもクルマで片道２時間。前日に言ってくれれば、朝起きる時間を早くし
あとがき
今回は読みやすい１行の字数を考えるための調査と、その記録を記事にしてみました。
ブログサイトというハード的な面からブログを読みやすくするために、色々と調べてきましたが、コンテンツの質や文章力と言ったソフト的な面も考慮しなければ、読み手にとって読みやすいブログとは言えないんだろうな、とも思っています。
正直、私に足りないのは後者の方なんだろうな〜と感じていますが、こればっかりは数をこなして上達していくしかないですよね。
また、ブログデザインもまだまだ未完成なので、今回の記事が好評ならシリーズ化しても面白いかな〜なんて考えたりしています。
（いあ、人気がなくたって続編書きますけどねw）
それでは、今回はこの辺で。
