「Typographic Systems」を2025年03月17日に読んだ。
目次
- メモ
- はじめに p5
- プロジェクトの要素とプロセス p7
- p7
- 制約とオプション p10
- p10
- 円と構成 p12
- p13
- 抽象要素 p14
- p14
- 1. 中軸システム Axial System p17
- エミール・ルダー、1960年 p20
- オーデルマットとティッシ、1980年 p21
- p22
- 幅の狭いコラム p24
- 幅の広いコラム p25
- 透明性 p26
- 透明性 p27
- 水平の動き p28
- 背景の形状 p29
- 形を暗示する軸 p30
- 形のはっきりした軸 p31
- 対角の軸 p32
- 対角の軸 p33
- 2. 放射システム Radial System p36
- p40
- 直角と鈍角 p48
- 直角 p49
- らせん p50
- 3. 拡張システム Dilatational System p53
- p58
- 軸 p64
- らせん p66
- 2つのらせん p67
- 4. ランダム・システム Random System p71
- p76
- 文字だけ p78
- 抽象要素 p80
- 形のある背景 p82
- 5. グリッド・システム Grid System p87
- p92
- グループとサブ・グループ p94
- トーン p95
- トーン p96
- リズムと方向 p97
- 形のあるフォーマット p98
- 水平と垂直 p99
- 抽象構造 p100
- 抽象構造 p101
- 透明構造 p102
- 透明構造 p103
- 6. 転調システム Transitional System p105
- p106
- 動き p112
- 動き p113
- 方向転換 p114
- 方向転換 p115
- 抽象要素 p116
- 抽象要素 p117
- 対角方向 p118
- 視覚言語 p119
- 7. モジュール・システム Modular System p121
- p125
- p126
- 円形のモジュール p128
- 円形のモジュール p129
- 正方形のモジュール p130
- 正方形のモジュール p131
- 長方形のモジュール p132
- 長方形のモジュール p134
- 透明性 p136
- 透明性 p137
- 8. 左右対称システム Bilateral System p139
- p144
- シンメトリーとトーン p146
- シンメトリーとトーン p147
- 抽象要素 p148
- 抽象要素 p149
- アシンメトリーと抽象要素 p150
- アシンメトリーと抽象要素 p151
- アシンメトリーな配置 p152
- アシンメトリーな配置 p154
メモ
はじめに p5
すべてのデザインにはもとになる構造システムがある。
それには、大きく分けて8つの種類があり、そのひとつひとつには、限りなく多様な構成が含まれている。
タイポグラフィ*1が機能するためには、情報の伝達、階層、読む順序、読みやすさ、対照など様々な要素が欠かせない。
そのため、構成は複雑になる。
しかし、基本となるシステムを身につければ、デザイナーはひとつの構造や複数の構造の組み合わせの中で、スムーズに文字や画像を構成したり、また別のシステムを創り出したりすることができるようになる。
タイポグラフィのデザイン・システムは、建築家が形の法則(Shape Grammar)と呼ぶものと似ている。
8つのシステムにはそれぞれ独自の規則群があり、目標を定めて創作活動を方向づける働きがあるからだ。
このような構成システムによってデザイン・スタイルが決まり、形の法則に基づいた視覚言語ができあがる。
不思議なことに、この制約と焦点こそが、デザイナーの創造力を促すのだ。
デザインを学ぶ学生は、このようなシステムを印刷物や映像として見る機会が少ないので、初めのうちは和感を覚えるかもしれない。
しかし、学習を進めるにしたがって、それぞれのシステムが持つ創造面の可能性を、どのように引き出し作品化していけばよいかがわかるようになるだろう。
多くのデザイナーは、伝統的なグリッド・システムを使うことが多く、ほかのシステムの可能性に気づいていない。
本書は、デザイナー、教師、そして学生の方々に広い範囲の解決策を授ける、多様なタイポグラフィのデザイン・システムを紹介する。
*1タイポグラフィ:文字やその書体、図形、写真などの大きさ、太さ、空間配置などを適切に設定することによって、印刷物の読みやすさや美しさを追求する画面設計方法。
プロジェクトの要素とプロセス p7
ビジュアル構成のシステムを理解すれば、デザイン・プロセスについてもよくわかるようになる。
堅苦しい垂直と水平のグリッド・システムは、活版印刷の時代に生まれ、デザイン教育やビジュアル製作と伝統的に結びついてきた。
しかしそれは、もはや生産の秩序と効率を保つ唯一の手法ではない。
本書では中軸、放射、拡張、ランダム、グリッド、転調、モジュール、左右対称の8つのシステムを紹介する。
これらの柔軟な創作システムを使えば、視覚言語が豊かになり、読者を効果的に文の内容に誘い込むことができる。
デザイナーは、それぞれのシステムを使ってメッセージを2通りに発展させるので、読者は各システムを2方面から視覚的に研究できる。
製作にあたって、第一の作品シリーズでは、構成要素のサイズとウェイトをひとつに限定した。
これは、安易な解決策に走ることなく厳密にシステムを試す練習になる。
また、第二の作品シリーズには、メッセージの伝達性を高めるために抽象要素を使用したり、トーン(色調)を変えたりするオプションを与えた。
すべての作品には同じメッセージ(日本語訳は6ページ参照)が使われ、システムの変化に注意が向くようになっているので、簡単に比較ができる。
さらに、ニュアンスの違いやビジュアル表現の無限の可能性にも気づいていただけることと思う。
それぞれのシステムには、異なった美的言語と視覚言語がある。
ほとんどは長いメッセージに適さないが、すべてにおいてダイナミックな伝達が可能だ。
これらは、デザイナーが考えたメッセージのトーン、構造、長さ、そして意図を通訳して伝達するのに最も力を発揮する。
こうして、タイポグラフィはメッセージと溶け合ってひとつのイメージとなるのだ。
p7
中軸システム
すべての要素がひとつの軸の左か右に配置されている。
放射システム
すべての要素が中心点から放射状に配置されている。
拡張システム
すべての要素が同心円状に配置されている。
ランダムシステム
要素の配置に一見して一定の型や関係が見られない。
グリッド・システム
垂直線と水平線の格子をもとに要素が配置されている。
転調システム
層をなす帯状に要素が配置される変則的なシステム。
モジュール・システム
標準ユニットとして組み立てられた抽象的要素の連続。
左右対称システム
すべてのテキストが1本の軸をもとに左右対称に配置されている。
制約とオプション p10
制約とオプションは、すべてのプロジェクトに適用され、豊富かつ微妙なバリエーションを生み出す。
どのシステムもすべて同じメッセージを使用しなければならないが、ひとつの文を区切って数行にしたり、グルーピングや文の読み方を変化させたりするのは自由だ。
行間のスペースを変えれば、それに伴って位置や質感を変化させることができる。
また、語や文字の間のスペースを変化させると質感やトーンに明らかな違いが生まれる。
フォーマットが小さく、長い行がいくつかある場合は、まず行を区切ってみるとよい。
直感的に論理的なパターンに区切るので、テキストの意味は保たれる。
グルーピングは、構成をシンプルにし、読みやすさを高めるために重要だ。
多くのデザイナーは、初めのうちは行間スペースが文字サイズの約20パーセントというコンピューターのデフォルト値に満足している。
しかし、作業が進むにつれてテキストの質感に敏感になり、行間スペースを変えたり、密集した質感や隙間の多い質感を試したりし始める。
p10
行の区切り
色々なところで行を区切ってみる。
行間スペース
重なるくらい狭くしたり、風通しよく広げたりできる。
行の区切り
最も長い“Graphic and Interactive Communication Department”は、より滑らかにメッセージを組み立てるため、区切らなければならない(左)。
区切られたテキストはフォーマットの中で動かすことができ(中)、論理的にグルーピングされる(右)。
語間スペースと字間スペース
これらを変化させると異なった質感が生まれる。
字間スペースを増やすときは、意味が分かりにくくならないよう語間スペースも増やさなければならない。
行間スペース
プロジェクトの初期には、コンピューターのデフォルト値のままのことが多い(左)。
作業が進むにつれて、デザイナーは行のグルーピングを変えたり、行間スペースを変えたりする(中)。
デザイナーの感受性が高まってくると、慎重に行間スペース、語間スペース、そして字間スペースを計画し整えるようになる(右)。
円と構成 p12
円は万能で、どこにでも使うことができる。
特に、あるサイズとウェイトに限定された場合、円は視線を旋回に導く中心点となり、緊張感と強調を生み出し、視覚的整理やバランス調整に役立つ。
サイズとウェイトを限定したシリーズでは、円を配置すると構成ががらりと変わる。
行の間に押し込むと緊張感が生まれ、行や単語に接近させると強調になり、行とそろえると整った感じが生まれ、左上に置くとしばしば始点となり、右下に置くと停止点となる。
デザイナーがサムネイル(訳注:縮小した草案)を描き終えると、そのうちの最もよい構成で、円だけを動かしたサムネイルをさらに作成するよう求められる。
次にそれらを評価する。
中には、まったく異なるが同じくらい優れた作品がある。
そこでデザイナーは、小さな要素がどのように構成や読み方をすっかり変化させるかに気がつく。
p13
強調と構成の配置
円が2つのテキスト・グループを分け、白い行を強調している。
緊張感の配置
円を近づけると、テキストを読もうとするので緊張感が出る。
始点の配置
黒い面に入っていく円が視線を構成に導き入れる点となる。
停止点の配置
円が黒い空間を活性化し、視線の停止点となる。
抽象要素 p14
抽象要素を加えると、鋭くはっきりした構成になる。
強調したり、整った感じや方向感を与えたりする作用があるからだ。
タイポグラフィと一緒に使うと、視線を導いて階層を強調し、メッセージをはっきり伝えるのに役立つ。
デザイナーは、すでにサムネイルと批評のプロセスを通じて構成の
ニュアンスに敏感になっているので、抽象要素やトーンにも鋭く反応する。
通常デザイナーが最も満足感を覚えるのはプロジェクトが仕上がったときだが、最も興味深いと感じるのはこの段階だ。
この見開きの例には、さまざまな太さの罫線、円、トーンといったシンプルな抽象要素が使われている。
上段の罫線の連続では、長さがそろったものとそうでないものに、はっきりと視覚効果の違いがみられる。
罫線の幅にばらつきがある場合、視覚的配置はより複雑だ。
中段の円は視覚的に力強い要素で、どんなに小さくても注意を引く。
したがって、円は強調の要素として手軽に使うことができる。
下段のトーンの変化はシンプルだが、階層やメッセージの質感を上手くコントロールしている。
すべての例において、メッセージの内容自体に変化はないが、読まれる順序は異なる。
抽象要素を使うときはよく検討し、色の分量や形の複雑さなどでメッセージを圧倒しないようにする注意が必要だ。
p14
罫線の連続
罫線は、メッセージを整えて強調する。
同じ太さで同じ長さの罫線を用いると、見た目を整える働きをする。
太さが変わるとリズムを生み、下方へと視線を導く。
長さが変わると強い斜めの動きを創る。
太さの変化は、視線を最も黒の分量が多い方へ導いて階層を生み出す。
円の連続
円は、抽象的な旋回の中心点や階層を作り出す要素となる。
円が視線をある単語に引きつけ、それを構図の中で最初に読む単語にする働きを例に示した。
トーンの連続
トーンを使うとメッセージの階層ががらりと変わる。
視線は白い背景の中で黒の分量が最も多い方へ引きつけられるか、黒い背景の中で白の分量の最も多い方へ引きつけられる。
単語や単語の一部が強調され、メッセージに視覚的な句読点を与える。
1. 中軸システム Axial System p17
1本の軸の左右に整理されたデザイン
中軸システムは最もシンプルな方式のひとつだ。
すべての要素は1本の軸の右と左に整理される。
軸はフォーマットのどこに置いてもよく、その位置によってシンメトリーな構成やアシンメトリーな構成ができる。
これは暗示的な主線から枝分かれしていく配置だ。
自然界にある中軸的な配置は、木の幹や花の茎など、多くの植物でみられる。
中軸システムを使ってみると、シンメトリーよりアシンメトリーな配置の方がしばしばより魅力的なことに気がつく。
軸が中心を右かたに外れていると、空間は大きい部分と小さい部分に区切られ、より面白味が増す。
アシンメトリーを取り入れると、比較的シンプルな配置が視覚的に興味深いものとなる。
中軸システムを用いた構成の多くはアシンメトリーな配置を使って成功しているが、このポスターでは、中心に軸を置いたシンメトリーな配置がル・コルビジェによる現代建築のシンプルさを呼び起こし、それをたたえるのに役立っている。
1本軸の配置はポスターを分割し、光沢のある正方形が顔に被っている。
中央にある写真画像の中で、コルビジェがトレードマークの丸眼鏡を持ち上げている手が、構成にアシンメトリーなアクセントを与えている。
左右の端から伸びた2本の細く白い横線は、光沢のある正方形を二分する線を暗示し、視線を画像に集中させている。
エミール・ルダー、1960年 p20
エミール・ルダーによる1本軸のポスター、「10 zurcher maler(チューリッヒのアーティスト10人)」では、数字の1で縦線が強調されている。
上部がポスターからはみ出し、下部がhに繋がったことで、縦の動きがさらに強まった。
ポスターは1と柱状の名前により、心地よい1/3対2/3の比率で垂直に分割されている。
オーデルマットとティッシ、1980年 p21
使用する色を2色に抑え、シンプルな1本軸を用いたことで、この作品は忘れがたいものになった。
テキストは2サイズに限定されているが、3つの語を白にしてはっきりした階層を創り出した。
ポスターは、アシンメトリーに左端から2/3のところへ軸を置くことにより、心地よい1/3対2/3の比率で分割されている。
垂直の軸に斜めに文字を配置することで、作品はさらに力強くなった。
p22
中軸システムはわかりやすいので、デザイナーがグルーピングや語間スペース、字間スペース、行間スペース、構成に対する意識を高めるのに役立つ。
要素は軸に沿ってそろえられると列となって秩序を生み、メッセージは意味を伝達する文字の連なりとしての秩序を持つ。
魅力的な構成を創るのは比較的容易だが、優れた作品を生み出すのは難しい。
作業が始まると行はバラバラにされ、意味がより伝わりやすくなるよう意識してグループ分けされる。
多くの構成は見た目や感じが似通っているので、デザイナーは違う質感や構成を求めるようになる。
作業は単一サイズ単一ウェイトに限定されているので、行間スペースと字間スペースのオプションを探し始める。
デザイナーはポジティブ・スペース(訳注:対象物の描かれている領域)とネガティブスペース(訳注:対象物の描かれていない領域)によって起こる質感の変化や、低密度と高密度の質感の違いを調べてみずにはいられなくなる。
軸を移動し、アシンメトリーな美しい配置を色々と試してみることで、デザインは向上する。
サムネイルの最終段階に入ると、しばしば思いもよらない創造的な作品ができあがる。
「こうあるべきだ」という思い込みが消え、デザイナーは、軸の形成、行の分割、空間の整理に、創造力を発揮するようになる。
初期
中軸システムの理解と、行間スペースや行の分割の変化によるメッセージの整理に意識が集中する。
中期
いったん中軸システムを理解すると、デザイナーは語間スペース、字間スペース、行間スペースについて実験し始める。
ネガティブ・スペースやテキストの質感が重要になってくる。
進行期
デザイナーは、異なる形状の軸や変わったアラインメント、一般的でない行の分割を試し始める。
まっすぐな縦軸をジグザグに変えたり端に寄せたりし、テキストを一カ所に固めたり柱状にしたりする。
幅の狭いコラム p24
短い行でできた幅の狭いコラム(訳注:柱状の要素のまとまり)は、軸の位置に最も変化をもたらす。
右の作品は、1行の長さをほぼ1語に縮めてある。
グレーの長方形の幅を狭くしてテキストを黒い面に接近させることで緊張感が生まれ、赤い円と“architectonic”と“graphic”を分ける細い水平の線により強調が生まれる。
アシンメトリーな構成は、軸やテキストを左か右に動かせば創り出せる。
下の例では、フォーマットが縦に3分割されており、どの構成でもテキストの配置は同じである。
中央に配置したもの(中)は、左と右の空間の比率がほぼ同じで最も平凡な印象を受ける。
軸が左か右に移動すると、白い空間の比率が変わり、より面白い作品ができる。
このとき、視線はテキストと同じく白い空間の変化に引きつけられる。
幅の広いコラム p25
1行が長くなると柔軟性は低くなるが、構成のために果たす役割はまだある。
右の例では、テキストの上と下で空間の比率が変化している。
行は水平で正しい向きである必要はない、という考えにもとづいた実験だ。
ベースライン(訳注:基準線)からわずかに傾いたバリエーションは、視覚的に不安定で注意を引きつけるので面白味が増す。
下の例は同様の手法を用い、トーンの変化によってテキストのグループを分けた。
両方とも、テキストを一カ所に集めて大きな背景空間を作ることで、テキストに変化をつけた。
透明性 p26
コンピューターは、以前は写真家や暗室技師しか使えなかったような道具をデザイナーに与えた。
透明で重なり合う平板を抽象要素として解釈するのは、魅力的な考えだ。
平板にはリズムがあり、重なり合うにつれて色は変化し、軸が強調される。
透明性 p27
デザイナーは、同じサイズとウェイトの文字のみを使って実験した後、初めて抽象要素に取り組むことができる。
下の例は、最初に行ったサムネイル実習だ。
デザイナーが、抽象要素を取り入れる前準備として、強い中軸の構成を発展させていくプロセスが見て取れる。
右の作品は抽象シリーズからのもので、トーンの変化と透明な抽象要素の使用によって、構成がどのように強調されるかがわかある。
2つの長方形はシンプルな構成を変化させ、円が角の存在を際立たせている。
テキストのグループはトーンの変化によって示され、最も長い2行は、それぞれを長方形の端近くに置くことで整えられている。
水平の動き p28
多くの中軸構成は、軸に沿ってテキストを整理するので、強い垂直方向の動きを持つ。
右は、そのような視覚的印象に変化をつけるため、横長の長方形をフォーマットの幅一杯に渡してタイトルを強調した。
タイトル以外のすべての文字要素は正確に軸と一致しているが、水平の動きがとても強いので、浮かんでいるように見える。
下は同じデザイナーによるサムネイル・シリーズで、右のデザインを生み出すまでの考察のプロセスがわかる。
背景の形状 p29
抽象要素を使って、形のある背景を創ることができる。
これらの作品では、背景の形がテキストを追う視線を導き、視覚的な面白味を与えている。
タイポグラフィの構成は中軸のままだが、より生き生きとして見える。
右は、割れた円を拡大し繰り返して、縦の軸と対比させた構成だ。
間を広く取って置かれた明るいグレーのテキストも、間を狭くして置かれたグレーの面のテキストと対照的だ。
左下の例では、背景の空間を区切っている階段の形状が、テキストのブロックが創り出す形と呼応している。
背景空間は広くて濃いグレーの面と、はるかに狭くて明るいグレーの面とに分かれている。
右下の例では、円が内側のグレーの形と重なり、対照を成している。
内側のグレーの形は、視線を軸とテキストに導く。
形を暗示する軸 p30
最も一般的な軸は、フォーマットのベースラインに垂直なものだが、軸に形をつけることも可能だ。
形のある軸には、一度だけ曲がったものや、何度も曲がったジグザグのものがある。
テキストのグルーピングを工夫すれば、構成の複雑さは薄れて結合感が強まり、軸の形をはっきりと示すことができる。
右図の軸は、テキスト・ブロックの右端によって暗示されている。
下図の軸は、より複雑なジグザグだが、こちらもテキスト・ブロックの端で示されている。
暗示の軸は微妙なので、想像力を必要とする。
形のはっきりした軸 p31
トーンや抽象要素を使うと、色を閉じ込めたり、空間を分けたり、軸の形を強調したりすることができ、引き締まった構成になる。
できあがった構成はにぎやかで、視覚的に激しい。
トーンの変化や線のような抽象的な要素は、形のある軸をより明確に表現し、構成空間を区分けすることができる。
対角の軸 p32
ほぼすべての中軸構成は、対角線上に回転させることができる。
対角は最もダイナミックな視覚的方向なので、動きが暗示された活動的な構成ができあがる。
構成空間が複雑になるのは、ネガティブ・スペースが長方形や正方形ではなく、三角形に区切られるためだ。
下に示した単一サイズ単一ウェイトによる研究をもとに、構成を対角線上に変化させたものが右の例だ。
黒い背景とグレーの部分を用いたことで、空間を区切る要素が生まれた。
グレーの部分は分岐を創り、テキスト中の7:00という時刻表示を強調している。
対角の軸 p33
右は対角構成を用いた優雅な手法だ。
21ページのオーデルマットとティッシのポスターに似て、行が対角線上に配置され、垂直軸に沿って整えられている。
見る者の眼が1行読むごとに軸の方へ移動するので、強い躍動感がある。
軸の右側にある幾何学的な長方形の空間は、左側の不ぞろいな空間と対照的だ。
グルーピング、トーン、そして行間スペースの変化が、階層を強調している。
下の2つの作品は、より伝統的な傾きの斜線を用いている。
両方とも、トーンの変化を行とテキスト・グループの分割に利用している。
左下の例では、テキストが大きくて読みやすく、赤い罫線は学部名と講義名を整え、強調している。
右下の例では、テキストが小さく、構図はぎっしりと詰まっている。
結果的にトーンの変化は微妙で、より読みにくくなったが、興味をそそられる。
2. 放射システム Radial System p36
中心点からのデザイン
放射システムでは、すべての要素を中心点から広がっていく光線のように配置する。
一般的な例には、花びら、花火、ドーム建築、太陽光線、車輪のスポーク、ヒトデなどがある。
構成はダイナミックで、視線を放射の中心点に引き寄せていく。
中心点は暗示されることもあれば、実際に描かれることもある。
文字が水平のガイドラインを離れるにつれ、行の向きによってはメッセージが読みにくくなる。
テキストの配置は、上から下、下から上、正しい向きと、逆さ向き、など何通りもあるが、メッセージが機能するためには、できる限り読みやすい向きにした方がよい。
放射システムの例は、ほとんどが花、ドーム建築、ヒトデなどのようにシンメトリーだ。
光線は円形を創り出すが、それは視覚的にとても満足感がある。
テキストのメッセージを配置していくと、しばしばひとつの円または複数の円の一部分になる。
アシンメトリーにすると視覚的満足感は少ないが、より面白味がある。
p40
放射システムには構成上の難問が潜んでいる。
それぞれの行が、焦点とだけ関連性のある、独立した単位として存在するからだ。
加えて、作業の初期段階では、多くの構成が規則的に要素の間を空けた放射形の構成になりがちだ。
これらの構成は行がグルーピングされておらず、ネガティブ・スペースが同じような大きさの一切れのパイに似た形をしているため、複雑な印象がある。
作業が進むにつれて、焦点は中央を外れた位置やページの外へ変わり、白い空間にも敏感になる。
さらに経験を積むと、興味を引くテキストのグルーピング、シンプルな構成、そして密な質感を創り出せるようになっていく。
放射の構成には強い斜めの方向性があるので、視覚的に動きがありダイナミックだ。
しかし、読みづらいのは明らかなので、テキスト量の少ない視覚メッセージに適している。
初期
最初は、放射要素が構成空間の多くを占めている。
それぞれの行が、独立した要素としてとらえられているからだ。
中期
デザイナーがシステムに慣れてくると、実験が始まる。
曲線、行間スペース、行のグルーピング、角度、そして焦点を変化させていく。
進行期
経験を積むと、デザイナーは行のグルーピングと階層を創ることに注目する。
焦点を解釈し直し、想像上の点から大きな円の暗示された中心へ変えてみる。
行のアラインメントや直角のアレンジは、よりフォーマルで新しい結果を生み出す。
ページ外に焦点を置くと、わずかな角度で行を配置することができる。
直角と鈍角 p48
これらの作品は、グルーピングした行を90°または90°C~120°Cの角度で放射している。
その結果、ほかの放射構成と極めて異なる制御の効いた印象が生まれた。
行の相互関係は、よりフォーマルかつ計画的で、読みやすいことが多い。
ネガティブ・スペースもやはり明確に区分けされ、心地よい長方形か三角形を形作っている。
直角 p49
トーンを使うと、フォーマットを歯切れよく区切ることができる。
右の例では、黒い面のグレーのテキストがグレーの面に接してはみ出し、グレーの面の黒いテキストが黒い面に接してはみ出している。
これによってテキストの位置が固められた。
視覚的に満足感のある1行の白いテキストは、細い黒の罫線によって動きを与えられ、空間に侵入したように見える。
らせん p50
テキストをらせん状に配置するアイデアは面白いが、問題がある。
らせんをたどるにつれて、行が逆さになってしまうからだ。
デザイナーは、らせんの視覚的解釈を拡大して、可能なところで行の長さを調節し、最も重要な2行、Architectonic Graphic DesignとFree Public Lectureを最も読みやすい位置に配置した。
3. 拡張システム Dilatational System p53
円に沿ったデザイン
拡張システムは、中心点から広がっていくように円を配置する。
一般的な例には、目の虹彩、水面に小石を落としたときにできる波紋、音波などがある。
視線が円弧をたどるか、円の中心点に引きつけられるため、放射システムと同様にダイナミックな構成になる。
最もシンプルなのは円が中心点から一定のリズムで拡張していく形式だ。
バリエーションには、線の一部が接した円、中心の異なる円、そして複数の拡張を組み合わせたものがある。
p58
すべての例に使われている視覚メッセージはたった数行で、調査を目的とするため簡明だ。
しかし、たとえ短くても、拡張システムの中でそれを制御するのは難しい。
逆さなどの読みにくい配置が避けられないからだ。
したがって、デザイナーは常に読みやすさを念頭に置いて作業を進める必要がある。
拡張は、視線がその中心点を探す動きによって、2つの暗示的な動力を創り出す。
外へ向かう力と、中心の周りを回転する力だ。
構成が複雑になった場合は、要素のグルーピングでメッセージをシンプルにし、視覚的な力を強化した方がよい。
読みやすい拡張構成にするには、色々な手法を使ってテキストに秩序を与えるとよい。
例えば、アラインメントを使うと、構成の内部軸に沿って秩序が生まれる。
また、階段状の配置は、リズムと反復を通じて視線を導く。
さらに、弧状のテキストをグルーピングすれば、構成がシンプルになる。
初期
研究の初期は、円に沿ったテキスト配置に慣れる必要がある。
作品は実験的で、珍しい質感や空間が試される。
中期
システムに慣れてくると、デザイナーはテキストのグルーピングや整理に焦点を置くようになる。
進行期
経験を積んで構成の制御を学んだデザイナーは、意識して行をグルーピングし、空間をアレンジするようになる。
行が整理され、構成は秩序正しく簡潔になる。
さらに、多様な拡張的グループやグループ間の関係について実験が行われる。
軸 p64
強い軸を加えると、作品は中軸システムと拡張システムの混合型になる。
軸にはテキストを整理する働きがある。
行が軸の垂直線に沿って互いに関係を持つためだ。
下の作品では、フォーマットの端近くにある軸が同様の働きをしている。
らせん p66
らせんの動きは拡張システムと深い関係があるが、使用にはよい面と悪い面がある。
らせんではテキストが曲線に沿って動くため、一部が逆さになってしまう。
したがって、見る者はメッセージを読み取ろうと努力しなければならない。
しかし、読みにくさは、中心点に巻きつくようならせん状の行が創り出す視覚的面白さによって相殺される。
下の単一サイズ単ーウェイト構成は、メッセージより動きに重点を置いた。
右下のトーン変化には行を分けたりはっきりさせたりする働きがあるが、右の背景にある円にはその働きがない。
2つのらせん p67
このデザイナーは、逆さのテキストを最小限に抑えるため、ある点に向かう2つのらせんを使った。
さらに、年月日やその他を行頭そろえにし、らせんの外へ伸ばした。
右の構成は最も魅力的だ。
らせんを左上の角に割り込ませて形を変え、円で右下の角を切り取ってアクセントをつけている。
4. ランダム・システム Random System p71
偶発的なデザイン
ランダム・システムの要素の配置には、明らかな狙い、パターン、方向、規則、手法や意図がない。
しかし、構成は驚くほどシンプルだ。
それは、作者が意図しなくても、見る者が組織や構成を無理にでも見出そうとするからだ。
人間の目と脳は、パターンを求め、イメージを探し、秩序を見出すようプログラムされている。
例えば、何世紀も前から私たちは星座や雲の形にイメージを重ねてきた。
こうした能力により、人間は生き残ることができたのである。
作業の始めによく使うのは、構成面に思い切り自由に要素をまき散らす方法だ。
一部の要素でも1列に並ぶと、構成は意図的に見えてしまう。
成功率が高いのは、切り取られたり、重なったり、テキストが色々な角度に傾いていたりして、判読性が低くなったときだ。
つまりランダム(無秩序)な状態である。
驚いたことに、ランダム配置はとてもダイナミックでのびのびした、読みにくくても視覚的満足感のある作品になることが多い。
p76
行が水平線上にあるとき、ランダムな効果はほとんど望めない。
水平、垂直、対角のいずれにしても、方向は秩序や意図を表すからだ。
違う角度を使うと、速やかにランダム感が出る。
さらに、角度が鋭く多様なほど、ランダム感は強まる。
多様な角度の構成では重複と切り取りが自然に起こり、秩序のなさを表す。
情報を伝えるためのタイポグラフィ構成には、ほとんど重なりや切り取りがない。
読みにくくなってしまうからだ。
質感のバリエーションも、ランダム構成を創るのに役立つ。
通常、行は情報伝達の要素だが、それを質感の要素とみなして構成を抽象的にするとよい。
文字の質感を極端に変えると、思わぬ変化を生むことがある。
例えば、質感としての行は形やネガティブスペースを創り、構成に重要な役割を果たすようになる。
初期
デザイナーは、水平な行やわずかに傾けた行ではランダム感を伝えられないことにすぐに気づく。
多くの構成でほとんど緊張感がないのは、行の周りに空間があり、質感が均一なためだ。
中期
作業が進むにつれて、多様な角や重なり合う行で実験が始まる。
そして、デザイナーが読みにくい行の重複に慣れてくるとより鋭い角度を試すようになり、構成や白い空間の形と配置にも敏感になる。
進行期
デザイナーは、繰り返したり、行を切断して単語にしたり、文字だけにしたりして、無秩序な構成を判読不能な構成へ変えていく。
文字だけ p78
ランダム・システムを使うとメッセージが読み取りにくいので、伝達方法として適切かどうかが問題になってくる。
しかし、少し努力すれば多くの構成は判読できるし、爆発したかのようにバラバラなタイポグラフィの配置はとても魅力的だ。
ランダム・システムを使う目的は実験だ。
その過程で、読みやすさの程度は変化していく。
ほとんどのデザイナーは、下のように比較的読みやすい作品から始める。
次ページの作品も同様だ。
小さい方の構成は初期のもので読みやすく、大きい方の構成は後期のもので読みにくい。
抽象要素 p80
抽象要素を使うと形に多様性が生まれ、ランダム構成を強めることができる。
その形態や配置は、テキストの場合と同じく、束縛されていないように見える必要がある。
時に、抽象要素は混沌の中で語や行を修正し、情報伝達をしやすくすることがある。
下の構成で、赤い円と接する1本の黒い罫線は、Communication(コミュニケーション)を強調している。
そのためにこれが読み始めの語となったが、配置のずれによりランダム感も出た。
右側の2つを比べると、動きは活発だが比較的読みやすい上の作品から、より動きの激しい断片的な下の作品へと進化していった様子がうかがわれる。
次ページでは、小さい2つの構成が初期の単一サイズ単一ウェイトのサムネイルだ。
大きい方も似たタイプの構図を使っているが、抽象要素によりさらに複雑になっている。
下の不規則な形の罫線は、特にランダムな視覚言語を増やした。
形のある背景 p82
思いがけない角度を使った形のある背景は、構成を複雑にする。
これらの背景には文字と同じランダムな角度が使われ、対照によって行を強調している。
5. グリッド・システム Grid System p87
垂直と水平に区切られたデザイン
グリッドは、垂直と水平の区切りで要素同士の関係を整理して構成を創り出すシステムだ。
その配置は通常フォーマルで、視覚的秩序を生み出し、生産効率がよい。
一般的な例には、窓、地図、クロスワードパズルなどがある。
グリッドが出版物のデザインやウェブデザインに頻繁に使われるのは、情報の階層を整え、視覚的リズムを創り、複数のページや画面に一貫性を持たせる働きがあるからだ。
グリッド・システムを使った視覚伝達の目標は、タイポグラフィの要素、一定の割合でリズミカルに繰り返されるテキスト・ブロック、図版、空間などとの間に強い相互関係を築くことだ。
グリッド・システムは、それを形づくるコラムに軸のような働きがあるという点で中軸システムに似ている。
しかし、コラムは通常2つ以上あるので、中軸システムのように視覚関係が1本の軸に縛られることはない。
p92
グリッド・システムを使うと、よりなじみのある、整った水平方向の構成を探求することができる。
ほかのシステムでの経験により、デザイナーは、字間スペースで質感を変えたり、行の区切りでグルーピングを変えたり、意識的に白い空間を創ったりすることが十分できるようになった。
グリッド・システムは、アラインメントが重要な役割を持つ点で中軸システムに似ているが、異なっているのは複数の軸があることだ。
2つ以上のコラムを使うと、アラインメントの選択肢が増える。
テキスト・ブロックと白い空間の形は長方形なので、構成を面白くするには、空間の比率が重要になってくる。
不思議なことに、8つのシステムを経験する過程でグリッドを使っ学生の作品と、初めてグリッドだけを使った学生の作品には違いがある。(K・イーラム『Grid System(グリッド・システム)』Princeton Architectural Press参照)
前者の構成は、より創意に富んでいて予測がしにくい。
タイポグラフィのニュアンスをより深く理解していて、ほかのシステムでの経験が、さらに滑らかな作品製作に生かされていることがうかがえる。
初期
グリッド・システムを使ったデザイナーの最初の作品には、中軸システムで培ったよい経験が反映されている。
初期作品にも滑らかさがあるのは、そのためだ。
この時期は、2コラム構成が最も一般的だ。
中期
字間を詰めたり空けたりすると、テキスト・グループを区別する質感のバリエーションができる。
行は自由に区切られ、細いコラムとテキスト・グループ間の強いアラインメントを創る。
進行期
研究の焦点は、意識的に面白い構成空間を創ることに移る。
面積の大きい白のネガティブスペースの劇的効果に注目するようになり、3つの日付でリズムをつける。
グループとサブ・グループ p94
テキストの字間スペースは、質感やトーンに変化をもたらす。
右の構成では、architectonic graphic designという表題の中にサブグループが創られている。
3つの語はぴったりそろった長方形としてひとつのグループになるが、graphic designの2語はより広い字間スペースで強調されたサブ・グループだ。
字間の狭いテキストは最も濃い、普通の字間のものは中間、字間の広いものはまばらな質感を創っている。
トーン変化の組み合わせは、変化と多様性をもたらし、構成を強化する。
グループとサブ・グループを創るという手法は、この作品や類似の構成に繰り返し使われている。
トーン p95
これらの構成は、すべてトーンを使って階層を創り、制御している。
黒いテキストを選択的に使い、見る者を時間、場所、月日へと導く。
デザイナーは、テキストのアラインメントが創り出したネガティブ・スペースを意識している。
3つの大きな長方形のネガティブ・スペースは視覚的休息になり、長方形のポジティブ・スペースを対照によって強調する。
トーン p96
これらの作品のグリッド構造はシンプルで、最小限の抽象要素しか使われていないが、視線の流れを微妙に変化させる力がある。
テキストのグルーピングは構成をシンプルにし、色とトーンの変化はグループにアクセントをつける。
グループの位置、トーン、そしてネガティブ・スペースは階層を強める。
リズムと方向 p97
この作品のグレーの縞模様には、2つの目的がある。
左側2つのコラムを明確にすることと、リズムと動きによって穏やかにフォーマットの中心へ視線を導くことだ。
空間の境界は歯切れがよく、ネガティブ・スペースの形は一連の長方形だ。
リズムを与え、表題を強調するため、同様の方法が下の作品にも使われている。
形のあるフォーマット p98
右の作品は、フォーマットの黒い囲み線をわざとはずし、白い背景を構成空間に侵入させてその一部にした。
右下の角には、フォーマットの角の暗示しかない。
テキストと限られた抽象要素を空間に浮べるアイデアは魅力的だ。
同様のアイデアを下に応用し、フォーマットの角から円を切り取った。
水平と垂直 p99
水平と垂直のテキストの組み合わせが、これらの作品を魅力的にしている。
右の構成では、行が情報を伝達し、動きを創る構造要素として使われている。
長い水平の1行は日付の赤がアクセントになっていて、テキスト・グループを仕切っている。
右下のようにテキストを2つのグループに分けると、シンプルで効果的なグリッド構造ができる。
抽象構造 p100
これらの作品では、抽象要素が強い構造の形をとって構成を補っている。
右のフォーマットは複雑で、3つのコラムと12のグリッド・ブロックに分かれている。
構造は、水平のグリッド・ブロックだけをハイライトすることで、とてもシンプルになった。
水平方向の動きは、コラムを越えた長い2行と、一番上の白い長方形2本の白い罫線によって強まっている。
テキストのアラインメント(左そろえ)は水平の動きと対照的で、視線は下方向と横方向に引っ張られる。
同様に、下の作品は強い水平の面をテキストのグルーピングに使い、垂直の動きは各コラムの左そろえによって暗示されている。
抽象構造 p101
このシリーズでは、抽象構造を通じて強い水平と垂直の動きを見ていく。
メッセージの配置は本質的に同じだが、構成は罫線の方向によって劇的に変化した。
右の例では、一番上のテキストと始点のそろった垂直の罫線が、コラムを強調している。
右下は、水平の罫線が3つのグループを分け、グリッド・ブロックを強調している。
表題は2行から1行へと変わり、水平の流れが強まった。
透明構造 p102
透ける構造は、グリッドを作っているコラムやグリッドブロックをはっきりさせる。
右と右下の作品では、それぞれのコラム面がグレーだ。
これらグレーの面にアクセントをつけているのは透明な水平の面で、コラムと重なって文字をグリッド・ブロックに分け、強調している。
目に見える構造が空間を区切ったのだ。
左下の構造は異なる方法を用いて透明感を出すため、赤い正方形の枠でArchitectonicという語を強調し、透明な窓にした。
透明構造 p103
重なり合う透明なグレーのトーンがかもし出す、繊細さと面白さが光る作品だ。
それぞれのテキスト・グループはグレーのトーンが創る長方形に収まり、建築的な構造を強調している。
繊細なトーン変化に伴って、小さく細いテキストも同じように繊細な変化を見せる。
下の構成もまた、目に見える構造を持つ。
テキストが書かれたコラムのうち左側と右側のものは、垂直な透明の面だ。
グリッド・ブロックは同様に水平の面で示されている。
水平面と垂直面が円と重なるところに、視覚的な面白さがある。
6. 転調システム Transitional System p105
変化する帯と層によるデザイン
転調システムは、層を成して変化する帯による、インフォーマルな視覚構成だ。
軸に沿った相互関係やアラインメントはなく、要素は自由に左右へと動く。
したがって、グリッド・システムと比べると、ずっとカジュアルな印象だ。
文字の行は自由に漂い、その質感がメッセージを整頓する助けになる。
自然界の転調配置には、地層や無造作に積み重ねられた材木などがある。
このシステムを使うと、行間の広いすっきりした構成にすることも、きっちりとコンパクトにまとめ、ネガティブ・スペースを強調した構成にすることもできる。
また、風景画を彷彿とさせる構成になることも多い。
円が抽象的な太陽や月に見えることがあるからだ。
p106
転調システムは、最もインフォーマルでリラックスしたシステムだ。
滑らかな動きが一番の特徴なので、要素はどの軸の上にもそろえられることはない。
実際、ほとんどのデザイナーにとって最も難しいのは、アラインメントを使わずに要素の相互関係を創ることである。
そのためには、質感を集中させ、集中させた部分の形を通じて要素を関係させる。
転調システムの美しさは、自然なアシンメトリーにある。
行はフォーマット上を漂い、質感と白い空間を創る。
行をグルーピングして、密集した濃い質感や広々として明るい質感を創ることも重要だ。
グルーピングした行を分割したり字間スペースを変えたりすれば、さらに質感に変化を加えることができる。
読みにくくはなるが、テキストのトーンと配置を慎重に制御すれば伝達性は保たれる。
初期
デザイナーが自由な行配置にいかに順応しているかを探る。
中期
インフォーマルなグルーピングと行のページ下方への動きが、慎重に検討される。
行とグループは、字間スペースの違いと、高密度で色の濃い質感か低密度で色の薄い質感かで区別される。
進行期
作業が進むにつれて、質感と白い空間に対する感覚の鋭さが重要になってくる。
圧倒的な量の白い空間が目を引き、面白い。
動き p112
転調システムの最も大きな特徴のひとつは、動きである。
垂直のアラインメントが創る視覚の停止点がないので、タイポグラフィは動いているように見える。
その感覚は、罫線やテキストがフォーマットの左右からはみ出るとより強くなる。
ほかのシステムで得たグルーピングの経験は、ここでも生かされる。
デザイナーは論理性を考慮して行グループを配置する。
自然なメッセージの順序を保ち、グループ分けには配置やトーン変化を使う。
右の構成では、細い線がフォーマットに入ってきて小さな円と結びつき、動きを強調している。
罫線の上下にあるテキストは、右端へ向かって動き続ける。
右下の構成は、互い違いの線がテキスト・グループに向かったり離れたりする動きによって運動感が増した。
動き p113
抽象要素は、タイポグラフィに動きを持たせるのに役立つ。
右と右下の構成では、くさび形に沿って文字が滑っていくことで、斜めの動きが生まれた。
左下の場合、黒のメッセージに対してグレーのテキストの繰り返しが質感を持つ背景を創っている。
その動きは、どちらかといえば振動に近い。
方向転換 p114
転調システムの実験を行うと、デザイナーは予想もしなかった関係を発見することがある。
これらの作品は一見して当たり前の水平の動きを使っているが、それを垂直方向の動きと対比させている。
これには著しい効果があり、視線は水平と垂直が出会うところで急停止する。
下の作品は、方向による対比をより緩やかに用いた。
初期作品は文字をほぼ平均的に分けて反対方向へ向けたが、対比ははっきりしない。
後の作品はテキストを1行だけ垂直にし、対比を強めた。
方向転換 p115
これらの構成は、方向と質感の両方を対比させている。
右の構成では、テキストの固まりが1行のテキストと対照を成しており、大きなネガティブ・スペースが表題を囲んで水平の1行を強調している。
下の2つの例も、ネガティブスペースを同じように活用した。
垂直のテキストは緩やかな間隔でつながり、水平で詰まった質感のテキストと対照を成している。
抽象要素 p116
抽象要素をドラマチックに使うと、転調構成を生き生きと複雑にすることができる。
抽象的な平板と罫線は、テキストを支え、背景の質感を創る。
右の構成では、行を接着した透明な平板が、次々と上からフォーマットに入ってきては移動し、重なっていく。
左下は、黒い罫線が学部名を強調し、罫線の反復が文字の背景になる。
右下は、複数の重なり合った罫線がフォーマットを横切り、質感を持った文字の背景となる。
抽象要素 p117
この構成シリーズでは、地となる複数の罫線を使ってテキストの行を強調した。
円は構成をつなぐ要素として、2つの罫線のグループに重なったりくっついたりしている。
文字がなくても満足感のある構成である。
対角方向 p118
転調システムは動きと密接なつながりがあるので、対角方向を取り入れるのは自然な成り行きだ。
対角は最もダイナミックな方向で、運動感が増す。
流れるようなシンプルさとトーン変化の控えめな使用が、右の対角構成を魅惑的にした。
白い円が始点となり、トーンの変化が重要な2行を強調して階層を創る。
下は、ページからはみ出す罫線で動きにアクセントをつけた。
すべての文字が動いているように見えるのは、固く結ばれた語のグループが互い違いになっているためだ。
視覚言語 p119
転調システムの規則と特徴は、このデザイナーによって洗練され、視覚言語となった。
4つの作品には、どれもたっぷりとしたネガティブ・スペースがあるが、それが運動感の強い構成の視覚言語の一部となっている。
テキストの行はトーンの面に触れて溶け込み、構成に密着する。
7. モジュール・システム Modular System p121
規格ユニットによるデザイン
モジュールシステムでは、規格化された抽象要素やユニットが、地となってテキストを支えたり囲んだりする。
このようなモジュール・ユニットを組み合わせて配置することで、構成が創られる。
一般的な例には、建築用のブロック、コンテナ、成分系などがある。
タイポグラフィの行や語は、規格化を拒む明確な個々の形態があるので、地となるようなモジュールが必要だ。
モジュールは、ごく細い線で描かれた正方形や長方形のようなとてもシンプルなものから、円や楕円、三角形のようなより複雑なものまで色々ある。
まず、タイポグラフィを載せるユニットを規格化し、次に、そのモジュール・ユニットを使ってメッセージを構成していく。
行は複数に分割され、グルーピングのようにメッセージを伝達する手助けをする。
最も小さいモジュールは、文字や記号をひとつだけ含むものだ。
フィリップ・アペローグがフランス語のイベントのために制作したポスターは、文字や記号をひとつずつ切り離して言語の特徴を強調した。
個々のモジュールには色つきの背景を使い、それを市松模様に配置してアクセントをつけた。
複雑で動きの強い構成なので、見る者は注意深く焦点を合わせて読まなければならない。
スラッシュは、サリダスとも呼ばれる会話の音素表記の記号だ。
ここでは、語の周りにある空のモジュールを埋める格好の要素と
なり、意味を持った視覚的句読点となっている。
p125
ボブ・ファン・ダイクのポスターは、長方形のモジュールに抽象的な写真と不規則な行の組み合わせが対照的だ。
面白いことに、右側だけが閉じた長方形のモジュールは、繰り返しにより確かなリズムを刻みながら、イメージに近づいていく。
モジュールは複雑な構成に秩序をもたらし、22のダンス開催地のリストを明確にしている。
p126
モジュールシステムのサムネイル段階は、ほかのシステムとは異なっている。
単一サイズ単一ウェイトのものを含め、すべてに抽象要素が使われるためだ。
モジュールが抽象要素に取って代わるので、デザイナーはまずモジュールの形をデザインすることになる。
円、正方形、長方形などのシンプルな形は、最も扱いやすい。
長い長方形は、テキストの行と最も近い視覚関係を持つ。
多角形、楕円、およびその他の多面形はとても複雑で扱いにくい。
初期の構成は、独立モジュールを含むことが多い。
作業が進むにつれて、モジュールは互いに接し、重なり、組み合わさって面白い形を創る。
デザイナーは、不規則に切った行で形を創る配置や、統制の取れていないモジュールの配置が、より生き生きとした構成を創ることに気づく。
初期
フォーマットの中のモジュールは、堅苦しくてぎこちない。
デザイナーは、複雑な形を使うことがどんなに難しいかを理解する。
中期
テキストを入れやすいシンプルで規則的な形が、複雑な形に取って代わる。
デザイナーは、伝達性の高い規則的な配置を探す。
進行期
デザイナーは、重なり合うモジュールや、よりカジュアルなテキスト配置を試す。
構成、重なり合うモジュール、そしてネガティブ・スペースに注意が向く。
円形のモジュール p128
円は問題になりがちなモジュール要素だ。
視覚的に最も力の強い幾何学形で、たとえ小さくても、注意を引こうとひそかにアピールする。
加えて、アラインメントに必要な角や端がなく、ほかの要素と相互関係を築くことが難しい。
このページの例は、重なりを利用して統一感を創ったインフォーマルな構成だ。
サブ・モジュールとして使った半円と、切り取って不規則に並べたテキスト・グループが、構成に多様性をもたらした。
輪郭の円が構成のアクセントとなり、重なることで結合性を与えている。
要素が接したり重なったりすると、それぞれが互いの一部になったように見える。
左下は、同様の方法を使っている。
赤い輪郭の円が2つのグレーの円に重なることで相互関係が生まれ、構成に統一感が出た。
右下では、透過と重なりに同じような統一機能があることがわかる。
円形のモジュール p129
これらの構成は、連隊を組んだように規則的だ。
視覚的な面白さは、その規則性の中にある多様性によって創られる。
右の作品は厳しく統制されているが、円のない部分と赤い円が、構成に面白味を与えている。
下の例では、パターンを創っている円モジュールの中で、赤い円だけが外れて強調されている。
デザイナーは、右端の円を切り落としたり、そこに入れやすいように行を回転させたりして、構成にバラエティーを持たせた。
正方形のモジュール p130
この正方形のモジュールは、グリッド・システムと強い関係がある。
グリッドは、コラムとグリッド・ブロックの両方から成っているが、モジュールを正方形のグリッド・ブロックと考えることもできるからだ。
この作品を面白くしているのは、モジュール構成の自由さだ。
モジュールは、違うトーンになったり、移動したり、回転したりする。
文字はモジュール内でそろっていたり、端に接着しトーンが変化していたりする。
このページの例は、規則的なグリッドを使っている。
ところどころ取り除いたモジュールが構成にバラエティーと面白味を加え、日付が載った3つのモジュールを際立たせる。
階層を創っている赤いアクセントやトーンの変化によって、さらにバラエティーが増えた。
正方形のモジュール p131
目は、統一感がありながら多様性に富むものを好む。
この不規則に配置された正方形のモジュールは、まさにその例だ。
右の構成で、傾いたモジュールは、ほかの規則的に並んだモジュールと対照を成している。
モジュールの端ぎりぎりに配置された文字によって、背景の白がそれぞれの黒い正方形へ不規則に浸入する。
下の気まぐれな構成には、モジュールの上で文字が緩やかにグルーピングされているだけの、インフォーマルなアプローチが使われている。
単語は好きなように壊され、モジュールの境界に重なっている。
長方形のモジュール p132
長い長方形は行の形になじみやすいので、文字のモジュールに適している。
この構成は、意味の通るように行が配置され、均等にスペースがあって心地よい。
行の長さ、質感、そしてトーンの違いが、バリエーションを生む。
階層を導く円と赤のアクセントは、規則的な構成の中で思いがけない対比となって、全体を強調する。
長方形のモジュール p134
長方形のモジュールが連隊を離れると、構成にバリエーションが生まれる。
空間を自由に動けるようになったモジュールは、角度を変えたり、移動したり、端で切り落とされたり、重なったりして、新しい形を創る。
空間が変化したり、形が不規則に変わったりすることで、構成は活気づく。
これらの作品の背景空間は不均等で、モジュールが重なっているところに注意がいく。
透明性 p136
長方形のモジュールが透明になって空間を自由に浮遊すると、構成は複雑になる。
ネガティブ・スペースは不規則に分割され、ポジティブ・スペースの長方形は重なり合って、新しい形を創る。
長方形が前後に動き、濃い質感と薄い質感がたわむれる。
透明性 p137
輪郭だけの長方形は透明なものと似ていあるが、視線は文字の流れと長方形の輪郭の両方に注がれるので、より複雑な効果がある。
空間の変化は注意を引き、線の繰り返しは活力を生む。
右下のように、長方形が重なり合って重要な語を強調することもある。
8. 左右対称システム Bilateral System p139
軸を中心としたシンメトリーなデザイン
左右対称システムは、1本の軸を中心に行が配置される、最もシンメトリーなシステムだ。
一般的な例には、人間の体、蝶、葉、そして多くの動物や人造物などがある。
左右対称システムは、最もシンメトリー的であると同時に最も難しい。
もともと対称なために構成は予想しやすく、つまらなくなる可能性があるからだ。
軸をフォーマットの中心から外すと、構成はよりダイナミックになり、対角の軸を取り入れたり、行をベースラインから離して対角に動かしたりすると、視覚的面白味が増す。
抽象要素を加えると、それは最大級になる。
p144
シンメトリーの美しさは、左右対称システムの一番の特徴だ。
しかし、システムを使って作業をしていると、その美しさはすぐに退屈さに変わる。
デザイナーは、シンメトリー構成のバリエーションをすばやく調べ、異なる形のテキスト・ブロックを試す。
できあがった構成は、伝統的でどこか変化に乏しい。
軸を中心から外すと、新しい境地が開ける。
空間がある形になったり、白い空間の大きさによってさらに整理されたりする。
これは、空間によって最も面白い解決策を生み出した構成である。
デザイナーは、空間整理、行の分割やスペーシング、軸をずらす、などのシンプルな方法を用いて創造性を追及するよう促される。
初期
デザイナーは、初めのうちシンメトリーの作品を創る。
軸は中心にあるが、行間、行の分割、そしてアラインメントは様々だ。
中期
初期の構成の多くは、すぐに軸がずらされてアシンメトリーになる。
空間の大きさの比率が変えられ、構成はより面白くなる。
進行期
創造的な挑戦が十分に行われる。
大量のネガティブスペース、角度をつけた行、そして傾けた軸が、構成空間を変化させる。
シンメトリーとトーン p146
これらの作品は、すべて軸をシンメトリーに配置した構成で、基本的に文字だけを使っている。
円はいつも万能だが、ここではより重要度が高い。
シンメトリー構造の構成では、中心を外れた唯一の要素になることが多いからだ。
例には、すべて同じテキストが使われている。
しかし、それぞれが行の配置と分割やトーンの変化によって、個性を発揮している。
右の作品はテキストを1行ずつそのまま使い、トーン変化でシンメトリーを強調するとともにメッセージを整え、階層を導いた。
左下は初期の構成で、1行おきにトーンを変化させている。
右下は後の構成だが、階層を限定的に使い、ほんの数語だけを強調してアシンメトリー効果を出した。
シンメトリーとトーン p147
行のところどころで起こるトーンと個々の文字の変化が、右の構成にバラエティーを与えている。
トーン変化は偶発的で、空間に質感の遊びをもたらす。
浮かんでいる2行にはトーン変化を使わず、ほかの行から離した配置にすることで強調した。
右下は、わずかに傾いた行がシンメトリーに動揺を与え、重なり合うことで緊張感を創り出した。
面白いことに1行だけは逆さになり、対比を生み出している。
抽象要素 p148
抽象要素を左右対称システムに取り入れると、よりシンメトリーが強調され、視覚的な面白味が出る。
右の構成で、きつく固まったテキスト・グループは、ごく細い垂直線の上でバランスを取っているように見える。
黒い円は、アシンメトリーなアクセントだ。
字間スペースを変えることによってテキストグループを区別し、質感にバラエティーを持たせた。
下の例は、フォーマットの横幅いっぱいに伸びた赤い罫線が表題を強調し、構成を落ち着かせている。
右下は、テキスト・グループをごく細い線の正方形で囲み、それを赤く太い罫線に接着させることで表題と強く結びつけた。
抽象要素 p149
右の例では、正方形のフォーマットの中にある黒い正方形が、きっちりとテキストを囲い込んでいる。
テキストはみな大文字で、語間スペースを取らず横幅いっぱいに書かれている。
語は端に付くそばから不規則に切られ、重要な語はグレーでわずかに大きく表現された。
右下の構成は同様の方法を用い、円でテキスト・グループを囲んだ。
テキストは、円から背景にはみ出している。
左下は、階段状のブロックが力強い囲い込み要素だ。
アシンメトリーと抽象要素 p150
これらの例では、文字構成はシンメトリーだが、抽象要素はアシンメトリーになっている。
2作品ともとてもシンプルな左右対称の構成で、左端から伸びるグレーの罫線が効果的だ。
この罫線は、アシンメトリーを創るだけでなく、講義名を強調して階層を生み出す。
アシンメトリーと抽象要素 p151
前ページの作品のシンプルさと対照的に、これらの構成は複雑だ。
大きな抽象要素の持つ視覚的な力を使い、アシンメトリーを創っている。
空間に侵入した円はフォーマットの端から切り落とされているので、実際より大きく感じられる。
アシンメトリーな配置 p152
これらすべての作品は、アシンメトリーな軸配置の左右対称構成だ。
文字が限定されており、基本以外の要素は使われていない。
視線は軸の左右にある不均等な空間の形と比率の違いに引きつけられるので、面白味が増す。
最小限の抽象要素だけを使い、説得力のある構成に仕上げた。
アシンメトリーな配置 p154
これらの作品は、大きな抽象要素を使ったアシンメトリーな軸配置の左右対称構成だ。
抽象的な円と長方形は、角から構成空間に侵入する。
角に配置して切り落としたことで動きを暗示し、要素をより大きく見せる。
視線が見えない部分を補うからだ。
すべての例で、大きさもトーンも文字より抽象要素の方が優勢だ。
しかし、全体としての視覚的面白さが高まったので、形ばかりが強調されることは避けられた。