ブロガー必見！文章力がなくても読みやすいブログに変身させる３つの方法

2016/05/09 [Mon]

1 読みやすい文章デザイン術その１極論すると、行間指定と一行の文字数（字詰め）が指定できない場所では文を書くな
2 読みやすい文章デザイン術その２見出しと本文のフォントサイズは変えておく。ただし…
3 読みやすい文章デザイン術その３あらゆる場所にマージンを置け。わからなくても置け
4 番外編・色を使うな
5 これらを守って読みやすいページを作ろう

前回は、読みやすい文を書くための文章術について、
講釈をさせて頂きました。

しかし、文章力をいくら磨いたところで、
読みにくいテンプレートファイルで表示されてしまっては、
どうにもなりません。

これは、学者さんが自身のホームページで
論文を公開しているような場面でよく見かけます。

「行間ゼロの明朝体、横幅100％…って、すごく良いこと書いてあるのに読ませる気ないんかい、もったいない！」というページです。

前回の「抜粋！これだけ守れば格段に腕前アップ文章術」（そんなタイトルだったっけか）と併せ、今回挙げるルールに則したテンプレートを作ることにより、倍倍ゲームでテキストが読みやすくなる、というわけです。

読みやすい文章デザイン術その１
極論すると、行間指定と一行の文字数（字詰め）が指定できない場所では文を書くな

すいません、極論です。
（メディアを作れとか、そういうお話ではありません）。

特別なＣＳＳリセットファイル
（行間をゼロにするコードの入ったもの）を
ブラウザに読み込ませていない限り、

Ｐタグでくくるだけで、
どんなワープロソフトで書かれた文章であろうと、
読みやすい行間は確保されます。

そして、一行の文字数（字詰め）も
35〜40文字にデザインしておきましょう。

これは、単純に目線移動の問題です。
横に長いと、折り返しの際に眼が疲れるのです。
巨大ディスプレイで、配慮の施されていない
レスポンシブデザインのサイトを見たときに起こりがちですね。

（しかし、この頃この考え方が揺らいでいます。そこそこ大きな画面で見るウィキペディアに馴れすぎて、あまり気にならなくなってきました。が、目線移動だけで追いつかず首を左右に振る、というのはニワトリなので、やはり字詰めには配慮をしておきましょう）。

読みやすい文章デザイン術その２
見出しと本文のフォントサイズは変えておく。ただし…

読みやすい文章のページにしたいなら、
見出しは大きく、本文はそれよりは小さく。当たり前ですね。

しかし、この世の中には定石通りやっても
うまくいかないことが往々にしてあるもので、
実は皆さんが現在ご覧のこのブログの小見出しは、
開設当初もっと文字が小さかったのです。

本文のフォントサイズを100％とすると、
それでも175％＋太字ぐらいに設定していたのですが、
ここでひとつの問題が発生しました。馴染んでしまうのです。
見出しだというのに、そこに引っ掛かりがないのです。

見出しを読まない派の私ですが…

何を隠そう、私は雑誌などを読んでいても、
あまり見出しというものに目を通しません。
活字中毒患者なので、すぐに本文に入ってしまうのです。

歴史書を読んでいても、見出しに「○○の死」とか出てくると、
「いや、文章を読み進めていくうちに知りたかったから」という理由により、
むしろ見出しが邪魔になることさえあります。

しかし、この記事に限らず、WEBの場合は見出しが極めて重要であり、
見出しには、ＳＥＯ的に強いとされているＨタグが割り振られている。

ユーザーにもクローラーにも読ませたいのが見出しであるはずなのに、
その見出しが馴染んでしまってはマズイわけですね。

デザイン的によほどブサイクになったり、
文章の読みやすさが失われない限り、
見出しは「目立ちすぎるぐらいがちょうど良い」と思います。

読みやすい文章デザイン術その３
あらゆる場所にマージンを置け。わからなくても置け

「余白を制する者はデザインを制する」と言われています。
主にボクシングの世界で。

これは個人的に思うのですが、余白がなくて素人くさくなるより、
無駄に余白をとりすぎて素人くさいほうが100倍マシというもの。

読みやすい文章を書くのなら、見出しの下に余白。本文の下に余白。
説明画像の上下左右に余白。余白余白。杜甫李白。

要素を余白でくるんだだけで、
文章は見ちがえるように読みやすくなります。

番外編・色を使うな

これまでの一工夫は、
読みやすい文章のためには「このようにせよ！」でしたが、

色については
「迷った挙げ句やっちまいがちなので気を付けろ」
ということで番外編扱いです。

前章では「わからなくても余白を置け」と書きましたが、
色については逆です。
色はできるだけ使うな。

WYSIWYGなど、初心者でも感覚的に
ブログ本文に対し装飾ができるシステムがありますが、

極論しますと、
文字には白地に黒、黒地に白以外に
「真に相性のよい文章の組み合わせ」はありません。
パピルス発明以来の永遠の真理です。

「世の中の本やWEBページには色の着いた文字が溢れてるじゃないか！」

と言われてしまいそうですが、
たとえそんな本でも色の使用は副題や装飾に留め、
本当に大切な文章部分は白地に黒で書かれていることでしょう。

サブカル系の雑誌を開くと、
たまに全文が赤で書かれていたりもするが、
絶望的に読みにくい。

「水色バックに黄色い文字」というワーストコンビを筆頭に、
色を使えば使うほど読者の眼は疲れ、
強調したかった文章も埋もれていきます。

何かの冗談か、よほどの演出意図がない限り、
本文にまで突飛な色演出を持ち込むのはやめましょう。

これらを守って読みやすいページを作ろう

前回の文章術コラムと同様、他にも無限に小技はありますし、
それを紹介した本も売られているのですが、まずは、
「すぐにできて、この要所を押さえるだけで読みやすさが劇的に変わる」
という点から紹介してみました。

ほどほどに行間を空ける
一行は35〜40文字
見出しは大きく
文章のブロックごとに余白を空ける

この４つを守ってページを作るだけで、
「私はデザインに不慣れだから…」という方でも、
劇的に読みやすく変わります。

文頭に記しました通り、
論文を公開されている大学教授のような方にはぜひお試し頂きたいのです。

「実のある文章が、読みづらいというだけで閉じられることほど社会の損失はないじゃないですか」
などと、洋画に出てくる慇懃無礼なインテリみたいなセリフを吐きまして、締めとさせて頂きます。

この記事のシェアにご協力ください！

次の記事へウェブの本じゃないけど【WEBディレクターの必読本】に推薦したい８冊

前の記事へすぐできる文章術６つ～ライターが教える！劇的に読みやすくなる必殺テク公開

代表・デザイナー 小川知久 Tomohisa Ogawa

中目黒の広告代理店でウェブディレクターを勤める現役のウェブデザイナー。５年にわたりアパレル系通販サイトの部門長を勤め、ビジネスの視点からデザインに携わった後、ウェブを通じた人材採用について、デザインとライティングの両面からトータルコンサルティング。上流から下流まで貫通して携わります。
無期休業中につき、現在お仕事は承っておりません。