Webデザイナー（私）によるタイポグラフィーレイアウトの注意書き
私はDTPデザインが苦手です ...。でもときどきお客さんから、フライヤーとかポスター、名刺なんかの紙のデザインを頼まれます...。そこでもっと勉強しなくちゃいけないなーと感じていたのが、タイポグラフィーについてのこと。今回はタイポグラフィーとそのレイアウトについて学んだことをまとめてみました。
以前グラフィックデザインをしている先輩に、グリッドシステムや揃えるだけがデザインじゃないし、もっとタイポグラフィーやレイアウトのことを勉強しなさいと言われました …。私は普段、Webデザインしかしていないんですけど、ときどきフライヤーやポスターのデザインを、ついで仕事のような形で頼まれる事があります …。
でも、Webデザインしかしてこなかった私は、紙媒体、DTP デザインが苦手です …。ちょうど1年くらい前にも同じような記事、Webデザイナー（私）によるDTPデザイン注意書き：Webと紙の違いを書いたんですけど、今読むとちょっと恥ずかしいですね X( あれから色々と勉強もして、少しは紙媒体のデザインにも慣れて？きました w
またWebの方も、HTML5 + CSS3 などによって、色んな表現、レイアウトが組めるようになってきました。もちろんこれからも、どんどんWebが進化していって、表現者としてのマルチメディア化（上手く言えませんが…）が求められるんじゃないかなーという気もしています …。Webデザインだけ勉強しててもダメ … みたいな …。
今回は1年前の記事以降、主にタイポグラフィーとレイアウトについて学習したことを整理してまとめてみました。
また、これらはグラフィックデザイナーの先輩に教えてもらった他、以下の本がとっても参考になりました。特に Typographic Systems という本は、基本レイアウトから、構成を成熟させていく過程も紹介されているので、とても参考になりました！リンクはアマゾンに飛びます。
また、この記事を公開するにあたり、書籍発行元である、株式会社ビー・エヌ・エヌ新社 マーケティング部 ご担当者さまには、大変お世話になりました。ありがとうございます！
タイポグラフィーレイアウト 目次
- 視線の動きとデザイン
- 基本の基本、文字間について
- 目立たせる、目立たせないためのいろんな工夫
- アクセントを使った工夫
- いろんなタイポグラフィーレイアウトを見てみよう
- 参考になった書籍やWebサイト
- 最後に …
1. 視線の動きとデザイン
Webデザイン、Webサイトの場合、視線は左上から下に向かって流れるって言われていますよね。アルファベットのZの形のように移動するとか、Fの形の様に移動するとも言われています。でもグラフィックデザインの場合は、そのようなことにあんまりとらわれずに、自由にレイアウトする方がおもしろいですよね。
その為には、文字を読んでもらえる順番をある程度工夫したり、上から下へ … という本来当たり前のレイアウトをやめて自由に配置する分、重要なメッセージと、とそうでないものの優先順位、階層、グルーピングにも工夫が必要になってきます。目立たせる工夫と、目立たせない工夫が必要です。
タイポグラフィーのレイアウトに入る前に、そういった工夫をするため文字自体について学びました。まずはその辺りを見てみます。
2. 基本の基本、文字間について
以前 Stocker.jp さんの[Webデザイン] 文字組みについて本気出して考えてみたという記事を読んで、私って文字詰めが甘いなーと感じていました。文字間については、タイポグラフィーデザインではとっても重要なことだし、基本的なことなので少しおさらいしておきます。
2.1 漢字の文字間
漢字やひらがな、カタカナ、アルファベット … すべての文字は基本的に同じ大きさではありません。漢字は画数も多くて、ぱっと見キレイに四角の中に収まってるように見えますが、文字によっては熟語にした時に文字間の隙間が大きくなることがありますよね。
例えば、愛という漢字と日という漢字では、やっぱり大きさが違います …。
愛と日の比較
フォント：ヒラギノ角ゴ Pro
ピンクの四角の中に愛と日を入れてみました。隙間が違うのが分かると思います！
下記は Photoshop でそのまま一日千秋と書いたものと、字詰め、カーニングをしてみたものです。ちょっと分かり難いサンプルですけど、熟語によってはとってもバランスが悪い場合もあるので、気になる熟語は字詰めをしてみましょう。
カーニング（字詰め）をしてみた
フォント：ヒラギノ角ゴ Pro
青いラインは文字の端でひいたライン。薄いブルーで塗りつぶした部分は、私の感覚で何となくスペースに見える部分です。バラバラだった文字間を、千と秋の文字間を基準にして少し詰めてみました。でも、正確に同じ間隔にするということではなくて、あくまでも目で見た感じが重要ですね！バランスが大事です。
2.2. ひらがな、カタカナの文字間
ひらがなやカタカナの形は、基本的に円の中に収まってるそうです。フォントによってもまちまちですけど、「へ」みたいに平べったい文字もあるし、「し」のように細長い文字もあります。また、小さい「っ」などもあるので、文字間がバラバラになりやすいです。
カーニング（字詰め）をしてみた
フォント：ヒラギノ角ゴ Pro
上記はカードのカとーの文字間を基準にしてカーニングしてみました。ちょっとはバランスがよくなったと思います …。とは言うものの、私は字詰めのバランス間隔が悪いって怒られてますので、あくまで参考ということでお願いします w
2.3. アルファベットの文字間
アルファベットの場合は大文字と小文字がありますよね。また日本語と違って、キレイに四角におさまるとか、円に収まるとかではなくて、それぞれバラバラの形をしています。三角だったり、円だったり…。特に大文字だけを組み合わせる場合は、間隔がバラバラになりやすいです。
カーニング（字詰め）をしてみた
フォント：Helvetica
一方小文字の場合は、大文字のみのときほど間隔がバラバラにはならないようです。でもやっぱり大文字と組み合わせたときなど、字詰めが必要になりますねー。
カーニング（字詰め）をしてみた
フォント：Helvetica
W と e の間を詰めました。
2.4. 数字、その他約物など
漢字やひらがな、カタカナ、アルファベットを大雑把に見てきましたが、文字にはその他数字や、「、」「。」の句読点、「」、（）といった約物（やくもの）と呼ばれるものもあります。バランスよく文字を整えるのは、最終的には自分の目とバランス感覚 … Webサイトばっかり見てないで、雑誌の誌面などで感覚を磨きたいですね！
2.5. 語句、文字の変形
ちょっと寄り道しますけど、さっきまでは文字間を調整して、間隔を揃えるって学びました。でも揃えるばかりがタイポグラフィーじゃありません。タイポグラフィー、言葉には意味があるので、言葉の意味をタイポグラフィーで表現することで、もっとデザインを素敵にできますね！
例）言葉に強弱、抑揚をつけてみるとか
例）ゆれる恋心 … みたいな w
例）斜体にしてスピード感を演出！
こういった基本的なTipsは、先ほど紹介した Stocker.jp さんの[Webデザイン] 文字組みについて本気出して考えてみたで詳しく紹介されているので、タイポグラフィーについて学びたいなーという人は、ぜひ読んでみてくださいね！私の下手っぴーなサンプルよりも、とっても分かりやすいです！
また、Photoshop、Illustrator で字詰めの仕方がわからない … という人は、アドビの記事が参考になると思います！InDesign のチュートリアルですが、基本的には同じようなUIです！
- Adobe InDesign Tutorials
文字組関連編 カーニング、字送り、文字ツメの違い
3. 目立たせる、目立たせないためのいろんな工夫
文字間、文字詰めについて大雑把に見てきましたけど、なぜかと言うと、これから見ていくタイポグラフィーのレイアウト、その中でも、目立たせたり、逆に目立たせなくする工夫にとっても関係があるからなんです。
これから見ていく、タイポグラフィーレイアウトでは、例えばタイトルが一番下にあったりします。Webデザインと違って、紙媒体のデザインはひと目で全体像を見渡すことができます。なのでたとえ一番下にタイトルがあっても、目に飛び込んできやすいように工夫したり、意味が通るように情報のグループ化を工夫したり … そんなテクニックも必要になってきますね！
では、実際に、どーいう風にして文字を目立たせる（あるいは目立たせない）工夫をするか … なんですが、色々なテクニックがあります。まずは字詰めにとっても関係した、タイポグラフィーの密度、質感から見ていきます。
3.1. 文字の密度、質感、余白
以下の画像には、単語が3つ書いてあります。ちょっと実験的でわざとらしい画像ですけど、どの単語が一番目立つか試してみてください。
サンプル
フォント：Helvetica
上から GRAPHICS、DESIGN、WEBという3つの単語が書かれていますが、必ずしも上から順番に読む … というわけではないかも …。
狭い面積に3つの言葉が詰め込まれていますが、それぞれ文字間も違うし、行間も違います。パッと見、WEB という単語か、DESIGN という単語が読みやすくて目立つんじゃないかなーと思います。GRAPHICS という単語は、文字間も行間も狭くて読み難いので、読むとしたら一番最後になると思います …。
今回のサンプルだと、WEBという言葉はまだ読みやすいですけど、もっと文字間が広くなれば、今度は単語として識別できなくなってしまうこともありますねー。そうすると、また目立ち度、読まれる順番が変化すると思います。
タイポグラフィーの密度というか、質感というか、これだけではいまいち説得力にも欠けますが、次に紹介するトーンなどと組み合わせて相乗効果でデザインしてみると、違いがハッキリしてきます。
3.2. 文字のトーン
上記の例では、フォントも文字のウェイト（太さ）も同じでした。今度はそれにトーン（色合い）を加えてみます。ちょっと背景色、ホワイトスペースは変更してますけど、今度はどんな風に見えるでしょう …。
サンプル
フォント：Helvetica
同じ構成でもうひとつ。
サンプル
フォント：Helvetica
同じ構成でも、トーンを変えるだけで目に飛び込んでくるものは変化しますねー（正確には文字の重なり方も違いますけど …）。サンプルでは、トーンを2種類、濃いグレーと淡いグレーしか使ってませんし、色もつけていませんが、もっと複数のトーンを使い分けたり、色によって階層をつけることもできますね！
一般的に暖色は飛び出して見えて、寒色は引っ込んで見えるって言われています。
3.3. 文字の大きさ
文字の大きさによっても、目立ち度、読まれる順番、メッセージの重要度の優先順位が変化しますよね！もちろん大きい方が先に目に入ってくるし、メッセージの中で一番重要なもの … という感じがします。
サンプル
フォント：Helvetica
4. アクセントを使った工夫
今まではタイポグラフィー、文字だけで目立ち度や言葉の重要度、優先順位を変化させてきました。今度はそれにアクセントを加えてみます。
今回はアクセントに、丸、円を使ってみます。同じ丸でも配置する場所によって、始点になったり終点になったり、バランスを整えたり、強調したりできます。それでは順に見ていきましょう。
4.1. 始点と強調の位置
さっきも使ったサンプルの WEB という単語の頭に円を置いてみました。小さな円ですが、存在感がとってもあって WEB の行を強調しています。また、読み始めの位置を示唆する始点の役割もはたしていますねー！
サンプル
フォント：Helvetica
4.2. 終点の位置
今度は WEB という単語の後ろに、円を置いてみました。こうすると、行や言葉がそこで終わることを印象づけられますね。さっきと同じ丸なのに、置く場所によって意味合いというか、受ける印象がまるで違います。おもしろいですねー！
サンプル
フォント：Helvetica
4.3. バランス、旋回の位置
今度はタイポグラフィーの下、ちょうど真ん中に丸を置いてみました。さっきまでは WEB の文字のベースラインが効いていたので、どっちかというと、どっしりと安定した印象がありました。今度はまるでシーソーのように、丸の上でバランスを取ってるようにも見えます。また、真ん中に一本の見えない線が生まれて、シンメトリー（左右対称）な構成も浮かび上がってきますねー。
サンプル
フォント：Helvetica
また、円、丸は、角や真っすぐな線がないので、回転、旋回の中心という印象を与えます。ふつう円を中心にして、時計の文字盤のように右回りで視線が流れていくので、そういった配置の工夫もおもしろいですね！
4.4. 背景で強調
今度は背景をちょっとだけ使ってみます。細い罫線で WEB を囲んで、少し傾けてみました。
サンプル
フォント：Helvetica
罫線で強調された他、ちょっとアンバランス、不安定な感じがして、余計に目立ちますねー。
他にもいろんな方法で、目立ち度、優先順位、階層を作ることが出来ると思います。ここで紹介したのほんの一部。いろんなデザインを見て、研究したり、友達とデザインを見せ合いっこして、どういう風に見えるかを聞いてみるのもおもしろいですね！
5. いろんなタイポグラフィーレイアウトを見てみよう
Webデザインには、よくグリッドレイアウトが使われたりします。グリッドシステムを使わないときでも、基本的には上から下、左から右へ … という配置が多いです。でもフライヤー、ポスターなど、紙媒体のデザインをするときは、必ずしもそうではありませんよね。
Webデザインばっかりしていた私にとっては、上から下へ、左から右へという自然な流れに逆らうのは、とっても難しいことでした。でも、前半で紹介した、タイポグラフィーだけでの目立ち度、優先順位の付け方とかを学ぶと、前よりは楽しくデザインできるようになりました！
スクロールできるWebブラウザと違って、限られた面積、誌面の中でのデザインは、Webデザインと違ったおもしろさもありますね！もちろん、Webデザインにも応用がきくというか、基本部分は同じだと思ってるので、タイポグラフィーのレイアウトについて学ぶのは、継続的に続けたいです。
それでは、よくあるグリッドシステムの他、どんなレイアウトがあるのか、具体的に見ていきます！
5.1. 軸を使ったレイアウト
まずは比較的分かりやすい、軸を使ったレイアウトから見ていきます。軸 … 木の幹のように、真ん中に芯が一本通ってる感じです。真ん中に一本の軸 … と聞くと、シンメトリー（左右対称）なデザインが、ぱっと頭に浮かびますけど、必ずしもシンメトリーになるわけではありません。また、直線である必要もありません。
軸を使うと、軸を中心に左右に整理されて、優先順位をつけたり、情報をグルーピングするのも比較的簡単なレイアウトだと思います。
Emil Ruder：1960
via @ Emil Ruder
エミール・ルダーによる、1960年にデザインされたチューリッヒの10人のアーティストのポスターです。10の「1」と「h」がつながって、縦に1本真っすぐ軸が通っています。軸の左右は気持ちのいい対比、1：2 の広さになっています …。かっこいいですねー。
Odermatt & Tissi：1980
via @PARAGRAMS
オーデルマットとティッシ による、1980年にデザインされたポスターです。真っすぐ垂直な軸の左側だけ、対角（斜め）に配置されたタイポグラフィーがダイナミックですね！
文字自体は片側だけの配置なので、情報がスッキリされて見やすくなっています。何が書いてあるのかは、言葉がわからないのでちょっと読めませんが w
黒と白の対比で、白い文字が目に飛び込んできますよね！軸を使って整理されているし、行間や文字の大きさで、情報のグルーピングや優先順位もついてると思います（読めませんが w）。
また、2番目というか2段目の Kunst suf Zeit という言葉は、1行にしないで、わざと2行にしているんじゃないかなー …。そーすることで、クリスマスツリーを半分にしたようなシルエットを作り、とっても安定していて全体のバランスがよくなっているんだと思います。
Werner Jeker：1998
via @ WEB POSTER EXHIBITION – Werner Jeker
ワーナー・ジェーカーによって、1998年にデザインされたポスターです。タイポグラフィーの軸は真横に通っていますが、それと対比をなすように写真が真っすぐ垂直な軸を作っていてとってもステキ！写真の女性の顔の位置に合わせて、文字も下から上へと流れていってますねー。
ここで紹介したのは、いずれも真っすぐな軸でしたけど、前述したとおり曲線やジグザグな軸など、いろんな線で整理してレイアウトすると、おもしろいデザインができそうですね！
軸を使ったレイアウトのまとめ
- 基本的には揃える、整理するデザイン
- 軸に沿ってレイアウトすると、メッセージの優先順位とかグルーピングがしやすい。
- 余白を意識して、全体的なシルエットを作るとキレイ
- 軸から対角を使うと、ダイナミックな印象になる
5.2. 放射状のレイアウト
一カ所からタイポグラフィーを放射状に配置するレイアウトです。花びらとか、花火みたいなイメージ。とっても印象に残りやすいですね！
放射状にタイポグラフィーを配置すると、中心に向かって引き寄せられる感じと、全体的に広がっていく感じがあります。構成はとってもダイナミックになって、動きがありますね！
Paul Humphrey and Luke Davies：1998
via @ Old Truman Brewery Promoital Poster
ポール・ハンフリーとルーク・デイビスによる、1998年にデザインされたポスターです。動きがあって、とっても活発な印象を受けますよね！
タイポグラフィーを放射状に配置する場合、ちょっと注意が必要です。まず、行に角度をつけていくので、水平を離れるに従って文字が読み難くなってしまうこと。
それから、各行が独立してしまうので、情報の優先順位づけ、階層の作り方に工夫が必要ですねー。前半で学んだように、文字の大きさはもちろん、トーンやアクセントなど、いろんなテクニックを使って優先順位つくりを研究するとおもしろいです。
上の作品では、黒と赤でほぼ対角に切り込んだ長めの行、THE NEW ESTABLISHMENT HAVE MADE THE OLD TRUUMAN BREWERY THEUR HEADQUARTERS の部分や、右側の水平に配置された赤いボックスの白抜き文字 THE OLD TRUUMAN BREWERY 辺りがメッセージとして優先順位が高そうです…。
大きめの白い文字は、目に入るけどひと目ではなんて書いてあるかわからない … 結果、じっくり読む … というような感じもします。
RIVERWEST,MILW.
via @melissa audrey dahlmanarchive
上記のポスターは、行の長さと文字の大きさで、上から順番に階層分けされてますね！すっきりして読みやすいです。
紹介したポスターは、どっちもアシンメトリー（左右非対称）ですが、シンメトリーな配置なども多いレイアウトシステムですね！また、放射状というと、丸、円を連想しますが、90度とか、120度とかに角度を固定すると、十字とか三角形のレイアウトもできるのでいろいろ試してみるといいかも。
放射状レイアウトのまとめ
- ダイナミックな印象
- 水平を離れるに従って文字が読み難くなってしまう
- 各行が独立してしまうので、情報の優先順位づけ、階層の作り方に工夫が必要
5.3. 円を使ったレイアウト
今度はタイポグラフィーを円弧に沿わせたレイアウト。空にかかる虹や、水面の波紋みたいなイメージです。
放射状レイアウトと同じように、円の中心に向かって視線が動いたり、円弧に沿って流れていきますね！ダイナミックな感じもするし、角がないので、フォントの組み合わせによっては、まるっこくて可愛らしい印象もあったりします。
Nicolaus Ott and Bernard Stein 1984
via @Olaf
ニコラス・オットとバーナード・ステインによって、1984年にデザインされたポスターです。円弧にそって流れるように視線が移動していきます。円を使うと、放射状のレイアウトと同じように、ダイナミックな印象になりますね！
一カ所だけ円弧の向きが逆になって、スムーズな流れができていてますね！情報のグルーピング、優先順位の付け方など参考したいです…。あまり重要ではないと思われるけれど、掲載しておきたい情報などは、左はじに整理して配置されています。
円を使ったレイアウトで注意したいのは、タイポグラフィーの向き。円弧に沿って進んでいくと、いずれは逆さまになったりするので、読みやすさを優先させたい場合には工夫が必要です。
また、角や直線のない円は、キチンと計画的にレイアウトしていかないと、無秩序な感じになりやすいです。情報を整理してグルーピングしたり、階層をつけたりするのが大切です。
前述した軸を使ったレイアウトと組み合わせて、一カ所テキストの端などを揃えてみるのも、整理するのには簡単で効果的だったりします。いろいろ試してみてくださいね！
Rachel Berger
via @Jessica Svendsen
円は色んな形の中でもとっても目立つ形。上の作品は、とってもシンプルな構成ですけど、水平に文字を配置するよりも断然ダイナミックで素敵ですよね！最終的には円の中心にある、小さな文字の方へ視線が流れていくと思います！最後まで読んでもらえる工夫がさりげなくされてますねー。
円を使ったレイアウトのまとめ
- 文字の向きに気をつけないと、読み難くなってしまう
- 視線が円の中心に向かったり、円弧に沿って流れていくので、流れをうまく利用する
- 円には自然な流れがあるので、それに沿ってメッセージの階層を工夫する
- 基本的にダイナミックな構成になる
5.4. 無秩序、ランダムなレイアウト
今までのレイアウトは何かしら形に沿ってレイアウトしてきました。でも、今度は逆に無秩序、ランダムなレイアウトを見てみます。
ランダムなので、基本的にルールもありません。でも気をつけたいのは、アライメント、どこかに揃えるということをしないこと。少し揃ってるだけでも、意図的に見えてしまうからです。
また、無秩序なレイアウトの場合、可読性はとても悪くなるので、タイポグラフィーを読んでもらうというよりも、視覚言語というか、イメージを伝えるという感じに向いていますね！
人の目や脳は、無秩序の中にも自然と秩序を探し出すように働くそうです。なので、ほんの少しだけ、何かヒントになるようなものを置いておくと、ランダムなレイアウトでも、情報を伝えることはできます。
Kings of Leon
via @Kings of Leon
上のポスターは、記号の中に KINGS OF LEON というアルファベットが隠れてます。アルファベットにだけシャドウがついているので、ランダムな配置でも可読性は保たれていますね！また、単語だけはカラーを揃えたりして、より可読性を確保する工夫がされています。
Garamond 3D
via @Garamond 3D
こちらも文字がランダムに散りばめられて、文字が重なったりして全ての文字を読むことはできません …。でも、GARAMOND（フォントの名前）という文字だけ大きくして、タイトルだけは判別できるように工夫されています。
また、赤、白、青の文字は、3Dメガネで見ると、立体的に見える … という工夫もされているみたいです。私は3Dメガネを持っていないので、どんな風に見えるのかわかりませんけど … 残念です X(
ランダムなレイアウトの場合は、ご覧の通りにメッセージをたくさん読ませる … というデザインには向きませんが、遊びごころがあって、ちょっと楽しいです。情報のグループ分け、階層をつけるのは難しいレイアウトですけど、伝えたい内容によってはおもしろいデザインになりますね！
ランダムなレイアウトのまとめ
- 意図的に見えるので、どこかに揃えるということをしないこと
- 可読性はとても悪い
- 読ませる必要があるなら、すこしヒントとなる要素を加える
- 情報のグループ分け、階層をつけるのは難しいので、情報をたくさん掲載するのには向かない
5.5. 層を使ったレイアウト
層というのは、行が積み重なってはいるけれど、きちっと整列しているわけではなくて、左右にゆらゆら漂うようなイメージ。そしてどことなく不揃いで、移り変わっていくようなイメージ。とってもリラックスしたレイアウトです。
ちょっと言葉では難しいので、下記のポスターを見てください。
David Carson：1996
via @Typographic Research
何層にも重なったタイポグラフィーには、キッチリとした整列が見られる訳ではなくて、ゆらゆら左右に揺らめく感じもします。SAN FRANCISCO や CALIFORNIA の不揃いなフォントが、余計にそう感じさせます。
どことなくリラックスしたレイアウトですね！層を使ったレイアウトの特徴は動き。垂直方向のアライメント、揃えをわざとなくして、視覚的な停止点（前述しましたね！）を排除します。
行間はもちろん、必要なら一行をわざと複数にわけたりして、動きを意識するとそれらしいデザインになります！
やってみると分かるんですけど、難しいのは情報のグループ化と優先順位の付け方。上のポスターでは、所々に袋文字を使ったりして、トーンを変えてコントロールしてますねー。かっこいいです …。前半で学んだことをふまえて、上手にグルーピング、優先順位をつけたいですね！
どことなく文字が波間をゆらゆら漂ってる感じもします … デザイナーのデビット・カーソンさんはサーファーでもあるそうです…。
Nedjelco-Michel Karlovich
via @Jessica Svendsen
こちらは文字自体に動きをつけてますね。行間、文字間の余白で、一行ごとの質感、密度を変化させてます。
Redefines
via @90 Exciting Typography Posters and Designs
こちらはちょっとかっちりしたイメージですねー。所々に縦のタイポグラフィーがあって、対比によって緊張感もでてますねー。カッコいいです …。ゆらゆら揺れるというよりも、規則的に動き出しそうな印象を受けますね。
ここで紹介したのは全部水平ですが、角度をつけて斜めにしたりすると、文字が滑り落ちるような印象が出ておもしろいです。
TAITANIC
via @90 Exciting Typography Posters and Designs
こんな風に風景画を思わせるのも、層を使ったレイアウトの特徴ですね！タイタニックが沈んじゃう … みたいな w
層を使ったレイアウトのまとめ
- きちっとした整列を作らないで、動きを意識する
- メッセージのグルーピングをタイポグラフィーの質感（前半で学んだこと）などで工夫する
- 行間、文字間などの余白にも気を配る
- きっちりしていないリラックスした印象
5.6. パターンを使ったレイアウト
パターンを使ったレイアウトは、Webに携わる人ならなじみ深いかもしれませんね！ある程度規格化されたユニット、パターンにタイポグラフィーを配置していくレイアウトです。
もちろんユニットの形は様々で、四角もあれば三角や円、もっと複雑な形もありますよね！下の作品は、ちょっとバラバラの大きさの四角のユニットに、ひと文字ずつ配置したレイアウト。一行目は行間を広く取ったり、あるべきパターンを排除して、余白を作ってアクセントにしたり…。
また、キレイに配置された中で、ひとつだけ斜めに配置したりしてリズムを作ったりするのも、よく見かけるテクニックですね！
I Wish God Could See Me Now
via @Inkbot Design
上の作品は、ちょっとキチンと整列してなくて、ラフな感じがしますけど …。パターンを使う場合、円や正方形などのシンプルな形の方がデザインしやすいです。でもシンプルすぎて少し退屈になりがち。統一感を持たせながらも、少しリズムをつけたりした方が素敵なデザインになりますね！
Toni Morrison Fête du Livre, Aix-en-Provence, 2001
via @Portfolio : Philippe Apeloig
フィリップ・アペローグによって、2001年にデザインされたポスターです。こちらはハッキリとしたパターンの形はどこにも見えませんが、格子状の見えない四角が見えると思います。全体がひと文字ずつなのに、一カ所だけ単語、Fet du Livre が配置されていて、そこの部分で四角い枠があることを印象づけています。 （グリッドレイアウトみたいな感じですね）
また、女性の目の部分だけが空白になっていて、ちょっとドキッとする素敵なデザインですね！また、ひと文字ずつパターンに入れると、単語の判別がし難くなりますが、上の作品では単語の一番はじめの文字だけ大文字にして、可読性を高めているんですね！
ここで紹介した作品は、ユニットにひと文字ずつ配置しているパターンですけど、もちろんそれに限ったことではありません。
パターンを使ったレイアウトのまとめ
- パターンを使うと、全体的に統一感が出やすい
- 退屈な印象になりがちなので、リズムをつくると面白みが増します
- パターン内にはひと文字、単語、行など、バラエティーに富んだレイアウトも
- 日本語の場合は縦方向もあるので、読みやすさにも配慮
5.7. 左右対称レイアウト
左右対称は1本の軸を真ん中にして配置されるレイアウト。シンメトリーは自然界の中でも蝶や葉っぱ、もちろん人の身体など、いろんなところで見ることができますよね！基本的には一番最初の軸を使ったレイアウトのように、情報のグループ化や優先順位も作りやすいレイアウトです。
富士山が美しいのは、キレイなシンメトリーになっているからだとも言われています。でも、シンメトリーなデザインは、パッと見美しいけれど、簡単に構成の予想がついてしまうので、飽きやすくて少し退屈な感じもします。
MUSTARD PLUG CONCERT POSTER
via @James O’Briant
こちらの作品は、基本的にタイポグラフィーはシンメトリーな構成です。でも少しだけ文字を傾けたり、背景を左右非対称にして、どことなく前述した層を使ったレイアウトのように、左右に動き出しそうな印象を受けます。簡単に予想できる構成ではなくなって、退屈どころかわくわくする感じですね！
Odermatt & Tissi 1992
via @Carnegie Mellon University
オーデルマットとティッシによって1992年にデザインされたポスターです。この作品では、湖に沈む夕日と三日月、湖面への反射を表しているそうです。左側は緑の森。中央でシンメトリーなレイアウトになっていますが、全体的にはアシンメトリーな構成になっていますね！とってもステキです … XD
また、必ずしも軸を中心にする必要もないので、左右にできる余白を使って、素敵なデザインを作りたいですね！
6. 参考になった書籍やWebサイト
書籍
リンクはアマゾンに飛びます。
- Typographic Systems―美しい文字レイアウト、8つのシステム
今回紹介した、タイポグラフィーレイアウトについて詳しく書かれている書籍です。もともと海外の本を翻訳した書籍です。いろんなタイポグラフィーレイアウトの基本構成をもとに、多くのデザインを学ぶ学生さんの作品が掲載されています。デザインの過程、プロのデザイナーさんの作品を見ながら学ぶことができます。 - タイポグラフィの基本ルール－プロに学ぶ、一生枯れない永久不滅テクニック－ (デザインラボ)
こちらは新しめの本ですが、字詰めなど詳しく解説されていたり、タイポグラフィーレイアウトについても解説されています。もともと日本の書籍なので、とても分かりやすいです。これからタイポグラフィーについて学びたいなーって思ってる人にはおすすめです。
Webサイト
- Pinterest：Poster Design
- Flickr：Typography Posters
- Creattica：Posters
7. 最後に …
タイポグラフィーのレイアウトについて、いろいろ見てきました。もちろんレイアウトはデザイナーさんの数だけあるというか、決まったテンプレート？のようなものではありません。ある程度、基本というか、セオリーみたいなものはあると思うんですけど（特に色、カラーに関してはありますよね！）、必ずしもこうしなさい！というものではないと思います。
デザインって本当に難しいですよね。先日アップルのCEOを辞任されたスティーブ・ジョブズさんも下記のような言葉を残しています。
Design is not just what it looks like and feels like. Design is how it works.
デザインとは単にどのように見えるか、どのように感じるかということではない。どう機能するかだ。
デザイナーとして、まだまだ未熟で半人前の私。だからこういったセオリーのようなものを勉強しがちで、ついついセオリー通りのデザインに落ちついちゃう …。また、技術的に優れていないと、デザインとしてダメなんじゃないかっていう怯えもあります …。
でも、最終的には自分の美意識でデザインを仕上げられるようになりたいなーって思います。いろんな素敵なデザイン、優れてるって言われてるデザインから学ぶことは本当に多いです。でも自分なりのデザインを作ることも同じように大事なんじゃないかなーと … 上手く言えないけど。
デザインを学ぶときに、よく他人のデザインを学びがちだが、自分のデザインの中で行っていることを分解して言葉にすることによって、多くの学びを得ることができる。
via @DaiKawakami via 佐藤好彦
とても素敵な言葉だと思いました。それともうひとつ。
I don’t think that design needs theory, but I think designers need theory.
デザインにセオリーは必要ないが、デザイナーには理論が必要だ。
過去記事：ちょっと（かなり）考えさせられるデザイナー、アーティストの深〜い名言集
デザインそのものにはセオリーはない … もっと自由な発想でデザイン出来るようになりたいなーって思います。でもやっぱりその為には、ルールというか、セオリーを学ぶことも大事なんですねー！
最後はまた、ちょっとわけわかめでしたけど、半人前Webデザイナー（私）のタイポグラフィーレイアウトの注意書きでした！