読ませるデザインには法則があった〜読むストレスを取り除くには〜

みなさま、こんにちは。サイトの運営やブログの更新は順調でしょうか？きっと皆様は、サイトをより多くの人々に見てもらえるようSEOを意識し、最後まで文章を読んでもらえるよう、日々工夫を重ねていらっしゃるのでしょうね。

その助けになればと思い、ウェブデザインをするプロの目線から、文章を読ませるデザインの法則を説明いたします。WEBサイトやブログ作りにおいて「文章のデザイン」は「文章の内容」に勝ります。それも遥かに…。ですから、この記事で扱うのは、あくまでも、パッと見てわかる「絵」としてデザインであり、文章を体裁を整えるの法則です。

プロ目線だからと言って、難しい専門用語は使いません。本質を突きつつ、すぐにマネのできる法則を4つだけに絞りました。法則①と②が特に重要です。わかりやすく解説するよう努めますので、どうぞ最後までお付き合いください。

シンプルで、脳に負担をかけないデザイン

読ませる文章のデザインとは何か？それは脳に負担をかけないデザインであり、それはシンプルな絵でなければなりません。人はWEBで文章を読むとき、ちょっとでもストレスを感じると、あっさり読むことを途中で投げ出して、より優れたサイトを探し直します。

もし今読もうとしている文章が、自分の意思でお金を払った小説なら、多少読みづらくとも最後まで読もうという気にもなるかもしれません。しかしWEBサイトのほとんどの読者は、ただ情報を求めているだけであり、時間も忍耐力もありません。シビアな感性で私たちのサイトに臨んでいるのです。だから我々が読者の要望に応えるためには、まず「このサイトは楽に読めそう」という第一印象を与える必要があります。

私たちの戦場は文字数やスペースに制限のないWEBであり、新聞のように隙間無く文字を並べてはいけません。もしWEBで新聞のマネゴトをすれば、敗北あるのみです。この記事で紹介する法則は全て「脳へのストレスを最小に抑える」という一点に集約されます。

小難しい心理学の用語では「ゲシュタルトの法則」や「視覚階層と黄金律」なんて、言われ方もしますが、そんな言葉を逐一解説しても、皆さんの脳は余計なストレスを感じるだけでしょう。だから、言葉の解釈を改めて、すぐにマネのできる形で解説させていただきます。

法則その1. 見出しは大きさで、重要箇所は色で目立たせる

タイトルや見出しは、普通の文の1.5倍〜3倍の大きさにして、ガッチリ目立たせるべきです。読者は記事をどんどん流し読みしていきますから、大切なことはガツンと強調しなければ、読後に何も残りません。そうなると、読者はあたなの文章を容赦無く見捨てます。それを防ぐためには、まず、最も大切なタイトルや見出しを「文字の大きさ」でガツンと強調してあげましょう。

そして本文の中で大切な部分はは、色で強調します。大きさで強調してしまうと、本文の体裁が崩れて読みづらくなります。だから色です。まずは基本の法則を当てはめた場合の変化をご覧ください。

いかがでしょうか？悪い例では「なんらかの文字の集合体」という印象にしかなりません。しかし、法則①に従うだけで、何が言いたいかがイッパツでに残るようになったはずです。

それから、目立たせる方法は他にもありますよね。例えばアンダーラインを引いてみたり、太字にしてみたり、フォントを変えてみたり…。現に私が今書いた文章の中でも、赤色の部分は文字を太くしてあります。シンプルなデザインを念頭に、応用を利かせていきましょう。

法則その2. 「4−1」のルールで段落をまとめる

WEBライティングをするからには、行間と余白のバランスには、最大限の注意を払わねばなりません。ついつい見過ごしがちですが、とても重要なことです。私たちの仕事は、新聞や雑誌とは違い、いくらでも行間や余白を変えることができてしまいます。だからこそ意識しなければ、いつの間にか心地良い領域からはみ出して、読者から見放されてしまいます。

「4−１」のルールは、文字の塊と空白とのバランスを整えるための法則です。つまり、４行書いたら空白を１行作る、これだけです。行間と余白のバランスを最適化するには、豊富な経験や美的感覚を要しますが、そんなの難しすぎますよね。できるだけ単純化して、誰にでも実践できるようにしたものが「4-1」のルールなのです。

しかし、このルールに反論する方もきっといらっしゃるでしょう。「スマホやタブレットだと１行あたりの文字数が違うのだから、このルールは役に立たないじゃないか」という否定的な意見です。確かに行間や余白は環境に左右されます。しかし、そもそも閲覧の仕方は読者にとって千差万別です。その事情を踏まえた上でも、だいたいの環境にとって心地良いバランスというのが、文章４行、空白1行のリズムであり、絶対のルールではないとお考えください。

巨大な文字の塊が、ちょうど良い大きさに切り分けられました。私はこのルールを、トンカツのようなものだと考えています。お店でトンカツ定食を注文して、切られていないトンカツがそのまま提供されたとしたら、お客さんは困りますよね。美味しいトンカツを揚げたら（文章を書いたら）、食べやすい大きさに切る（行間と余白のバランスを取る）ところまでが私たちの仕事です。

※補足①「3−1」でも「5−１」でも大丈夫

この法則はあくまでも、最適化への目安です。「３行書いて、１行の空白」になっても「５行書いて１行の空白」になっても構いません。現にこの記事の文章デザインも、「3-1」や「5−1」になっていますいよね。

※補足② 段落の途中で改行してはいけない

段落の途中で改行すると、せっかく綺麗に整った塊がぐちゃぐちゃになってしまいます。

このように、文章の左端がバラバラになってしまうので、不揃いで散らかった印象になります。せっかく脳が文を塊で認識しようとしているのに、その邪魔をしてしまうわけですね。

法則その3. 色の使い分けは、黒＋３色まで

強調したい部分は色で目立たせるべきですが、使っていい色は、黒を別として、3色までにすべきです。たくさんの色が使われていると、人の脳は混乱します。意識の上では色の使い分けを理解できていても、無意識では疲れて、サイトを見ているだけで不快に感じてしまいます。

「いいえ、私の読んだ本にはカラフルにしろと書いてあったわ」とか「え？でもあの有名サイトは10色くらい使ってんじゃん」という反論があるかもしれません。確かに、わかりやすさやアート性を重視して色をたくさん使うことはあります。ですが、それでは無意識のうちに脳が疲れます。「読みやすさ」と「わかりやすさ」は別モノであり、優先すべきは「読みやすさ」です。

あなたの美的センスやデザイン経験次第では、この法則をきっと乗り越えられるでしょう。現にカラフルなのにシンプルで、見やすく、わかりやすいサイトは確かにありますからね。ただそのように高度なスキルに頼らず、初心者から上級者まで一貫して使える法則は、やはり「色は3色まで」なのです。

法則その4. フォントは３種類まで

これも色の使い分けを同じ理由ですね。たくさん使い過ぎると、フォントが使い分けられている意味がわからなくなるからです。いえ、ちゃんと頭を働かせれば、読者はあなたがどういう意図でフォントを変えているのかを理解してくれるかもしれません。しかし、脳は疲れます。それを防ぐために、使うフォントの種類はせいぜい３種類におさえておきましょう。

色使い一つで、滅茶苦茶になってしまいました。目が疲れます。こんなデザインではSEO上位を狙えるわけはないのですが、残念なことに、この手のミスを犯している人は案外たくさんいるものです。こんな酷い状態のデザインでも、今回紹介した4つ法則を活かせば生まれ変わります。

まとめ

読ませるデザインの法則、それは一言で言えば、シンプルで脳に優しいデザインとういことです。これら簡単な法則を守って執筆すれば、必ず見やすい文章をデザインすることができます。

たったこれだけで大丈夫です。何も考えずとも、今すぐ誰にでも実践できるデザインです。あとは文章の内容を充実させつつ、デザインを洗練していけば、より上を目指せます。デザインの世界はたくさんのルールとその組み合わせがあり、とっても奥が深いのですが…あんまり言うと長くなりすぎますね。それはまた別の機会にお話ししましょう。それでは、良いWEBライフを！