• BPnet
  • ビジネス
  • IT
  • テクノロジー
  • 医療
  • 建設・不動産
  • TRENDY
  • WOMAN
  • ショッピング
  • 転職
  • ナショジオ
  • 日経電子版
  • PR

  • PR

  • PR

  • PR

  • PR

エンジニアのためのWebデザイン教室

第13回 Webページで読みやすいテキストとは

園田 誠 2008/03/21 ITpro
今回のポイント
1行あたりの文字数の目安
1段落の文字数の目安
段落に含む文字数
行間調整の考え方
字間調整を使ったロゴ風味見出し

 日本語というのはもともと縦書き文化です。文字も筆で縦書きしていくときに書きやすいように作られています。現在PC画面上で見るフォントは,活字印刷物のフォントとは違い,横書きで読みやすいようにもともとの字体から若干形を変えられています。それでも起源である縦書きの形を完全に壊すことができないので,やはり横書きでは読みづらいようになっています。

 日本人が苦痛を感じることなく読める横書き1行あたりの字数は20字+α程度だと言われています。意識して雑誌などを見るとたいていが!)25文字から28文字程度です。用紙,つまり本のサイズがA4を超えるような大判になると,1ページを左右2段組に分けて25~28字程度に調整されています。

 一方,縦書きの場合には識別許容量はグンと増加し,1行が40字を超える程度になっても苦痛を感じなくなります。横書きの1.5倍程度の許容量があります。現在でも文庫版小説などが,およそこの文字数で製本されています。

 縦書きで40文字あると五七五七七(31文字と句読点ないし空白)の短歌が改行することなく収まります。文筆家の多くが五七五のリズムで文章を書きますので,途切れることなく文章の流れを作れるのがこの文字数ということなんでしょう。

 例外的に新聞は縦書きながら12文字程度と1行あたりをコンパクトな文字数で段組しています。ここ数年で新聞は各社ともどんどん文字サイズを大きくして1行あたりの文字数を減らす傾向にあり,かといってページを増やすわけでもないので,単位面積あたりの情報量は減少傾向です。この新聞社の「文字を減らそう」という動向は,インターネットの普及から新聞離れが進むことに対する新聞社なりの考え方なので,テキストそのものの読みやすさと文字数の関係を考察する対象からは外さなくてはなりません。

 英語で作られた環境を受け入れるしかない日本人としては,Webでのテキストは横書きするしかありません。この記事もそうです。そこで「読みやすさの基本を文字数から考える」時に,多くの雑誌が採用している1行28文字というのを意識してみることにします(リスト1図1)。テキストは,ある程度まとまった長さのものを用意してください。2~3行程度のテキストだと読みやすい,読みにくいの判別が付きにくくなります。

リスト1●1行の文字数を約28文字に設定した例

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html 
     PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
  <head>
  <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
    <title>CSSでのレイアウト</title>
<style>
body{
  /*ブラウザによる初期値差異を吸収するため
  bodyでマージンを0指定します*/
  margin:0px;
}

div{
  /*一番外側のdivでマージンを指定して
  余白を作ります*/
  margin:1em 5em;
}

p{
  /*雑誌段組相当の約28文字を設定*/
  width:28em;
}

</style>
  </head>
  <body>
<div>
<h1>日本語</h1>
<p>
~ある程度の長さがあるテキストを入れてください~
</p>
</div>
  </body>
</html>

図1●リスト1のブラウザ表示。まだ読みやすいというほどではないような…
図1●リスト1のブラウザ表示。まだ読みやすいというほどではないような…

 リスト1のサンプルは,<h1>と<p>,そのふたつを含む<div>で作られた単純なHTMLです。左端べったりからテキストが始まらないように,<h1>と<p>の入れ物になっている<div>に対してマージンで余白を設定しています。<p>に対してwidthプロパティに28emを指定して,段落内の横幅をおよそ28文字(emによる指定は概算であって確実な文字数にはなりません)と設定しました。

 図1を見る限り,読んでみて読めないとか読みにくいというレベルではありません。しかしなにかしっくりきません。どうやら28文字にしただけでは足りないようです。ここでさらに読みやすくするためにもうひとつ日本人の特徴と傾向を学びます。日本人が一気に読んで理解できる文字数というのがあります。

ここから先はITpro会員(無料)の登録が必要です。

次ページ 100文字前後で段落に区切ってみる
  • 1
  • 2
  • 3
  • 4
  • 5

あなたにお薦め

連載新着

連載目次を見る

今のおすすめ記事

ITpro SPECIALPR

What’s New!

経営

アプリケーション/DB/ミドルウエア

クラウド

運用管理

設計/開発

サーバー/ストレージ

ネットワーク/通信サービス

セキュリティ

もっと見る