かるみに

趣味とともに生きる

ブログで「読みやすい!」と思ってもらえる文章の書き方(レイアウト編)

ブログのレイアウトについて勉強中、どうもすーく(@sytry7)です

僕は色々な方のブログを読むのが好きなのですが、ときには「もったいない!」と感じるブログに出会うことがあるんです。

内容は面白いのに、文章がすごく読みにくいんです。接続詞や文のねじれなどのような文章技術ではなく、一目見たときのレイアウトがですね。例えば…変な位置で改行が挟まったり、改行が全く入れられていなかったり…。

内容が優れていれば文章のレイアウトにこだわらなくていい、それでも一目で読みやすそうだと感じてもらうこともは大切なはずです。

というわけで、僕が意識している文章の余白についてお話します。

 「読みやすそう」と感じてもらうことが大切

余白の使い方が、記事の第一印象を左右しちゃうんです。「初対面の人と会う時は見た目が大切」とよく言われます。文章の見た目も同じように重要なんですよね。

具体的に僕がもったいないと感じる文章レイアウトは2つあります。

1.文章と文章の間に余白がないレイアウト。

読めなくはないんですけど、画面内の情報が多いんですよね。なので読むときは気合を入れなきゃいけないんです。

f:id:trrun:20170203233557p:plain

2.余白が多すぎるレイアウト

余白が多すぎると、画面内の情報量が少なくなります。なので一目見たときに目的の情報があるか判断しずらいんです

f:id:trrun:20170204150034p:plain

適度な余白のあるレイアウト 

好みの問題かもしれませんが、適度な余白がある方が読みやすい!段落がハッキリしているので、視線が分散しないんですよね。

f:id:trrun:20170203233357p:plain

文章間のスペースは適当に設けちゃダメ!

文章の見た目を左右する余白ですが、感覚的に余白を作っちゃう人は少なくないんじゃないでしょうか。僕も昔の記事は適当に余白を設けていたので、今となっては振り返るのが恥ずかしいです( ´艸`)笑

しかし、余白のつけ方にはルールがあります。その原則は「ノンデザイナーズ・デザインブック」にて紹介されています。

近接の原則
関連する要素は空間的に近づけて、異なる要素は遠ざける

この原則で余白を設けると、見やすい文章が作れるようになります。

近接の原則(近づける)

文章を書くときに

こんな感じで

改行を多用していないでしょうか

近接の法則によると、関連する要素は近づけなければなりません。改行があると、読み手の脳は勝手に「異なる要素」だと誤解しちゃうんですよね~。

文章中の文も同じことが言えます。伝えたいことが同じなのに改行を挟んでしまうとあたかも異なるテーマについて話していると誤解しちゃうんですよね。

伝えたいことを強調したいとき、意図的に改行を重ねることはあるんですけど、頻繁に使うことは避けるべきです。

近接の原則(遠ざける)

今回、最初に紹介したこの文章。これは文章と文章の間にスペースがありません。なので、異なる意図の文章なのに、まるで1つの長い文章のように感じてしまいます。

f:id:trrun:20170203233557p:plain

これは、近接の原則のもう一つのルール「異なる要素は遠ざける」に反しちゃっているんです。読み手の脳は「この文章は同じ話題を話しているのか?異なる話題なのか?」と判別しなくてはいけません。

読み手の脳に負担を強いるので、「読みにくい」と感じさせてしまうんです。

文章を読みやすくするために大切なこと

まとめると、3つあります。

・文の間に余計なスペースを設けない
・文章を構成する「文」同士を離さない
・文章と文章の間には適切なスペースを設ける

 これらを意識すると、ある程度見た目の良い文章レイアウトになると思います。

↓このルールを基にしたCSSを作ってみました

↓おススメです