Home > 未分類 > 箇条書きの美学~9個のポイントと行頭記号~

箇条書きの美学~9個のポイントと行頭記号~

4月 24th, 2007

今『新ウェブ・ユーザビリティ』という本を読んでいます。
その中から。

箇条書きにすると、ページ右側が余白になりやすいため、視線の動きが左側に固定され、各項目が目立ちやすくなる。通常の文中で項目を並べるよりも注目率は高い。実際、通常分よりも箇条書きの方がユーザビリティは47%も高いという調査結果もある。

と、ありますが、早速以上の文を箇条書きしてみましょう。

  1. 箇条書きにすると余白が生まれやすい。
  2. 視線の動きが固定され、各項目が目立つ。
  3. 文中よりも各項目の注目率が高い。
  4. ユーザビリティが通常文に比べて47%高い。

読みやすい、といいうよりもわかりやすさが格段に上がったのではないでしょうか。

では、箇条書きを書く上で注意するポイントを本と自分の観点から9個。

1.4項目以上ある場合は、通常文の中に並べるよりも箇条書きにする。

 これは上で書いたとおりです。
 文章だと、項目が段落や文の数と同じになってしまいかねません。
 項目がいくつかあったらそれらを強調してわかりやすく。

2.箇条書きの前にリード文を付ける。

 例えば、「注意するポイントは以下のとおりです。」のように。
 箇条書きの表題ですね。特に箇条書きを複数用いる場合は必須です。

3.箇条書きはインデント(字下げ)する。

 こうすることで他の文との差別化ができます。

4.行頭記号(・や番号など)の後ろにスペースを空けすぎない。

 行頭記号から最初の文字までの距離があると、視線の移動が多くなって読みにくい。

5.各項目の書き出しに同じ語句をくり返さない。

 ・箇条書きで注意すること
 ・箇条書きはすばらしい
 ・箇条書きの悪い点

 ほら、見にくい。
 
6.各項目のいいまわしや表現方法には一貫性をもたせる。

 ・最新情報を閲覧する
 ・同世代の活動状況
 ・コンテスト
    ↓
 ・最新情報を閲覧する
 ・同世代の活動状況を知る
 ・コンテストに出場する

 上の例では、1番目は「できること」ですが、2,3番目は「できること」を意味する表現ではありません。

7.文中で行頭記号と同じ記号を用いると体裁が崩れる。

 ■ 行頭記号が●の場合
 ■ 行頭記号が■の場合
 ■ 行頭記号が●や■といった記号ではなく番号の場合

 なんか気持ち悪い気がします。
 極力同じ記号、特に強烈な記号を用いるのは避けましょう。

8.項目文の長さを調節する。

 ・20文字以上の項目文を用いる場合
 ・極端に少ない場合
 ・項目文が10文字の場合
    ↓
 ・極端に少ない場合
 ・20文字以上の項目文を用いる場合
 ・項目文が10文字の場合
 
 上のものより下のほうがすっきりします。
 もちろん順番があったら工夫しなければなりませんが、特に詰まった感のある箇条書きの全体の形って大事なのです。

9.ページ内の箇条書きを何箇所も使用すると、箇条書きの効果が薄れる。

 この記事もやたら箇条書きしていて多少読みずらいかも。

また、行頭記号に何を用いるかも重要なポイントです。

■ は見出し的な使い方多いと思います。
 行頭記号の中では最も強力な記号です。

● も強力な記号です。
 見出しでは四角を用いた方がしっくりくるという意見の方が僕の周りでは多いですが。
 仕様といった強調部分(ポイント)の列挙でよく目にします。

・ 最も一般的なもの。
 単純な項目の箇条書きに適しています。

» (»)リンクの参照によく使います。
 百式メソッドw。しっくりきていい感じです。

なお、箇条書き:リストタグを用いることはSEO対策にも向いています。
(以上の例はリストタグを用いていないときのものです。)

以下にいろいろな種類のリストタグ用のCSSが載っていますので興味がある方は見てみてください。

» list-style-type-スタイルシートリファレンス

箇条書きをうまく使うことで格段に読みやすさがアップします。
皆さんも独自の箇条書きテクニックを探してみてください。

【関連】
百式さんの手直し例集から学ぶうまいブログ記事タイトルのつけ方

新ウェブ・ユーザビリティ
Jakob Nielsen Hoa Loranger 斉藤 栄一郎
MdN (2006/12/01)
売り上げランキング: 82733

Similar Posts:

8maki 未分類

  1. No comments yet.
  1. No trackbacks yet.