araki0412読ませるデザインには法則があった〜読むストレスを取り除くには〜ツイートシェアはてブGoogle+Pocketみなさま、こんにちは。サイトの運営やブログの更新は順調でしょうか?きっと皆様は、サイトをより多くの人々に見てもらえるようSEOを意識し、最後まで文章を読んでもらえるよう、日々工夫を重ねていらっしゃるのでしょうね。その助けになればと思い、ウェブデザインをするプロの目線から、文章を読ませるデザインの法則を説明いたします。WEBサイトやブログ作りにおいて「文章のデザイン」は「文章の内容」に勝ります。この記事で扱うのは、あくまでも、パッと見てわかる「絵」としてデザインであり、文章を体裁を整えるの法則です。プロ目線だからと言って、難しい専門用語は使いません。本質を突きつつ、すぐにマネのできる法則を4つだけに絞りました。法則1と2が特に重要です。わかりやすく解説するよう努めますので、どうぞ最後までお付き合いください。シンプルで、脳に負担をかけないデザイン読ませる文章のデザインとは何か?それは脳に負担をかけないデザインであり、それはシンプルな絵でなければなりません。人はWEBで文章を読むとき、ちょっとでもストレスを感じると、あっさり読むことを途中で投げ出して、より優れたサイトを探し直します。今読もうとしている文章が、自分の意思でお金を払った小説なら、多少読みづらくとも最後まで読もうという気にもなるかもしれません。WEBサイトのほとんどの読者は、ただ情報を求めているだけであり、時間も忍耐力もありません。シビアな感性で私たちのサイトに臨んでいるのです。我々が読者の要望に応えるためには、まず「このサイトは楽に読めそう」という第一印象を与える必要があります。私たちの戦場は文字数やスペースに制限のないWEBであり、新聞のように隙間無く文字を並べてはいけません。WEBで新聞のマネゴトをすれば、敗北あるのみです。この記事で紹介する法則は全て「脳へのストレスを最小に抑える」という一点に集約されます。小難しい心理学の用語では「ゲシュタルトの法則」や「視覚階層と黄金律」なんて、言われ方もしますが、そんな言葉を逐一解説しても、皆さんの脳は余計なストレスを感じるだけでしょう。言葉の解釈を改めて、すぐにマネのできる形で解説させていただきます。見出しは大きさで、重要箇所は色で目立たせるタイトルや見出しは、普通の文の1.5倍〜3倍の大きさにして、ガッチリ目立たせるべきです。読者は記事をどんどん流し読みしていきますから、大切なことはガツンと強調しなければ、読後に何も残りません。なると、読者はあたなの文章を容赦無く見捨てます。それを防ぐためには、まず、最も大切なタイトルや見出しを「文字の大きさ」でガツンと強調してあげましょう。本文の中で大切な部分はは、色で強調します。大きさで強調してしまうと、本文の体裁が崩れて読みづらくなります。基本の法則を当てはめた場合の変化をご覧ください。読ませるデザインには法則があったみなさま、こんにちは。サイトの運営やブログの更新は順調でしょうか?きっと皆様は、サイトをより多くの人々に見てもらえるようSEOを意識し、最後まで文章を読んでもらえるよう、日々工夫を重ねていらっしゃるのでしょうね。その助けになればと思い、ウェブデザインをするプロの目線から、文章を読ませるデザインの法則を説明いたします。WEBサイトやブログ作りにおいて「文章のデザイン」は「文章の内容」に勝ります。この記事で扱うのは、あくまでも、パッと見てわかる「絵」としてデザインであり、文章を体裁を整えるの法則です。プロ目線だからと言って、難しい専門用語は使いません。本質を突きつつ、すぐにマネのできる法則を4つだけに絞りました。法則1と2が特に重要です。わかりやすく解説するよう努めますので、どうぞ最後までお付き合いください。読ませるデザインには法則があったみなさま、こんにちは。サイトの運営やブログの更新は順調でしょうか?きっと皆様は、サイトをより多くの人々に見てもらえるようSEOを意識し、最後まで文章を読んでもらえるよう、日々工夫を重ねていらっしゃるのでしょうね。その助けになればと思い、ウェブデザインをするプロの目線から、文章を読ませるデザインの法則を説明いたします。WEBサイトやブログ作りにおいて「文章のデザイン」は「文章の内容」に勝ります。この記事で扱うのは、あくまでも、パッと見てわかる「絵」としてデザインであり、文章を体裁を整えるの法則です。プロ目線だからと言って、難しい専門用語は使いません。本質を突きつつ、すぐにマネのできる法則を4つだけに絞りました。法則1と2が特に重要です。わかりやすく解説するよう努めますので、どうぞ最後までお付き合いください。いかがでしょうか?悪い例では「なんらかの文字の集合体」という印象にしかなりません。法則1に従うだけで、何が言いたいかがイッパツでに残るようになったはずです。それから、目立たせる方法は他にもありますよね。アンダーラインを引いてみたり、太字にしてみたり、フォントを変えてみたり...。私が今書いた文章の中でも、赤色の部分は文字を太くしてあります。シンプルなデザインを念頭に、応用を利かせていきましょう。「4−1」のルールで段落をまとめるWEBライティングをするからには、行間と余白のバランスには、最大限の注意を払わねばなりません。見過ごしがちですが、とても重要なことです。私たちの仕事は、新聞や雑誌とは違い、いくらでも行間や余白を変えることができてしまいます。意識しなければ、いつの間にか心地良い領域からはみ出して、読者から見放されてしまいます。「4−1」のルールは、文字の塊と空白とのバランスを整えるための法則です。4行書いたら空白を1行作る、これだけです。行間と余白のバランスを最適化するには、豊富な経験や美的感覚を要しますが、そんなの難しすぎますよね。できるだけ単純化して、誰にでも実践できるようにしたものが「4-1」のルールなのです。このルールに反論する方もきっといらっしゃるでしょう。「スマホやタブレットだと1行あたりの文字数が違うのだから、このルールは役に立たないじゃないか」という否定的な意見です。確かに行間や余白は環境に左右されます。そもそも閲覧の仕方は読者にとって千差万別です。その事情を踏まえた上でも、だいたいの環境にとって心地良いバランスというのが、文章4行、空白1行のリズムであり、絶対のルールではないとお考えください。読ませるデザインには法則があったみなさま、こんにちは。サイトの運営やブログの更新は順調でしょうか?きっと皆様は、サイトをより多くの人々に見てもらえるようSEOを意識し、最後まで文章を読んでもらえるよう、日々工夫を重ねていらっしゃるのでしょうね。その助けになればと思い、ウェブデザインをするプロの目線から、文章を読ませるデザインの法則を説明いたします。WEBサイトやブログ作りにおいて「文章のデザイン」は「文章の内容」に勝ります。この記事で扱うのは、あくまでも、パッと見てわかる「絵」としてデザインであり、文章を体裁を整えるの法則です。プロ目線だからと言って、難しい専門用語は使いません。本質を突きつつ、すぐにマネのできる法則を4つだけに絞りました。法則1と2が特に重要です。わかりやすく解説するよう努めますので、どうぞ最後までお付き合いください。巨大な文字の塊が、ちょうど良い大きさに切り分けられました。私はこのルールを、トンカツのようなものだと考えています。お店でトンカツ定食を注文して、切られていないトンカツがそのまま提供されたとしたら、お客さんは困りますよね。美味しいトンカツを揚げたら(文章を書いたら)、食べやすい大きさに切る(行間と余白のバランスを取る)ところまでが私たちの仕事です。※補足1「3−1」でも「5−1」でも大丈夫この法則はあくまでも、最適化への目安です。「3行書いて、1行の空白」になっても「5行書いて1行の空白」になっても構いません。この記事の文章デザインも、「3-1」や「5−1」になっていますいよね。段落の途中で改行してはいけない段落の途中で改行すると、せっかく綺麗に整った塊がぐちゃぐちゃになってしまいます。悪い例みなさま、こんにちは。サイトの運営やブログの更新は順調でしょうか?きっと皆様は、サイトをより多くの人々に見てもらえるようSEOを意識し、最後まで文章を読んでもらえるよう、日々工夫を重ねていらっしゃるのでしょうね。その助けになればと思い、ウェブデザインをするプロの目線から、文章を読ませるデザインの法則を説明いたします。WEBサイトやブログ作りにおいて「文章のデザイン」は「文章の内容」に勝ります。この記事で扱うのは、あくまでも、パッと見てわかる「絵」としてデザインであり、文章を体裁を整えるの法則です。プロ目線だからと言って、難しい専門用語は使いません。本質を突きつつ、すぐにマネのできる法則を4つだけに絞りました。法則1と2が特に重要です。やすく解説するよう努めますので、どうぞ最後までお付き合いください。このように、文章の左端がバラバラになってしまうので、不揃いで散らかった印象になります。脳が文を塊で認識しようとしているのに、その邪魔をしてしまうわけですね。色の使い分けは、黒+3色まで強調したい部分は色で目立たせるべきですが、使っていい色は、黒を別として、3色までにすべきです。たくさんの色が使われていると、人の脳は混乱します。意識の上では色の使い分けを理解できていても、無意識では疲れて、サイトを見ているだけで不快に感じてしまいます。「いいえ、私の読んだ本にはカラフルにしろと書いてあったわ」とか「え?でもあの有名サイトは10色くらい使ってんじゃん」という反論があるかもしれません。確かに、わかりやすさやアート性を重視して色をたくさん使うことはあります。それでは無意識のうちに脳が疲れます。「読みやすさ」と「わかりやすさ」は別モノであり、優先すべきは「読みやすさ」です。あなたの美的センスやデザイン経験次第では、この法則をきっと乗り越えられるでしょう。カラフルなのにシンプルで、見やすく、わかりやすいサイトは確かにありますからね。そのように高度なスキルに頼らず、初心者から上級者まで一貫して使える法則は、やはり「色は3色まで」なのです。フォントは3種類までこれも色の使い分けを同じ理由ですね。使い過ぎると、フォントが使い分けられている意味がわからなくなるからです。いえ、ちゃんと頭を働かせれば、読者はあなたがどういう意図でフォントを変えているのかを理解してくれるかもしれません。それを防ぐために、使うフォントの種類はせいぜい3種類におさえておきましょう。読ませるデザインには法則があったみなさま、こんにちは。サイトの運営やブログの更新は順調でしょうか?きっと皆様は、サイトをより多くの人々に見てもらえるようSEOを意識し、最後まで文章を読んでもらえるよう、日々工夫を重ねていらっしゃるのでしょうね。その助けになればと思い、ウェブデザインをするプロの目線から、文章を読ませるデザインの法則を説明いたします。WEBサイトやブログ作りにおいて「文章のデザイン」は「文章の内容」に勝ります。この記事で扱うのは、あくまでも、パッと見てわかる「絵」としてデザインであり、文章を体裁を整えるの法則です。プロ目線だからと言って、難しい専門用語は使いません。本質を突きつつ、すぐにマネのできる法則を4つだけに絞りました。わかりやすく解説するよう努めますので、どうぞ最後までお付き合いください。色使い一つで、滅茶苦茶になってしまいました。こんなデザインではSEO上位を狙えるわけはないのですが、残念なことに、この手のミスを犯している人は案外たくさんいるものです。こんな酷い状態のデザインでも、今回紹介した4つ法則を活かせば生まれ変わります。読ませるデザインには法則があったみなさま、こんにちは。サイトの運営やブログの更新は順調でしょうか?きっと皆様は、サイトをより多くの人々に見てもらえるようSEOを意識し、最後まで文章を読んでもらえるよう、日々工夫を重ねていらっしゃるのでしょうね。その助けになればと思い、ウェブデザインをするプロの目線から、文章を読ませるデザインの法則を説明いたします。WEBサイトやブログ作りにおいて「文章のデザイン」は「文章の内容」に勝ります。この記事で扱うのは、あくまでも、パッと見てわかる「絵」としてデザインであり、文章を体裁を整えるの法則です。プロ目線だからと言って、難しい専門用語は使いません。本質を突きつつ、すぐにマネのできる法則を4つだけに絞りました。法則1と2が特に重要です。わかりやすく解説するよう努めますので、どうぞ最後までお付き合いください。まとめ読ませるデザインの法則、それは一言で言えば、シンプルで脳に優しいデザインとういことです。これら簡単な法則を守って執筆すれば、必ず見やすい文章をデザインすることができます。フォントは3種類までたったこれだけで大丈夫です。何も考えずとも、今すぐ誰にでも実践できるデザインです。あとは文章の内容を充実させつつ、デザインを洗練していけば、より上を目指せます。デザインの世界はたくさんのルールとその組み合わせがあり、とっても奥が深いのですが...あんまり言うと長くなりすぎますね。それはまた別の機会にお話ししましょう。それでは、良いWEBライフを!著者プロフィール地獄谷酸十郎フリーのWEBライター。心理学とITをベースに活動中です。WEBデザインこの記事が気に入ったらいいねしよう!最新記事をお届けします。ツイートシェアはてブGoogle+PocketfeedlyRECOMMENDこちらの記事も人気です。