■整列とは？

情報整理の四つの要素のうちの１つ、「整列」について。
情報はバラバラに散らばっているよりも、
ある基準に沿って並んでいた方が見やすくなります。

これについては、特に説明しなくても感覚的に理解しやすいと思います。

特にホームページの場合は、元々がワープロの延長のため、
何もしないと自動的に全部右揃えに整列します。

そのため、雑誌やポスターなど、複雑なレイアウトを作る場合と違って、
整列の重要性をあまり意識することは無いと思います。

整列はパワーポイントのような
レイアウトの制約が何も無いソフトを使う時に意識されるルールです。

■わざと整列を崩す

逆にわざと整列から外すことで他のグループと差別化する方法もあります。
例えば、文章の始まりの位置を１文字かそれ以上右側にずらす「インデント」は、
「この部分は今までの本文とは少し違った種類の情報だ」という事を
明示的に示す時に使います。

こういった「ズラし」は、ページに活気を与えることができる反面、
あまり使いすぎると、見た目が散らかった印象になります。
使いどころは注意しなければいけません。

■小見出しを中央揃えにして親しみやすさＵＰ

レイアウトの基本は、本文も見出しも図版も全て右揃えです。
しかし、セールスレター型のような一段組みの販売ページをデザインする場合は、
本文は右揃えに対して、見出しは中央揃えにすることが多いです。

こうすることによって、文字が多くても読者に威圧感を与えずに済みます。

本文に合わせて見出しを右揃えにすると、
理知的でビジネスライクになりすぎてしまい、
見た目はスッキリしますが、親しみやすさは無くなります。

同じ理由で、本文は、行の途中の適当な所で改行を入れると、
読む人の心理的なプレッシャーを減らすことができます。

こういった手法は、従来の印刷媒体にはありませんでした。
まさにウェブならでは、独特の文字の組み方です。

図１　整列していて美しいが、威圧感があり、読むのに気合いがいる。

図２　整列を崩して威圧感が減った。気軽に文章を読み始められる。

情報整理の四つの要素のうちの１つ、「統一」についてお話します。
同じレベルの情報は１つの見せ方に統一しなければなりません。

例えば１度、小見出しのデザインを決めたら、
出てくる小見出しはすべて同じ書体、大きさ、色にする必要があります。

デザインがルールに沿っていないとページ内が混沌状態になり、
読者は何を読んでいるか判らなくなるため、ストレスを感じて読むのを止めてしまいます。

「最初に出てくる小見出しより次の小見出しの方がより強調したいから、
文字の大きさを大きくしよう」

などと、ルールを破ってはいけません。
気持ちは判りますが、１つでもルールを破るとページ内の秩序が全て崩れます。

特に小見出しは、それが小見出しと判断できなくなると、
文章の区切りが無くなり、だらだらと長い本文を読まされているような感覚になます。
これでは読んでいる人がとても疲れます。

さて、もちろんページ内の要素を統一するメリットには視覚的な美しさもあります。

例えばページのタイトル部分に使った写真やイラストを、
小見出しの行頭に小さく入れたりすると、ページに統一感を持たせることができます。

テーマカラーを１つ決めておき、ポイントごとにその色を配置するのも効果的です。

以上が統一が大切な理由ですが、ウェブサイトの場合、統一すべき要素は以下の通りです。
小見出しのレベルは大中小の３段階までにとどめておくのが良いでしょう。

もちろん原稿によって必要ない要素もあります。
必ずこれら全てが揃っている必要はありません。

逆に考えれば、原稿を作る際に、この要素に情報を落とし込むように意識することで、
整理された伝わりやすい原稿を作ることができると言えるかもしれません。

• タイトル
• リード
• 大メニュー
• 小メニュー
• 小見出し
• 小見出し２
• 小見出し３
• 本文
• 本文強調１
• 本文強調２
• 囲み
• リスト（箇条書き）
• 表
• 図版タイトル
• キャプション
• 注釈
• フッターメニュー
• コピーライト

デザインの要素を増やせば増やす程、雑然としますが、
その分、ページに活気や勢いが出ます。

そのため本文の強調はもっと何種類も使う場合もあります。
しかし、その場合は逆に小見出しのレベルを１つにしておいた方が無難です。

本文の強調文字を何種類も作った上に、小見出しも何種類も作ってしまうと、
本文なのか見出しなのかが、もはや完全に判断不可能となります。

統一感の無い混沌としたが文章が延々と続く販売ページでは、
よほど魅力的な文章を書かなくては成功は難しいでしょう。

情報のレベルを整理して、ルールに則ってデザインしたページと、
何も考えずに感情に任せて作ったページ。

あなたは、どちらが情報を正しく伝えられると思いますか？

情報整理の四つの要素のうちの１つ、コントラストについてお話します。デザインにコントラストを付ける目的は２つです。

１つは視覚的な面白さを演出するためです。ページが面白そうに見えると読んでもらえる可能性が上がります。

２つ目は情報の構造をはっきりと示すためです。「これは本文だ」「これは見出しだ」とはっきりわかるようにすることで、言いたいことが読者に理解されやすくなります。

コントラストをつける時に使える代表的な表現方法は以下の通りです。実際にはこれらを組み合わせてページに変化を付けて行きます。

コントラスト無し

大きさ

色

太さ

経線

囲み

ベタ白抜き

書体

余白

角度

飾り

コントラストが大きいほど元気で活気あふれるページになりますが、その分、品が無くなります。逆に差を小さくすると上品ですがインパクトが無くなり言いたい事も伝わり辛くなります。どれくらいコントラストをつけるかは自分の商品のイメージによって調節する必要があります。

この例ではそれぞれの場所にどのテクニックが使われているか判りますか？　また、上品さを捨てて、よりインパクトや判りやすさを優先する場合は、どこを変更すると効果的だと思いますか？

（2009.8.5　追記）

アミを忘れていました。

アミ

※色の濃淡の事をデザイン用語（印刷用語？）でアミ（網）と言います。印刷では色の濃淡をアミ（点、ドット）の大きさで作ることに由来しています。 上の図のように文字の下に薄い色を置く事を「アミを敷く」と言ったりします。グレーの場合はスミアミ、その他の色の場合は色アミです。

デザインは美的センスの良い人がやる仕事だと思われていますが、実は売れるデザインにセンスは必要ありません。国語や算数の勉強と同じようにルールを暗記すれば誰でも一流の仕事ができるようになります。「売れるデザイナー養成講座」は、まったく新しい視点でデザインを読み解く、世界一身も蓋もない現場第一主義のデザイン講座です。

※このブログでは、後に何らかの形（おそらくE-BOOK）で公開する原稿の下書きを、できた順に適当にアップしています。 そのため順番がでたらめで読みづらいですが、興味を持たれた方は、後ほど公開される完成版をお待ちください。