読者です 読者をやめる 読者になる 読者になる

トワイライツ・ノーツ

日記と本と、時々Web

読みやすいブログのための文章デザインについて

Web 雑記

hitode99.hatenablog.com

yamayoshi.hatenablog.com

こういう話題は結構定期的に盛り上がっている気がします。

ライターをしていたり、今でも仕事でメールやWebなどの大量の文章を読んだり、逆に書いたり手直ししたりということを日々しているのですが、文章を書くのもデザインセンスが必要だなと常々感じています。

今回はそんな話です。

読みやすさの構成要素

大まかに下記に分かれるのだと思います。

  • 文章自体の明快(明解)さ
  • 適切なブロック分け
  • 見出しの配置

『文章自体の明快(明解)さ』は要するに文章そのものの質。てにをはや文章の構成、基本的な文法など。文体やテーマの選び方の他、推敲や余分なものを削ぐという作業も含まれます。

『適切なブロック分け』と『見出しの配置』はデザイン要素です。『見出しの配置』についてはキャッチコピー的な部分も強いですが、そこは一旦置いておきます。
文章のデザイン要素として、この2つに触れていきたいと思います。

最小のブロックは漢字

文章作法系で、漢字をひらきましょう*1とよく聞きますよね。下記の文章を見比べてみてください。

 吾輩は猫である。名前はまだ無い。
 どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。吾輩はここで始めて人間というものを見た。しかもあとで聞くとそれは書生という人間中で一番獰悪な種族であったそうだ。
 吾輩はねこである。名前はまだない。
 どこでうまれたかとんと見当がつかぬ。なんでも薄暗いじめじめしたところでニャーニャーないていたことだけは記憶している。吾輩はここではじめて人間というものをみた。しかもあとで聞くとそれは書生という人間中でいちばん獰悪な種族であったそうだ。
 吾輩は猫である。名前は未だ無い。
 何処で生れたか頓と見当が付かぬ。何でも薄暗いじめじめした所でニャーニャー泣いて居た事丈は記憶して居る。吾輩は此処で始めて人間というものを見た。然も後で聞くと其れは書生という人間中で一番獰悪な種族であったそうだ。

上段は夏目漱石の新字新仮名版そのまま。
中段はそれをなるべくひらいたもの。
下段は旧字旧仮名版も参考になるべく漢字に置き換えたもの。

見た目の印象がかなり違うと思います。好みはもちろんあるでしょうが、中段のものはよりやわらかそうに、下段は硬く感じるのではないでしょうか。

一文字でも漢字、ひらがな、カタカナでずいぶん印象が変わります。漢字が『硬く』感じるのはそれだけにすでに意味があること、漢字は一文字だけで固まって見える(=ブロック)というのが理由かなと思います。

もちろん単語もブロック。
単語の最初と最後だけあっていれば文章として読めるという話を聞いたことがある方も多いと思いますが、それも塊として認識しているから起きるのです。

さらに句読点も改行もブロック分け。

一文字→句点配置→行→単語→段落→章→……とブロックはどんどん大きくなっていきますが、何を配置してどこで分けるかというのは、文章の内容だけではなく、視覚的なデザインも必要となります。

私はこの辺りのことを考えるとフラクタル構造*2を思い出します。

見出しは見た目と整理のためにある

章さえなく数百ページも続いている文章って読みにくいですよね。よほど面白くないと最後まで読みきるのはちょっと辛いものがあると思います。

そこで見出しを使って『ここが塊の始まりです』『この塊は大まかにこんなことについてです』というのを目に入りやすくします。

要するに読む人(自分自身も含む)に対して、整理された端的な事前情報を与えるためにあるのが見出しです。

そういう意味では、アイキャッチ画像も見出しのひとつだと思っています(私は滅多にアイキャッチ画像をつけないですが……)。

どこでどういう見出しをつけるのか、というのもデザインで、これが適切にできる人の文章はすごく読みやすいと思います。見出しがつけやすい文章はそれだけですでに整理された明快な文章です。

私自身、見出しをつけるようになったのは比較的最近でして、その度に悩みます。

ブログで気をつけていること

先頭の字下げをしない

個人的な好みの範疇ですが、小説や書類、レポートを書く時でもなければ、Web上では基本的に先頭の一字下げはしません。紙ではしますが。

理由は、特にWeb上の文章だと先頭が揃っていないとガタガタして見えるからです。
後で参考書籍に挙げている本に載っている『整列』という要素の意味でも字下げはしていないです。

改行は多めにする

文章が詰まって見えるとそれだけで読むのがつらくなります。特にWeb上の文章だと顕著です。それに、PC画面上の文章は読み落としをしやすいということも。

だから大事なことは改行して始めの方に持ってくるとか、一行だけにしてさっさと改行するなどしています。

見出しをつける

ブログやサイトであれば見出しタグを使うようにしていますし、大見出しや中見出し、小見出しも使い分けています。

ちなみに見出しタグに関しては見やすいようにCSSに少し手を入れています(デザインや、見出し上にスペースを空けるなど)。

メールなどのテキストベタ打ちの場合は「■●○◎・‐※」といった図形を駆使。

メルマガから学ぶところが多いです。テキストメールでよくあれだけ要所を目立たせられるな……と。下のページも参考になります。

元メルマガ職人が教える! テキストメールでメリハリを付ける8つの方法 | ヨッセンス

文章構造を意識する

html的な話になりますが、見出し+文章でワンセットと考えています。見出しレベルの調整もここに含まれます。

たとえばはてなの仕様だと見たまま記法で改行を入れると<p> </p>がたくさんある……ということが起こります。html構造としてはこういうタグは望ましくないので、なるべく入らないようにしています。

文章構造がきちんとしているかどうかというのはSEOにも関係したはずです。

専門用語や外来語をむやみに使わない

個人的に、外来語まみれの言葉はむずむずします。たとえば……

彼はコミットできるタイプだからあの案件にアサインしたよ。プライオリティ高めの案件だからね。
ペンディング中の関連案件はボトルネックだけど、彼ならマネタイズできる段階までいけると思う。

要約:彼は責任感のある人だからあの案件を担当してもらうことにしたよ。優先度高めの案件だからね。
保留中の関連案件は問題だけど、彼なら収益化できる段階までいけると思う。

わかりにくいし日本語でいいじゃん! ってなります……個人の好みですけどね。

基本的な『デザイン』というものについての参考書籍

文章も含め、デザイン全般について参考にしているのはこちら。この本に載っているデザインの4つの基本原則、整列・近接・反復・コントラストの考え方はすごく参考になります。

文章にもかなり応用できる内容。

何となくやるのと、意識してやるのではまったく違いますし、折りに触れて読み返す本のひとつです。

*1:漢字をひらがなにすること。

*2:ものの一部を拡大してもまた同じ構造のものが現れ続けること。野菜のロマネスコなど。