1カラムのブログで1番読みやすいと感じる横幅は何pxか検証してみた

Man and weman

ブログやメディアのデザインで、1カラムレイアウトを採用しているデザインを最近良く見かけるようになりました。

かくいう僕も順当にこの流れを汲んで、本ブログを1カラムレイアウトで運用しています。

なお、本ブログはBloggerで運用しており、テーマにはVaster2を採用しています。元々は普通の2カラムレイアウトのテーマなんですが、1カラムレイアウトにカスタマイズしました。

関連記事:Bloggerでブログ運用を始めて2ヶ月弱の僕が、Vaster2を導入したたったひとつの理由|BEBEBE

1カラム、2カラム、それぞれメリット・デメリットがありますが、本エントリの話題はそこではないので、この話はまた別の機会にしようと思います。

本エントリでは、1カラムレイアウトで1番読みやすい横幅は何pxなのか?という部分に焦点をあてています。検証しようと思ったキッカケはもちろん自分のブログデザインをより読みやすく、ユーザーフレンドリーにするためです。

1カラムデザインの横幅の最適解

以下で検証していますが、最初にズバリ言います。

横幅は640pxが読みやすいです。フォントサイズは18pxがオススメ。そしてこれはそのものズバリ「まだ仮想通貨持ってないの?」のデザインです。

まだ仮想通貨持ってないの?」は普段からよく読んでいるんですが、実はいつもはなんだかちょっと間延びした、スカスカしたデザインだなと思っていました。

ただ、他のサイトと横一列でみてしまうと、「読ませる」という最重要課題に対しては、とても良く考え抜かれたデザインだという結論に至りました。この辺はさすがアルファブロガーといったところでしょうか。

それでは、以下に検証した内容を記載していきます。もう答えは出ちゃってますが、興味のある方はどうぞ。

検証した対象

1番ユーザー数が多いであろう以下の5つのプラットフォームのデザインを対象に調べました。

  • はてなブログ
  • WordPress
  • ライブドアブログ
  • Medium
  • note

はてなブログ、WordPress、ライブドアブログに関してはユーザーが自由にカスタマイズできてしまうので、個人的に気に入っているサイトを対象にしています。それぞれデファクトな1カラムレイアウトがあればよかったんですが、なさそうだったので、完全に独断と偏見です。

他にも1カラムレイアウトを採用しているサイトがあればTwitter等で教えていただけると幸いです。

はてなブログ

ぐるりみち。

ちょうど最近1カラムレイアウトにされたということで、選びました。

横幅は約900pxですね。マージンもあるので、実際のコンテンツ部分は850pxほどです。読みやすいかどうかでいうと、どちらかと言えば読みづらいと感じました(ごめんなさい)。

横幅850pxだと若干間延びして見えることに加えて、フォントも小さめ(16px)なので、横長に見えてしまうんでしょうね。

Gururimichi hatena

ファーストビューにギュッと縮こまった文字がガツンと入り込んでくるので、活字を読み慣れていない人だと若干つらいかも、という印象です。

WordPress

iPhone・Mac・ガジェットブログ “monograph(モノグラフ)”

もともとオシャレなサイトだったんですが、しばらく見ないうちによりオシャレ度に磨きがかかってますね。カスタマイズ力がものすごいです。

横幅は約700px。パッと見た感じだと、非常にバランスの取れたサイズ感です。フォントサイズが先ほどと比べて小さめ(15px)ですが、サイト全体のデザインとあいまって、これくらいのサイズ感が逆に気持ちよく感じます。

これはもはや個人のブログデザインの域を遥かに超えてきてますね。

Monograph wordpress

で、肝心の読みやすさはどうかというと、ちょっと表現が難しいですが、「読みたい!」とは思うけど、「読もう!」とは思えないといった感じでしょうか。

感覚的には雑誌を読む時のそれに近いです。読むのは気持ちいいけど、実は活字を全部読んでるわけではなく写真を含めて雰囲気全体を楽しんでるような、そんな感覚です。

ライブドアブログ

まだ仮想通貨持ってないの?

みんなが大好きイケハヤ氏のブログですね。もはや説明は不要でしょう。僕も毎日読んでいます。

横幅は640px。ちょっと今までと比べると狭めですが、フォントサイズが少し大きい(18px)こともあって、非常にテンポよく読み進めることができます。

先ほどの「monograph」と比べてしまうとめちゃくちゃ簡素に見えてしまいますが、「コンテンツを届ける」ことに限りなく特化してると言えるでしょう。

Ikedahayato livedoor

さすがアルファブロガー、しっかりと読者目線で、「読ませる」デザインになっていますね。これまでの中ではダントツで読みやすいです。

Medium

週休7日で働きたい

Mediumは最近、IT系のスタートアップ界隈でよく使われているプラットフォームです。日本ではまだそこまで利用は進んでいませんが、海外だと結構使われていますね。

横幅は740px。マージンなしだと約700pxくらいです。横幅は「monograph」とだいたい同じくらいですね。ただこちらはフォントサイズが21pxと結構大きめです。

横幅は同じでも、見え方はやはり全然違って、こちらは「読ませる」ことにフォーカスしたデザインになっています。フォントサイズって結構印象を左右するもんですね。

Craftz medium

さすが洗練されたサービスだけあって、非常に読みやすいデザインではあります。ただ唯一難点がありまして、これはもう個人の好みによるかもしれませんが、フォントがあまり好きではありません。

medium-content-serif-fontというオリジナルのフォントが使われているみたいです。海外サービスなので、日本語とかはそこまで力を入れてないのかもしれませんね。

note

クロネコ屋の検索上位を狙うライティング講座|クロネコ屋@アフィリエイター|note

最後は、noteです。有料noteでのマネタイズがブームになっていることもあり、比較的ユーザーが増えてきている印象です。

横幅は620px。今までで1番狭い横幅です。フォントサイズは18pxで、「まだ仮想通貨持ってないの?」と同じですね。横幅、フォントサイズともに似通っている分、読みやすさも大体同じくらいの印象です。

Kuronekoyagogo note

ただpタグのmarginが36pxとってあって、個人的にはちょっと行間が広すぎるかも?という感じを受けました。あんまり詰まりすぎてるのはそれはそれで読みにくいですが、広すぎると逆にスカスカだなという印象を与えてしまいます。

まだ仮想通貨持ってないの?」は半分の18pxなので、これくらいがちょうどいいのかもしれませんね。

デザインによって離脱率も変わる

さて、一口に1カラムレイアウトと言っても、その横幅、フォントサイズだけでかなり見え方が変わってくることがわかりました。

monograph」のようにオシャレに仕上げるもよし、「まだ仮想通貨持ってないの?」のようにコンテンツに重点を置いたデザインにするもよし。

それぞれ一長一短あるので一概にどれがいいってわけではありませんが、個人的には後者のコンテンツに重点を置いたデザインにすることをオススメしますね。

だって、僕たちが届けたいのは、コンテンツ(文章)そのものですから。

そして、たかがデザイン、されどデザインです。

僕もよくネットサーフィンするのでわかりますが、デザイン1つであっという間にユーザーが離れることもあり得ます。読みづらいサイトは読みたくないですからね。

奇抜なデザインじゃなくていいんです。シンプルで、飽きがこないくらいのものがやっぱりちょうどいいですよ。

デザインって何?を学ぶには

僕もそうですが、そもそも一般の方は普段デザインなんて基本やりませんよね。つまり、「デザインって何?」状態だと思うんです。

そんな人には、「なるほどデザイン〈目で見て楽しむ新しいデザインの本。〉」をオススメします。個人で買ったものではなく会社にあるので読んでみたんですが、「あ、デザインってこういうことなのか」という気づきがものすごく多い本です。

今回取り上げたWEBのデザイン専門ってわけではないですが、「デザインとは」という大きな命題の理解に繋がる本ですので、ぜひどうぞ。