@tarVolcanoメガネ男子のtarが書くブログです。ブログデザインを考える:1行の字数とWEB幅2014-05-22ブログデザインを考える:1行の字数とWEB幅WEBすこしづつではありますが、ブログのデザインを変えています。今回の変更は、読みやすいブログサイトにするには、どうしたらよいかということを考えながら、デザインを決めてみました。MattsMacintosh正直なところ、私はデザイナーではありませんので、とにかく調べたり、情報を集めるところから始めました。調べたことなので、ブログにも記事として記録に残しておこうと思い、今回は「ブログデザインを考える:1行の字数とWEB幅」について書いていきたいと思います。行間、段落間の間隔WEB幅ひとまず上の3点を適当に(ふざけた意味じゃないですよっ、丁度良いって意味で使ってます)設定することで、読みやすいブログサイトにしていこうと考えたわけです。人の目は読みやすいと感じる字数は、結構短めなのだそうです。これは印刷物の場合ですが、横書きだと15~35文字くらいが良いと言われるそうです。無理なく読める1行の文字数は、縦組みの場合は20~45文字程度、横組みの場合は15~35文字程度といわれてます。印刷・DTPの基礎知識|クリエイターズ広場|OKIデータまた、実際に読みやすさを比較している記事もありました。yossenseここで考えたのは、1行の文字数って、フォントサイズと文字間隔、記事幅のバランスによって決まるよねWEBサイトでの1行の字数も、多すぎず、少なすぎずが良いと思うけど、他のサイトは具体的にどんな設定なんだろう?の2点です。いうことで、いつも見ているWEBサイトを調べてみました。いつも見ているサイトを調べてしてみた今回調べた設定項目(CSS)は以下の通りです。文字の色(color)フォントサイズ(font-size)文字間隔(letter-spacing)記事幅(width)調査した環境WindowsのChromeを使用ブラウザの横幅は1280pxにして調査Googleアナリティクスで当ブログの訪問者のOSを確認すると、Windowsが3割をしめており、やはりOSシェアの高いWindowsで調べた方が良いだろうということで、今回はWindows環境で調査をしています。下のスクショのようにChromeのデベロッパーツールを使います。調べたいサイトの記事の段落部分を右クリックして「要素の検証」を選んだ後、デベロッパーツールの「Computed」タブを見ると計算されたCSSが表示されているので、簡単に調べることが出来るんですよ。※調査結果は、ハンドによるものなので、誤差や間違いがあるかもしれません。※調査結果の並び順は、1行の字数が少ない順で並べています。※タイトル横の数字は1行の字数を示しています。※リンク下の引用文は、該当サイトから1行分の文章を抜き出したものです。WebデザインやWebサイト制作、最新のWeb業界情報などを紹介していくサイト。ECサイトはスピード勝負だとよく言われています。MEME(ミーム)」が発表されました。600px;OZPAの表4ブログをやっているとよく全知全能の神のお姿をコメント欄などで拝見することがあります。USBスポットライト」、捻るとケースが開くことに気がつきました。686.178955078125px;男子ハックまさかJINS(ジンズ)がこんなウェアラブルデバイスの開発をしていたとは思いませんでした。660px;あかめ女子のwebメモブログ開設当初、WordPressの知識もなければ、ブログの知識もない。~ブログで飯を食う~それは、これから紹介するiPhoneアプリ「Lisgo」でPocketに保存した記事を耳でインプットする事です。最小は35文字、最大で55文字でした。フォントサイズにも依りますが、個人的には40文字を少し超えるくらいが、一目で読みやすいかなと思っています。読みやすい文字数については、個人的な差はあると思いますので、実際に自分の目で確かめてみるのが一番良いでしょう。フォントサイズ調べた最小のフォントサイズは13pxで、最大は18pxでした。15pxか16pxのところが多かったですね。私も実際に見たら16pxくらいが読みやすいかなと思いました。最近のパソコンディスプレイは高解像度のものが増えていたり、タブレットのような画面サイズが小さなものもあったりします。下記記事も参考にして、フォントサイズは16pxくらいを目安にするのが良さそうです。調べたほとんどのサイトが「normal」でした。まれに指定しているサイトもありましたが、「normal」としておけば良いでしょう。ちなみに「normal」の指定は、以下のような意味になります。フォントの標準のスペース。指定した場合と異なる点です。調査したサイトでは、最小が500px、最大で730pxでした。大体600px台のところが多いようです。1行の字数とフォントサイズ、文字間隔を決めていくと、記事幅も決まっていくと思います。行間の間隔はどの参考資料をみても0.7行あけるくらいが良いとされています。結論から言えば、フォントサイズの70%前後(0.7文字分)の行間をとるのが適当です。文章の作り方|伝わるデザイン例えば、フォントサイズが16pxだったら、1.7倍のline-heightを設定すれば、0.7文字分の行間が設定されます。段落の間隔は1~1.5行くらいスペースをとるのが良いとされているようです。段落の間隔を設定するには、<p>タグのmargin-bottomを設定してあげるのが良さそうです。WEB幅WEB幅はブログサイト全体の幅になります。900px~1000pxの間くらいが良いようです。大きすぎても、一目に入ってくる情報は限られてしまうでしょうし、小さすぎれば、下へ下へと情報が伸びてスクロールしなければ見れなくなってしまいますね。一般的に普及しているディスプレイのサイズは1024×768です。この横幅である1024px越えてしまうと、ブラウザで横スクロールバーが表示されてしまいます。横スクロールはマウスではできないので、ユーザビリティとしてはNGです。いって1024pxギリギリにしてしまうと今度は縦スクロールバーの分で横スクロールバーが表示されてしまいます。上記のブログのように900px~1000pxの間で横幅を決めた方がよさそうです。*ちなみに、色々なWebサイトの横幅をまとめたサイトもありますので、参考にしてみてください。一応、「tarのブログるっ」の設定もお見せしますね。調査結果を元に試行錯誤して設定した内容がこちらになります。630px;WEB幅は980pxで設定しています。@tarVolcano私の家から高速を使ってもクルマで片道2時間。前日に言ってくれれば、朝起きる時間を早くしあとがき今回は読みやすい1行の字数を考えるための調査と、その記録を記事にしてみました。ブログサイトというハード的な面からブログを読みやすくするために、色々と調べてきましたが、コンテンツの質や文章力と言ったソフト的な面も考慮しなければ、読み手にとって読みやすいブログとは言えないんだろうな、とも思っています。私に足りないのは後者の方なんだろうな〜と感じていますが、こればっかりは数をこなして上達していくしかないですよね。ブログデザインもまだまだ未完成なので、今回の記事が好評ならシリーズ化しても面白いかな〜なんて考えたりしています。(いあ、人気がなくたって続編書きますけどねw)それでは、今回はこの辺で。前回、以下の記事...書き人:tar@メガネ男子の自己紹介スポンサーリンク訪問いただきありがとうございます。気に入った記事をシェアしてくださると、とても励みになります。(3)ツイートスターをつけました引用をストックしましたストック一覧を見る閉じる引用するにはまずログインしてくださいログイン閉じる引用をストックできませんでした。再度お試しください閉じる限定公開記事のため引用できません。