「ノンデザイナーズ・デザインブック」を購入して、要約を書き残しながら読み進めています。
４つの基本原則
- コントラスト（Contrast）
ページ上の要素同士が単に「類似」するのを避けるということ。
もし要素（書体、色、サイズ、線の太さ、形、空きなど）が「同一」でないなら、はっきり異ならせるということ。 - 反復（Repetition）
デザインの視覚的要素を作品全体をとおして繰り返すこと。
フォント、サイズ、画像のコンセプトなどを反復させることができます。
反復は、組織化を促進し、一体性を強化する。 - 整列（Alignment）
ページ上では、すべてを意図的に配置しなければならない。あらゆる要素が、ほかの要素と視覚的な関連を持つ必要がある。 - 近接（Proximijy）
互いに関連する項目は、近づけてグループ化しなければならない。いくつかの項目が互いに近接しているとき、それらは複数の個別のユニットとしてではなく、１個の視覚的ユニットとして認識される。近接は、情報の組織化に役立ち、混乱を減らし、明確な構造を読者に提示する。
近接
近接の原則とは、関連する項目をまとめてグループ化するということ。基本的な目的は組織化。
関連する項目を物理的に近づければ、それらは、無関係な断片の群ではなく、１個のまとまったグループに見えるようになる。
近接とは、なんでも近ければいいという意味ではない。「知覚的」に関連する要素、なにか情報のやりとりがあるものは、「視覚的」いも関連させるという意味。
視線の流れを意識する。どこから見始めるか、どういう道筋をたどるか、どこで見終わるか、読み終わったあとどこに目がいくか、全体の論理的な流れが目で終えるようになっている必要がある。
近接は情報伝達の速度を飛躍的に向上させる。
避けること
- 要素間に均等の空白を作らないこと。
- 見出し、小見出し、キャプション、画像などが、本文のどの部分に関連するかを、読者が一瞬でも迷わないようにすること。要素間の関連を、近接によって作り出すこと。
- 異なる性質の要素間に、関連を作らないこと。関連しない項目は、離して配置すること。
- ただ空いているという理由だけで、隅や中央に何かを貼り付けないこと。
整列
整列の原則というのは、ページ上のすべてのものを意識的に配置しなければならないということ。ページ上のすべての項目が、なにかほかのものと視覚的に関連していなければならない。
中央揃えは、明確に意図的な場合に最大の効果を発揮する。
ページ上の文字揃えは１種類だけにする。つまりすべてのテキストを、左揃えか、右揃えか、中央揃えの、どれか一つにする。（とりあえず中央揃えにする癖をやめる）
一体性は、デザインにおける重要なコンセプトの一つ。一体化し、結び付け、相互に関連させるには、個々の要素を結びつける視覚的な綱が必要になる。
整列はデザインに信頼感を与える。
反復
「反復の原則」とは、デザイン上の何かの特徴を作品全体を通して繰り返すということ。
反復の基本的な目的は、一体化と視覚的なおもしろさを加えること。
反復は「一貫性」と考えることもできる。断片をまとめて一体性を与える。
プロジェクトにすでに組み込んでいる反復を取り上げて、それをもっと強くダイナミックにする。そうすれば、視覚的な組織構造と一貫性が、より明白になることで、より強化される。
反復は、情報の組織化に役立つ。反復的な要素は、洗練された継続性を確立し、全体をまとめあげる。
要素をうるさく強迫的に感じるほどには反復させないように、コントラストの価値を意識する。
反復は暗黙のルールを相手に伝える。
コントラスト
コントラストの原則とは、読者の目をページに引き込むために、作品のさまざまな要素にコントラストを付ける、ということ。２つの項目が正確に同じでないのなら、本当に異ならせる。２つの要素が異なっているように見えて、本当には異なっていない場合には、「コントラスト」ではなく「衝突」が発生する。
コントラストは変化量の落差。
コントラストは目を引くために役立つだけでなく、情報を組織化し、階層構造を明らかにし、ページ上の道案内となり、焦点を作り出す。
受け取る側に伝えなければならない情報をしっかり把握し、それらに優先順位をつける。すべてが並列で強弱が見えない情報は、デザインをした人が思っている以上に見栄えのしないものになる。
カラー
補色（complementary color）
カラーホイールで真向かいの位置にある色同士は、補色の関係にある。まったく正反対の色同士なので、どちらか一方をメイン・カラーにしてもう一方をアクセントにした場合に、最大の効果を発揮することがよくある。
- Blue & orange
- Red & green
- Yellow & purple
- Lime green & violet
- Bluish-purple & yelllow-orange
- Aqua & red-orange
トライアド（triad）
- プライマリー・トライアド（赤、黄、青）（Red、yellow、blue）
- セコンダリー・トライアド（Orange、green、purple）（Red-orange、lime-green、bluish-purple）（Yellow-orange、aqua、violet）
- スプリット・コンプリメント・トライアド…１色を選びその真向かいの補色の両隣の色を使用する（Yellow、violet、bluishi-purple）（Green、red-orange、violet）など。
類似色
ホイール上の隣り合う色で構成。２色、３色を組み合わせても、共通する色を基調に持っているので、調和のとれた組み合わせができる。（Aqua、green、lime-green）（yellow-orange、orange、red-orange）など。
シェードとチント
一般的には「色相」と呼ばれる「ヒュー（純色）」を基準として、そこに黒を加えると「シェード（shade）」になり、白を加えると「チント（tint）」になる。色の明るさ（明度）が低くなれば黒っぽく、高くなれば白っぽくなる。
トーン
トーンとは、ある色のヒューの濃淡の特定の質を示す言葉。
トーンが類似すると、少し濁った感じがする。コントラストが弱すぎる。
よく似たトーンを持つヒューを使う必要があるデザインでは、それらをくっ付けないように、また、量を等しくしないようにする。
暖色と寒色
色は、暖色系（赤か黄色を含むもの）か寒色系（青を含むもの）のどちらかに属する傾向を持つ。グレーやタン（淡い茶色）のような色は、赤や黄色を加えて「暖める」ことができる。逆にいくつかの色は、さまざまな青を加えて冷やすことができる。
寒色は背景に「引っ込む」し、暖色は前面に「出る」。暖色でインパクトを付けるには、ごく少量で済む。だから、暖色と寒色を組み合わせるときは、一般的に暖色のほうを少なめにする。
どう色を選んだらいいか（理論的なアプローチ）
- 季節性のあるプロジェクトに取り組むときは、季節を連想させる類似色を使ってみる。夏には燃えるような赤と黄、冬には冷たい青、秋にはオレンジと茶色のシェード、春には明るい緑、といった具合に。
- 決められたカンパニー・カラーで作業する場合は、そこから始めて、そのチントとシェードを使ってみる。特定の色を含むロゴがある場合は、その色のスプリット・コンプリメントを使うとよい。
- 写真などの画像が入るプロジェクトなら、その写真の色をどれか抜き出して、それを基準にした一定の範囲の色を選ぶ。作品を静かで落ち着いたものにしたければ類似色を使い、何か視覚的な刺激が欲しければ、補色を使うのがよい。
- 定期的に繰り返されるプロジェクトの仕事をしているなら、一貫して参照できるようなカラーパレットを自分で作るとよい。
CMYK 対 RGB：印刷 対 画面
印刷されるプロジェクトでは、CMYKを使う。画面で閲覧されるものには、RGBを使う。
CMYKとRGBの間でファイル変換を繰り返すと、少しずつデータが失われてしまうので、RGBで画像の処理をしておいて、最後にCMYKに変換するのがよい。
日本語によるデザインサンプルのまとめ
アルファベットを基本とする言語と、漢字と仮名を基本とする日本語の大きな違いは、縦書きの有無。
横方向に読むことが決まっているアルファベットは、横に読み進めやすいよう、フォントのデザイン自体が文字を配置した時にそれが一本の線に見えるように設計されている。そのため、ある程度行間が狭くなったとしても、読み進めやすさを失うことは少ない。
日本語の場合は縦にも横にも読み進めることができるため、行間をアルファベットでデザインした場合と同程度の設定にしてしまうと、窮屈で読みづらいものになってしまう。
これを解消するためには、行間をアルファベットのものよりも若干広く設定する必要がある（アルファベットの行間を１とした場合、日本語での行間はその1.2倍程度に設定）。
コメント