今はネットはスマホで見る時代なんて言われています。
コンテンツの幅とか、フォントサイズとか細かいことをいちいち深く考えても仕方がないような気がしますが、私は普段パソコンで見ているので気になるもんは気になります。
自分が読みやすいと勝手に思い込んでいても、世間の人が読みづらいと言い出したらそれは問題です。あまりにも感覚がズレてきたら修正しないといけません。
だから、それなりに気を配っていたいなと思ってるんです。
これが読みやすいブログデザイン！有名サイトの記事幅と余白設定を大公開
読みやすいデザインの基本はElloraさんのnaifixに詳しく書いてあります。人気ブログの記事スペースの幅平均値は６１６px、余白平均値は３５pxだそうです。
人気ブログとか、Yahoo!の記事を参考にすれば、大多数の人が読み易いと感じるデザインに近づけるはずですが、どうも私が普段目にするブログやサイトって平均からズレている気がします。一体何が原因なのか考えてみました。
目次をタップすると見出しに飛びます
コンテンツ幅
今は広めで、ドカーンとしたブログが多いですよね。１カラムも流行っています。
３３６pxの広告をサイドバーに貼って、更に記事の中でも横並びにしようとすると自然と全体で１０００px以上必要になるので、その影響でしょうか。大は小を兼ねますし、スペースに余裕があれば色々出来ますからね。
左端はやり過ぎだと思う
パソコンを見る時って、正面から左寄りに目線が行きますけど、だからって１文字目が左端ギリギリだと腹立ちません？バランスボールに座っている私は重心が左に寄ってバランスを崩してしまいます。
スマホに慣れている人が多いなら、基本は少し狭くしてあげたほうが違和感ないのかな、と思います。
余白
これはテーマの設定をいじっている人があまりいないせいか、あまり気になることはありません。左端問題が深刻なページはこの余白が極端に少ないパターンです。
ただ意外と気になるのが、スマホで見た時。パソコンの設定をそのまま引き継いでいるのか、余白がでか過ぎて文章が中央に寄っている前田敦子状態のブログ。これは困りますね。
フォントサイズ
今は１５～１６pxが多いですね。
無料ブログだと平気で１２pxがまかり通っている印象。小さいですよねさすがに。私は１４pxでもちょっと我慢できません。１４px以下なのに、字が薄いともう一瞬でページを閉じます。３カラムで１２pxとか言語道断ですね。
段落
コンテンツ幅、余白、フォントサイズに関しては、テーマを提供しくださる方々の試行錯誤や、世の中の平均というものがあるので、ある程度受け入れる姿勢が大切だと思いますが、この段落だけは非常に気になります。
「。」ごとに改行
これは意外と辛いですね。勘弁です。全然頭に入ってこなくなります。
お前は詩人か！
適度に改行しないと読みづらいのは確かですが、段落はあくまでも意味の区切りです。
「。改行の術」を使う人に限って、一文ごとに意味が分かれてなかったりします。だから読みづらいのです。
意図してやっているのならば全然問題ないと思いますが、謎なのは多いですよね。意外と。
「、」「。」ごとに改行
これはもう、詩を超えてます。
韻を踏もうとしてる？と思いきや、そんなことはありません。謎です。
「、」や「。」って、始めは「相手が読みづらいかも知れないから優しさで入れてあげる」程度のものだったらしいですよ。だから本来いらないっちゃいらないのです。少なくとも必要以上に入れるものではありません。
「句読点や改行を入れないと読みづらい」という解説は多いですけど、「改行しまくりは最悪だ」という意見は少ない。摩訶不思議ですよ。
糸井重里スタイルの影響なのでしょうか。
でも、あれはほぼ日の今日のダーリンの記事幅があの書き方に合っているからまかり通るのであって、なんでもかんでも真似して改行すりゃあいいってもんでもないと思います。
一行ごとの間隔と、段落の間隔があまり変わらない
これはちょっと細かい話かもしれませんが、一行ごとの間隔が段落同士の間隔とあまり変わらないと、すげー読みづらいです。段落を分けた意味がなくなると言っても過言ではありません。
line-heightと、pのmargin-top、margin-bottomを調節しましょう。して下さい。お願いです。
ブログの行間とフォントサイズをCSSで調整して読みやすいデザインにしよう
行間は1.7くらい、段落間は２文字分ぐらいが標準。px指定よりも数字だけの方が使い勝手が良い理由とか、色々詳しく書かれています。
極めつけは多段改行、セールスレター風
ここまでくると、個人差とか味の域を超えてます。
今までのが可愛く見える。というか、本当にやばいのはこれだけだと思います。
改行したら、もう1回、いや2回やらないと気が済まないらしい。痙攣？連射？マシンガン？高橋名人もびっくりです。
セールスレターの如く無駄にスクロールさせて、読者の心理を掴む？誘導？なんのつもりなんでしょうか。
てか、まあ、な訳で、ぶっちゃけ、(笑)、ｗ などをふんだんに取り入れてくるパターンが多いです。
お前はどうなんだ
記事幅は６９４660pxで、余白は40px、フォントサイズは17pxです。
私はブログ始めたての時にENJILOGを読み過ぎて慣れてしまったので、幅はやや狭い方が好きです。横に長いと疲れるんですよね。Simplicityは横幅がちょっとでかいので縮めてます。
なによりも、１行は３６～８文字までが読みやすいというのをどっかで読んで、すごく納得したのでそれを信じてここまでやってきてます。
そういえば、記事の枠がないスタイルが最近は流行っているのでしょうか。
私はあった方が嬉しい派です。
まとめ
色々調べてわかったのは、理想は１行３８文字程度。ここに収まっていれば、みんながなんとなく読みやすいと感じるようです。
拘り始めるとキリがないように思えますが、ある程度着地点は見えていることです。
結局、最後は自分が読み易い設定にするのが精神衛生上も良いのでしょうが、それなりに世間の動向を伺う姿勢も必要だと思います。
こういうのは時代と共に変化するし、相手の立場になって考えるのはとても勉強になります。
でも、「、の改行」だけは許せん。多段改行はもっと許せん。
最終的に、上手い人はどうやって書いたって読ませますよね。
日々、研究です。
エンジニアのためのQ&Aサイト【teratail】
メールアドレスのみで無料登録可能。
teratailではPHP、Ruby、Java、Androidなどのウェブやネイティブアプリに関する質問やSwiftやLaravelといった最新技術に関する質問が投稿されてます。1日に30個程度の質問が投稿されその9割程度に回答がつきます。
独学でプログラミングを勉強したい人におすすめのサービスです。
