ebay輸出のことや、Amazonプライムビデオのおすすめ作品などをヨッタさんへ教えるブログ

前略、ヨッタさんへ

【ベストよこ幅】ブログの記事エリア幅は550pxがおすすめ!答えは人間の目線にあったよ

このページは に更新されました。

bestwidth

記事のヨコ幅って意識されていますか?

個人的には

読みやすさ = 記事の幅

ってなぐらいで重要視してるのがブログの文章幅です。

なんというか横に長い文章はそれだけで読むのがしんどくって、途中から斜め読みになったり、そっと×押しちゃったり・・・。読み切れない事ってないですか?

haba-lineこの記事の幅

横に長い1カラムサイトが流行るぐらいなので僕のようなタイプは稀なのかもしれません。

しかしながら、理想的な記事幅を調査した結果「550px」という答えが出たので内容をご紹介します。

当サイトの記事幅は現在580pxです。

2018年主流サイズの1920x1080の画面解像度で、いちいちサイズ可変させたりせず、フルサイズで多数タブ開いてブラウジングする際を想定しています。

文章を読むときのストレス

よく人が目線を動かすのはZを描きながらって言うじゃないですか。※Zの法則

z-mesen

そのZを描く時に、顔の幅(目の位置)より広い文章だと「目線を正面より外側に動かさなければ読めない」というプラスの労力が必要です。

視野で画面を見ますが、文章を読むのは視点です。点を追いかけるので、外側に行けば行くほどストレスになります。

例えば分かりやすい所で

index-fingerご自身の人差し指をちょっと見てもらえませんか?

目線をそのまま指に置いた状態で指を左右に動かして目で追ってみてください。

fingars

目線が外側に一定の距離を離れるとストレスを感じますよね。

それです!

目線は筋肉で動かしているので人によってストレスポイントが異なるとは思いますし、そもそも顔と画面との距離でも変わってきます。

しかしながら、この小さなストレスをなるべく除外したいな~が今回目指す最高の記事幅について

最高の記事幅は?

外側に向かう文章は小さなストレスが発生します。最初は小さなストレスも、文章が増える事で大きなストレスとなってやがて途中離脱となる可能性に繋がります。

視線を動かす範囲は狭ければ狭いほど良いって考え。

つまり

人の顔幅 = 記事の幅

これが理想なんです!
もっと具体的に言いますと

  1. 30~50歳ぐらいまでの男性を対象に14.8cm
  2. 30~50歳ぐらいまでの女性を対象に13.8cm

という結論です

あとは具体的な数値に置き換えてみましょう!

日本人の平均的顔幅から、サイズを求める

japanese-jijukanhaba-s

日本人の平均顔幅は次の通り

  • 女性が 13.8cm
  • 男性が 14.8cm

耳珠間幅(じじゅかんはば):左右の耳珠点間の直線距離
参考サイト日本人頭部寸法データベース2001

しかしデータが2001年の内容です。

年齢層は当時の18~34歳を対象とした数値になるので、ざっくり17年の歳月を追加して35~50歳が見るサイトに特化した数値としました(今は小顔化してるかも!?な念のため)

参考:だいたい5~6インチのスマホを横向きにしたサイズ感です

sumaho-yoko

これより横広い記事だと、少なくとも僕は読まないか、斜め読みしかしてないですね。わざわざブラウザ小さくもしないです

サイズをpxに変換するには?

cmtopx

日本人の平均的な顔幅が分かりましたが単位が「cm」

多くのウェブサイトは記事の幅を「px」指定されています。

よって数値変換したいと思います( cm ⇒ px ) が、これ難しいです!

「px辺りの大きさが見る人によって異なる」が理由なんですが、こんなところで終われない!

参照ピクセル (Reference pixel)で求める

どうにか「基準値」出したいなーと思って色々調べてたらありました。

参照ピクセル(Reference pixel)ってW3Cの草案から

The reference pixel is the visual angle of one pixel on a device with a pixel density of 96dpi and a distance from the reader of an arm’s length. For a nominal arm’s length of 28 inches, the visual angle is therefore about 0.0213 degrees. For reading at arm’s length, 1px thus corresponds to about 0.26 mm (1/96 inch).

reference-pixel

細かい説明は本筋と異なるので端折りますが、1pxを0.26mmで計算するという話です(96dpiで腕の長さ28inchの距離で見た場合)

よって日本人ユーザーの平均的な顔幅に当てはめると次のようになります。

  • 男性向け(14.8cm):569px
  • 女性向け(13.8cm):531px

よーし出ました!

コレがベスト記事幅ってところでいかがでしょうか

間をとって550pxが答えです (569+531)/2

ちなみに、Windows標準96dpiだけで考えて数値を求めると次のようになる

  • 男性向け(14.8cm):560px
  • 女性向け(13.8cm):522px

これに「距離」の考えを足したのが上の参照ピクセル

RetinaとかHiDPIって話は、理解が及ばず考えてないですがこれでよくないですか!?

inchかcmで直接指定するのは、あまりにもユーザー無視で意味がなくなるため考えていません。

yotta
「目線を動かない幅」を平均化する良い考え方があればぜひ教えてください@yotta

いろいろなサイトの文章幅

haba-lineこの記事の幅 580px(PC閲覧時)

僕の考えは上記した通りですが、あとは現在のウェブ市場も確認します。

そこでワードプレスのテーマ別で文章幅が何px指定されているかを調べました。当然意味があって指定されていると考えたからです。

ワードプレステーマで記事エリアの幅を比較

websites-themes

普段こういう界隈のクラスタにいませんので忖度なしで適当チョイスですが、海外テーマはフォントサイズの面で参考にならないため国産で絞っています。

ディスプレイは1920x1080にてフルサイズで表示して確認しました。

テーマ名記事エリアサイズ製作者サイトのサイズ
STORK728pxbridge (728px)
Xeory Base740pxバズ部 (688px)
Luxeritas 710pxThought is free (725px)
SANGO699pxサルワカ (692px)
Simplicity680px寝ログ(680px)
STINGER640pxENJILOG (548px)
平均699px677px

平均って参考になるか分かりませんが一応出してみました。

製作者ですら公開テーマと自サイトのサイズが異なる事があるわけですから、サイトに沿ったサイズって目指すべきだと思いませんか?

関連する記事

別件調べてたら、もっと詳しく調査されているサイトが色々ありました。

これが読みやすいブログデザイン!有名サイトの記事幅と余白設定を大公開

有名サイトを調査!文章が読みやすいブログデザインを検証

それぞれの記事で平均サイズもまとめられていて「616px」・「648px」となるそうです。この記事で求めた「550px」は一般的には狭すぎるのかもしれません(というか狭いです)

まとめと補足

  • 男性向けサイト:569px
  • 女性向けサイト:531px
  • 間とって:550px

ストレスない記事エリア幅は顔の幅であり、日本人の平均顔幅からpxへの数値に落とし込むと、550pxが日本人に合ったサイズとなる!

yotta
あくまで「(僕が考えた最強の)ベスト記事幅は~」です。

例えば「ベストな文字サイズはこれだ!」という結論を出したとして、それが今回の記事幅だと逆にギュウギュウ詰めになって見えて、離脱率が上がるようなことも考えられます。

幅を狭めると情報量も限られますから、腕の見せ所ですね!

  • 何を書いて、何を書かないか
  • 改行をどこに入れるか

記事幅に拘らずとも読みやすい記事がたくさんあるように、ベストとは言いつつも「あなたのサイトに合った方法が本当のベストなんやで」と保険かけて終わります。

AFFINGERやSTINGER使ってる方で、記事幅を狭くする場合こちらもどうぞ

AFFINGERの記事幅を変更する色々なパターンをまとめました

-WordPress

Copyright© 前略、ヨッタさんへ , 2018 All Rights Reserved.