ノンデザイナーズ・デザインブック

今日では、ますます多くのものが、印刷出版されるようになってきており、広告やパンフレットや書籍の発行者はみな、それらが人々に読まれることを期待している。発行者は重要なことが明確に提示されていることを欲する。

読者はなおさらそうである。

読者は読みづらいものを読もうとしない。しかし明確でうまくアレンジされたようにみえるものは喜ぶ。理解するという作業が楽になるからである。

それゆえに、重要な部分は突出すべきであり、重要でない部分は従属させられるべきである。現在タイポグラフィの技術もまた。われわれの時代のスピードに適応しなければならない。今日ではレターヘッドの制作のような仕事に、19世紀ですら割けた程度の時間さえ費やすことはできないのだ。

 

知は力なり

たいていの人は、まずいデザインのページを見て、気に入らないという事はできますが、それを直す方法はわからないもの。

4つの基本コンセプトが大事。

 

良いデザインは1-2-3と同じように簡単です。

1.原則を学ぶ

2.原則を利用していないときに、そのことに気づく。言葉にして考える。問題の名前を言う

3.原則を適用する

 

【4つの基本原則】

互いに関連しているということを覚えておいてください。どれか一つの原則しか使わないという事は滅多にない。

①コントラスト(Contrast)

コントラストの背景にある考え方は、ページ上の要素同士が単に「類似」するのを避けるという事です。もし要素(書体、色、サイズ、線の太さ、形、空きなど)が「同一」でないなら、はっきり異ならせるという事です。コントラストは、ページ上で視覚を引き付ける最も重要な要因になることがよくあります。つまり読者をまず読む気にさせるという働きをするのです。また情報をより明確に伝える役割もします。

②反復(Repetition)

デザインの視覚的要素を作品全体を通して繰り返すことです。色、形、テクスチャー、位置関係、線の太さ、フォント、サイズ、画像のコンセプトなどを反復させることができます。反復は、組織化を促進し、一体性を強化します。

③整列(Alignment)

ページ上では、全てを意図的に配置しなければなりません。あらゆる要素が、他の要素と視覚的な関連を持つ必要があります。整列はすっきりと洗練された見え方を生み出します。

④近接(Proximity)

互いに関連する項目は近づけてグループ化しなければなりません。いくつかの項目が互いに近接しているとき、それらは複数の個別のユニットとしてではなく、1個の視覚的ユニットとして認識されます。近接は情報の組織化に役立ち、混乱を減らし、明確な構造を読者に掲示します。

 

近接

初心者がデザインした作品には、語句や絵柄があちこちにばらまかれ、四隅を埋め、空白が一切できないように多量の空間を占める傾向があります。

どうやら空白に対する恐怖が存在するようです。しかし、デザインの部品がばらまかれると、そのページは無秩序に見えるようになり、読者が一瞬で情報を理解することができなくなる可能性があります。

近接の原理とは、関連する項目をまとめてグループ化するという事です。関連する項目を物理的に近づければ、それらは、無関係な断片の群ではなく、1個のまとまったグループに見えるようになります。

関連しない情報同士は近づけてはいけません。近接は、そのページの構造と内容の視覚的な手掛かりを、読者に瞬間的に提供する物なのです。

いくつかの項目が近接しているとき、それらは複数の個別のユニットではなく、1個の視覚的ユニットになります。人生と同じで、近接は関係があることを意味するのです

類似の要素をグループ化して1個のユニットにするだけで、次のような効果が即座に生まれます。ページがより組織化されます。

どこから読み始めるかが明確になり、全部読んだことがわかるようになります。そして自動的に「空白」(文字の周囲の空間)もより組織化されます。

近接という単純なコンセプトを当てはめただけで、この名刺は知覚的にも視覚的にも組織化されました。それにより、情報をもっとはっきりと伝えるようになったのです。

近接の役割は、目立たないかもしれませんが、重要。

要素がそれが属する要素の近くにあるか、常に確認しましょう。要素に不適切な関連性をもたせないように気を付けましょう。

関連する項目を近接させてグループ化する際には、文字や絵のサイズ、線の太さ、配置など、何かを変更する必要があるのが普通です。本文はかならずしも12ポイントにする必要はありません。

何を強調すべきか、情報をどのように組織化すべきかは、あらかじめ分かっているわけですから、あとは、あなたのソフトウェアと信念を使って、それを実現するだけです。

単に関連する項目をグループ化してユニットにして、ユニット間に適切なスペースを入れるだけで、情報が理解しやすくなりました。

近接とは、なんでも近ければいいという意味ではありません。知覚的に関連する要素、なにか情報のやり取りがあるものは、視覚的にも関連されるという意味です。そうでない個別の要素や要素のグループは、近接させてはいけません。

近いことや、近くないことは、関係を示す。

まずは情報を知覚的にグループ化する事。(頭の中か紙にスケッチして)

つぎにテキストをページ上で物理的にグループ化する

空間配置は関連性を示します。

 

使用するソフトウェアで「段落の前後のスペース」を設定する方法を知ることが重要です。

リスト項目の行間を詰めて、互いにもっと近づける一方で、太字の見出しの上の空きをさらにひろげること。

 

四隅の形を、丸から少し丸めただけの形でよりすっきりして力強い印象を与える。

 

 

テキスト量が多い場合は、全部大文字にすると非常に読みづらくなるので、それは絶対に避けるべきです。それと活字のサイズを2ポイントだけ小さくしました。この2つの処置によって、使える余地がぐっと広がったので、要素の間により多くの空きを入れることが可能になった。

 

それぞれのセクションをインデントしてみる。そうしてできた空白が、この2つのグループをさらに引き離しながらも

それらが類似性を持つグループであることを明確に伝えています。

近接の原則は、空きと、それを情報伝達に役立てることに集中するのに役立ちます。

近接の原則だけが、デザイン・プロジェクトの唯一の正解であることは稀です。ほかの3つの原則は、デザインすることに本質的に含まれているので、通常は4つの原則がすべて使われているはずです。しかし、適用は1つずつ行います。

まず最初は近接の原則です。

 

課題:近接を使って情報を明確にしていない例を見つけてください。何が問題だと思うかを言葉にしてください。自分ならどのようにして情報をもっと効果的に組織化するのかを加味にスケッチしても良いかも。

 

近接のまとめ

いくつかの項目が互いに近接しているとき、それらは、複数のばらばらのユニットではなく、1個の視覚的ユニットになります。互いに関連する項目は、グループ化する必要があります。

視線の流れを確認しましょう。どこから見始めるのか、どういう道筋をたどるか、どこで見終わるか、読み終わったあとどこに目が行くか。まぎれもない初めからまぎれもない終わりまで、全体の論理的な流れが目で追えるようになっている必要がありますか。

※基本的目的

近接の基本的な目的は、組織化です。ほかの原則も組織化に貢献しますが、関連する要素を近づけてグループ化するだけで、自動的に組織構造が出来上がります。情報が組織化されていれば、読んでもらえる可能性が高くなり、覚えてもらえる可能性も高くなります。情報の組織化の副産物として、より魅力的(組織的)な空白(デザイナーの好物)も作り出すことができます。

※実現方法

目をかすかに細めてページを眺めて、視線が止まった回数を数えれば、視覚的要素の数がわかります。それが1ページあたり、3から5個を超えている場合(もちろん内容によりますが)、近接によってグループ化して、1個の視覚的ユニットにできるものがないか検討しましょう。

※避けること

ページ上に個別の要素を作りすぎないこと。

要素間に均等の空白を作らないこと。

ただし各グループが関連する下位区分の一部である場合は除く。

見出し、小見出し、キャプション、画像などが、本文のどの部分に関連するかを読者が一瞬でも迷わないようにすること。要素間の関連を、近接によって作り出すこと。

異なる性質の要素間に、関連を作らないこと。

関連しない項目は、離して配置すること。

ただ空いているという理由だけで、隅や中央に何かを貼り付けないこと。

 

【整列(Alignment)】

新米デザイナーは、ページ上に空きを見つけると、ページ上のほかの項目のことを考えずに、その空間を文字や絵で埋めようとする傾向があります。そのせいで、「ちょっと散らかった台所効果」が発生します。コップはこちら、皿はあちら、布巾はカウンターの上、ポットは流しの中、床にはしずくが落ちているという状態です。こういうちょっと散らかった台所を片付けるのは、大した手間ではありません。同じように、ちょっと散らかった整列度の低いデザインを片付けるのにも、たいした手間はかかりません。

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

整列の原則を使うためには、一層意識的になる必要があります。ページ上に要素をばらまいて、どこかくっつきそうな場所を探すというやり方はもうできない。

ページ上の項目が整列しているときは、より強く団結したユニットが生まれます。たとえ要素と要素が離れておかれていても、整列していれば、そられの要素を結び付ける透明な線が、視覚的にも心理的にも存在します。要素と要素の関係を示すためにそれらを引き離しても、(近接の原則)、整列の原則を適用していれば、どちらも同じものの一部であることがわかるのです。

整列ができていない場面に出会うことが、実生活ではときおりあります。それは不快感を生み出し、無秩序に見えます。効率的な行動の仕方が分かりません。

整列すれば、情報がより明確に伝わります。すべきことが分かります。

中央揃えは少し弱く見えることが良くあります。その代わりにテキストを右揃えか左揃えにすれば、テキストを結び付ける透明な線がはるかに力強くなります。

中央揃えは淵の縁の線がソフトなので、線の強さを本当に見ることはできない。

この縁の線の力強さが、レイアウトに力強さを与えているのです。

中央揃えは初心者にもっとも一般的に使われる整列方法です。

中央揃えを中央から外してみる。また文字背景に色を付けてドラマティックにできないか?

Time12ポイント、改行2度打ちは禁止。

中央揃えは、明確に意図的な場合に最大の効果を発揮します。そして整列が意図的で強力な場合は、他の要素を独創的に扱っても、ページ上に無秩序に置かれた必然性のない要素群に見えるのではなく、目的を持ったデザインに見える

均等揃えは、語と語のあいだに間が空きすぎるの間抜けな印象があるので、一行の長さが十分にとれる場合だけにする。

訓練を積むまでは、1種類を選ぶというガイドラインを守ってください。

たまには、同一ページで右揃えと左揃えの両方を使える場合もあります。

 

2つのテキストを左右に離れて配置する場合は、ベースラインを揃える。いくつかのテキストのブロックがあるなら、その右端か左端を揃えましょう。

ページ上のどんなものでも根拠なく配置してはいけません。

課題:この作例に鉛筆で垂直線と水平線を引いてください。すべてのユニットが中央揃えになっているものの、ほかのどの中央揃えのユニットともそろっていないことに気づくでしょう。そこで1つだけ手をいれましょう、垂直と水平の整列を作り出す。

またすべての空白エリアを丸く囲んでください。ここでは空白がひどく雑然としています。

整列の原則の欠如が、魅力のない文書ができるおそらく最大の原因でしょう。私たちの目は秩序をこのみます。秩序はその明瞭性がもたらす穏やかで安全な感覚を生み出します。

しかも情報の伝達に役立つのです。

良いデザインの場合、たとえ全体的な表現が、奇妙なものを集めた、とんでもなくエネルギッシュなものだったとしても、必ず整列したオブジェクトの間に線を引くことができるでしょう。

イラストが端からすこしはみ出たり、写真の下のキャプションが中央揃えになっていたり、見出しと本文が揃っていなかったり、罫線がどこにも揃っていなかったり、中央揃えと左揃えのテキストが混在したりしないようにチェックしましょう。

テキストを画像の間に行き場のない空白が存在することがある。強い線でありまながら、それがデコボコの縁に隣接して弱められいるようなケースです。

整列が強力なら、それを意識的に崩すことができます。そうしても意図的に見えます。その場合のコツは、整列を崩すなら大胆に、という事です。徹底的にやらないなら、やめておくべきです。

例:傾けたイラストをテキストのブロックに食い込ませる。

私はこれまでにいくつかのルールを示してきました。たしかにルールは破るために存在します。しかし、ルールを破るためのルールを覚えておいてください。それは、ルールを破るためには、まずルールを知らなければいけないということ。

課題:広告、チラシ、パンフレット、雑誌の見開きなど、よくできていると思うものを1ダース集めてみてください。

【整列のまとめ】

ページ上のすべてのものを根拠なく配置してはいけません。ページ上のすべての要素が、ほかの要素と視覚的つながりをもつようにしましょう。

一体性は、デザインにおける重要なコンセプトの1つです。ページ上のすべての要素を、一体化し、結び付け、相互に関連させるには、個々の要素を結び付ける視覚的な網が必要になります。ページ上の個々の要素が物理的に離れている場合でも、ただ配置の仕方だけで、それらが結び付き、関連し、一体化されないように、「見せる」ことは可能です。

あなたが好きなデザインを見てごらんなさい。うまくデザインされた作品なら、最初はどんなに荒っぽく混とんとして見えようと、そこには、必ず整列の存在をみつけることができます。

※基本目的

整列の基本的な目的は、ページの一体化と組織化です。その効果は居間の床に散らばった犬のおもちゃを、あなた(あるいは犬)がおもちゃ箱に片付けることはよくにている。

強い整列が、もちろんふさわしい書体と組み合わされて、洗練された表現、フォーマルな表現、楽しい表現、真剣な表現を生み出す主役になることはよくあります。

※実現方法

意識的に要素を配置してください。物理的に離れていても、そろえることができるほかの要素を必ずみつけましょう。

※避けること

同じページで2種類以上の文字揃えを用いないこと(例えば、中央揃えと右揃えを同じページで使うようなこと)

フォーマルで静粛な表現を意識的に作る場合は別として、中央揃えにする癖をやめるために真剣に努力してください。

中央揃えを選ぶなら、「とりあえず」ではなく意識的に選択しましょう。

 

【反復(Repetition)】

反復の原則とは、デザイン上の何かの特徴を作品全体を通して繰り返すということです。反復させる要素としては、太いフォント、太い罫線、ビュレットの種類、デザイン要素、色、フォーマット、配置などが考えられます。

つまり、読者が視覚的に認識できるものなら、なんでもいいのです。

あなたは製作物にすでに反復の原則を使っています。つまり、各ページに同じサイズと太さで見出しを入れたり、そこから半インチのところに罫線を入れたり、プロジェクト全体を通して、リストの先頭に同じビュレットを使ったりすれば、これらはすべて反復を作り出しているのです。多くの場合、初心者を必要なのは、この考え方をさらに進めることです。

反復は、一貫性と考えることもできます。たとえば、16ページからなるパンフレットを眺めれば、そこにはいくつかの要素が反復して使われています。それによって、16枚のそれぞれのページが同じパンフレットの一部であることが明確になるのです。もし13ページ目に4ページ目から続いてきた反復要素が存在しなければ、そのパンフレット全体の統一感は失われてしまいます。

しかし反復とは、ただ自然に一貫しているという状態を越えるものです。それはデザインのすべての部分を一体化しようとする意識的な努力なのです。

段組みのそこをそろえる「ボトミングアウト」スタイルをとっていますが、ページの先頭に反復的な一貫したスタートポイントがあれば、必ずしも底で揃っている必要なありません。

先頭を揃える「ハング・フロム・ア・クローズライン」よりも、反復的なボトミングアウトを選ぶ方がよいものもある。

強い反復要素が、内容を非常に明確に示しています。

反復の原則を利用して、既存のレイアウトからなにか1つの要素を抜き出して、それを統合する新しい要素を作ることができるときもあります。

反復要素は、必ずしも画像やクリップアートである必要はありません。空き、罫線、フォント、整列方法など、意識的に繰り返せるものならなんでもいいのです。

反復は必ずしも同じものを繰り返すことではない、ということがわかります。

【反復のまとめ】

デザイン全体を通して視覚的要素を反復すると、孤立している部分が結び付き、作品が一体化され強化されます。反復は1ページの制作物でも役に立ちますが、複数ページの文書では欠かせない存在になります。(複数ページの場合は、単に一貫性という事が良くあります)

※基本目的

反復の基本的な目的は、一体化と視覚的なおもしろさを加えることです。ページの視覚的なおもしろさを軽く見てはいけません。おもしろそうに見えれば、読んでもらえる可能性が高くなるのです。

※実現方法

反復とは、一貫性のことだと考えてください。あなたはすでに、それを実践しているはずです。それならすでに存在する一貫性をもう一歩進めましょう。見出しのような一貫性のある要素を、意識的なグラフィック・デザインの一部に変えてみましょう。

それぞれのページの底と見出しの下に1ポイントの罫線を引いているなら、それぞれを4ポイントの罫線に変えて、反復要素をさらに強調し、もっとドラマチックにしたらどうでしょう。

次に、ただ反復を作り出すためだけに、要素を変えることを考えましょう。番号付きリストがあるなら、その数字をもっとも目立つ書体や白抜きにして、その出版物のほかのすべてのリストも同様にしてはどうでしょう。まず初めては、すでに存在する反復を見つけてそれを強化します。

反復の考え方と見え方に慣れたら、情報の明晰性とデザインを強化する反復を「作り出す」ことを始めるのです。

反復は、服装にアクセントをつけることと似ています。ある女性がすできな黒のイブニングドレスとシックな黒い帽子を身に着けているとしたら、赤いハイヒール、赤い口紅、小さな赤いピンで、服装にアクセントをつけることができるでしょう。

※避けること

要素を、うるさく強迫的に感じるほどには、反復されないように。コントラストの価値を意識してください。

 

【コントラスト5】

コントラストは、ページに視覚的なおもしろさを加え、異なる要素の間に組織的な階層構造を作り出すためのもっとも効果的な手段です。しかし、コントラストが効果的であるためには、それが強い必要があります。臆病になってはいけません。

コントラストの原則とは、読者の目をページに引き込むために、作品の様々な要素にコントラストを付けるということです。2つの項目が正確に同じでないのなら、本当に異ならせるのです。

コントラストは目を引くために役立つだけでなく、情報を組織化し、階層構造を明らかにし、ページ上の道案内となり、焦点を作り出します。

コントラストは、目を引くために役立つだけでなく、情報を組織化し、階層構造を明らかにし、ページ上の道案内となり、焦点を作り出します。

コントラストは、様々な方法でつくりだすことができます。大きな活字と小さな活字、優雅なオールドスタイル書式と、力強いサンセリフ書体、細いセント太い線、寒色と暖色、なめらかなテクスチャーと粗いテクスチャー、水平の要素(長い行など)と垂直の要素(行幅の狭いダンなど)、ゆったりした行間と詰まった行間、小さな画像と大きな画像などで、コントラストを付けることができます。

しかし、臆病になってはいけません。2つの要素が異なっているように見えて、本当には異なっていない場合には、コントラストではなく衝突が発生します。12ポイントの活字と14ポイントの活字の間にコントラストは生まれません。また、0.5ポイントの罫線と1ポイントの罫線の間にもコントラストは生まれません。こい茶色と黒の間にもコントラストは生まれません。コントラストでは本気になることです。

コントラストは、情報の組織化に欠かせない存在です。どんな文書でも読者が一目で内容を把握できるようになっている必要があります

コントラストを使うと、このページがもっと目を引くようになっただけではなく、書類の目的と構造がはるかに明確になりました。履歴書で第一印象が決まるので、それを力強くしましょう。

テキストが多く行長が長すぎる場合は、複数段組を試みる。

たぶんコントラストはデザインの原則の中で一番楽しいものです。そして一番ドラマティックなもの。

【コントラストのまとめ】

ページ上のコントラストは、私たちの目を引き付けます。私たちの目は、コントラストが「好き」なのです。同一ページに2つにの異なる要素(2種類の書体や2種類の太さの線など)を配置するときには、そられを似せてはいけません。コントラストを効果的にするためには、2つの要素がはっきりと異なっている必要がある。

コントラストは、壁の染みを隠すために塗るペンキの色合わせと似たところがあります。だいたい同じではだめで、正確に同じ色にするか、それが不可能なら壁全体を塗りなおすしかないのです。「ほぼ近い、が有効なのは、馬蹄と手榴弾だけだ」と熱心な馬蹄投げプレーヤーだったわたしの祖父はいつも言っていた。

※基本目的

コントラストには、互いに密接に関連する2つの基本的な目的があります。1つはページに面白みを作り出すことです。ページが面白そうに見えれば、読んでもらえる可能性が高くなります。もうひとつは、情報の組織化を支援することです。ある項目から次の項目への論理の流れが、つまり情報の組み立てが読者に一瞬でわかるようになっているべきです。

コントラストを付けたせいで、読者を迷わせたり、焦点ではないものを焦点に見せてはいけません。

※実現方法

書体の選択、線の太さ、色、形、サイズ、空きなどでコントラストをつけましょう。コントラストを付ける方法は、簡単に見つけることができます。コントラストは、視覚的なおもしろさを加えるためのたぶんもっとも楽しくて効果的な手段でしょう。大切なのは協調することです。

※避けること

コントラストをつけるなら、力強くいきましょう。太そうな線ともっと太そうな線とで、コントラストをつけようとしないことです。茶色の本文と黒の見出しで、コントラストをつけようとしないことです。よく似た書体を複数使ってはいけません。正確に同じでないものは、はっきり異ならせるのです。

 

【4つのデザイン原則の復習】

デザインには、そして人生にも全般的に通用する指針がもう一つあります。それは臆病になるなという事です。

あなたのデザインに、そして人生にも、空白がたくさんできることを恐れてはいけません。空白は目と魂が憩うところです。

左右対称でないことを恐れてはいけません。対称性を崩すと効果が強まることが良くあります。想定外のことをしてもいいのです。

言葉を、極端に大きくしたり極端に小さくするのを恐れてはいません。大声で話したり囁いたりするのを恐れてはいけません。どちらも、場合によっては効果的なのです。

視覚的表現を、きわめて大胆にしたり最小限にすることを恐れてはいけません。その結果があなたのデザインや態度を強化し、補完する限り、問題はないのです。

【まとめ】

これで、この本のデザインに関する部分はおしまいです。あなたはたぶん、もっとたくさんの実例が欲しいと思っているでしょう。実例はあなたの身の回りにいくらでもあります。私があなたに痛みを感じさせずに注入したいのは、より発達したヴィジュアル意識なのです。そして、253ページに掲載した素晴らしいリソースに忘れずに目を通してください。たとえば、Creative Market.comには、考え得るあらゆるプロジェクトのテンプレートが数銭もあります。まずなにか1つテンプレートを手に取って、デザイン作業を始めなさい。そうすれば、そのテンプレートはあなた独自のものになるでしょう。

プロのデザイナーは、常に他人のアイデアを盗んでいるということを覚えておいてください。つまり彼らは、常にインスピレーションを求めて、あたりを見まわしているのです。あなたがチラシを作るなら、あなたが本当に気に入るチラシやテンプレを見つけて、そのレイアウトを使いなさい。ただテキストと画像は自分のものを使うのです。そうすれば、そのチラシはあなた自身のチラシになります。あなたの気に入る名刺を見つけて、自分の名刺に応用しましょう。あなたの気に入るニュースレターのタイトル部分を見つけて、自分のニュースレターに応用しましょう。それは応用することで変化して、あなた自身のものになるのです。私たちはみんなそうしています。

でも今は楽しんでください。気を楽にして。デザインのあれこれをあまり深刻に考えすぎないように。あなたがデザインの4つの原則に従うだけで、ダイナミックでおもしろくて組織化された、誇りにできるページがつくれるようになることを私が保証します。

 

【カラー】

 

 

 

欧文タイポグラフィの基本

自分の作品が素人句作見えないようにするには、いくつかの基本的なタイポグラフィのルールを知っている必要があります。そのような指針の多くは、プロの植字工が何世紀にもわたって使ってきた標準的なテクニックです。

句読点の後はスペース1個

アマチュア・デザイナーのもう一つの目につく誤りは、タイポグラフィの引用記号ではなく、タイプライターのクオーテーションマークを使うことです。通常はアプリケーションが正しいマークを自動的に入れてくれますが、そうでない場合もあり、クオーテーションマークの代わりに、インチやフィートの記号に見えるものが入ってしまうことがあります。もし自分のページで誤った記号を見たら、それを認識して対処する必要があります。

開始のクオーテーションマークは数字の6のような形で、終了のマークは9のような形なので、シクシズ・アンド・ナインズとも呼ばれます。

アメリカでは、コンマとピリオドは、クオーテーションマークの常に内側に置きます。常に必ずです。

コロンとセミコロンは、クオーテーションマークの外側に置きます。

 

コメントを残す

メールアドレスが公開されることはありません。