【デザイナー直伝】デザインレイアウトで意識したい7つの型。センスに頼らない確実な方法を解説

「センスがないから」とおざなりにされることも多いデザインですが、じつは「デザインはセンスではなく、知識」。なかでも、知識の有無でクオリティが大きく変わるのが「レイアウト」です。

適切に設計したレイアウトは、情報を明確に伝え、アクションを促します。レイアウトの知識を身につけることで、さまざまな場面で効果を感じられるでしょう。

今回は、デザイナーの齋藤 緑さんに、レイアウトの基本原則からよく使うレイアウトパターンまで、美しさと機能性を兼ね備えたデザインを作成する方法を教えてもらいます。

齋藤 緑（さいとう みどり）

アートディレクター／デザイナー。Web制作やデザインに強みをもつデジタルコンサルティング企業の株式会社GIGに所属し、クライアントワークに従事。デザインに関する情報発信も積極的に行っている。

※今回の記事はアドビ社のPR企画「みんなのデザインチャレンジ」に参加して執筆しています。

そもそもレイアウトとは？

レイアウトは直訳すると「設計図」で、本当にそのままの意味になります。 Webやインテリア、グラフィックといったあらゆるデザインで共通して「何を・どこに・どのように配置するか」を指す言葉として使用されています。

レイアウトが重要な理由

「レイアウトが決められていない＝情報が整理されていない」ことになります。レイアウトが適当だと、何が重要な情報なのか分からず、見た人にメッセージが伝わりづらいんです。

レイアウトは、デザインにおける文法。コミュニケーションの骨組みだと考えてください。デザイン作業にレイアウトを決める工程は欠かせません。

レイアウトの設計方法

レイアウトは以下のステップで決めていきます。

1. 情報整理
2. 優先順位付け
3. レイアウト設計

ステップ1. 情報整理

まず、Webサイトやポスター、チラシなどデザインするものに掲載したい情報を整理します。かんたんに言うと、伝えたい情報を考える作業です。

ステップ2. 優先順位付け

次に、情報に優先順位をつけていきます。掲載する情報のなかでも特に何を伝えたいのか、何を目立たせるべきなのかを考える作業です。目立たせる情報を決めることで、レイアウトが設計しやすくなります。

ステップ3. レイアウト設計

実際に何をどこに置くか決めるのは、情報整理→優先順位付けの後なんです。掲載したい情報とその優先順位をみながら、実際にレイアウトを設計していきましょう。

どのようなレイアウトが適しているかは、デザインの目的や掲載したい情報量などによって変わってきます。よく使われるレイアウトパターンは記事の後半で紹介しますね！

レイアウトデザインの4原則＋α

レイアウトを決める際に意識したい4つの原則と、＋αで覚えたい基礎知識は以下の通りです。

• 原則1. 近接
• 原則2. 整列
• 原則3. 反復
• 原則4. 対比
• ＋α. 視線誘導

レイアウトの原則1. 近接

まず、レイアウトの最も基本的なテクニックとして「近接」があります。近接とは、関連性が高い情報をまとめて配置すること。たとえば、イベントのチラシを作るなら、開催場所や時間、価格などは一箇所にまとめて記載するのが通例です。

▲ポスター下部に開催期間や入場料、場所などの情報がまとまっている（出典：Adobe Expressのテンプレート）

【Point】
レイアウトを決めるときは、掲載したい情報のなかから関連性が高いものをグルーピングし、まとめて配置しましょう。関連性が低いものは遠ざけて配置すると、より分かりやすくなります。

レイアウトの原則2. 整列

整列は、テキストや写真、図などの位置を揃えて整えること。基本的には、左揃え、中央揃え、右揃えのいずれかに統一することを意識すると見やすくなると思います。

すべての要素が揃っていないと、デザイン全体のバランスが悪くなり、レイアウトが崩れます。見映えも悪くなりますし、情報の関連性も見えにくくなるので、分かりづらいデザインになってしまいます。

▲中央揃えで統一することで、デザイン中央に軸（ライン）ができ、バランスよく見える（出典：Adobe Expressのテンプレート）

【Point】
基本的に、テキストや図などの要素の位置は揃えましょう。見えないラインを意識するのがコツです。

レイアウトの原則3. 反復

反復は、統一感を出すためのテクニック。同じ要素やブロックごとに色や形を揃えることで、見た目が統一され、情報の関連性が伝わりやすくなります。

▲「栄養素名」「食品名」「食品のイラスト」、それぞれの要素のサイズや位置が統一されているため、ぱっと見て理解しやすい（出典：Adobe Expressのテンプレート）

【Point】
「この要素は、このデザイン」とルールを決めて、反復させましょう。要素ごとにサイズや位置、色、フォント、テイストなどを決めておくとレイアウトに統一感が生まれます。

レイアウトの原則4. 対比

対比（コントラスト）は、優先度の高い情報を強調するためのテクニック。大きさや色、余白などを工夫して、情報を目立たせます。

たとえば、目立たせたい情報のサイズを大きくして、その他の情報を小さくすることでデザイン内にコントラストが生まれ、迫力あるデザインになります。サイズだけじゃなく、目立たせたい情報の周りに余白を大きくとったり、目立たせたくない情報は色をグレーにしたりといった手法も。ちょっとした差をつけるだけでも、目に入りやすくなりますよ！

▲大きなテキストで注目させ、小さなテキストも読ませる（出典：Adobe Expressのテンプレート）

【Point】
レイアウトを設計するときは、まず優先順位が高い情報をどう目立たせるかを考えましょう。すべて目立たせようとすると単調になるため、メリハリを意識することが大切です。

＋αのレイアウトテクニック：視線誘導

あとデザインするときに私が意識しているのが、「視線誘導」という考えです。

一般的に、日本人は左から右へ視線を動かすと言われています。だから、WebサイトやLPでも左に重要な情報を置いて、右に補足情報を置くパターンが使われがち。視線誘導にはZ字／F字／逆N字などいくつかのパターンがありますが、まずは「左から右」という基本を覚えておくといいと思います！

▲視線誘導のパターン

【Point】
読み手の視点の動きを考えてレイアウトを設計するとGood。まずは「左から右」に読まれることを意識しましょう。

レイアウトデザイン7つの型【実例付き】

ここからは、レイアウトの原則を活用した7つのレイアウトパターンをご紹介します。

なお、紹介する画像はすべてアドビ社のデザインツール『Adobe Express』に搭載されたテンプレートを使用しています。

パターン1. 集中

▲「集中」のテンプレート（出典：Adobe Express）

これは「集中」というパターン。テンプレートは「大決算セール開催」というテキストを集中線で囲み強調したレイアウトですね。

集中は漫画やアニメなどでも活用されているもの。デザインに迫力がでて、効果的に情報を目立たせられるデザインと言われています。

キャンペーンやイベントの開催など、強調したい要素が明確に決まっているときに活用しやすいレイアウトだと思います。

ただ、集中線で囲むテキストが長すぎたり、要素が多すぎたりすると、迫力が薄れ効果が失われる可能性があるので注意しましょう。強調する要素は簡潔にまとめるのがポイントです。

パターン2. グリッド

▲「グリッド」のテンプレート（出典：Adobe Express）

「グリッド」とは、格子型になっているレイアウトデザインのこと。要素が綺麗に整列されていて、上品に見えますよね。このレイアウトでは画像や図が複数使われることが多いのですが、それでもごちゃごちゃせず、見た人に世界観を伝えやすいのが特徴です。

情報を多く掲載できるうえ、どの情報も同じくらい目立つため、使いやすいレイアウトだと言えます。

パターン3. 広がり

▲「広がり」のテンプレート（出典：Adobe Express）

このレイアウトパターンは「広がり」。テンプレートは、真ん中にある「G.WEEK マルシェ」のテキストの周りにイラストが配置されていて、デザイン外にも少しはみ出していますね。広がりや開放感、活発な印象を与えられるレイアウトです。

このデザインを見たとき、まずイベント名や日付といった中心にある情報を読むのですが、その際に周りのイラストもぼやっと見えるんです。すると、「マルシェには、本や雑貨、果物、花などが売っているんだろうな」という情報が入ってくる。動きがあるデザインなので、楽しそう、オシャレといった印象も与えるレイアウトになっています。

世界観も作りやすく、情報も多く掲載しやすい広がりのレイアウトですが、余白に注意してください。上のテンプレートは要素間の余白を均等にとっているので綺麗に見えますが、これがズレるとごちゃついた印象を与えます。

パターン4. 余白

▲「余白」のテンプレート（出典：Adobe Express）

こちらは「余白」のレイアウトパターンですね。上のテンプレートだと、ダイビングの写真で世界観を作っているのですが、この写真を全面に使ってしまうと暗い印象になってしまいます。そのため、上部に余白を大きくとって、明暗の対比（コントラスト）を生み、情報と世界観がどちらも伝わるデザインになっています。

余白があることで、海の深さや未知といったイメージがより伝わってきますよね。世界観を伝えたいときにオススメのレイアウトパターンです。

ただ余白は奥も深く、単純に要素を間引くだけでは機能しません。テンプレートの例だと、テキストの縁にそって、見えない四角の線が意識されています。だから、デザインがまとまって見えるんです。余白を使う際は、見えないラインや視線誘導に注意してみてください。

パターン5. 見切れ

▲「見切れ」のテンプレート（出典：Adobe Express）

次に「見切れ」のレイアウトパターンです。ピザを大きく配置することで、シズル感やダイナミックな印象を与えます。情報の優先順位が明確で一度見たら忘れないようなインパクトがあるので、見せたいものが定まっているときにオススメのレイアウトですね。

反対に、配置できる情報が比較的少なめで、強調する情報以外は目立ちにくいのが注意点。伝えたい情報が多いときは、ほかのレイアウトパターンを使用しましょう。インパクトの代わりに失われているものを考えるのが大切です。

パターン6. 2分割

▲「2分割」のテンプレート（出典：Adobe Express）

「2分割」のレイアウトパターンです。デザインを2つに分割するレイアウトですね。

分割することで、情報にまとまりが生まれ、写真やイラストといったビジュアル要素も見せやすくなります。そのため、世界観の表現にも適していますし、見せたい要素がたくさんある場合にも有効なレイアウトパターンだと思います。

注意点として、分割した画面それぞれの情報量は揃えたほうが無難です。テンプレートは、上部に全面写真、下部にたくさんの情報が掲載されているためバランスが取れています。

一方、たとえば下の画像のように情報量を減らすと、どこか不安定な印象を感じますよね。画面あたりの情報量を揃えることで整うレイアウトといえます。

▲「2分割」のテンプレートを改変したパターン（出典：Adobe Express）

パターン7. 視線誘導

▲「視線誘導」のテンプレート（出典：Adobe Express）

最後に紹介するのが「視線誘導」のレイアウトパターン。「地中海グルメフェス」というテキスト→写真→メニューがZ字で結ばれているのが見えるでしょうか。また、フェス名から日付、メニュー写真、メニュー名、さらに価格まで、各要素もZ字で結ばれています。

▲Z字を追加したパターン（出典：Adobe Express）

視線の動きを最大限利用するので、掲載する情報が多くても見る人にストレスがかかりづらく、最後まで読んでもらいやすいレイアウトパターンですね。

デザイン初心者の方はテンプレートを活用しよう

ここまで、デザイナーの齋藤さんにレイアウトの基礎知識を解説してもらいました。

0→1でレイアウトを作るのが難しく感じる方に齋藤さんがおすすめするのは、テンプレートの活用です。

とくに非デザイナーの方は、レイアウトが整ったテンプレートから作ると効率的かつ効果的。また、デザインを学びたいという方も、テンプレートを活用し制作することで、原則やレイアウトパターンを習得することができそうです。

そして今回紹介したテンプレートは、すべてAdobe Expressに登録することで利用できます。

Adobe Expressは、10万種類を超えるテンプレートを備えたデザインツールです。アドビ社のツールながら無料から利用でき、デザイン初心者でも直感的な操作が可能。ロゴやチラシなどの画像はもちろん、SNS投稿や動画作成までできる万能ツールです。

ブラウザ版のほか、iOS／Androidのスマホアプリ版も用意されています。デザインアプリを探している方やデザインを勉強したい方は、ぜひ一度Adobe Expressをお試しください。

（執筆：泉知樹　編集：齊藤颯人、じきるう）