「レイアウトの基本」を学び直して気づいたこと

こんにちは。コウノです。

早いもので、入社してから半年が経ちました！
入社してから色々な案件に携わり、悩みながらも日々奮闘しています。

今回は、毎回レイアウトを考えるのに時間がかかってしまうので、「レイアウトの基本」について改めて勉強したことをご紹介いたします。
デザイナーを目指している方にとって、参考になる部分があれば幸いです！

レイアウトが苦手

以前、イベントのポスターを担当したのですが、複数案提案したいのに、なかなかレイアウトが思いつかず制作にとても時間がかかってしまったことがあります。
こちらが、最初に作成したポスター２案です。

メインビジュアル、タイトル（日付）、ロゴの並びや構成がどちらのポスターも全く同じ構図になってしまっています。
全体の大枠の構成やレイアウトをガラッと変えた案を作りたいけど、レイアウトをどう考えればいいのかが難しくて苦手だと気づきました。
こうして「レイアウトの基本」を学ぶに至ったわけです。

レイアウトの基本について学べる本

レイアウトの基本について学ぶにあたり役に立った書籍をシェアしようと思います。

レイアウト、基本の「き」

レイアウト、基本の「き」 | おすすめ書籍・本 | デザイン情報サイト[JDN]

なるほどデザイン

なるほどデザイン - おすすめ書籍・本 - デザイン情報サイト[JDN]

「デザイン＝楽しい」を実感、豊富なビジュアルでデザイナーの頭の中をひも解いた新しいデザイン書籍。 デザインする上で必要な基礎、概念、ルール...

２冊とも今さらすぎるほど有名な本ですが、今回レイアウトの基本を学び直すにあたって改めてしっかりと読み直しました！
レイアウトの基本的なことが、とてもわかりやすく解説されていて、本に載っているデザインを見るだけでもとても勉強になる２冊です◎

レイアウトの基本について学んだこと

ここからは「レイアウトの基本」について具体的にどのようなことを学んだのかお話ししていきたいと思います。

目の流れを知る

まずは、「人の目の流れ」についてです。
人の視線には決まった流れがあり、自然に左から右、上から下に人は視線を動かします。また、視線は強く惹かれる要素に向かって自然に流れるようになっています。

横書きの文章やレイアウトを見る場合、図のように人の視線は左上から右下へ、「Z」の形で流れていきます。（Zの法則）

縦書きの場合は、人の視線は右上から左下へ、上から下へ「N」の形で流れていきます。（Nの法則）

「お申し込みボタン」や「お問い合わせ」など、見てる人にアクションを起こさせる要素が最後の部分に設置されているのも、視線の流れに沿っていたことに気づきました。
どのように視線が流れているかを知ることで、「ユーザが求める情報を効果的に見せるにはどう配置すればいいのか」を考えて配置をすることが大切です◎

優先順位を考える

デザインをする前に、情報を整理して、何を伝えたいのか優先順位を考えることが重要です。
では、優先順位を考えることでレイアウトはどのように変化するのでしょうか。

こちらのバナーは最初に優先順位を考えることをせずに作成してしまったバナーです。

いかがでしょうか？
何を伝えたいバナーなのかがぱっと見ではわかりづらいデザインになってしまっているかと思います。

原因としては、

• タイトルや日付、あしらいやイラストのサイズ感が同じ
• 各要素の余白が空いていて情報にまとまりがない

という点が挙げられます。

再度、優先順位を考えて作成したバナーがこちらになります。

①タイトル　
②日付　
③無料
の順で優先順位を意識して大きさや配置、余白を調整し作成をしました。
まだまだ優先順位の「差」がわかりづらいかなと思いますが、最初のバナーに比べると情報が伝わりやすくなったのではないかと思います。

情報量が多くなる場合、すべての情報を同じ大きさで同じ位置に配置してしまうと、視覚的に混乱し、どの情報が重要なのかがわかりにくくなります。
そのため、情報の優先順位を考えて、それに応じて配置や大きさなどを調整することが重要です。

主役となる要素を目立たせる

最後に、主役となる要素を目立たせる方法についてご紹介します。

先ほど、デザインをする前に「優先順位を考えることが重要」と書きましたが、優先順位に沿ってどのようにレイアウトをすればいいのでしょうか。
主役となる要素を目立たせるためには、以下のような方法があります。

• 大きさを変える：主役となる要素を大きくする
• 色を変える：背景とのコントラストを強くする
• 余白をつくる：要素同士に余白の差をつくる

大きさを変える

主役を目立たせるためには、サイズを大きくする方法があります。
目立たせたい要素が何かを考えて、他の要素との大きさにメリハリをつけて目立たせることが大切です。
また一方で、重要性が低い情報はサイズを小さく記載することで主役の要素をより目立たせることができます。

例えば、こちらの２枚のバナーをご覧ください。

「入会金０円」の情報が一番伝えたい優先度の高い情報である場合、
Aのバナーでは、情報のサイズが同じで、何が重要な要素かが分かりづらくなっていました。
そこで、「０円」の要素のサイズを大きくして目立たせたのがBのバナーになります。

色を変える

次に、「色」で他の要素とのコントラストをつける方法です。
背景が無彩色の場合、主役になる情報の文字色を鮮やかな色にすると、その情報が目に留まりやすくなります。

こちらの２枚のバナーを見比べてみると、
Aのバナーの下の帯は文字の色が全て白色になっており、情報が目立たなくなっています。
Bのバナーでは「先着１５名」と「０円」を彩度の高い黄色に設定したことで、パッと見たときに重要な情報が入ってくるようになりました。

余白をつくる

最後に、「余白」で目立たせる方法です。
なるほどデザインに、このように書いてありました。

脳の神経細胞には、おおまかな空間に反応する細胞と、細かい情報に反応する細胞の2つの細胞があり、おおまかな空間認識でもわかる「差」の方が認識されやすい

より注目を集めたい要素を引き立たすために「余白」の使い方がとても重要になります。

では、次のAとBの名刺では、どちらの方が情報を認識しやすいでしょうか。

Aの方は情報の間に線を引いて区切っていますが、隙間がなく圧迫されているため、情報が認識しづらいと感じてしまいます。
Bの方は目立たせたい情報が余白で区切られているため、存在感があり認識しやすくなっているかと思います。
文字サイズが小さくても余白を使用することで視認性の高いすっきりとしたデザインになりました。

まとめ

今回、「レイアウトの基本」について学びながら、自分がこれまで作成したデザインを見直すことがとても勉強になりました。
デザインの勉強を始めてから、なんとなくの感覚でデザインしてしまっていて、「大事な情報を伝える」ことをあまり考えられていなかったことに気づくことができたので、
今後は、まずデザインをする前に優先順位を考え、どのようにレイアウトすれば伝えたい情報が効果的に人に伝わるのかをしっかり考えてからデザインをしたいと思います◎

最後までお付き合いいただきありがとうございました！