読者です 読者をやめる 読者になる 読者になる

tarのブログるっ by @tarVolcano

メガネ男子のtarが書くブログです。

ブログデザインを考える:1行の字数とWEB幅

WEB

すこしづつではありますが、ブログのデザインを変えています。

今回の変更は、読みやすいブログサイトにするには、どうしたらよいかということを考えながら、デザインを決めてみました。

MacBook Air Station
MacBook Air Station by MattsMacintosh

正直なところ、私はデザイナーではありませんので、とにかく調べたり、情報を集めるところから始めました。

せっかく調べたことなので、ブログにも記事として記録に残しておこうと思い、今回は「ブログデザインを考える:1行の字数とWEB幅」について書いていきたいと思います。

スポンサーリンク

考えたこと

  • 1行の字数
  • 行間、段落間の間隔
  • WEB幅

ひとまず上の3点を適当に(ふざけた意味じゃないですよっ、丁度良いって意味で使ってます)設定することで、読みやすいブログサイトにしていこうと考えたわけです。

1行の字数

人の目は読みやすいと感じる字数は、結構短めなのだそうです。

これは印刷物の場合ですが、横書きだと15~35文字くらいが良いと言われるそうです。

無理なく読める1行の文字数は、縦組みの場合は20~45文字程度、横組みの場合は15~35文字程度といわれてます。

via 1行の文字数と文章の読みやすさ|いまさら聞けない!? 印刷・DTPの基礎知識|クリエイターズ広場|OKIデータ

また、実際に読みやすさを比較している記事もありました。

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

ここで考えたのは、

  1. 1行の文字数って、フォントサイズと文字間隔、記事幅のバランスによって決まるよね
  2. WEBサイトでの1行の字数も、多すぎず、少なすぎずが良いと思うけど、他のサイトは具体的にどんな設定なんだろう?

の2点です。

ということで、いつも見ているWEBサイトを調べてみました。

いつも見ているサイトを調べてしてみた

今回調べた設定項目(CSS)は以下の通りです。

  • 文字の色(color)
  • フォントサイズ(font-size)
  • 文字間隔(letter-spacing)
  • 記事幅(width)

調査した環境

  • WindowsのChromeを使用
  • ブラウザの横幅は1280pxにして調査

Googleアナリティクスで当ブログの訪問者のOSを確認すると、Windowsが3割をしめており、やはりOSシェアの高いWindowsで調べた方が良いだろうということで、今回はWindows環境で調査をしています。

調査の仕方

下のスクショのようにChromeのデベロッパーツールを使います。

例えば、調べたいサイトの記事の段落部分を右クリックして「要素の検証」を選んだ後、デベロッパーツールの「Computed」タブを見ると計算されたCSSが表示されているので、簡単に調べることが出来るんですよ。

20140522034539

※調査結果は、ハンドによるものなので、誤差や間違いがあるかもしれません。
※調査結果の並び順は、1行の字数が少ない順で並べています。

WEBデザインで参考にしているサイトの場合

※タイトル横の数字は1行の字数を示しています。
※リンク下の引用文は、該当サイトから1行分の文章を抜き出したものです。


ホームページを作る人のネタ帳: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」を使え

調べた結果から1行の字数を設定するための要素を考える

1行の字数

最小は35文字、最大で55文字でした。

フォントサイズにも依りますが、個人的には40文字を少し超えるくらいが、一目で読みやすいかなと思っています。

読みやすい文字数については、個人的な差はあると思いますので、実際に自分の目で確かめてみるのが一番良いでしょう。

フォントサイズ

調べた最小のフォントサイズは13pxで、最大は18pxでした。

また15pxか16pxのところが多かったですね。私も実際に見たら16pxくらいが読みやすいかなと思いました。

最近のパソコンディスプレイは高解像度のものが増えていたり、タブレットのような画面サイズが小さなものもあったりします。

なので、下記記事も参考にして、フォントサイズは16pxくらいを目安にするのが良さそうです。

タブレットでの閲覧もふまえて、PCサイトでも基本の文字サイズはデバイスを問わず16pxほどはあったほうがいいようです

via タブレット向けサイトの文字サイズは16pxがいいとの調査結果……イマドキの文字サイズの話 | Web担当者Forum

文字間隔

調べたほとんどのサイトが「normal」でした。まれに指定しているサイトもありましたが、「normal」としておけば良いでしょう。

ちなみに「normal」の指定は、以下のような意味になります。

フォントの標準のスペース。 多くの場合 0 を指定した場合と同じ表示結果となりますが、この値は、ユーザエージェントに字間調整を委ねるものであり、そこが 0 を指定した場合と異なる点です。

via letter-spacing - CSS | MDN

記事幅

調査したサイトでは、最小が500px、最大で730pxでした。大体600px台のところが多いようです。

1行の字数とフォントサイズ、文字間隔を決めていくと、記事幅も決まっていくと思います。

行間

行間の間隔はどの参考資料をみても0.7行あけるくらいが良いとされています。

結論から言えば、フォントサイズの70%前後(0.7文字分)の行間をとるのが適当です。

via 文章の作り方|伝わるデザイン

例えば、フォントサイズが16pxだったら、1.7倍のline-heightを設定すれば、0.7文字分の行間が設定されます。

段落の間隔

段落の間隔は1~1.5行くらいスペースをとるのが良いとされているようです。

段落

と段落の間は1~1.5行ぶんの空白をとるのが一般的

via 連続改行brはNG!?覚えておいて損はない改行と段落の使い分け方

段落の間隔を設定するには、<p>タグのmargin-bottomを設定してあげるのが良さそうです。

WEB幅

WEB幅はブログサイト全体の幅になります。

900px~1000pxの間くらいが良いようです。あまり大きすぎても、一目に入ってくる情報は限られてしまうでしょうし、小さすぎれば、下へ下へと情報が伸びてスクロールしなければ見れなくなってしまいますね。

一般的に普及しているディスプレイのサイズは1024×768です。
この横幅である1024px越えてしまうと、ブラウザで横スクロールバーが表示されてしまいます。
横スクロールはマウスではできないので、ユーザビリティとしてはNGです。
かといって1024pxギリギリにしてしまうと今度は縦スクロールバーの分で横スクロールバーが表示されてしまいます。
なので、上記のブログのように900px~1000pxの間で横幅を決めた方がよさそうです。

via ブログに最適な横幅は900~1000pxがいいみたい | Select *

ちなみに、色々なWebサイトの横幅をまとめたサイトもありますので、参考にしてみてください。

Webサイトの横幅まとめ - ULTRAZONE

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

私の家から高速を使ってもクルマで片道2時間。前日に言ってくれれば、朝起きる時間を早くし

あとがき

今回は読みやすい1行の字数を考えるための調査と、その記録を記事にしてみました。

ブログサイトというハード的な面からブログを読みやすくするために、色々と調べてきましたが、コンテンツの質や文章力と言ったソフト的な面も考慮しなければ、読み手にとって読みやすいブログとは言えないんだろうな、とも思っています。

正直、私に足りないのは後者の方なんだろうな〜と感じていますが、こればっかりは数をこなして上達していくしかないですよね。

また、ブログデザインもまだまだ未完成なので、今回の記事が好評ならシリーズ化しても面白いかな〜なんて考えたりしています。
(いあ、人気がなくたって続編書きますけどねw)

それでは、今回はこの辺で。

  • このエントリーをはてなブックマークに追加