最近今までより長い記事を書くことが増えました。
どうせなら最後まで読んでもらいたい、どうやったら最後まで読んでもらえるのだろうかという点をユーザビリティ、アクセシビリティを踏まえてWeb文章の書き方としてまとめてみました。

伝えたい内容があまりにも多すぎて長文になっています。
※CSSだったりテクニック的な内容は出てきません。また別記事で。

リンク先は同一ウィンドウで開きます。shift+クリックで別窓で開けます。

Webページを閲覧する時の目の動きは『F』の字

Webページを閲覧する時の目の動きを追うとちょうど『F』の字のようになるそうです。
『F』の字を描きながらページ全体を見ている訳ですね。

第1段階：
訪問者は最初にページの一番上のコンテンツエリアを水平に視線移動させる。これが「F」の一番上の水平ラインになる。

第2段階：
次に訪問者はページを少し下に向かって視線移動させてから、再び第2の水平移動をする。この第2の水平運動は最初の水平運動よりも短い。これが「F」の字の上から2番目の短い水平ラインになる。

第3段階：
最終的にユーザーは左サイドから垂直下方向に向かってページをスキャンするようにして視線移動させる。時折ゆっくりとした速度で、そして機械的に見ていくとのこと。中にはまだら状に視線移動させる人もいるとのこと。いずれにしろ下方向に移動するので、これが「F」の最後の要素になります。

ウェブページを見る目の動きは「F」パターン - GIGAZINE

要はあまり読んでいないということ。ページの文章を端から端まできっちり読む人は極めて希ということのようです。

では、どうすれば読んでもらえるのか。

改行と見出しの重要性

見やすい文章の作り方とは

• 文章がみにくい理由は改行が足りないから
• 構成が長くなってしまったら、見出しを入れる

Webの文章とは不思議なもので、縦に長い文には全くといっていいほど苦痛を感じません。
ですから、しつこいといわれるくらい改行を入れたり、3～6行の文が出来上がったら、そこで１行改行を入れておくだけで驚くほど見やすくなるのです。

よほどその記事に興味のあることが書いているなら別ですが、ちょっとした良い文章も、途中で読まれなくなってしまっては勿体ないです。

そこで、自分の書きたい事を何点かに分けてみましょう。

WEB文章を最後まで読んでもらえない理由は、改行と見出しが足りないから

これには私も全く賛同します。改行（空行）がない文章はどうも気が滅入ってしまいます。
興味のある内容ですら危ういです。

見出しの間隔についても分かりやすくまとまっていました。
その記事の見出しだけ取り出してみます。

見出し部分

• 人は先が見えない文章ほど見たくない
• 目次のように目立つ見出しがあるだけで、まず一気読みされる
• あなたが一番訴えたい事が、一番上にあるとはかぎらない
• 見出しが見えなくなる前に、次の見出しが出るのが最適

WEB文章を最後まで見てもらう見出しの間隔は、どれくらいが最適なのか

ちょっと書いてて驚きました。
見出しを取り出して見ただけでも何を伝えたいのかが良く分かります。

こんな見出しなら流し読みをしたあとにしっかり読み直そうという気になりますね。

大手ニュースサイトのGIGAZINEさんや[N]ネタフルさんはさすがに考えられていますね。

その[N]ネタフルさんの記事にもブログの読みやすさについて言及しているものがありました。

面白いことに、「読みづらさ」は、自分で書いている時には勢いづいていて気づきません。
しかし、他の人が書いたブログをパッと見て評価する時に、誰もが一番最初に気づいたのが「読みやすい空間＝間合い」だったのです。

[N] ブログを読みやすくするテクニックとは？

やはり句読点や改行を意識して記事を書いています。
横幅がコンパクトにまとまっているのもしっかり考えられているのだろうと思います。

では、一行あたりの文字数はどの程度がベスト（とされているのか）考えていこうと思います。

1行あたりの文字数について

横書きの日本語文章を読む場合、目で内容を追いやすい文字数は１行あたり２０～３５文字の間です。これ以上だと、ちょっと読む気が失せてしまいます。逆に少なすぎても、上下への視線移動が増えすぎてしんどいです。
１行あたりの文字数を減らすためにはどうすればよいでしょうか？ １つは、文字サイズを大きくするという手が考えられます。
もう１つは、余白を取って、文章の横幅を減らすことです。

文章の読みやすさを追求する

ここら辺りはブロガーとして常に意識していこうと思います。
確かに縦に長くてもなんの違和感も無く読めます。

この記事も既にだいぶ縦長になっている事だと思いますが、気にしません。すいません。

逆に行間がつまっていたり、横につらつらかかれているのは非常に辛いです。

これについては、あの有名なGIGAZINE様でも否定されている記事がありました。

ウェブデザインコンプレックスは克服できるか - GIGAZINE

この記事ですが、コメント欄を見ていただければ分かる通り非常に読みにくいです。

私はデザインの話は好きなので読めますが、GIGAZINE様クラスのサイトの読者となると一般の（Webに関係していない）方も多いはず。
それならばこの記事はおそらく読まれないですね。（しっかり補足されていますが、さすが）

ユーザーの立場にたって見る

上で書いた話もそうですが、結局はユーザーの立場に立ってどれだけ親切な設計（デザイン）ができるかです。
フォントサイズは可変可能にするとか、ブラウザ毎にきちんと表示を確認するだとか色々。

ユーザビリティというのは本当に難しいです。
こんな記事があります。

まず最初に結論を書いてしまいます。それは読みやすさは個人差が激しいという事です。

大体の目安はあれど、結局は人それぞれなんですよね。

読みやすいBlogを作る為に意識しておきたい事

読みやすさは個人差が激しいというのはその通りだと思います。もちろん最低限の目安だったりを知った上での話です。

では、そんな中でどうしていけばよいのか。

オリジナリティーを追求しないと先はないよ

画像を使って見た目にメリハリをつけたり、結論を冒頭で簡単に書くことで要旨を伝えたりいろいろなテクニックがあります。ブログのデザインとか文章の長さなどに合わせていろいろな工夫が出来るし、オリジナリティーを出しながら読みやすい、伝わりやすい書き方が出来ると思います。

読みやすいブログの文章の書き方

最後はやはりオリジナリティーがものをいうのでしょう。

こればっかりは日々精進していくしかないと思います。

簡単な道は無いと思うしそんなん面白くありません。

暗中模索で行きましょう。

Web文章を読みやすくするために心掛けなければいけないあれこれ

2007年9月13日