![「レイアウトの4つの基本原則─近接・整列・反復・対比|デザインの基礎知識|デザインのイロハ 第2回](https://res.cloudinary.com/yoshida-print/image/fetch/f_auto,q_auto,c_scale/https://www.ddc.co.jp/dtp/images/20180928-design-no-iroha-01.png)
新人デザイナー、シンコが先輩とともに一人前のデザイナーを目指す物語。
2人の掛け合いを見ながら、デザインの知識を紹介していきます。
みなさんもシンコと一緒に、新人デザイナーになってデザインを知ろう!
![先輩](https://res.cloudinary.com/yoshida-print/image/fetch/f_auto,q_auto/https://www.ddc.co.jp/dtp/images/20180928-design-no-iroha-02.png)
先輩
先輩だから先輩。
それ以上でも以下でもない先輩。
シンコが入社してきてからツッコミの回数が増えてきた。
キレイに並んでいるものを見るとキザになるらしい。
![シンコ](https://res.cloudinary.com/yoshida-print/image/fetch/f_auto,q_auto/https://www.ddc.co.jp/dtp/images/20180928-design-no-iroha-03.png)
シンコ
新人の子だからシンコ。
デザインをイチから修行中。
独特すぎるセンスで周囲を振り回している。
今回はシャレが言いたくてたまらないらしい。
![先輩デザイナー](https://res.cloudinary.com/yoshida-print/image/fetch/f_auto,q_auto/https://www.ddc.co.jp/dtp/images/face-senpai-01.png)
よしシンコ! これからレイアウトについて教えるぞ!
心して聞くんだ!
![新人デザイナー シンコ](https://res.cloudinary.com/yoshida-print/image/fetch/f_auto,q_auto/https://www.ddc.co.jp/dtp/images/face-shinko-01.png)
レイアウト!
デザイナーっぽい言葉が出てきましたね!
![先輩デザイナー](https://res.cloudinary.com/yoshida-print/image/fetch/f_auto,q_auto/https://www.ddc.co.jp/dtp/images/face-senpai-01.png)
うむ!
レイアウトとは、何を、どこに、どのように配置するか?
を考えることなんだ
写真や文字をキレイに美しく、かつ印象的に配置することができてこそプロのデザイナーってやつだぞ!
![新人デザイナー シンコ](https://res.cloudinary.com/yoshida-print/image/fetch/f_auto,q_auto/https://www.ddc.co.jp/dtp/images/face-shinko-01.png)
先輩!アタシ燃えています!
プロのデザイナーになってみせますヨォォー!
![先輩デザイナー](https://res.cloudinary.com/yoshida-print/image/fetch/f_auto,q_auto/https://www.ddc.co.jp/dtp/images/face-senpai-01.png)
よく言ったシンコ! 先輩も頑張るぞー!
まずは基礎から覚えることが重要だぞ!
習うより慣れろということでここにイラストの素材を用意したぞ
まずはこれを使って勉強していこうと思う!
![レイアウト素材](https://res.cloudinary.com/yoshida-print/image/fetch/f_auto,q_auto/https://www.ddc.co.jp/dtp/images/20180928-design-no-iroha-04.png)
![新人デザイナー シンコ](https://res.cloudinary.com/yoshida-print/image/fetch/f_auto,q_auto/https://www.ddc.co.jp/dtp/images/face-shinko-01.png)
これを使ってレイアウトするんですね?
簡単ですよー! ササッとレイアウトしちゃいます!
見ててください! おりゃおりゃ~
![先輩デザイナー](https://res.cloudinary.com/yoshida-print/image/fetch/f_auto,q_auto/https://www.ddc.co.jp/dtp/images/face-senpai-01.png)
あ、ちょっと、これから説明しようかと・・・
大丈夫かな・・・?
・
・
・
1時間後
・
・
・
![新人デザイナー シンコ](https://res.cloudinary.com/yoshida-print/image/fetch/f_auto,q_auto/https://www.ddc.co.jp/dtp/images/face-shinko-01.png)
先輩!できました!
完璧でしょ!?
![独特なレイアウト](https://res.cloudinary.com/yoshida-print/image/fetch/f_auto,q_auto/https://www.ddc.co.jp/dtp/images/20180928-design-no-iroha-05.png)
![先輩デザイナー](https://res.cloudinary.com/yoshida-print/image/fetch/f_auto,q_auto/https://www.ddc.co.jp/dtp/images/face-senpai-01.png)
うーん! またしても独特ゥー!
ミッチリぎっちりー!
手が増えてるしー!
![新人デザイナー シンコ](https://res.cloudinary.com/yoshida-print/image/fetch/f_auto,q_auto/https://www.ddc.co.jp/dtp/images/face-shinko-01.png)
エェーッ!?
パズルゲームみたいにキレイに揃ってるじゃないですかー!
![先輩デザイナー](https://res.cloudinary.com/yoshida-print/image/fetch/f_auto,q_auto/https://www.ddc.co.jp/dtp/images/face-senpai-01.png)
うーん! レイアウトってそういうのじゃないんだなー!
ではここで前回の復習!
どんな人に?、何を?、なぜ?、いつ?、どこで?といった感じで作る目的を相手から聞いて、その目的を他の人に伝えるためにデザイナーは何をするって言ったっけ?
![新人デザイナー シンコ](https://res.cloudinary.com/yoshida-print/image/fetch/f_auto,q_auto/https://www.ddc.co.jp/dtp/images/face-shinko-01.png)
わかりやすく、美しく、整理された図案を考える・・・それがデザインでしたね!
前回の内容はこちらから
![先輩デザイナー](https://res.cloudinary.com/yoshida-print/image/fetch/f_auto,q_auto/https://www.ddc.co.jp/dtp/images/face-senpai-01.png)
そう! でもシンコの作ったものでは残念ながらわかりやすくはないな・・・でも見方によっては大胆すぎる構図で躍動感があり、印象的で・・・ゴニョゴニョ
![新人デザイナー シンコ](https://res.cloudinary.com/yoshida-print/image/fetch/f_auto,q_auto/https://www.ddc.co.jp/dtp/images/face-shinko-01.png)
先輩、無理にフォローしなくていいですよ?
![先輩デザイナー](https://res.cloudinary.com/yoshida-print/image/fetch/f_auto,q_auto/https://www.ddc.co.jp/dtp/images/face-senpai-01.png)
そ、そう?
よし、気をとりなおして進めるぞー
まずはレイアウトにおける基本の中から「近接・整列・反復・対比」の4つを説明しよう!
近接(きんせつ)
![先輩デザイナー](https://res.cloudinary.com/yoshida-print/image/fetch/f_auto,q_auto/https://www.ddc.co.jp/dtp/images/face-senpai-01.png)
レイアウトにおける「近接」というのは
関連性の高い要素を近づけて、グループ(まとまり)を作ることをいうんだ
こんな感じだな
![近接](https://res.cloudinary.com/yoshida-print/image/fetch/f_auto,q_auto/https://www.ddc.co.jp/dtp/images/20180928-design-no-iroha-06.png)
![新人デザイナー シンコ](https://res.cloudinary.com/yoshida-print/image/fetch/f_auto,q_auto/https://www.ddc.co.jp/dtp/images/face-shinko-01.png)
ほんとだ!
グループができて区別しやすくなりましたね!
![先輩デザイナー](https://res.cloudinary.com/yoshida-print/image/fetch/f_auto,q_auto/https://www.ddc.co.jp/dtp/images/face-senpai-01.png)
デザインに入れる要素がたくさんある場合、まず情報を整理することから始めよう
レイアウトがしやすくなるよー
![新人デザイナー シンコ](https://res.cloudinary.com/yoshida-print/image/fetch/f_auto,q_auto/https://www.ddc.co.jp/dtp/images/face-shinko-01.png)
事前の準備が大事ってことですね!
でもこれだけじゃキレイなレイアウトとはいえませんよね?
![先輩デザイナー](https://res.cloudinary.com/yoshida-print/image/fetch/f_auto,q_auto/https://www.ddc.co.jp/dtp/images/face-senpai-01.png)
その通りだ!まだまだ続くぞ!
ここから「整列」という考え方を入れていくぞー!
整列(せいれつ)
![先輩デザイナー](https://res.cloudinary.com/yoshida-print/image/fetch/f_auto,q_auto/https://www.ddc.co.jp/dtp/images/face-senpai-01.png)
整列・・・それは揃えること・・・
揃えなければ・・・美しく・・・ない!!
![キリッ](https://res.cloudinary.com/yoshida-print/image/fetch/f_auto,q_auto/https://www.ddc.co.jp/dtp/images/20180928-design-no-iroha-07.png)
![新人デザイナー シンコ](https://res.cloudinary.com/yoshida-print/image/fetch/f_auto,q_auto/https://www.ddc.co.jp/dtp/images/face-shinko-01.png)
先輩、ちょっと何言ってるのかわかりません
![先輩デザイナー](https://res.cloudinary.com/yoshida-print/image/fetch/f_auto,q_auto/https://www.ddc.co.jp/dtp/images/face-senpai-01.png)
あ、いえ、なんでもないです・・・
レイアウトにおける整列とは写真や文字の要素を揃えることなんだ
「近接」でまとめたこのグループだけど、まだバラバラに見えるよね?
では、このグループに見えない線が一本あると思って要素を並べてみて?
![新人デザイナー シンコ](https://res.cloudinary.com/yoshida-print/image/fetch/f_auto,q_auto/https://www.ddc.co.jp/dtp/images/face-shinko-01.png)
見えない一本の線があると思って並べる・・・
えーと、こうかな?おりゃおりゃ~
![整列](https://res.cloudinary.com/yoshida-print/image/fetch/f_auto,q_auto/https://www.ddc.co.jp/dtp/images/20180928-design-no-iroha-08.png)
![新人デザイナー シンコ](https://res.cloudinary.com/yoshida-print/image/fetch/f_auto,q_auto/https://www.ddc.co.jp/dtp/images/face-shinko-01.png)
おお・・・! 先輩、並んで見えます! 揃って見えます!
![先輩デザイナー](https://res.cloudinary.com/yoshida-print/image/fetch/f_auto,q_auto/https://www.ddc.co.jp/dtp/images/face-senpai-01.png)
整列・・・それは揃えること・・・
揃えなければ・・・美しく・・・ない!!
![キリッ](https://res.cloudinary.com/yoshida-print/image/fetch/f_auto,q_auto/https://www.ddc.co.jp/dtp/images/20180928-design-no-iroha-07.png)
![新人デザイナー シンコ](https://res.cloudinary.com/yoshida-print/image/fetch/f_auto,q_auto/https://www.ddc.co.jp/dtp/images/face-shinko-01.png)
先輩、本当に大丈夫ですか!?
病院近くにありますよ?
![先輩デザイナー](https://res.cloudinary.com/yoshida-print/image/fetch/f_auto,q_auto/https://www.ddc.co.jp/dtp/images/face-senpai-01.png)
はっ! だ、大丈夫だ! 並んでいるものを見ると、つい!
中心に揃えたり、左右の端に揃えたりとレイアウトに合わせて最適な並べ方を見つけよう!
![新人デザイナー シンコ](https://res.cloudinary.com/yoshida-print/image/fetch/f_auto,q_auto/https://www.ddc.co.jp/dtp/images/face-shinko-01.png)
そういえば、イラストレーターのようなデザインソフトにはガイドライン、ここでいう見えない線を引くことができる機能がありましたよね?
![先輩デザイナー](https://res.cloudinary.com/yoshida-print/image/fetch/f_auto,q_auto/https://www.ddc.co.jp/dtp/images/face-senpai-01.png)
そうだな! デザインソフトにはこんな便利な機能が使えるからレイアウトに積極的に使って行こう!
![Illustratorのガイド](https://res.cloudinary.com/yoshida-print/image/fetch/f_auto,q_auto/https://www.ddc.co.jp/dtp/images/20180928-design-no-iroha-09.png)
Illustratorでのガイドラインの作成方法はこちら
反復(はんぷく)
![新人デザイナー シンコ](https://res.cloudinary.com/yoshida-print/image/fetch/f_auto,q_auto/https://www.ddc.co.jp/dtp/images/face-shinko-01.png)
はんぷく!
同じことを繰り返すって意味のですか?
![先輩デザイナー](https://res.cloudinary.com/yoshida-print/image/fetch/f_auto,q_auto/https://www.ddc.co.jp/dtp/images/face-senpai-01.png)
そう! その反復!
今まで「近接」で要素をまとめて「整列」で揃えたグループができたよね
ではこのグループを3つ並べてみよう
![新人デザイナー シンコ](https://res.cloudinary.com/yoshida-print/image/fetch/f_auto,q_auto/https://www.ddc.co.jp/dtp/images/face-shinko-01.png)
えーと、こうかな・・・?
おりゃおりゃ~
![反復(1)](https://res.cloudinary.com/yoshida-print/image/fetch/f_auto,q_auto/https://www.ddc.co.jp/dtp/images/20180928-design-no-iroha-10.png)
![新人デザイナー シンコ](https://res.cloudinary.com/yoshida-print/image/fetch/f_auto,q_auto/https://www.ddc.co.jp/dtp/images/face-shinko-01.png)
同じものを3つ反復させて・・・
あっ、もしかしてここに他のグループの要素を当てはめるんですね?
![反復(2)](https://res.cloudinary.com/yoshida-print/image/fetch/f_auto,q_auto/https://www.ddc.co.jp/dtp/images/20180928-design-no-iroha-11.png)
![先輩デザイナー](https://res.cloudinary.com/yoshida-print/image/fetch/f_auto,q_auto/https://www.ddc.co.jp/dtp/images/face-senpai-01.png)
はい正解~!
見せ方を一定のルールで繰り返して、情報をパターン化させ、わかりやすく見せる
これが「反復」という考え方だな!
![新人デザイナー シンコ](https://res.cloudinary.com/yoshida-print/image/fetch/f_auto,q_auto/https://www.ddc.co.jp/dtp/images/face-shinko-01.png)
見せ方を揃えることでさらにわかりやすくなりましたね!
なるほど~
![先輩デザイナー](https://res.cloudinary.com/yoshida-print/image/fetch/f_auto,q_auto/https://www.ddc.co.jp/dtp/images/face-senpai-01.png)
まだまだ行くぞ~!
さらに「対比」という考え方も入れるんだ!対比(たいひ)
![新人デザイナー シンコ](https://res.cloudinary.com/yoshida-print/image/fetch/f_auto,q_auto/https://www.ddc.co.jp/dtp/images/face-shinko-01.png)
たいひ!?
先輩~! そろそろ頭が追いついてきませんよー!
逃げまーす!
![先輩デザイナー](https://res.cloudinary.com/yoshida-print/image/fetch/f_auto,q_auto/https://www.ddc.co.jp/dtp/images/face-senpai-01.png)
ダメー! 退避しちゃダメー!
って、シャレを言わせるのもダメー!
何を言わせるんじゃー!
![新人デザイナー シンコ](https://res.cloudinary.com/yoshida-print/image/fetch/f_auto,q_auto/https://www.ddc.co.jp/dtp/images/face-shinko-01.png)
ウッフッフ♡
見事に引っかかりましたね♡
![先輩デザイナー](https://res.cloudinary.com/yoshida-print/image/fetch/f_auto,q_auto/https://www.ddc.co.jp/dtp/images/face-senpai-02.png)
![対比(1)](https://res.cloudinary.com/yoshida-print/image/fetch/f_auto,q_auto/https://www.ddc.co.jp/dtp/images/20180928-design-no-iroha-12.png)
![新人デザイナー シンコ](https://res.cloudinary.com/yoshida-print/image/fetch/f_auto,q_auto/https://www.ddc.co.jp/dtp/images/face-shinko-01.png)
あっ! このアイテムを身につける体の場所はココっていう感じに見えてきますね!
意味が出てきた感じがします!
![先輩デザイナー](https://res.cloudinary.com/yoshida-print/image/fetch/f_auto,q_auto/https://www.ddc.co.jp/dtp/images/face-senpai-01.png)
そうそう!
今度は逆に体の要素を大きくしてみよう
![対比(2)](https://res.cloudinary.com/yoshida-print/image/fetch/f_auto,q_auto/https://www.ddc.co.jp/dtp/images/20180928-design-no-iroha-13.png)
![新人デザイナー シンコ](https://res.cloudinary.com/yoshida-print/image/fetch/f_auto,q_auto/https://www.ddc.co.jp/dtp/images/face-shinko-01.png)
今度は逆に体の場所に身につけるアイテムはコレっていう感じに見えてきますね! なるほどなるほどー!
![先輩デザイナー](https://res.cloudinary.com/yoshida-print/image/fetch/f_auto,q_auto/https://www.ddc.co.jp/dtp/images/face-senpai-01.png)
さ~ら~に~!
ここで背景の色もそれぞれ変えてみよう!
![対比(3)](https://res.cloudinary.com/yoshida-print/image/fetch/f_auto,q_auto/https://www.ddc.co.jp/dtp/images/20180928-design-no-iroha-14.png)
![新人デザイナー シンコ](https://res.cloudinary.com/yoshida-print/image/fetch/f_auto,q_auto/https://www.ddc.co.jp/dtp/images/face-shinko-01.png)
どっひゃ~~~!
色分けをしたら、区別がつきやすくなっちゃいましたよー!どどど、どっひゃ~~~!![先輩デザイナー](https://res.cloudinary.com/yoshida-print/image/fetch/f_auto,q_auto/https://www.ddc.co.jp/dtp/images/face-senpai-01.png)
ナイスリアクションだシンコ!
大きさを変化させるだけでなく、色を変えて変化をつけることも対比となるんだ!
いわゆるメリハリをつけることが大切だぞ!
![新人デザイナー シンコ](https://res.cloudinary.com/yoshida-print/image/fetch/f_auto,q_auto/https://www.ddc.co.jp/dtp/images/face-shinko-01.png)
今回もわかりました先輩!
頭の肥やしになりました!
![先輩デザイナー](https://res.cloudinary.com/yoshida-print/image/fetch/f_auto,q_auto/https://www.ddc.co.jp/dtp/images/face-senpai-01.png)
それ肥料の「堆肥」な!
美味しい野菜を作るには上質の・・・って、もうええわ!ありがとうございましたーって、漫才さすなー!![新人デザイナー シンコ](https://res.cloudinary.com/yoshida-print/image/fetch/f_auto,q_auto/https://www.ddc.co.jp/dtp/images/face-shinko-01.png)
ツッコミまでやってさらにかぶせてくるなんて・・・
もしや先輩はお笑いの才能が・・・!?
![先輩デザイナー](https://res.cloudinary.com/yoshida-print/image/fetch/f_auto,q_auto/https://www.ddc.co.jp/dtp/images/face-senpai-01.png)
ハアハア・・・
いや、ないと思うけど・・・ああ、お腹空いた・・・
![新人デザイナー シンコ](https://res.cloudinary.com/yoshida-print/image/fetch/f_auto,q_auto/https://www.ddc.co.jp/dtp/images/face-shinko-01.png)
先輩!
私もお腹が空きました!
![先輩デザイナー](https://res.cloudinary.com/yoshida-print/image/fetch/f_auto,q_auto/https://www.ddc.co.jp/dtp/images/face-senpai-01.png)
デザインは頭をフル回転させるからお腹すくよなー
よーし、今回はここまで!ラーメン食べに行こう!
![新人デザイナー シンコ](https://res.cloudinary.com/yoshida-print/image/fetch/f_auto,q_auto/https://www.ddc.co.jp/dtp/images/face-shinko-01.png)
やったー!
おごってくださーい!
![ワンポイント情報](https://res.cloudinary.com/yoshida-print/image/fetch/f_auto,q_auto/https://www.ddc.co.jp/dtp/images/20180928-design-no-iroha-15.png)
対比において、大きさの度合いを「ジャンプ率」と言います。
ジャンプ率の低いものは柔らかいイメージになり、高いものは力強いイメージになります。
作るデザインに合わせ、最適なジャンプ率を導き出しましょう。
![ラーメン](https://res.cloudinary.com/yoshida-print/image/fetch/f_auto,q_auto/https://www.ddc.co.jp/dtp/images/20180928-design-no-iroha-16.png)