わたしはなぜ配置しているのか？ーーーレイアウトの原則

みなみなさま、ごきげんさま。

デザイナーという職種があるのはご存知でしょうか。

デザインをする人をデザイナーと呼びます。

さてこのデザインとは何なのでしょう。

建築家、ルイス・サリヴァン（Louis Sullivan）さんの言葉を借りると、

ことです。

なぜデザインの一部である形は機能に従うのか、どんな機能に従うのか。なんてことを、このNoteでは数回にわたり話してきました。

広告媒体（広告デザインの話を主としていますので）の機能に従い、
人間の認知の機能に従い、デザイン（形をつくる）をするわけです。

広告媒体の機能とは、テレビコマーシャルとラジオコマーシャルでは伝えられる情報が違います。ラジオコマーシャルでは視覚情報は伝えられません。グラフィック広告、チラシやパンフレット、ポスターでは時間軸を使うことができません。つまりは動かすことができません。ネット広告でも、動いているものと静止しているものとでは機能が違います。

同じ静止しているネット広告と印刷される広告物でも、機能が全く違います。ネット広告の機能で形をつくっても印刷物としては不十分な場合もあります。逆もしかりです。

それらの機能に従わなければ、デザインされたことにはなりません。
広告デザインではない場合も、建築やファッション、インテリアや空間などあらゆるデザイナーは、その扱うものの機能に従わなければなりません。木造建築は木の機能に従わないければなりませんし、フォーマルな場に着ていく服ならばフォーマルな機能に従わなければなりません。

人間の認知は、ゲシュタルトの法則で物事を捉えていることを元にどう認知されているのかという機能に従い形ができています。

このゲシュタルトの法則がいくつもあり、前々回と前回にわたり話してきたのですが、全てを一気に覚え従うのもなかなか難しいものです。

もう少し、グラフィックに偏った、絞った、いや特化したものがありますので、今回はその紹介ができればと思っています。

その名も、レイアウトの原則。

この原則を守れば、レイアウト、つまりはグラフィックデザインの配置が、人間の機能に従うようになる、ということです。

レイアウトの「なにか」違う。の「なにか」がわかる、ということです。

逆にいうと、この原則をしっかり守りレイアウトしたのに、「なにか」違う。と感じたのならば、レイアウトではなくそこに入っている写真や文章などの素材（要素）が違うのかもしれません。

そしてこのレイアウトの原則は、デザイナーだけではなく普通の会社員の企画書や資料作り、飲食店などではメニューづくりなどにも活かせられる優れものでもあります。ぜひ参考にしていただければと思います。

それもそのはずで、この原則を考案し、一般に広めたロビン・ウィリアムズ（Robin Williams）さんは、デザインの専門教育を受けていない人々に向け視覚的コミュニケーションを劇的に改善するためのルールを4つに整理し、世界的なスタンダードとしたわけです。

それまでは、デザイン界における「レイアウトのルール」は、美術学校の徒弟制度や、職人の長年の経験、あるいはゲシュタルトの法則のような学術論文で学ばなければなりませんでした。

つまり、専門家以外にはよくわからないアート（才能）だったわけです。

これをデザインの専門教育を受けていない一般の人（デザイナーではない人）でも直感的に理解し、今日からでも実践できるようにしたのです。

デザイナーからすると、えらい迷惑な話です。AIの以前に一般の人に仕事を奪われます。これが、1994年ですから30年も前の出来事です。もはやデザイナーに仕事などありません。いや、嘘です。レイアウトだけがデザインではありません。まだ媒体の機能も広告の機能も残っています。こちらの機能もAIにそろそろ奪われそうですが、人間の認知以外の機能がまだ残っています。

『The Non-Designer's Design Book: Design and Typographic Principles for the Visual Novice』（Robin Williams　Peachpit Press　1994年）
アメリカにて、このタイトルもと書籍が発売され、デザイン実用書における圧倒的なロングセラーになります。

その4年後に日本版も、
『ノンデザイナーズ・デザインブック』（ロビン・ウィリアムズ（Robin Williams）著・米谷 テツヤ / 吉川 典秀訳　毎日コミュニケーションズ（現：マイナビ出版）　1998年）というタイトルで発売されています。

世界と違わずに、日本でもベストセラーとなりデザイナーの仕事は奪われまくりです。

時代の流れ的には、Macintosh（Apple製）という通称Mac、コンピュータ上でデザインワークを一手に担うDTP（Desktop Publishing / デスクトップパブリッシング）でレイアウト（文字の入力、画像や図表の配置）行い、印刷用のデータを作成・出力する工程ができるようになり、グラフィックデザイン業界ではパラダイムシフトが起きている時代です。

つまりは、コンピュータが使える人がデザインワークを一手に担わなければならなかったとも言えます。

かは、わかりませんが、世界でベストセラーとなりレイアウトの手助けをしています。コンピュータを使えると印刷までのデータがつくれたことは確かです。

では、レイアウトの原則とは何なのでしょうか。

近接（Proximity）
整列（Alignment）
反復（Repetition）
コントラスト（Contrast）

と言っています。

この4つです。シンプルです。

4つならば覚えられそうです、今日からでも実用できそうです。

この本の中では、レイアウトではなくデザインの４原則として紹介されています。

ただの美しい配置ではなく機能している原則です。
という意図のもとにデザインの４原則という言葉で伝えています。

なぜ日本ではレイアウトの4原則となったのか。この原則を紹介しているSNSやブログなどでは、レイアウトの方が親しまれた、いや受け入れられたといった方がいいでしょうか。

デザインはハードルが高いなんて日本ではイメージなのでしょうか。
つまりは、アートとデザインはさほどの変わりがないイメージなのでしょうか。才能の賜物ということでしょうか。

前置きが長くなりましたが、近接（Proximity）から見ていきましょう。

メカニズムとしては、近接の法則（ゲシュタルト理論）ですね。

近接の法則とは、人は無意識に見ている対象をグループ化（まとまり）として物事を捉える。
複数の要素が互いに近づいて配置されていると、人はそれを個別の要素ではなく、「1つの視覚的なユニット（塊）」として認識します。

物理的な距離（余白の広狭）は、そのまま「情報同士の関係性の近さ」を表す視覚的なシグナルとなり、関連のない要素が同じような距離感で散らばっていると、見ている人は「どこからどこまでが1つのまとまりなのか？」を自分の頭で解読しなければならず、そのものを読む意欲を失う原因になりえます。

本書の中では、すべての原則を具体的な名刺や店舗のチラシなどのレイアウト（デザイン）を用いて、BeforeとAfterとして解説してくれています。

この解説が気になる、デザインが今日からでもしたいとお思いの方は、ぜひ、『ノンデザイナーズ・デザインブック』をお読みいただければ幸いです。

近接（Proximity）を私の解釈を交えて、解説すると、
関連のあるものは近づけて「1つのまとまり（グループ）」と見えるようにしましょう。
逆に関連のないものは離し（遠ざける）ましょう。ということです。
名刺でいうと、肩書きと名前は1つのグループと見て欲しいから近づけ、住所やHPや電話番号で1つのグループと見て欲しいから近づける。
この名前グループと住所グループは同じグループとしては見てほしくないから離す（遠ざける）。同じグループと混同されることを避ける。

こういうことを知られるデザイナーとしては、困りますが……。せめても悪あがきとして、解説はこれくらいにして次の整列（Alignment）にいきたいと思います。

メカニズムとしては、閉合の法則と連続の法則（ゲシュタルト理論）ですね。

閉合の法則とは、閉じた形になりそうな図形を見ると途切れている部分があっても、
脳が勝手に線を補って「完全な形」とまとまって認識します。

連続の法則とは、点や線が直線的、あるいは滑らかな曲線でつながっている場合、
それらをひとつの連続した流れとして認識します。

たとえそこに物理的な境界線が引かれていなくても、要素の端（あるいは中央）が綺麗に揃っていると、人間の脳はその間に「見えない直線（あるいは補助線）」を感じ取りまとまり（グループ）として捉えます。
この線が、離れた要素同士を視覚的につなぐ役割を果たし、ひとつの連続した流れのまとまり（グループ）として捉えます。

著者のウィリアムズさんは、
テキスト（文字）やイラストなどを配置する場合、明確な「揃えの基準（左、右、または中央）」を1つ決め、できれば「左揃え」や「右揃え」を選択する。（中央揃えの場合、左右の端がバラバラになり境界線がガタガタになりやすく素人ぽく見えやすい）
そして他の要素と「視覚的な並び（軸）」が通っているかを常にチェックし、孤立した要素を作らない。

といっています。

私なりの解釈でものすごく簡単に大胆にいえば、
すべての要素（文字やイラスト、図形など）をテキストが横書きの場合、左揃いでデザインをしましょう。それだけで、素人くささはなくなりプロっぽいデザインになります。

ちなみに、中央揃いにすることで、境界線がガタガタになることと左右対称となることもあり、対称性の法則（ゲシュタルト理論）というまとまりが出来てしまい見ている人の混乱を招きかねません。

メカニズムとしては、類同の法則と客観的構えの法則（ゲシュタルト理論）ですね。

類同の法則とは、色や形が同じものがまとまって認識します。
客観的構えの法則とは、文字や図形が一定の規則で並んでいるのを見進めていくと、脳の中に「次もこう並ぶだろう」という客観的な予測のモード（客観的構え）が
つくられます。一度このモードに入ると脳は目の前にある物理的な事実が
変わっても、直前のルールを強制的に適用し続けてしまう。

人間は、同じ視覚的特徴（単純な形（ドットや線）だけでなく、フォント（書体）・色・テクスチャ・空間的な関係（レイアウトのパターン）・箇条書きの文頭記号（・や＊、□や◉など）など、視覚的に認識できるあらゆるもの）が繰り返されると、それを「この作品に共通するルール」として無意識に学習します。これにより、見ている人は迷うことなく情報を追うことができるようになり、複数ページにわたる冊子やパンフレットにおいても、各ページに共通の「反復要素」があることで、ページをめくっても「まだ同じ1つの作品を見ている」という強い繋がり（パッケージ感）を感じ取ることができる。

私の解釈でわかりやすく伝えるならば、
同作品内では、フォントや色、記号などは同じものを使い法則性（パターン化／ルール化）をつくりましょう。

企画書などを制作する場合、その企画書内で使うフォントは統一し、色使いも一定のルール化をし統一する。見出しで使ったフォントのサイズを次のページの見出しでも同じサイズ、同じ位置に統一する。
見出しや箇条書きで頭につける記号（⚫︎や□）も、全体を通して同じ意味合いならば、同じ記号で統一し、全体で見ても一体感のある配置の繰り返しまとまりを心がける。

つまりは、ページが変わっても要素の大きさや配置は同じようにしましょう。といえます。

企画書ですから、そのページでしか使わない図や表があるかもしれませんが、それも左揃えならば左に揃えこちらもルールを決めます。見出しのフォントが大きすぎて表が入らないからといってフォントのサイズは変えずに（表の方を小さくする）統一感を持たせましょう。

もちろん、企画書などのページものではなくても、1枚もののメニューなどでも、パスタ（大見出し）トマト系（小見出し）ボロネーゼ（本文）アマトリチャーナ（本文）などでサイズや色を、その意味合いピザ（大見出し）トマト系（小見出し）マルゲリータ（本文）で合わせ繰り返すとルールに沿ったメニューとして見やすくなります。

と、言葉、文章でするにはなかなか大変です。伝わっていますか…。

ちょっとわからないという方はコメントしていただくか、『ノンデザイナーズ・デザインブック』をお読みいただければ幸いです。

メカニズムとしては、図と地の法則と過去の経験の法則（ゲシュタルト理論）ですね。

図と地の法則とは、人間は何かを見るときの前提で「手前にある主役（図）」と「後ろにある背景（地）」を無意識に区別して認識します。
過去の経験の法則とは、ある図形（配置）が提示されたとき、それが『これまでに何度も目にして
きた馴染みのある特定の形の通りに並んでいるならば、脳はその見慣れた形の通りに要素をひとまとめ（グループ）にします。
（ただし、近接や類同などの視覚的な（先天的）法則に比べて限定的で後天的な要因に過ぎない）

人間の目は、周囲と「大きく異なる部分（差異）」に無意識に最初に引きつけられ、適切なコントラストがあるページでは、読者は迷うことなく「一番重要なメッセージ」から読み始めることができる。

ウィリアムズさんは「大胆さ（Be fearless）」を求めていて、要素で明確な差をつけるよう。といっています。
サイズ（Size）：驚くほど大きく、または驚くほど小さく。
太さ（Weight）：非常に細いフォントと、極太のフォントを組み合わせる。色・明度（Color / Value）: 暖色と寒色、あるいは真っ白の背景に真っ黒の要素など、明暗の差を最大化する。
構造（Structure）：セリフ体（飾りのある文字）とサンセリフ体（飾りのない文字）のように、根本的に骨組みの異なるフォントを組み合わせる。
方向・形状（Direction / Shape）：横書きのテキストの中に、斜めの要素や丸いグラフィックを大胆に差し込む。

私なりの解釈で解説すると、
コントラストとは、日本語では「明らかな違い」「対比」などと言う意味合いで、人間は、そもそも主役（図）と背景（地）として無意識のうちに何かを見ています。まず、見てほしい要素をはっきりと極端に違いをつけましょう。全てを見てほしいという気持ちはわかりますが、なかなか全てを見てくれません。ここだけは見てほしいとつくるのがベストです。

そして、主役以外の要素も、違う要素同士ならば大胆に違いをつけそれとこれは違うものと見分けられるようにしましょう。人間は少しの違いならばただのズレと感じてしまうので、大胆に勇気を持って、明らかな違いを持たせましょう。

大見出しと見出しでは、1ポイントくらいの差ではただの誤差、ズレです。

サイズや太さ、色・明度に、構造や方向・形状など全ての要素との関係性で、で心がけましょう。

さすれば、プロっぽいデザインになります。

大見出しも目次も、太字すらないこの文章で解説、説明されても説得力が皆無ではないでしょうか。

□コントラストでデザイン力の差をつける

⚪︎メカニズム

図と地の法則と過去の経験の法則（ゲシュタルト理論）

図と地の法則
人間は何かを見るときの前提で「手前にある主役（図）」と「後ろにある背景（地）」を無意識に区別して認識します。
過去の経験の法則
ある図形（配置）が提示されたとき、それが『これまでに何度も目にして
きた馴染みのある特定の形の通りに並んでいるならば、脳はその見慣れた形の通りに要素をひとまとめ（グループ）にします。
（ただし近接や類同などの視覚的な（生まれつき
の）法則に比べて限定的で後天的な要因に過ぎない）

人間の目は、
周囲と「大きく異なる部分（差異）」に無意識に最初に引きつけられ、適切なコントラストがあるページでは、
読者は迷う事なく「一番重要なメッセージ」から読み始める事ができる。

ウィリアムズさんはこうも語る。
「大胆さ（Be fearless）」を求めて要素で明確な差をつけよう。

⚪︎私なりの解釈で解説

コントラストとは、日本語では「明らかな違い」「対比」などと言う意味合い、人間は、主役（図）と背景（地）として無意識のうちに何かを見ています。まず、見てほしい要素を極端に違いをつけましょう。

そして、主役以外の要素も、違う要素同士ならば大胆に違いをつけ
「それとこれは違う」ものと見分けられるようにしましょう。

人間は少しの違いならばただのズレと感じてしまうので、大胆に勇気を持って、明らかな違いを持たせましょう。
大見出しと見出しでは、1ポイントくらいの差ではただの誤差、ズレです。

全ての要素（サイズ・太さ・色・明度・構造・方向・形状など）の関係性で、心がけましょう。

さすれば、プロっぽいデザインになります。

大見出しも目次も、太字すらないこの文章で解説、説明されても説得力が皆無ではないでしょうか。

少しは読みやすくなったでしょうか、
いやプロっぽく、いやデザイナーぽく。（いやいやデザイナーだ）

あと、
構造（Structure）：セリフ体（飾りのある文字）とサンセリフ体（飾りのない文字）のように、根本的に骨組みの異なるフォントを組み合わせる。
とウィリアムズさんのものにはあり、私の解釈、考えとは異なります。コントラストをつけるためにそうすることが望ましい、一貫性を無くして違いのあるものならば、フォントを変える要素ならば違いを見せてもいいと思いますが、このフォントを変えるというのは、プロのデザイナーでもなかなか難しい判断になりかねません。要注意が必要です。

以上がレイアウトの原則です、今からでもレイアウトがなんだかできそうな気になったでしょうか、なっていただけたのならば本望です。

それではまたの機会に。

最後までお読みいただきありがとうございます。
ここまでお読みいただけたならば、20分程度の暇つぶしの役には立っているはずです。約30kcalも消費していますから、エリンギ1パックを130グラム、この間に食べていなければダイエット効果もきっとあるはずです。

まとめ

デザインとは、
「Form Follows Fonction.（形は機能に従う。）」

レイアウトの原則
近接（Proximity）
組織化する。

関連する項目は、物理的に近づけて配置。
距離の差を使い、読む前に情報の関係性を理解のための構造化ルール。

整列（Alignment）
ページを統一し、組織化する。
ページ上のすべての要素は、何か他のものと視覚的なつながりを持っていなければならない。
見えない要素同士を縛ることで、ページ全体に強固な一体感（ルール）を生み出すための秩序化ルール。

反復（Repetition）

一貫性を出し、デザインを一体化する。

デザインの何らかの要素を、作品全体を通して一貫して繰り返さなければならない。
視覚的なルールを意図的に繰り返し使用することで、情報を一つの強固にまとめ上げるための一貫性ルール。


コントラスト（Contrast）

ページに視覚的な面白さを加えること。（目を引きつけ）

情報の階層（優先順位）を明確にすること。

ページ上の2つの要素が完全に同じでないなら、それらを徹底的に異ならせる。
サイズや色の差を大胆につけることで、情報の主従関係をつけるためのメリハリルール。

こちらの記事も合わせてお読みいただけると嬉しいです。