【デザイン入門教室】Chapter2 レイアウトの基本ルール

01 版面・マージンの基本と設計方法

版面：レイアウトスペース（文字情報や写真、図版などを配置できる領域）
マージン：レイアウトスペース外の余白

版面率
版面が大きい＝掲載する情報が多い＝版面率が高い
版面が小さい＝掲載する情報が少ない＝版面率が低い

印刷物のマージン
最低でも紙の端から5～10mm程度はマージンを取る

基本的はマージンは上下、左右で揃える
マージン上に要素を配置すると不安定になり躍動感が出る

02 グリッドの基礎知識

グリッド：紙面の縦横に等間隔で配置される格子状のガイド
グリッドシステム：グリッドを用いたレイアウト手法
グリッドレイアウトはバリエーションが様々ある

03 グリッドの設定方法

図版などを基準としたグリッド設定
①版図を決める
②グリッドを設定する

本文の文字サイズを基準としたグリッド設定
①版図を決め、仮のグリッドを設定する
②文字サイズと行送りを決める
③文字の大きさからグリッドの大きさを設定する
④ブロックを複製し本文を流し込む
⑤ブロックの間隔を調整する
⑥ブロック間のマージン調節

04 グループ化（接近効果）

ゲシュタルトの法則
人は無意識のうちに同じ形をしたものや、
近くにあるもの同士を1つの「まとまり」として認識しようとする

グループ化のポイント
Point1：同じ意味や役割を持つ役割をまとめる
Point2：関連性の低い要素につながりを作らない
Point3：「地」を上手く利用する

さまざまなグループ化
類似：色や形でグループ化する
閉合：括弧や罫線などで囲む

05 揃える

人は規則正しく整列しているものを見ると
本能的に「美しい」「きれいだ」と感じる

人間の目や脳はとても優秀で
少しのズレでも違和感を感じる

デザインの揃えるべき要素
ひとまとまりで扱うべき要素、要素間の余白

揃えるべき場所
左揃え、右揃え、中央揃え
※要素ブロック間の間隔やボックス内のズレも揃える

揃える方法
①補助線を使う
②グリッドを使う

形の異なる要素を揃える方法
各要素の視覚上の重量（軸）、または占有領域を基準にして
実際に要素を見ながら手作業で揃える

揃えるためのテクニック
複雑な形をした要素には囲みをつけて、その囲みに補助線を引く

写真や図版の表示範囲
同じ重要度なら被写体の大きさや図版の大きさを揃える

06 コントラスト（対比）

さまざまなコントラスト
①大きい文字と小さい文字の対比
②写真や図版と文章の対比
③色の対比
④密度の高い部分と余白の対比
※強調したい内容とそうでない内容を区別する

コントラストを付ける際のポイント
・強調したい要素を明確にする
・しっかりと違いをつける

ジャンプ率：紙面上の「大きい部分」と「小さい部分」の比率
比率が高い＝ジャンプ率が高い、比率が低い＝ジャンプ率が低い

文字のジャンプ率：「本文のサイズ」に対する
「タイトル」「見出し」「キャプション」の大きさの比率
※役割を考えて文字サイズを変え、コントラストをつける

図版のジャンプ率：各図版や写真の大きさの比率
※優先順位の高いものを大きく配置する

ジャンプ率の決め方
感覚で調整するか「等差」「等比」「数式」などを基準に考える

文字を組み合わせて強調する場合はファミリー書体を使い
共通性を出すことで違和感なく読ませることが出来る

07 反復・繰り返し

反復・繰り返し：複数の写真や図版、文字などを
同一のデザインルールの下でレイアウトすること
※繰り返す要素が多いほど効果的で、要素が増えると
読み手は容易に規則性を把握することが出来る

同一のデザインルールを適用する
①写真、図版のサイズ
②文字サイズ
③書体の種類
④罫線などの装飾
⑤色
⑥配置
⑦マージン
など

グループ内の要素には同じルールで反復・繰り返しを適用する
（同じ重要度の要素は同じデザインで統一する）

※コントラストをつけてタイトルや見出しなどを
強調して繰り返すとより効果的

08 裁ち落とし配置

裁ち落とし配置：写真や図版などを
紙面からはみ出すように配置する技法
（紙面に空間的な広がりを持たせることができる）

被写体を目立たせたい＝基本通りのレイアウト
空気感を活かしたい＝裁ち落とし配置

09 重心と見た目

重さ：要素の大きさ、密度、色の濃度
レイアウトの中心に重心を置くと安定感が出る

※写真の重心は全体ではなく部分をみて判断する

10 余白の設定

余白：紙面上の何も配置されていない空白の部分

余白の役割
・紙面を演出する
・要素同士を結び付ける
・重要な部分を強調する

狭い余白＝楽しそう、賑やか（やり過ぎは騒がしい印象）
広い余白＝高級感、ゆったり、静か（やりすぎは寂しい印象）

余白による空間の演出
配置する要素が少ない場合は余白を活かすレイアウトを考える
（余白に役割を与え、余白をデザインする）

余白デザインの基本
「左揃え」「右揃え」「上端揃え」「下端揃え」

上下左右のいずれかに要素を揃えることで
要素箇所と余白箇所が明確になり
空間的な広がりと安定感の両方を得られる

四隅の2～3箇所には意図的に要素を置かない
・四隅の全てが埋まると空間の逃げ場がない窮屈な印象になる

11 シンメトリー（対称性）

シンメトリー：左右対称・反転
対象物の中央に反転の軸となる仮想のラインや点を配置し、
その軸と中心に各要素を対象的に配置する技法

「左右対称」「鏡面対称」「点対称」「平行移動」

下部に重心のある三角形型の構図＝安定感が出る
上部に重心のある逆三角形型の構図＝緊張感が出る

シンメトリーは格式、伝統的、クラシカルなデザインに向いている
＝書体は高貴でゆったりした印象を与えるセリフ書体の方が相性が良い

12 比較

比較：紙面を二分割にして関連性の強い要素同士を
対比させるレイアウト方法

比較の基本
①鏡面対称
②点対称
③平行移動

※並列関係にある要素だけでなく
対称的な要素を比較しても面白い効果が得られる

13 黄金比/白銀比

黄金比：近似値（1：1.618＝約5：8）の比率
黄金長方形：黄金比で作成された四角形
黄金分割：黄金比で面分割すること

白銀比：近似値（1：√2）の比率
√2の長方形：白銀比で作成された四角形
大和比：日本の伝統的な建造物の比率

黄金比や白銀比のデザインへの応用
・黄金比を用いた紙面分割、グリッド設計
・黄金比を用いた画像や図版のトリミング
・白銀比を用いた版面設計

14 1/3の法則

1/3の法則：紙面を三等分し、それぞれの基準線や
各エリアを基準にして要素を分けたり、配置することで
全体のバランスをとるレイアウト技法

※1/3のうち2つを1つと捉えて、1:2の構図にすると安定感が出る

15 逆ピラミッド

逆ピラミッド：重要性の高い情報から順に、情報を提示すること
結論→特徴や機能→詳細な説明

逆ピラミッドはリードと本文で構成される
リード：5W1Hの6つの要素をまとめた情報伝達のポイント
本文：リードに続く情報のかたまり

これらの情報をグループ化しながら、
重要度の高いものから並べる

視線の動きを意識する

横組の場合：Z型
縦組の場合：N型

書籍情報

⇒デザイン入門教室[特別講義]（Amazon）

⇒デザイン入門教室[特別講義]（楽天）