スイッチ | ブログ・サイト運営を応援するWebマガジン

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


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

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

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

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

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

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

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

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

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

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

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

悪い例

読ませるデザインには法則があった
みなさま、こんにちは。サイトの運営やブログの更新は順調でしょうか?きっと皆様は、サイトをより多くの人々に見てもらえるようSEOを意識し、最後まで文章を読んでもらえるよう、日々工夫を重ねていらっしゃるのでしょうね。その助けになればと思い、ウェブデザインをするプロの目線から、文章を読ませるデザインの法則を説明いたします。WEBサイトやブログ作りにおいて「文章のデザイン」は「文章の内容」に勝ります。それも遥かに…。ですから、この記事で扱うのは、あくまでも、パッと見てわかる「絵」としてデザインであり、文章を体裁を整えるの法則です。プロ目線だからと言って、難しい専門用語は使いません。本質を突きつつ、すぐにマネのできる法則を4つだけに絞りました。法則①と②が特に重要です。わかりやすく解説するよう努めますので、どうぞ最後までお付き合いください。

法則①を適用後

読ませるデザインには法則があった

みなさま、こんにちは。サイトの運営やブログの更新は順調でしょうか?きっと皆様は、サイトをより多くの人々に見てもらえるようSEOを意識し、最後まで文章を読んでもらえるよう、日々工夫を重ねていらっしゃるのでしょうね。その助けになればと思い、ウェブデザインをするプロの目線から、文章を読ませるデザインの法則を説明いたします。WEBサイトやブログ作りにおいて「文章のデザイン」は「文章の内容」に勝ります。それも遥かに…。ですから、この記事で扱うのは、あくまでも、パッと見てわかる「絵」としてデザインであり、文章を体裁を整えるの法則です。プロ目線だからと言って、難しい専門用語は使いません。本質を突きつつ、すぐにマネのできる法則を4つだけに絞りました。法則①と②が特に重要です。わかりやすく解説するよう努めますので、どうぞ最後までお付き合いください。

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

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

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

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

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

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

法則②を適用後

読ませるデザインには法則があった

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

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

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

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

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

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

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

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

悪い例

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

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

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

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

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

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

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

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

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

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

法則③と④に反した悪い例

読ませるデザインには法則があった

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

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

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

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

4つ全ての法則を適用した例

読ませるデザインには法則があった

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

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

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

まとめ

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

  • 法則その1 見出しは大きさ、重要箇所は色で目立たせる
  • 法則その2. 「4-1」の法則で段落をまとめる
  • 法則その3 色の使い分けは3色まで
  • 法則その4 フォントは3種類まで

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

著者プロフィール

地獄谷酸十郎

フリーのWEBライター。心理学とITをベースに活動中です。


Sponsored Links

こちらの記事もおすすめです!

シェア頂けると励みになります!

ブログ更新情報はこちらから発信しています。

運営者情報

荒木 厚

熊本のホームページ制作・Webメディア運営会社「株式会社コクリ」代表。 「スイッチ」等のWebメディア運営、企業様のオウンドメディアの企画・制作、SEOをメインにした集客支援をしています。ロゴマークデザイン制作サービス「コクリロゴ」OPENしました!