パソコンだと長文を読むのが辛いのは、行間が詰まりすぎているからではないか?(※アンケート結果報告追記)

Nexus 7のGooglePlayブックス

「パソコンだと長文を読むのが辛い」とか、「スマートフォンで長文を読むのは疲れる」という話をよく目にします。少し前に、ではなぜ紙の書籍は長文でも読むのが辛くないのだろう?と思い、本棚の本を何冊か手にとってみて気づいたことがあります。紙書籍はわりと行間が広いのですが、多くのウェブ記事は行間が狭いのです。

論より証拠で、比べてみて下さい。だいたい1000文字くらいの文章です。

line-height: 120% の場合

私は2011年7月15日にGoogle+を始めました。以来、1日も休まずGoogle+を使い続けています。Google+の中でも、相当なアクティブユーザーだと思います。だから、Google+はゴーストタウンといった無責任な記事を見るたびに、利用している実感とのあまりの落差に憤りを感じてきました。ちなみに私はGoogle+以外に、ブログも書いていますし、TwitterやFacebookも利用しています。いわゆるソーシャル・ネットワーキング・サービス(以下SNS)は、かなりヘビーに使っている方だと思います。ただ、mixi、Tumblr、Pinterestは、あまり使わなくなってしまいました。2ちゃんねるはごくたまーに覗く程度で、書き込みはしたことがありません。LINEは使っていません。どちらかというと新しいもの好きですが、飽きてすぐ放り出してしまうことも多いです。Google+はそんな私を虜にし続けています。洗練されたシステム、直感的で判りやすい画面構成、軽快な動作、便利な機能、そしてなにより、魅力的な人たちと出会えたこと。もちろん人間関係ですから、情報を交換したり会話を楽しむ中で、トラブルも発生します。でも今までのところ、私が見ている範囲では他のSNSで頻発しているような大きな「炎上」騒ぎは数えるほどしか起きていません。騒ぎが起きても、他のSNSに比べるとすぐ沈静化するように思います。Google+の月間アクティブユーザー数は、2012年12月時点で1億3500万人です。ちなみに、ほぼ同時期に始まったLINEは1億人を突破したばかりなので、Google+の方が利用者数は多いのです。ただ、Google+は世界的に見ればかなり上位のSNSですが、日本ではいまいち流行っていないのは確かです。ニールセンの調査によると、日本におけるGoogle+のPCユーザー(モバイルは含まれていない)は390万人程度。mixiが500万人、Twitterが1270万人、Facebookが1693万人(いずれも本稿執筆時点)ですから、まだかなり差があるというのが実情です。この本を最初に発行したのは2012年5月ですが、当時Google+でちょっとしたトラブルが起きたことがきっかけでした。とある商業媒体が、他人の限定公開投稿の画面キャプチャを無断で記事に使ってしまうという事件が起きたのです。比較的大きな「炎上」騒ぎだったように思います。

line-height: 140% の場合

私は2011年7月15日にGoogle+を始めました。以来、1日も休まずGoogle+を使い続けています。Google+の中でも、相当なアクティブユーザーだと思います。だから、Google+はゴーストタウンといった無責任な記事を見るたびに、利用している実感とのあまりの落差に憤りを感じてきました。ちなみに私はGoogle+以外に、ブログも書いていますし、TwitterやFacebookも利用しています。いわゆるソーシャル・ネットワーキング・サービス(以下SNS)は、かなりヘビーに使っている方だと思います。ただ、mixi、Tumblr、Pinterestは、あまり使わなくなってしまいました。2ちゃんねるはごくたまーに覗く程度で、書き込みはしたことがありません。LINEは使っていません。どちらかというと新しいもの好きですが、飽きてすぐ放り出してしまうことも多いです。Google+はそんな私を虜にし続けています。洗練されたシステム、直感的で判りやすい画面構成、軽快な動作、便利な機能、そしてなにより、魅力的な人たちと出会えたこと。もちろん人間関係ですから、情報を交換したり会話を楽しむ中で、トラブルも発生します。でも今までのところ、私が見ている範囲では他のSNSで頻発しているような大きな「炎上」騒ぎは数えるほどしか起きていません。騒ぎが起きても、他のSNSに比べるとすぐ沈静化するように思います。Google+の月間アクティブユーザー数は、2012年12月時点で1億3500万人です。ちなみに、ほぼ同時期に始まったLINEは1億人を突破したばかりなので、Google+の方が利用者数は多いのです。ただ、Google+は世界的に見ればかなり上位のSNSですが、日本ではいまいち流行っていないのは確かです。ニールセンの調査によると、日本におけるGoogle+のPCユーザー(モバイルは含まれていない)は390万人程度。mixiが500万人、Twitterが1270万人、Facebookが1693万人(いずれも本稿執筆時点)ですから、まだかなり差があるというのが実情です。この本を最初に発行したのは2012年5月ですが、当時Google+でちょっとしたトラブルが起きたことがきっかけでした。とある商業媒体が、他人の限定公開投稿の画面キャプチャを無断で記事に使ってしまうという事件が起きたのです。比較的大きな「炎上」騒ぎだったように思います。

line-height: 160% の場合

私は2011年7月15日にGoogle+を始めました。以来、1日も休まずGoogle+を使い続けています。Google+の中でも、相当なアクティブユーザーだと思います。だから、Google+はゴーストタウンといった無責任な記事を見るたびに、利用している実感とのあまりの落差に憤りを感じてきました。ちなみに私はGoogle+以外に、ブログも書いていますし、TwitterやFacebookも利用しています。いわゆるソーシャル・ネットワーキング・サービス(以下SNS)は、かなりヘビーに使っている方だと思います。ただ、mixi、Tumblr、Pinterestは、あまり使わなくなってしまいました。2ちゃんねるはごくたまーに覗く程度で、書き込みはしたことがありません。LINEは使っていません。どちらかというと新しいもの好きですが、飽きてすぐ放り出してしまうことも多いです。Google+はそんな私を虜にし続けています。洗練されたシステム、直感的で判りやすい画面構成、軽快な動作、便利な機能、そしてなにより、魅力的な人たちと出会えたこと。もちろん人間関係ですから、情報を交換したり会話を楽しむ中で、トラブルも発生します。でも今までのところ、私が見ている範囲では他のSNSで頻発しているような大きな「炎上」騒ぎは数えるほどしか起きていません。騒ぎが起きても、他のSNSに比べるとすぐ沈静化するように思います。Google+の月間アクティブユーザー数は、2012年12月時点で1億3500万人です。ちなみに、ほぼ同時期に始まったLINEは1億人を突破したばかりなので、Google+の方が利用者数は多いのです。ただ、Google+は世界的に見ればかなり上位のSNSですが、日本ではいまいち流行っていないのは確かです。ニールセンの調査によると、日本におけるGoogle+のPCユーザー(モバイルは含まれていない)は390万人程度。mixiが500万人、Twitterが1270万人、Facebookが1693万人(いずれも本稿執筆時点)ですから、まだかなり差があるというのが実情です。この本を最初に発行したのは2012年5月ですが、当時Google+でちょっとしたトラブルが起きたことがきっかけでした。とある商業媒体が、他人の限定公開投稿の画面キャプチャを無断で記事に使ってしまうという事件が起きたのです。比較的大きな「炎上」騒ぎだったように思います。

line-height: 180% の場合

私は2011年7月15日にGoogle+を始めました。以来、1日も休まずGoogle+を使い続けています。Google+の中でも、相当なアクティブユーザーだと思います。だから、Google+はゴーストタウンといった無責任な記事を見るたびに、利用している実感とのあまりの落差に憤りを感じてきました。ちなみに私はGoogle+以外に、ブログも書いていますし、TwitterやFacebookも利用しています。いわゆるソーシャル・ネットワーキング・サービス(以下SNS)は、かなりヘビーに使っている方だと思います。ただ、mixi、Tumblr、Pinterestは、あまり使わなくなってしまいました。2ちゃんねるはごくたまーに覗く程度で、書き込みはしたことがありません。LINEは使っていません。どちらかというと新しいもの好きですが、飽きてすぐ放り出してしまうことも多いです。Google+はそんな私を虜にし続けています。洗練されたシステム、直感的で判りやすい画面構成、軽快な動作、便利な機能、そしてなにより、魅力的な人たちと出会えたこと。もちろん人間関係ですから、情報を交換したり会話を楽しむ中で、トラブルも発生します。でも今までのところ、私が見ている範囲では他のSNSで頻発しているような大きな「炎上」騒ぎは数えるほどしか起きていません。騒ぎが起きても、他のSNSに比べるとすぐ沈静化するように思います。Google+の月間アクティブユーザー数は、2012年12月時点で1億3500万人です。ちなみに、ほぼ同時期に始まったLINEは1億人を突破したばかりなので、Google+の方が利用者数は多いのです。ただ、Google+は世界的に見ればかなり上位のSNSですが、日本ではいまいち流行っていないのは確かです。ニールセンの調査によると、日本におけるGoogle+のPCユーザー(モバイルは含まれていない)は390万人程度。mixiが500万人、Twitterが1270万人、Facebookが1693万人(いずれも本稿執筆時点)ですから、まだかなり差があるというのが実情です。この本を最初に発行したのは2012年5月ですが、当時Google+でちょっとしたトラブルが起きたことがきっかけでした。とある商業媒体が、他人の限定公開投稿の画面キャプチャを無断で記事に使ってしまうという事件が起きたのです。比較的大きな「炎上」騒ぎだったように思います。

line-height: 200% の場合

私は2011年7月15日にGoogle+を始めました。以来、1日も休まずGoogle+を使い続けています。Google+の中でも、相当なアクティブユーザーだと思います。だから、Google+はゴーストタウンといった無責任な記事を見るたびに、利用している実感とのあまりの落差に憤りを感じてきました。ちなみに私はGoogle+以外に、ブログも書いていますし、TwitterやFacebookも利用しています。いわゆるソーシャル・ネットワーキング・サービス(以下SNS)は、かなりヘビーに使っている方だと思います。ただ、mixi、Tumblr、Pinterestは、あまり使わなくなってしまいました。2ちゃんねるはごくたまーに覗く程度で、書き込みはしたことがありません。LINEは使っていません。どちらかというと新しいもの好きですが、飽きてすぐ放り出してしまうことも多いです。Google+はそんな私を虜にし続けています。洗練されたシステム、直感的で判りやすい画面構成、軽快な動作、便利な機能、そしてなにより、魅力的な人たちと出会えたこと。もちろん人間関係ですから、情報を交換したり会話を楽しむ中で、トラブルも発生します。でも今までのところ、私が見ている範囲では他のSNSで頻発しているような大きな「炎上」騒ぎは数えるほどしか起きていません。騒ぎが起きても、他のSNSに比べるとすぐ沈静化するように思います。Google+の月間アクティブユーザー数は、2012年12月時点で1億3500万人です。ちなみに、ほぼ同時期に始まったLINEは1億人を突破したばかりなので、Google+の方が利用者数は多いのです。ただ、Google+は世界的に見ればかなり上位のSNSですが、日本ではいまいち流行っていないのは確かです。ニールセンの調査によると、日本におけるGoogle+のPCユーザー(モバイルは含まれていない)は390万人程度。mixiが500万人、Twitterが1270万人、Facebookが1693万人(いずれも本稿執筆時点)ですから、まだかなり差があるというのが実情です。この本を最初に発行したのは2012年5月ですが、当時Google+でちょっとしたトラブルが起きたことがきっかけでした。とある商業媒体が、他人の限定公開投稿の画面キャプチャを無断で記事に使ってしまうという事件が起きたのです。比較的大きな「炎上」騒ぎだったように思います。


いかがでしょうか?

[アンケート集計は終了しました。ご協力ありがとうございます。]

ちなみにこのブログは line-height: 200%(モバイルは150%)に設定しています。ボクが、そのくらいが読みやすいと思うからです。

実際のところ、行間はどのくらいの広さがいいのでしょう? こちらの記事によると、一般的な文書の場合は150%~175%くらいと言われているそうです。

もちろん個人差、好みの問題というのもあるでしょうけど、一般的なウェブサイトの場合、120%~140%くらいで設定されている場合が多いような気がします。

例えば、mixi日記やアメブロなど行間設定が狭いところでは、異様に改行が多い文章が多いです。あれは、改行を多くすることで、行間が狭いのを無理やり広くして、可読性を高めているということなのだと思います。

「パソコンだと長文を読むのが辛い」とか「スマートフォンで長文を読むのは疲れる」というのは、デバイスに問題があるわけではなく、単に行間の問題なのではないか? という気がするのですが、いかがでしょう?

ちなみに、上で例示している文章はこちらの本のまえがきです。[追記:オリジナルの文にはちゃんと改行・空行があります。意味の切れ目で段落を入れるのは文章の作法として当然のことですが、この記事では行間の違いを見ていただくことが目的なので、わざと改行・空行を取り払ってあります。]

これもうきっとGoogle+ガイドブック 1.導入編 [第2版]

これもうきっとGoogle+ガイドブック 1.導入編 [第2版]

posted with amazlet at 13.05.11

見て歩く者 (2013-03-19)

売り上げランキング: 4,218

こちらは line-height: 180% に設定しています。

[追記]

OE Wakuさんから面白いシミュレーターを紹介してもらいました。

[追記]※2013年5月14日

アンケートの回答数が1000件を超えたので、ここらで集計を打ち切らせて頂きます。ご協力ありがとうございました。結果はこんな感じになりました。

アンケート結果

ボクの想像以上に、「より行間が広い」ものが好まれる結果になりました。もちろん、あくまでこの記事を読んで回答した人による結果で、ランダムサンプリングしたわけでもなんでもないので、これをそのまま一般化することはできないのですが。

ちなみに、line-heightだけではなく、1行の文字数、フォントの種類、大きさ、漢字の多さ少なさ、段落・空行、縦書き横書き、スクロールなのかページめくりなのか、などでもかなり印象は変わるでしょう。べつにこれが目新しい視点なんかじゃないのも、充分承知しています。

ぶっちゃけボク自身は、記事がレイアウトのせいで読みづらい(けど気になる)と思ったら Chlome拡張のClealyを使って自分好みのレイアウトに修正しちゃいますし、それで後でも読み返したいと思ったらそのままEvernoteにクリップしちゃいますから、多少読みづらいレイアウトだろうがあまり苦にはなりません。

しかしそれにしたって、文字が小さすぎる&行間が詰まりすぎているサイトがあまりにも多いと思うのですよ。誰もがそういう形で、自分好みに整形しなおすような労力を払うわけじゃないでしょうし。

そういう状況に、このエントリーが一石を投じられたとしたら幸いです。

タイトルとURLをコピーしました
'); /* ヘッダーの高さの変化分、paddingで調整しスクロール位置を止まらせる */ $("#header-fixed").css({ 'padding-top': `${threashold}px`, }); /* トップメニュータイプに変更する */ $("#header-container-in").removeClass('hlt-center-logo hlt-center-logo-top-menu').addClass("hlt-top-menu wrap"); $("#header-container").addClass("fixed-header"); $("#header-container").css({ 'position': 'fixed', 'top': '-100px', 'left': '0', 'width': '100%', }); const wpadminbar = document.getElementById('wpadminbar'); const headerContainerTop = wpadminbar ? wpadminbar.clientHeight : 0; $('#header-container').animate( { top: headerContainerTop, }, 500 ); } } /*固定ヘッダーの解除*/ function staticHeader() { if ($("#header-container").hasClass("fixed-header")) { /*センターロゴタイプに戻す*/ $("#header-container-in").removeClass("hlt-top-menu hlt-tm-right hlt-tm-small hlt-tm-small wrap").addClass(" hlt-top-menu wrap"); $("#header-container").removeClass("fixed-header"); $("#header-container").css({ 'position': 'static', 'top': 'auto', 'left': 'auto', 'width': 'auto', }); /* ヘッダーの高さの戻る分、padding削除しスクロール位置を止まらせる */ $("#header-fixed").css({ 'padding-top': '0', }); $("#header-fixed").remove(); } } /* 境界値をヘッダーコンテナに設定 */ var threashold = $('#header-container').height(); var prevScrollTop = -1; var $window = $(window); var mobileWidth = 1023; $window.scroll(function() { var scrollTop = $window.scrollTop(); var s1 = (prevScrollTop > threashold); var s2 = (scrollTop > threashold); var w = $window.width(); /*スクロールエリアの位置調整*/ function adjustScrollArea(selector) { if ($(selector) && $(selector).offset()) { offset = $(selector).offset().top; h = $("#header-container").height(); pt = $(selector).css('padding-top'); if (pt) { pt = pt.replace('px', ''); } else { pt = 0; } if ((scrollTop >= offset - h) && (w > mobileWidth)) { if ((pt <= 1) && $("#header-container").hasClass('fixed-header')) { $(selector).css({ 'padding-top': h + 'px', }); } } else { if (pt > 0) { $(selector).css({ 'padding-top': 0, }); } } } } /*スクロール追従エリアの調整*/ function adjustScrollAreas() { adjustScrollArea('#sidebar-scroll'); adjustScrollArea('#main-scroll'); } /*固定ヘッダーのスタイル決め*/ function adjustFixedHeaderStyle(s1, s2, w, scrollTop, mobileWidth) { if (s1 ^ s2) { if (s2 && (w > mobileWidth)) { stickyHeader(); } } /* 境界値に達したら固定化 */ if (scrollTop <= threashold || w <= mobileWidth) { staticHeader(); } } adjustFixedHeaderStyle(s1, s2, w, scrollTop, mobileWidth); adjustScrollAreas(); prevScrollTop = scrollTop; }); /*ウインドウがリサイズされたら発動*/ $window.resize(function () { /*ウインドウの幅を変数に格納*/ var w = $window.width(); if (w <= mobileWidth) { /*モバイル端末の場合*/ staticHeader(); } else { /*パソコン端末の場合*/ var scrollTop = $window.scrollTop(); if (scrollTop >= 50) { stickyHeader(); } } }); })(jQuery);