【レイアウトに迷ったら】デザイナーがよく使うレイアウトパターンを紹介 part1

デザイナーの仕事は多岐に渡りますが、その中でもレイアウトはデザイナーの仕事で最も肝となる部分です。

 

レイアウトとは全体の構成を決めて、情報の優劣、視線誘導などを選定し、要素を配置していくことを意味します。
それゆえにレイアウトを制するものはデザインを制すると言っても過言ではありません。

 

経験の浅いデザイナーがなかなか仕事の進みが遅い理由にレイアウトの引き出しが足りないということがあります。
逆に言えば、レイアウトの引き出しをいくつか持っておくだけで、現状よりも迷いが少なく仕事を進められると思います。
そこで、今回はデザインのレイアウトパターンについて解説していこうと思います。

 

 

 

 

デザインにおけるレイアウト

 

改めてレイアウトを一言でまとめると「わかりやすく、効果的に配置する」ということに尽きます。
一旦、わかりやすく例を作ってみました。

 

レイアウトデザイン作例

 

構成要素としてはタイトル、写真、リード文の3つのレイアウトです。
シンプルでわかりやすい構成ではありますが、現状では4つの写真とタイトルの差があまりなく、優先順位が分かりずらくあります。

 

このままではどこを主題にしているのかがいまいち分かりづらいので修正します。

 

 

修正後

レイアウト作例2

 

 

まず4つの写真を並列にしている必要性もないと判断し、1枚の写真をより強調し、タイトルと組み合わせました。
残りの写真は並列に組むことで、しっかりと差を出しています。
こうすることで、主題をはっきりとさせることができます。

 

主題がはっきりすることで、デザインはより機能していきます。
このように情報の優先順位をつけて配置を決めていくのがレイアウトとなります。

続いて、具体的なレイアウトパターンについて解説していきます。

 

 

 

レイアウトパターン 視線を集中させる

 

レイアウトにおいて視線を集中させるのはとても重要な要素です。
その上で、一番分かりやすい手法は集中線です。
よく漫画などで活用されていますよね?
あの表現は実はとてもよくできていて、分かりやすく視線を目的の場所に集中させることができます。

 

引用 CREATOR OF THE YEAR 2015 ポスター http://www.uenishiyuri.com/CREATOR-OF-THE-YEAR-2015

 

集中線だけを使うと漫画表現でポップな印象にしかなりませんが、例えばこちらのポスターのようにタイポグラフィー と組み合わせることで、また新しい見え方を作ることができます。
その上で、集中線の特性が生きて女の子の表情に視線が集中します。
このように集中線は何かを強調したい場合にはとても有効なレイアウト手法です。

 


 

視線誘導のコツとしては視線を集めたい場所に要素を集中させるのが一番効果的です。
その上で、他の空間には最低限のものしか構成しないのが鉄板です。

 

 

引用 アフタヌーンティー・リビング(Afternoon Tea LIVING)より、
「ディズニー コレクション アリス イン ワンダーランド  https://www.fashion-press.net/news/40343

 

例えばこちらのポスターでは鍵穴から女の子を覗き込むような構図で、鍵穴から見える景色に視線が集中する作りになっています。
そして、そこに集中させたいため他は黒くして余計なノイズを排除しています。

 


 

引用 Starbucks Coffee Japan https://www.starbucks.co.jp/?apptop=wn

 

こちらはスターバックスのラテの広告ビジュアルです。
これにも視線誘導のテクニックが組み込まれています。
それは要素を固めてしまうと言う手法です。

 

タイポグラフィーやビバレッジ、シズルなど構成する要素を全て中心でまとめてしまうことによってそこ以外に視線が向かないようにしているのです。
人は散乱したものを見ると目が泳いでしまいます。逆に密集したものには視線が集まるのです。
レイアウトの手法としてはこれはとても効果的です。

 

このように見せたいものがはっきりしているデザインを作るなら、これらの視線誘導を意識して構図を考えると良いでしょう。

 

 

 

 

 

レイアウトパターン 広がりを見せていく

 

続いて紹介するのは「広がり」です。
本来、デザインというものは限られた面の中で要素を構成していきます。
その限られたエリアのみで要素を構成していくと、どうしても窮屈な印象を拭えません。

広がりを感じさせるレイアウトはそうした窮屈さを解消することができます。
具体的な例を紹介していきます。

 

 

引用 LION OF LIFE https://www.masakihanahara.com/

 

こちらのポスターは人物を真上から撮影したビジュアルになります。
画面の外に影が広がっていくことで、画面の外側にも世界が広がっていることを想像させることができます。

 


 

引用 https://delicate-vacuum.tumblr.com/

 

空間の中に自由にレイアウトするデザインにも広がりは有効です。
こちらのポスターのように空間の中で要素を広げていくことで広々とした世界観を演出することができます。

 


 

この他にもタイポグラフィにも応用ができます。

引用 https://design-note.jp/information/item.cgi?Id=511

 

このようにランダム性の高い配置でタイポグラフィー を見せて、自由度の高いデザインにしていくことも可能です。
その時はこちらのデザインのようにメリハリとして読ませたい情報はしっかりと箱組にして見せてあげるとより効果的です。

 


 

引用 https://think-of-things.com/news/index_5.html

 

こちらのポスターのようにイラストレーションとタイポグラフィー で上下に流れを作ることで、時間の静止を演出できます。
すると普通に配置したレイアウトよりも途端に魅力的な見え方を演出することができます。

広がりを作るレイアウトは窮屈な印象をなくし、画面の外側を見ている側に意識させることができます。
画面全体で大胆に配置していくことで勢いを感じさることができるため、途端に絵としての力強さも出すことができるでしょう。

 

 

 

 

 

レイアウトパターン 面分割

 

複数の情報があるデザインにおいて面分割のレイアウトは効果的に働きます。
コマごとに情報が独立し、わかりやすくなります。
何より、経験の浅いデザイナーでも綺麗に分割するだけである程度、まとまった印象になります。
かなりオーソドックスなレイアウトパターンと言えるでしょう。

 

引用  我孫子二階堂学校案内 https://www.abini.ed.jp/

例えば男女のイラストを並列に見せたい場合、このデザインのように大胆に画面を2分割し、上下に配置することで同列の存在として見てる人に認識してもらえます。
その上で、タイトルを両者に跨ぐようにかぶせることで、一体感が生まれます。

 


 

引用 早稲田大学 文化構想学部 大学案内 https://www.waseda.jp/flas/cms/

 

情報が大量にある場合にも面分けレイアウトは効果的です。
こちらのデザインでは画面全体をうまく面で切り分け、それぞれに写真や情報を埋め込んで、情報として独立させつつも、色のトーンなどを揃えることで全体の見え方が整っています。
その上で、一番見せたい学部名のエリアに黒ベタ、キャッチコピーを白ベタを使ってメリハリを利かせています。

 


 

 

面分割の切り分けで様々な表現を生み出すことができます。
こちらのポスターではアルファベットを色面分割を行うことで賑やかな印象を作りつつも、ベースは9つの面が整然と並んだレイアウトとなっているので、まとまった印象に仕上がっています。

 

複数の情報を見せていく時に面分割を行ったレイアウトは効果的に作用します。
全ての情報を並列に見せたければ同じ大きさの面分割にしてあげればいいし、情報に優劣をつけたければ面の切り分けにメリハリをつけてあげても良いでしょう。
表現の幅として、色面での面分割というものも有効な手段となり得ます。

 

 

 

 

レイアウトパターン ホワイトスペース

 

情報で画面を埋め尽くすだけがレイアウトではありません。
大胆に余白(ホワイトスペース)を作り出すことで、余韻や緊張感を生み出すことができます。
また、メリハリも効くため、見せたいものへ視線を誘導しやすい手法でもあります。

 

引用 JR 行くぜ、東北 https://www.jreast.co.jp/

 

「行くぜ、東北」は誰しもが一度は見たことのある広告かと思います。
こちらのポスターは余白の取り方が非常に上手いデザインとなっています。
写真はあえて角半写真にして、周囲に白い余白を作っています。それがフレームのような印象をつくって一種のアート作品のような特別な緊張感を生んでいます。

 

さらに写真自体もスカッと抜けた青空が気持ちよく広がり、綺麗な余白を作り出しています。
そして、青い世界の中で赤い服を着た人物が際立つようにスタイリングされています。
情報は実にシンプルですが、興味喚起を促す広告としてはとても強い力を持ったデザインとなっています。

 

行くぜ、東北シリーズの広告はどれもこのような余白を上手く使ったレイアウトがなされています。
今回の話をふまえて他のシリーズも見てみると、レイアウトには必ず意図があるということを理解できると思います。

 


 

引用 JT https://www.pressnet.or.jp/adarc/ex/ex.html?cno=a1464&theme=A&nowic=0 

 

余白のメリハリはレイアウトそのものに緊張感を生み出します。
一番見せたい人物とコピーをひとまとめにしつつ、それを大きく見せて気持ちのいい空間をつくっています。
こちらもホワイトスペースを生かした好例と言えるでしょう。

 


 

引用 無印良品 https://www.behance.net/gallery/38700975/MUJI-poster

 

ホワイトスペースの生かし方はこのように余白を大胆に使うところにあります。
この余白から緊張感や清潔な印象を抱かせることができます。

ホワイトスペースは上品な印象や、清潔感、高級感を感じさせたい時に生かせるレイアウト手法です。
情報を余白によるフレームで囲むことで、そのフレーム内に情報を密集させるなどメリハリのパターンとしても有用と言えるでしょう。

 

 

関連記事

[sitecard subtitle=関連記事 url=https://libertyde.org/post144/ target=]     余白とはホワイトスペースとも呼び、要素を何も置かない空間を[…]

 

 

 

 

まとめ

 

 

今回は「視線集中」「広がり」「面分割」「ホワイトスペース」の4つのレイアウトパターンについて解説しました。
レイアウトはこの他にも様々な手法があります。

 

知識としてもレイアウトのことを理解するだけで、デザインの幅は大きく広がっていきます。
デザインとは突き詰めるとレイアウトにこそ肝があります。
レイアウトはまさしく骨組みです。
そこにイラストレーション、タイポグラフィー 、写真などの情報が加えられていきます。

 

だからこそ、レイアウトはとても重要な要素なのです。
かなりの密度になってしまうので今回はPart1として一区切りさせていただきました。
次回もまた別の手法を紹介していこうと思います!

 

 

最新情報をチェックしよう!