誰かに見てもらうための、簡単なデザイン

長い文章を読みやすく整えるために使いたい「デザインの4原則」

文章を書くことについての記事2回め。
前回は文章を書く(構成する)ことについて書いたのですが、今回は文章の整え方についてです。
文章が出来たはいいけれど、いざ広告やホームページなどに載せた時、ただ文章だけをつらつら書いていると「文字多っ!」とか思われてしまい、読む気をなくされてしまうかもしれません…。
そんなのひどずぎるよ…(´;ω;`)ブワッ!

そうならないために、今回は、伝えたい内容がちゃんと伝わるような文章のレイアウトについて考えてみました。
文章を読みやすくするためのレイアウト、と聞いて一番に思いついたのが「デザインの4原則」
これを中心に書いていこうと思います。

17_4forsentence_02

デザインの4原則とは?

デザイン業界でたまに聞きますが、お馴染みの言葉、ということもありません。
「ノンデザイナーズ・デザインブック」という本に載っている、4つの原則です。
この原則を軸にデザインすると、デザインを知らない人でも、ある程度整ったデザインができるそうです。

この本について、詳しくはこちらのブログで解説されています。

デザインを勉強したことがない人でもデザインできるようになるかもしれない4つの基本原則

デザインの4原則とは、
「近接」「整列」「コントラスト」「反復」のことです。
これを文章のレイアウトに当てはめて見ていきます。

段落分けで使いたい「近接」

近接は、関連のあるものはくっつけて、そうでないものは離すということです。
段落分けする時に、関連のある話題はくっつけて、そうでないものは段落を分けるなどして配置すると見やすくなります。

17_4forsentence_06

この文ですが、中央に「これは6月の話」とあるのですが、これだと蛍を見に行った話が6月なのか、七夕の話が6月なのかよく分かりません。
6月に七夕はないので、常識的に考えれば上部の蛍の話が6月の話だということは分かるのですが、あまり読み手に優しくないので、ちょっと整えることにします。

17_4forsentence_09

「6月の話」の下を一行あけてみました。これで上部の文章は1かたまりになり、それが6月の話だということが分かります。
このように、時間や場所、話題の対象などが同じ文章は、見た目にも分かりやすいように「かたまり(グループ)」にしてしまうと、読んでいる側に「同じ時間や場所、ネタで展開されている」と思ってもらうことができるので、内容が伝わりやすくなります。

また、更に読みやすくするには、

17_4forsentence_11

同じかたまりの中でも、ちょっと内容が変わってくるところは改行を入れると読みやすくなります。
文字がびっちり並んだ小説よりも、一文ごとに改行されている詩集のほうが、見た目にも読みやすそうな感じがします。そんな感覚ですかね。小説と詩集では、文字の多さが違うんですけどね…(;´∀`)。

改行する場所の目安なのですが、これは感覚的な部分があるんですが、「一文にまとめられるかどうか」がキーポイントです。

文章の後半「空を見上げると星が沢山きらめいていました。」に注目すると、その前にある「今年の七夕は晴れでしたね。」と繋げて「今年の七夕は晴れで、空を見上げると星が沢山きらめいていました。」とまとめられます。
しかし、後の部分の「短冊にお願いごとをしました」とは繋げられません。というか、意味が変わります。「空を見上げると星が沢山きらめいていたので、短冊にお願いごとをしました。」と繋げると、「晴れ」だったから「星がきらめいて」いたのではなく、「星がきらめいて」いたから「短冊に願い事をした」という風に、係る言葉が変わってしまいます。こうなると意味も変わりますね。意図した意味にはならないかもしれません。

これが改行を入れる時の1つの考え方です。意味や伝えたいことの区切りで改行すると良いと思います。
しかし、スペースの都合で改行が沢山入れられない…など、文章を書くメディアによって制約があったり、意図的に改行しない場合もありますので、あくまで絶対ではありません。
ただ、改行すると余白が多くできます。文章が詰まっているより、適度に余白がある方が文章は見やすくなります。

このように、近接は、内容が同じ部分を1かたまりにまとめ、違う部分は余白を入れて離す。こういう使い方をすることで、文章を見やすくすることができます。

全体を整える「整列」

これは簡単です!いわば中央揃え、左揃え、右揃えをきっちりしようね、ということです。

17_4forsentence_13

この例文は以前から井川が好きな私の恋文です。最近調子がいいようなので、思い切って書いちゃいました☆
井川に恋をしてしまったことが一番みんなに伝えたいことです。なのでその部分だけ目立つように中央揃えにしました。
…ってこんなレイアウトは言語道断です。アカン。アカン。かえってまとまりがなくなっています。

17_4forsentence_15

これで十分です。全部左に揃えてみました。
整列させることは難しいことではありません。左なら左、同じラインに沿って並べるだけです。
スマホのアプリアイコンなんかも綺麗に並んでいますよね。そういう風に、行の先頭や間隔に一定の基準を設けて並べていけばできます。整列したものは綺麗に見えます(*^_^*)
ちなみに、ビジネス文書などは左揃えや中央揃えが入り交じっていたりしていますが、一定のルールに沿ってレイアウトされているので、特に見にくいことがない、という事例も存在します。
まぁ、基準を決めてそれに沿って揃えたらいいよ、ってことですね。

ビジネス文書のレイアウトとはこのような感じです。ちゃんと決められたルールで並べられていますねー。
書き方別・ビジネス文書のフォーマットとバリエーション|すぐに役立つビジネス文書実践講座|ダイヤモンド・オンライン

どうでもいいですが、この例文…冷静に読んだらちょっとイラッとするな…。

変化をつける「コントラスト」

いわゆる、見出しや大事な部分を分かりやすくするために、文字を大きくしたり色を変えたりして他と差をつける、ということです。ホームページだったら文章中にあるリンク文字なども対象ですね。
普通の文章と違わせることで、目にも留まりやすく、また何が重要かを視覚的に伝えることができます。
これも分かりやすい表現だと思うので、きっと皆さんやってらっしゃるのでわ…?と思います。パワーポイントなどでプレゼン資料を作る時によく出てきます。

17_4forsentence_17

そのまんま書くとこんな感じです。コントラストをつけると…

17_4forsentence_19

見出し(表題)の文字を大きくして、色を変えてみました。
見出しが一目で「見出しだ!」と分かるようになりましたし、以下の文が何について書いてあるかがパッと見で想像がつきます。
見出しをつける、そして大きく目立たせることによって、文章の区切り(かたまり)が分かりますし、またリズムがつきます。
「見出し→本文→見出し→本文」と、一定のリズムをつけて読ませていくことで、読み手側はテンポよく読んでいけます。
小説などになるとちょっと難しいのですが、レポートや論文だと、こうやって視覚的・感覚的に大事な部分を分かるようにすることで伝わりやすくなります。

また、本文中の「ジャガイモ」部分の色を変えて、アンダーラインをひいてみました。これで「コロッケ作りにはジャガイモが重要」という印象が与えられます。どんな例文…。
本文中の大事な部分を目立たせて、言いたいことを強調すると、インパクトもあって覚えてもらいやすいですね。
こんな感じでコントラストをつけていきます。

コントラストは、色や文字の大きさを変えるだけでなく、フォントを変えたり、線を引いたり、画像をつけたりなどという方法もとられます。本文とはっきりと違うということが分かれば、大きさなどはバランスを見て調整するといいんじゃないかなぁ…と思います。

統一感を出すための「反復」

先に紹介した3つの原則と、少し毛色がちがうのですが、立派な1つの要素である「反復」。
これは、1つのページの中で同じデザインを繰り返し使って統一性を出すということです。
例えば、小見出しの色とフォントサイズを揃える、とか、本文は一定の幅にする、とか。
「整列」の時に「基準を決めて、それに沿って並べる」と書いたのですが、それと同じようなもので、きちんと基準(ルール)を決めて書いていけば、自然に反復は出来るのではないかと思います。
きっと無意識にやっている時もあるはず…。

17_4forsentence_23

…ちょっと極端なんですが…こういうことだろうか…。
ガチの文章から少し外れてしまったのですが、パワーポイントなどで作る企画書?提案書?みたいなのを想定して作りました。食品メーカーが、居酒屋に新しいカクテルとその商材を提案するという、思いつきのコンセプトで作っています。
新商品は「スイカジェリー」。それを分かりやすくするために赤色で説明文を囲って分かりやすくしたり、点線で装飾したり、カラフルなカクテルなので、にぎやかさを出すために色んな色やフォントを使ってみました。
が、なんだか落ち着きがないような…気がします…。

17_4forsentence_26

ちょっと直してみました。
吹き出しをベースにした枠を全体的に使って文章を入れていきました。それぞれの見出しの色も統一しています。
商品説明のもう一つの見出し、英語の文字列は、吹き出しの矢印(?)近くに全て配置しました。またフォントも揃えました。
色数も抑え、説明文の吹き出しは同じ色にすることによって統一感を出しました。

どっちが好きか…というのは好みがあるかもしれませんが、ある程度色やフォント、配置が統一されている方が見やすく、また、同じ表現が使われている箇所は仲間であるという印象を与えます。
新商品の「スイカジェリー」は、説明文の文字の色と大きさを変えてみました。これは「反復」ではなく「コントラスト」の手法になりますね。

このように「反復」を使ってデザインに統一感を出し、目立たせたいところは「コントラスト」を使って変化をつけていく、という合わせ技を使うと見やすいデザインが出来上がります。
ちょっとよく分からない…という時は、まず「反復」を中心にデザインをして統一感を出し、その後「コントラスト」を使って部分的に変化を加えていく…というやり方がやりやすいんじゃないかなぁと思ったりします。

ちなみに長い文章を書く時は、こんな風に写真を使いながら文字を入れていくと、文章だけのものより見やすくなりますし、読んでもらいやすいです。マンガみたいな感じですかね。これは4原則からは外れちゃうんですが、画像を入れるというのも文章を読みやすくするための手法です。

行間と視界(視線)を考える

デザインの4原則をについては以上なのですが、長い文章を読みやすくするためにもう一つ考えたいのが、行間と視界。

行間

長い文章は、行間をあけると、ぎゅっと詰まった感じがせず、読みやすくなります。

17_4forsentence_29

こんな感じです。ぱっと見でも、Example2の方が見やすい感じがすると思います。短い文章ならそこまで気にする必要はないのですが、長い文章だと、行間をあけてゆとりのある見た目にした方が読んでいきやすいです。
行間をあけることで一文が見やすくなり、自分がどこを読んでいるか分かりやすくなり、また圧迫感がないですねー。

視界(視線)

これは「ぱっと見でどの範囲までが自分の目に入ってくるか」を考える、ということです。
横に長く文章を書くと、視界に入りきらず首を振って読んでいかないといけないかもしれない…そんなことがないように、見るメディア(紙のサイズとか画面サイズとか)のことも考えて配置していきたいなぁ、という話です。

17_4forsentence_32

スマートフォンの画面やハガキくらいの大きさなら、その幅いっぱいに文章を書いても読みにくいということはありません。視界に収まるので、パッと見で文章が読めますが、パソコンや新聞紙などは、その幅いっぱいに文字を並べられると、首を振って読まないといけないかもしれませんし、一行読み終えた後、次の行にいく時に、視線の移動距離が長いために、次の行の先頭が見つけにくいです…。
首を振るほど長く文章を配置することはないかもしれませんが、視線の移動距離が長いと、読む時に疲れてしまいますし、どこを読んでいるか見失ってしまう原因になります。

17_4forsentence_36

かといって本文の幅を短くしすぎてもダメです。一目で視界に入ってくるものの、改行が多すぎて、これはこれで読み手になんだかせわしない感じを与えてしまいます…。数文字読んだら改行、とか…見た目もあまり良くないですね…。

このように、実際視界に入る大きさ、視線の移動距離も考えて文章の幅を決めると、読んでもらいやすくなります。
数値的な基準もあるようですが、まずは自分が読んでみてどれくらいが良いか、感覚で覚えるとやりやすいのではないかなぁと言うのは、感覚でデザインしがちな私の意見です。

基本的なことですが、このようなことを気をつけて整形していくだけでも、文章は読んでもらいやすく、また伝わりやすくなります。これらの読みやすくする要素は、単品で使うのではなく、組み合わせることで相乗効果が発揮されるので、是非組み合わせて使ってみて下さい(・∀・)☆

前回に引き続き…私みたいに長々と文章を書いている人の話が参考になるのか…ならないのか…説得力があるのか…ないのか…よく分かりません…。

それでは!Have a nice design!