デザインのレイアウト基本｜配置を決める順番と型4つ

「なんとなく置いただけ」のデザインから抜け出せない…と悩んでいませんか？

実は、配置には決め方があります。感覚で置いているように見えるプロも、決まった順番でしぼり込んでいるだけなんです。
このレッスンでは、レイアウトを決める順番と、現場でよく使う型を4つ紹介します。置く前に決める3つ → 視線の流れ → 型を選ぶ、この3ステップです。
最後にバナー1枚をレイアウトだけ意識して模写する課題を用意しました。読むだけで終わらせず、手を動かして覚えていきましょう。

レイアウトとは「読む順番」を決めること

レイアウトは、文字・写真・図形をどこに置くかを決める作業です。でも目的は「きれいに並べること」ではありません。見る人にどの順番で読ませるかを決めることが目的です。

バナーを見る人は、じっくり読んでくれません。1秒で目に入った1つを見て、興味があれば次を読みます。この「1つ目・2つ目・3つ目」を作り手が決められている状態が、レイアウトができている状態です。

逆に言うと、置き場所を全部決めてから「どれを最初に見せるか」を考えると手戻りします。順番が先、置き場所はあとです。

置く前に決める3つ

白いキャンバスを開く前に、次の3つを紙にメモします。ここが決まっていないと、何度置き直しても正解にたどり着けません。

とくに2つ目でつまずく人が多いです。クライアントも自分も「全部大事」と言いたくなります。でも全部を大きくすると、結局どれも目立ちません。
2つ目に大事な要素は「1つ目を見たあとに読ませるもの」と考えると、順位がつけやすくなります💡

視線の流れに沿って置く

人の目には動きのクセがあります。横書きの文化で育った人は、左上から右下へ視線を動かします。このクセに逆らわないだけで、読みやすさが変わります。

Z型：情報が少ないとき

左上 → 右上 → 左下 → 右下と、Zを描くように目が動きます。バナーやチラシのように、要素が5〜6個までのものに向きます。
左上にいちばん伝えたいこと、右下にボタンや申込先を置くと素直に流れます。

F型：文章が多いとき

Webページのように文章が続くものでは、左端に沿って下へ、見出しのところだけ右へ目が伸びます。Fの字の形です。
だから見出しは左端から始めます。中央ぞろえの見出しが読みにくいのは、目のスタート位置が毎回ずれるからです。

YouTubeやAmazonのページを開いてみてください。サムネイルも商品名も、左端が縦に1本そろっています。目が左端を下へなぞる動きに合わせた形です。

縦書き・右から左の例外

和風の広告や書籍の帯は縦書きです。このときは右上から左下へ流れます。和のトンマナ（全体の雰囲気の決めごと）で横書きのZ型を使うと、雰囲気と動きがちぐはぐになります。題材に合わせて選んでください。

ミニ確認（1分）
手元のスマホでSNSの広告を1つ開いて、自分の目がどこから動いたか思い出してみてください。左上から動いたならZ型、左端を下へなぞったならF型です。その動きは、作り手が先に決めています。

よく使うレイアウトの型4つ

ゼロから配置を考えると時間が溶けます。まず型を1つ選んで、そこへ要素を流し込むほうが早くて安定します。よく使う4つをまとめました。

型	置き方	向いている題材
グリッド型	縦横の線を引いて、その枠に沿わせる	情報量が多いチラシ・料金表・一覧
中央ぞろえ型	キャンバスの中心線に全部を集める	要素が3個以下のシンプルな告知
分割型	画面を2〜3分割して写真と文字を分ける	商品バナー・ビフォーアフター
対角型	左上と右下など、対角に主役と副役を置く	動きを出したいイベント告知

迷ったら分割型から試してください。写真と文字がぶつからないので、いちばん失敗しません。
グリッド型は情報量が多いときの安全策です。線を引いて枠を作れば、要素が20個あっても散らかりません。

1つの作品で型を混ぜないでください。上半分が中央ぞろえで下半分が左ぞろえだと、目のスタート位置が途中で変わります。読む人は「読みにくい」としか感じませんが、原因はここです。

型を選んだあとの仕上げ

型に流し込んだ時点では、まだ「置いただけ」です。ここから3つの調整を加えると仕上がります。どれも別のレッスンで詳しく扱うので、ここでは役割だけ覚えてください。

レイアウトは「どこに置くか」、この3つは「どう見せるか」の話です。置き場所が決まる前に飾りはじめると、あとで置き直したときに全部やり直しになります。

ミニ実践：バナー1枚をレイアウトだけ模写する

レイアウトを見る目は、模写がいちばん早く育ちます。色もフォントも真似しません。置き場所だけを写します。所要時間は15分ほど、道具は無料のCanvaでもプレゼンソフトでも紙とペンでも大丈夫です。

1. お手本を1枚選びます。SNSで流れてきた広告バナーで構いません。要素が5〜7個くらいの、情報量が少ないものを選んでください
2. お手本と同じ縦横比のキャンバスを作ります（正方形なら1080×1080など）
3. 文字は書かず、グレーの四角だけを置きます。写真も四角、ロゴも四角、文字も四角です
4. 四角の位置と大きさだけ、お手本に合わせます。ここで時間を使ってください
5. 並べ終わったら、お手本と自分の画面を左右に並べて見比べます
6. ずれている四角を直します。3回くらい往復すると、かなり近づきます
7. 最後に「この作品はどの型か」「視線はどう動くか」を一言でメモします

四角だけにするのは、色や写真のうまさに目を奪われないためです。文字を書き写すと、内容を読んでしまって配置を見なくなります。
この課題を5枚もやると、街の広告を見たときに「これは分割型だな」と自然に見えてきますよ◎

できあがったら、次のチェックリストで確認してください。

やってしまいがちな失敗

全部を目立たせようとする

全部を大きく、全部を赤く、全部に囲みをつける。こうすると、どこにも目が止まりません。
直し方は、主役を1つ決めて、残りを一段小さくします。減らすほうが目立ちます。

端までぎっしり詰める

キャンバスの端から端まで要素を置くと、窮屈で安っぽく見えます。
直し方は、四辺に同じ幅の余白を確保して、その内側だけを使います。バナーなら短い辺の5%くらいが目安です。

要素を1つずつ動かして調整する

1個ずつ動かして「なんかしっくりこない」を繰り返すと、時間だけが過ぎます。原因は型が決まっていないことです。
直し方は、いったん全部を左上に寄せて、型を選び直します。型が決まれば置き場所は自動的に決まります。

スマホで確認しない

パソコンの大画面で作ると、小さい文字も読めてしまいます。実際に見られるのはスマホです。
直し方は、作業中に何度かスマホの実寸で見ます。画面の縮小表示でも構いません。読めない文字があれば、そこは削る候補です。

よくある質問

レイアウトのアイデアが浮かびません。どうすればいいですか？

ゼロから考えないでください。プロもゼロからは考えません。
お手本を1枚決めて、その型を借りるところから始めます。型を借りるのは真似ではなく、定石を使うことです。上の模写を5枚やると、頭の中に型のストックができて、次からは選ぶだけになります。

グリッドは何分割にするのが正解ですか？

正解の数はありません。要素の数で決めます。
バナーなら縦横3分割で足ります。Webサイトの一覧ページのように項目が多いものは12分割が扱いやすいです。12は2でも3でも4でも割れるので、2列にも3列にも組み替えられます。まず3分割で試して、足りなければ増やしてください。

中央ぞろえは使わないほうがいいですか？

要素が3個以下なら使って大丈夫です。ロゴ・キャッチコピー・日付だけの告知なら、中央ぞろえがいちばんきれいにまとまります。
避けたいのは、文章が5行以上あるときです。行の長さが違うと左右の端がガタガタになって、揃えたつもりが散らかって見えます。文章が増えたら左ぞろえに変えてください。

レイアウトと構図は違うものですか？

近い言葉ですが、扱う対象が違います。構図は写真やイラストの中で被写体をどう収めるかの話、レイアウトは1つの画面に複数の要素をどう配置するかの話です。
バナー制作では両方使います。写真の中の構図を整えてから、その写真を画面のどこに置くかを決める、という順番です。

次に学ぶこと

このレッスンの要点をまとめます。

• レイアウトの目的は、見る人に読ませる順番を決めること
• 置く前に、誰に・何を1つ・どこで見られるかを決める
• 視線は左上から右下へ。情報が少なければZ型、文章が多ければF型
• 型は4つ（グリッド・中央ぞろえ・分割・対角）。迷ったら分割型
• 1つの作品で型を混ぜない

配置が決まったら、次は間隔です。余白の使い方で、どのくらい空けるかを数字で決められるようになります。
そのあと配色の基本へ進むと、同じレイアウトでも印象を作り分けられるようになりますよ。

ほかのレッスンはデザインの基本コース目次から選べます。順番に進めても、気になるところだけ読んでも大丈夫です。