エアロプレインのTOPtips
センス不要!文章を読みやすくするデザイン4つの鉄則

センス不要!文章を読みやすくするデザイン4つの鉄則

Posted by のりお / エアロ
2008年04月16日 at 20:30

このエントリをはてなブックマークに登録 この記事をクリップ! Yahoo!ブックマークに登録 BuzzurlにブックマークBuzzurlにブックマーク FC2ブックマーク

タイトル画像080416

誰かに読んでもらうために作成する文書(テキスト)の数々。それは企画書だったり、報告書だったり、はたまたチラシだったりブログだったり。そんな文書をセンスが全くなくても読みやすくする4つのレイアウト・装飾法が…


→→とりあえずブックマークする このエントリをはてなブックマークに登録 newsing it!  あとで読む

覚えるべき鉄則は4つだけ

ここで覚えてほしい鉄則はたった4つ。そう、

  • 近接
  • 整列
  • 反復
  • コントラスト

この4つだけです!ちなみにこれから紹介する内容は『ノンデザイナーズ・デザインブック』からの受け売りです。この本、残念ながら各所で売り切れちゃっているみたいですね…。

1.近接

近接の原則というのは、関連する項目をまとめてグループ化するということです。関連する項目を空間的に近づければ、それらは関係のない断片の群ではなく、一つのまとまったグループに見えるようになります

近接では、要素ごとにテキストのかたまり(ブロック)を作ることが重要となります。名刺なんかを見ると、名前のブロックや住所のブロックが分かれていることが良くわかります。

design-tips1

たとえばこの例では、いくつかのJリーグのチームの固まりを、近接によって地域ごとのグループにわけました。やったことと言えば、スペースを挟んだくらいです。それだけでも良いのです。

「こんなの当たり前じゃん!」と思うかもしれませんが、『ノンデザイナーズ・デザインブック』でも「認識することでコントロールできるようになる」と書かれています。「それが『近接』という要素である」と意識することが大事なのです。

2.整列

整列の原則というのは、ページ上のすべてのものを意識的に配置しなければならない、ということです。すべての項目がページ上のなにかほかのものと視覚的に関連していなければなりません。

(中略)

ページ上にたまたま空きができたからなにかを置く、ということはやめなければなりません。

整列では、近接によって誕生したブロックを、より強力にすることができます。また、ブロック同士の関連性も整列により発生させることができます。本書によれば、特に

  • 空白を恐れない
  • 中央揃えから卒業する

ということが繰り返し説かれています。

design-tips2

こちらの例を見てください。左側は中央揃え、右側は左揃え(ややこしい)です。左揃えでは、テキストをそろえている透明な線が見えてきませんか?これこそ整列の力であり、離れているブロックをグループ化して結びつける効果があるとのことです。

また、中央揃えは「たまたま中央にそろったのか」「わざと中央に揃えたのか」が分かりにくいため、やはり使うべきではないと本書では述べられています。さらに「複数の揃え方が存在するのはNG」ということも語られています。左揃えならそれだけでレイアウトするのがポイントのようです。

そうそう、優秀なデザイナーほど「空白」を恐れない、なんてことも書かれていましたよ。詰め込む必要はないのです。

3.反復

反復とは「一貫性」と考えることもできます。たとえば、8ページのニュースレターがあれば、そこにはいくつかの要素が反復して使われています。それにより8枚のページが同じニュースレターの一部であることが明確になるのです。

反復については、皆さんのブログやこのサイトをご覧になっていただければ、すぐに気がつくことができるかと思います。一貫性を持たせることで、ある種のルールを共有することができます。ルールが共有できれば、読者の視点が彷徨うこともなくなるでしょう。

moo-flickr4

ちなみに先日のエントリでも触れましたが、最初の行と最後の行をボールドにすることで、読者の視点をそのボールドの内側に集中させることができるようです。このテクニックは常に意識しておきたいですね。

4.コントラスト

コントラストは2つの要素が異なる場合に生れます。2つの要素が一件異なっているように見えて、実は異なっていない場合には、コントラストではなく衝突が生じてしまいます。

(中略)

2つの項目が正確に同じでないのなら、はっきりと異ならせるということです。

コントラストは主に「反復」とセットで使われる場合が多いようです。つまりこのページで言えば「見出し」の部分です。見出しに強烈なコントラストを与えることで、文章の固まりを明示的にすることができています。

デザイン的なコントラストを与えるのはなかなか難しいので、まずは見出しやタイトルなど、おもな要素にコントラストを与えることからはじめてみるのはどうでしょうか。

関連書籍

このエントリはこちらの本を参考に作成しました。もしこの本を見かけることがあったなら…速攻で買うことをオススメします。

ノンデザイナーズ・デザインブック Second Edition
ロビン・ウィリアムズ
毎日コミュニケーションズ
売り上げランキング: 12465
おすすめ度の平均: 4.5
3 全ては表紙に・・・
5 「読んでおくべき」本
5 非常に役に立ちました!
5 「そんなのあたりまえじゃん」の量が質に転化する
4 当たり前のことが書いてある本はあまりないから

はやく改訂版か増刷されると嬉しいのになぁ。

RSSリーダーへの登録はこちらから

Subscribe with livedoor Reader  はてなRSSに追加  My Yahoo!に追加
Add to Google 

関連エントリー

(スポンサードリンク)

前後のエントリのご紹介&TOPへのリンク

↑:エアロプレインのTOPへ戻る

次:【日本代表候補】高木和道を、どうぞよろしく

われらが清水エスパルスの頼れるキャプテン、高木和道がついに代表候補に選出されました!なんて嬉しいんだろう!和道のサッカー人生はかなりユニークなうえ、紆余曲折あっ...

戻:【レゴ】最近のレゴはとても○○い!

小学生の頃、アホのようにはまっていたものが3つありました。1つ目はビックリマン。今考えれば罰あたりですが、途中からお菓子は捨てていましたねえ。2つ目はBB戦士。...

スポンサードリンク

ブックマークツール  newsing it! このエントリをはてなブックマークに登録

↑:エアロプレインのTOPへ戻る

次:【日本代表候補】高木和道を、どうぞよろしく

われらが清水エスパルスの頼れるキャプテン、高木和道がついに代表候補に選出されました!なんて嬉しいんだろう!和道のサッカー人生はかなりユニークなうえ、紆余曲折あっ...

戻:【レゴ】最近のレゴはとても○○い!

小学生の頃、アホのようにはまっていたものが3つありました。1つ目はビックリマン。今考えれば罰あたりですが、途中からお菓子は捨てていましたねえ。2つ目はBB戦士。...