WWW川流れ

文面も隙間もデザイン

そもそも活字の種類が多い日本語は、インターネットを利用したコミュニケーションを豊かにするうえでも、大変な役割を果たしてくれている。その代表格は電子メールで使われる顔文字や、活字を利用したグラフィック「アスキー・アート」の分野であろう。

いずれも乱用するととたんに目障りな障害物に転化するとはいえ、日本語を使うことの恩恵を目に見える形で感じさせるものだ。ひどく退屈なラテンアルファベットによる顔文字やアスキーアートとは、まったく違う次元の豊かさがある。

しかし、WWWを利用して文章を発表する場合、「日本語」はしばしば障壁になる。

  1. 美しい文面
  2. 「無用の用」をきわめる

美しい文面

漢字かな交じり文のつくり出す「文面の豊かさ」は、日本語の大きな特徴だ。とりわけ印刷媒体の場合には、この要素に美しさを感じることすらある。WWWコンテンツにもやはり、豊かで美しい文面という要素は共通する。

いやそれどころか、「画面上で文字を追うことの辛さ」を考えると、印刷媒体以上に文面に対する「こだわり」が求められると言えそうだ。読みにくさゆえにポイントを素早くつかませる必要性は高く、「文面」の工夫は欠かせない。冗長な記述をできる限り回避し、簡潔な文章作りを心がける必要もある。具体的には以下のようなポイントが考えられる。

  1. 漢字の使用率をいくぶん控えめにすること。
  2. 句読点は通常よりもやや多めに打つこと。
  3. カタカナの乱用を戒めること。
  4. 段落を短めに区切ること。

この分野で参照することが多いのは、要約筆記の入門書として定評のある『字が話す目が聞く』だ。要約筆記はもともと聴覚障害者とのコミュニケーションを支援するための技能だが、「速く、正しく、読みやすく」という要約筆記の求められている特性は、WWWコンテンツとしての文章作成と共通する部分が非常に多い。

漢字の使用率をいくぶん控えめにする

手書きで文章を書くとき、漢字は画数が多くて億劫だ。辞書を引かないと今ひとつ自信を持てない漢字も少なからずある。こうした億劫さや記憶の不確かさによる不安の少ないコンピュータで文章を作成すると、紙に筆記具で文章を書くときよりも漢字が多くなりやすい。後述する「行間の設定」とも密接に関連するが、漢字を使っている箇所のうち必要性のないところは平仮名に「開いて」しまうことで、「画面にぎっしり詰まった」印象を薄めるねらいがある。例示してみよう。

城のある丘を散歩するうち、陽が傾いてきた。光と影が、いろんな角度の線を作って踊りはじめる。アーチの中の石材には、一日のうちこのわずかな瞬間しか光を受けないものもある。

城の在る丘を散歩する内、陽が傾いて来た。光と影が、色んな角度の線を作って踊り始める。アーチの中の石材には、一日の内この僅かな瞬間しか光を受けない物も在る。

上段の例文に比べると、下段の例文にはずいぶん「狭苦しい」印象を抱かれることだろう。そして、上段の例文では、漢字がより目立つと感じられたのではなかろうか?漢字の使用率は抑えられている代わりに、少な目に使われた漢字の部分はやや強調されているように見える。

HTMLにおいては強調を表すem要素、最強調を表すstrong要素が定義されているが、日本語コンテンツの場合、漢字を使用した部分は「微妙な強調」とでもいうべき働きをしうる。しかし、全文が強調のように見えてしまっては、肝心の強調したい部分を捉えにくくなってしまう。本当に目立たせたい箇所を効果的に示すためには、漢字の使用をやや絞っておく必要がある。

句読点は通常よりもやや多めに打つ

こちらにもやはり、高くなりがちな画面の「混雑度」を下げる効果がある。例文で試してみよう。

城のある丘を散歩するうち、陽が傾いてきた。光と影が、いろんな角度の線を作って踊りはじめる。アーチの中の石材には、一日のうちこのわずかな瞬間しか光を受けないものもある。

城のある丘を散歩するうち陽が傾いてきた。光と影がいろんな角度の線を作って踊りはじめる。アーチの中の石材には一日のうちこのわずかな瞬間しか光を受けないものもある。

いかがだろうか?読点が打たれている上段の例文には、文面に余裕のある印象を持たれたと思う。

ところで、下の例文はずいぶんと「慌ただしい」感じがしたことだろう。そして、慌ただしいという印象を抱いた方は、声には出さずとも文章を読み上げていなかっただろうか?読点は文面に余裕を与えるだけでなく、読み上げるスピードを適度に制御してくれる。同時に、適切な読点の打たれた文章を読み上げるときには自然とリズムが生まれてくる。句読点の役割はなかなか侮れない。

カタカナの乱用を戒める

インターネット上でやりとりされる文章には、とかく「カタカナ」が多くなりがちだ。「インターネット」も「電子メール」もカタカナを含まざるを得ない。ここで3番目のポイントが意味を持ってくる。

紙に書かれた文章の場合、カタカナの部分が注目を集める役割を果たすことがある。「控えめに使用された漢字」と同様の微妙な強調だ。それゆえ外来語は目立ち、一部の「日本語原理主義者」に忌み嫌われる。

しかし、そもそもカタカナが多く含まれがちなWWWコンテンツでは、カタカナを使ったからといって目立つ可能性は少ない。考え方は漢字の使い方とほぼ同じだ。多すぎる強調箇所は強調の意味をなさない。カタカナにもしっかり「働いて」いただくためには、使用する箇所を絞り込んでおく必要がある。

段落を短めに区切る

段落と段落の間には、特に設定をしなくてもブラウザが間隔を空けてくれる。段落を適切に区切ることにも、日本語の弱点である「ぎっしり詰まった」文面を改善する効果がある。新聞の記事は長くても200字前後で段落が区切られている。読みやすい文章の段落としては、この程度の長さをスタンダードと考えてよいだろう。

「読みにくい」というWWWコンテンツの事情を考慮すると、この数字は厳しめに捉えておく必要がある。200字を少しでも超えてしまったら、段落の構成を速やかに見直すべきであろう。実は、本論を執筆するにあたっても、段落の長さにはかなりの配慮をしている。

段落を不用意に長くしてしまうという失敗は、教育水準の高いコンテンツ作成者ほど犯しがちであり、注意が必要だ。日常的に文章を書いていると、苦もなく一息に長い段落を書き綴れるようになる。しかし、閲覧者にとって長い段落は苦痛でしかない。

「無用の用」をきわめる

残念ながら、どれほど「豊かで美しい文面」を考え尽くしても、乗り越えられない壁が残されてしまう。この領域に関しては、「文面の工夫」よりも技術的な面に、効果的で手っ取り早い解決策がある。

しかし、考え方は「美しい文面」を作ることと似ている。ポイントは一見なんの役にも立たない「隙間」にある。

行の隙間

モニタの画面では、高さの揃った日本語フォントよりも、高さのいびつなアルファベットの方が読みやすい。英語をはじめラテンアルファベットにより記述される文章は行の高さが背の高い文字によって決まる。文章に含まれる率の高い小文字の部分を中心に、特に細工をしなくても上下に隙間が空くことが多くなる。ブラウザで表示させた場合、適度に行間が空いた感じになり、読みやすい。

しかし日本語や中国語は、この点ひどく損をする。活字の背の高さはほぼ揃っているから、行間は隙間なく詰まってしまう。特に漢字の多い文章は黒々と「べた塗り」になった印象を与えてしまい、暑苦しい。それゆえ行間を広めに設定することは閲覧されるページ数を劇的に増やす効果がある。しかし、ただ広く設定すればよいというものでもない。広すぎる行間は長閑な印象を与えるだけだ。

弊サイトで提供している「とるこのととと」においては、行間を通常の168%に設定している。この数字をはじき出すまでには、相当の試行錯誤を繰り返した。設定値を100%(なにもしていない状態)から10%ずつ増やして実験したところ、140%の設定をしたときに明確な変化が現れた。1回の訪問で閲覧されるページ数が約8%増えたのである。

以降、数値を増すごとに閲覧されるページ数も少しずつ増えたが、170%を境に閲覧ページ数の伸びは頭打ちになった。180%に設定しても170%のときと差が無く、190%に設定したときは僅かだが閲覧ページ数が減ってしまった。

どうやら190%前後からは広くなりすぎた行間によりページが縦方向に伸び、スクロール回数が増えてしまうのが嫌われるようだ。160%のときと170%のときの差は1%であり、誤差の範囲と言えるものだったことから、微妙に調整した168%という数値を選択している。日本語の文章ならば170%前後が行間設定として好まれる値であると考えられる。

もっとも、コンテンツの分野によりこの数字は変わるかもしれない。この次の節で行間を設定する方法を説明するが、設定値をいろいろ変えて試していただきたい。

行間を空ける方法

では、どのようにしたら行間を空けることができるのだろう?行間の設定は、スタイルシートのline-height属性で行う。値の設定方法はいくつかあるが、前述したように「%」で指定する方法を無難なものとしてお勧めしておく。

さて、「手書きHTMLのススメ」で作成したファイルをTeraPadなどのエディタで開き(まだインストールしていなければメモ帳でもよい)、試してみることにしよう。まず、ヘッダを閉じる直前(</head>の直前)に以下の行を書き込み、上書き保存する。この行はすぐ後で作成するスタイルシートファイルを読み込ませる記述だ。

<link rel="stylesheet" type="text/css" href="bunmen.css">

参考までに「手書きHTMLのススメ」で示したHTMLファイルのサンプルに書き込むと、以下のようになる。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html lang="ja">
<head>
<meta http-equiv="content-type" content="text/html; charset=Shift_JIS">
<title>タイトルを書く</title>
<link rel="stylesheet" type="text/css" href="bunmen.css">
</head>
<body>

<h1>見出し(h1は普通タイトルと同じでよい)</h1>

<p>拡張子をhtmlもしくはhtmにして保存されたし。</p>

</body>
</html>

次に、エディタを新規に立ち上げ(まだインストールしていなければメモ帳で構わない)、以下の内容を入力したら「bunmen.css」という名前でHTMLファイルと同じフォルダに保存する。このファイルが行間をはじめ「見映え」を設定するスタイルシートファイル(CSSファイル)だ。

p { line-height: 168%; }

これでひとまず完成だ。文章を書き込んであるHTMLファイルの方をブラウザで開いてみよう。見違えるほど読みやすくなっているはずだ。この例では段落(「p」)の行間を広げ、168%に設定している。

しかしながら、line-heightの設定には古いWWWブラウザを中心にいくつかのバグが潜んでいる。代表的なものはline-heightを設定した要素の中(この場合は段落である「p」)に画像を配置したとき生じるエラーだ。「手書きHTMLのススメ」に従って記述されていれば、段落中に画像を入れる方はまずいないであろうから問題は生じないと思うが、オーサリング・ツールを使って作成したHTMLファイルに設定を追加する場合などは、注意が必要になる。

このようなバグに対する細かな対策は技術的な文書に譲るが、とりあえずの回避策として、画像の部分を段落の外に出し、<div>~</div>で括る方法を示しておく。

文字の隙間

行間を設定することで、ぎっしり詰まった感じになりやすい日本語の文章もだいぶん読みやすくなる。行間の設定のみでも十分ではあるが、せっかくだからもう「一押し」の細工を加えておこう。

行間は文面の上下、縦方向に関する「隙間」である。しかし、漢字を中心に画数の多い日本語の文字は、横方向についても「隙間」を入れてやることで、読みやすさを一段と向上できる。次に設定するのは横方向の隙間「字間」である。

字間を空ける方法

先ほど作成した「bunmen.css」のファイルをエディタで開く。行間の設定をした行の上下いずれか(上でも下でも構わない)に設定を付け加え、以下のように変更したら上書き保存する。

p { line-height: 168%; }
@media all { p { letter-spacing: 0.1em; }}

行間のみ設定した場合よりも、さらに読みやすくなったことだろう。WWWコンテンツとして公開するには少し寂しいが、もっぱら内輪どうしでしか閲覧しない文書や、職場での内部文書なら、これで十分に用は足りる。また、格段に読みやすくなったことで、「手書きHTMLのススメ」のようにして文章を作成する作業も大いにはかどるはずだ。

さて、行間の設定との違いが気になったかもしれない。

@media all { ~ }

このように記述する意味は、古いブラウザのバグ対策だ。字間の設定には行間の設定よりも、もう少し深刻なバグがある。HTMLファイルの記述を工夫してもこのバグは克服できない。「@media all」以下の記述により、古いブラウザにはこの設定を認識させないようにしている。

また「0.1em」の「em」はフォントのサイズを基準にした単位だ。「0.1em」とした場合には、その部分のフォントの高さの10分の1を意味することになる。他の単位として、例えばピクセルを利用して字間を設定する方法もある。「0.1em」のところを「1px」などに変更しながら、読みやすい設定を探っていただきたい。

隙間の効用

行間、字間というふたつの「隙間」について、その設定方法を説明してきた。ごく単純な工夫のようでいて、文章を読みやすくする「すばらしいデザイン手法」であることを体感していただけたと思う。そしてこれらは、「漢字をやや控えめにする」「句読点を打つ」「段落を区切る」など、「美しい文面」を作る手法と同様の考えの延長線上にある。

はじめて作る「ホームページ」はとかくいろいろな物を詰め込んでしまいがちだ。しかし、コンテンツや装飾を詰め込む「足し算」ではなくて、隙間を空けるという「引き算」の方が、より効果的に働いてくれる。このような考えはWebサイトで公開するコンテンツを充実させてゆくにあたり、さまざまな場面で役に立つ。

2003.11.7