Webサイトの文章を読みやすくする方法を考える

azu @azu_re

web上での読みやすい文章表示について考えてる。途中で読むのをやめてしまう文章はやっぱり長文になのかな。 長い文章を短く切り出して、表示して行くとかは飽きをごまかせるのかな。 brazilさんが書いてたぐりもん(非公開になったので使った事無いけど)とか。

azu @azu_re

短い単位で表示して行く時に次の文章の表示というのが難しい問題。スライドだと枚数だけど、飽きないようにするためにはもっと曖昧な表示がいい。 スライド形式だと次へ感じが大事になる。しかしボタンを押す回数が多くなると文章を読む事より、ボタンを押す事に意識を持っていかれる。

azu @azu_re

多分ボタンを押す事に面白さを持つ人はいると思う。キーボードだけで次々とreblogしていったり、LDRでJGスペースJJJAJSみたいな感じで読み飛ばすのも自己満足感を満たせる。ただこれは特定のサイト上の話だと思う。

azu @azu_re

LDRizeだといろんなサイトで行えるが、自分の場合は結局マウスを使ってしまう。その中でスペーススクロールだけは使っていた。LDRizeのJKはサイトによって動作が異なるので、このボタンを押せばどう動くかが予測できない。この予測できるかが使うかどうかに与える影響は大きい。

azu @azu_re

逆にスペーススクロールはどこでも同じ動作なので、使うのに安心感がある。専用UIに専用のスクロールなどの移動手段があると使って楽しい。 これを汎用webサイトに適応すると違和感が生じるので、汎用を専用に持って来れればいいが、その切り替えのギャップをいかに小さくするかが使い易さ。

azu @azu_re

読んでる部分をドラッグで反転させる の理由を考える。背景が悪い、文字色が普通じゃ無い、どこ読んでるかマーク、その部分に集中したい、その部分をコピーとか。前半の行為は"いつもと同じ形"を求めて気がする。長文というか見なれない文を読む時にどこを読んでるのかを見失う事がある。

くらげ @Qurage

@azu_re どこを読んでるのか見失うサイトは、line-heightの行間指定値と文字サイズ･1行あたりの文字数のバランスが悪かったり、サイトのレイアウトがごちゃごちゃしてるとかのケースが多い気がします。

azu @azu_re

文章を読む時に気になる部分をドラッグで反転させた事ある人ってどれくらいいるんだろ。

松本暁義 @amatsumoto

うちのインド人エンジニアが日常的にやっている気がします。 RT @azu_re: 文章を読む時に気になる部分をドラッグで反転させた事ある人ってどれくらいいるんだろ。

Keits @keits

文章反転は、自分の場合はサイト上の原因か、自分のおかれている環境によって気が散ることが多い時に、簡易しおりとして使ってるかなー。視線が引っかかるので楽になる。

azu @azu_re

そのどこを読んでるをマークするためにキャレットブラウズモードでカーソルを置く人もいそう。でもこの選択範囲を作るとかカーソルを移動させるのは大変。ここに専用UIを持ってきて、文節とか短いレベルでJKスクロールとか出来たら楽しいかもしれない。小さい範囲ならスクロール先が予測できる。

azu @azu_re

元サイトの構成はできだけ維持して、line-heightとか基準の文字サイズ(途中で色変えたり、文字サイズを変える人まあそういう人なんでしょ)を正規化する程度に留めて、文中の視覚移動を補助できればある程度読みやすくなるはず。ただ視覚が認識する範囲に個人差が大きいかな。

mooz @stillpedant

横幅が広すぎるサイトはダメだね. あれは. 画面一杯に文章が広がってしまって. "Togetter - まとめ「Webサイトの文章を読みやすくする方法を考える」" - http://j.mp/dqY0zl

mooz @stillpedant

視線移動の大きさと文章の (表面的な) 読みやすさは逆相関.

mooz @stillpedant

とりあえず自分の場合は max-width : 80%; とかやってる.

mooz @stillpedant

横幅をピクセル固定するのが忌み嫌われた時代があった. 僕はその時代の人間なので, 未だに css で width : 700px; とかやるのがためらわれるのだけれど, 最近はどこも固定でやってる印象.

mooz @stillpedant

と, まあページ幅に関するコトをぐだぐだ言ったのにはわけがある. 昨日こんなページを見つけて, 内容は素晴らしいのに読みにくいなあと感じたのが原因. "佐藤一郎: Web日記 (2010年)" - http://j.mp/briG31