Topユーザビリティ > ブログを読みやすくするコツ
2007年2月15日

ブログを読みやすくするコツ

Posted at February 15,2007 1:10 AM
Category:[ユーザビリティ]
Tag:[]

1.ユーザはウェブを読んでいない?

ヤコブ・ニールセンのAlertbox -そのデザイン、間違ってます-」によると、「ユーザはウェブを読んでいない」ようです。言い換えると、「ユーザはウェブを流し読みする傾向がある」とのこと。

個人差はあると思いますが、私自身の場合、たしかに記事を最初から最後までしっかり読むという機会があまり多くないかもしれません。

そういえば、当サイトのカスタマイズの質問で、

「同じ記事の×項に書いておりますので、そちらを参照ください」

という回答をする場合がまれにあります。こういった例も原因の一端でしょうか。

2.ユーザが読みやすくするためには

結論から申し上げると、書籍の元記事である「Jakob Nielsen博士のAlertboxユーザはウェブをどう読んでいるか」では、流し読みしやすいテキストとして、次のような手法を推奨しています。

Jakob Nielsen博士のAlertboxユーザはウェブをどう読んでいるか

  • キーワードの強調
  • 意味のある小見出し
  • 箇条書きのリスト
  • 1段落1アイデア
  • 逆ピラミッド型の文体(結論を先に)
  • 通常の文章に比べ、語数を半分あるいはそれ以下

この事実を知ってから、手法のひとつである「箇条書きのリスト形式」をエントリーに用いるようにしています。
またカスタマイズ記事の場合、

  • 完成イメージの掲載
  • 見出しによる作業の細分化
  • 簡潔な文章

にこころがけ、ミスが起こらない内容にできればと思いつつ、書いてます。

3.変更例

下記は、流し読みしにくいテキストから流し読みしやすいテキストへの変更例です(「Column Resizer」の説明をサンプルとして用いています)。
もっと詳細で適切な例は「ユーザはウェブをどう読んでいるか」に掲載されてますので、そちらをご覧ください。

流し読みしにくい例

まず最初にカラムレイアウトを選択します。左上のラジオボタンでカラムレイアウトを選択してください。サポートしているカラムレイアウトは、3カラム固定レイアウト・2カラム(左サイドバー)固定レイアウト・2カラム(右サイドバー)固定レイアウトの3種類です。

(多分)流し読みしやすい例

1.カラムレイアウト選択

左上のラジオボタンでカラムレイアウトを選択します。
サポートしているカラムレイアウトは、

  • 3カラム固定レイアウト
  • 2カラム(左サイドバー)固定レイアウト
  • 2カラム(右サイドバー)固定レイアウト

の3種類です。

あと個人的には、パラグラフ(p)を多くても5行程度に収め、パラグラフ内も必要に応じて改行を挿入しています。

4.その他

この手法はブログのスタイルや記事内容にもよると思いますので、一意に推奨している訳ではありません。

また、このエントリー自体が「流し読みしにくい」とツッこまれるのも本意ではありませんので、Alertbox の手法を取り入れてみました(読みにくかったらすいません)が、こうやって改めて書いてみると普段はあまり実践できていないようです。


ヤコブ・ニールセンのAlertbox -そのデザイン、間違ってます-ヤコブ・ニールセンのAlertbox -そのデザイン、間違ってます-
Jakob Nielsen 舩井 淳 奥泉 直子

RBB PRESS 2006-07-12
売り上げランキング : 20683

Amazonで詳しく見る
by G-Tools
Posted by yujiro   このページの先頭に戻る
関連記事
    この記事を読んだ人はこんな記事も読んでいます
    人気エントリー
    Hatena Hot Entries
    Hatena Entries
    トラックバックURL


    トラックバック

    Webでの文章の書き方 from hakuro.info blog
    web上で文章を書くときの諸注意や、書き方のテクニックなど。 [続きを読む]

    Tracked on February 28, 2007 11:27 AM
    コメント

    こんにちわ^^

    > たしかに記事を最初から最後までしっかり読むという機会があまり多くないかもしれません

    わたしの場合Case By Caseですが、結構しっかり読んでるかも、です。
    理解力が乏しいから (; ̄∇ ̄A

    でも、わたしの理解力は抜きにしても、yujiroさんの記事は理解しやすくてとっても参考になってます (m;_ _)mペコ

    紹介されてる書籍、読んでみます♪

    [1] Posted by bzbell : February 17, 2007 5:26 PM

    >bzbellさん
    こんにちは。
    コメント&お褒めくださりありがとうございます。
    でも一度書いた記事を読み返すと「まだまだだなぁ」と思う毎日です(笑)。

    [2] Posted by yujiro : February 19, 2007 2:40 PM
    コメントする
    greeting

    *必須

    *必須(非表示)


    ご質問のコメントの回答については、内容あるいは多忙の場合、1週間以上かかる場合があります。また、すべてのご質問にはお答えできない可能性があります。予めご了承ください。

    太字 イタリック アンダーライン ハイパーリンク 引用
    [サインインしない場合はここにCAPTCHAを表示します]

    コメント投稿後にScript Errorや500エラーが表示された場合は、すぐに再送信せず、ブラウザの「戻る」ボタンで一旦エントリーのページに戻り(プレビュー画面で投稿した場合は、投稿内容をマウスコピーしてからエントリーのページに戻り)、ブラウザをリロードして投稿コメントが反映されていることを確認してください。

    コメント欄に(X)HTMLタグやMTタグを記述される場合、「<」は「&lt;」、「>」は「&gt;」と入力してください。例えば「<$MTBlogURL$>」は「&lt;$MTBlogURL$&gt;」となります(全て半角文字)

    Now loading...
    Introduction
    Entry Trackbacks
    Webでの文章の書き方
     [hakuro.info blog] 02/28 11:27
    Entries of this Category
    Recent Entries
    Recent Comments
    Recent Trackbacks
    QRcode

    現在停止中です
    携帯電話からこのQRcodeを撮影することで携帯用URLを取得することができます

    URI for cellular phones
    ギターに入った猫
    Styles
    Font Size
    Default
    For defective color vision
    Gray Scale
    RGB Color
    Search this site
    loading ...
    Categories
    Monthly Archives
    BlogPeople
    Syndicate this site
    FeedBurner(RSS1.0/RSS2.0/Atom)
    Counter
    これまでのアクセス
    クリエイティブ・コモンズ・ライセンス
    Powered by
    Movable Type 5.12