レイアウトデザインの視野を広げる

こんにちは、つしまです。

今週は、看板の「レイアウト」にすごく悩みました。そこで今回は、デザインがしっくりこない…と悩んでしまった時のために「デザインの基本4原則」を言語化してまとめ、改めておさらいしようと思います。また、制作する上で学んだ+αで覚えておきたいことについても、一緒にまとめていきます。

目次

デザイン4原則とは?

情報をわかりやすくグループ化するために欠かせない「デザインの基本4原則」は以下の通りです。

【近接】グループ化して情報を整理し、理解しやすく

項目の関連性に応じて要素同士の距離感を変え、見る人の混乱を減らします。

  • どの情報を一つのグループとして見せるべきか整理する
  • 関連性が強いものは近づけ、弱いものは遠ざける
  • 異なるグループとは余白を開けて区別する

近接を使うと、文字のサイズや色を変更することなく、距離関係のみでカテゴリーを分けることができます

4原則の中でいちばん重要だと思うのが「情報の整理」です。

サイズや情報量が決まっている中で、それをどうやってまとめるのか?どうやったらわかりやすくなるか?そういったことを考え、形にしていくのが一番難しいです。

これまで様々な制作物に関わらせていただいて、「どれだけ違和感なく、スラスラ読めるか」を作るのに、こんなに労力がかかるものなのかと実感しました。

特にバナーなどは見る側からしたら、たったの数秒しか目に入りません。その数秒で、どうやったら沢山の人が読んでくれるか、伝わるか試行錯誤しながら情報整理をしています。

看板の制作を通して特に学んだのが、大切なのは仕上がった物のおしゃれさやかっこよさなど、どれくらい凝ったデザインなのかよりも、ユーザーから見てわかりやすいか、お客さんが与えたい印象は伝えられているか、といった目的が達成されているかが重要なのだと思いました。

セクションの区切り方

要素が2個以上ある時、背景にベタを置いてグループを明確化したりしますが、その境界線の位置ですごく印象が変わります。安定感を出したいか、動きを感じさせたいか、馴染ませたいか、など。見る人の印象を決める重要なポイントだと思いました。

真っ直ぐ:基本のパターンです。スタンダードな区切り方で、安定感があります

斜め:真っ直ぐじゃない分、不安定となり動きを感じさせます。スタイリッシュな印象です

グラデーション:境界が馴染んで、奥行きを感じさせるレイアウトになります。自然な印象で繋がりを強く感じます

まだまだ色々な区切り方がありますが、少しの工夫で大きく印象が変えられるので、研究していきたいです。

帯に頼りすぎないということも忘れないようにしたいです。2つの要素があったとき、グループを明確化するための選択肢が色を塗ってエリア分けするか、要素を枠で囲むかでした。しかし、囲むと狭い印象を受けると指摘されたことが何度かあって、背景に頼らず、文字色やフォントを変えて違いを出すことも選択肢に入れたいです。

【整列】要素を整列させて統一感のあるデザインに

要素をきちんと揃えることで、視線がスムーズに流れ、明快・洗練といった印象を与えられます。

  • 要素の先頭を揃えると整って見える
  • 「見えない線」を意識する
  • 余白を統一させるとさらに見栄えが良くなる

近接でまとめたグループを整列で綺麗に整えることで見た目がスッキリし、見やすいデザインになります

整列のポイントは「見えない線」でつなげることなのだと学びました。「見えない線」というのは、自分で決めた上下・左右の余白を均等にし、各オブジェクトの縦や横のラインをきちんと揃えた状態のことです。線を引かなくてもきちんと整頓されて見えるので、統一感がグッと良くなります。綺麗に揃えられた制作物は、色付けしなくても「見えない線」が見えます。

【反復】同じ要素を繰り返して一貫性のあるデザインに

作品全体を通して一部の要素を繰り返すことで、一体感が強化され、視認性・可読性がアップします。

  • 同じデザインルールを繰り返すことで、見やすく
  • 反復は文字だけでなくイラストや雰囲気など、あらゆる要素に対して使える
  • 同じ要素に色々な装飾やサイズなどを混在させない

ブログの見出しデザインもそうですが、反復は情報にリズムを持たせることが重要です

【対比】要素のコントラストにより伝えたいものを強調

書体、色、サイズ、線の太さ、形、空きなどでデザインにメリハリを出し、見る人の目に留まりやすくします。

  • 情報の優先順位をつける
  • 重要な要素を目立たせ、重要度の低い要素を控えめにする
  • ジャンプ率に応じて印象が変わる

強調により、情報がグループ化されて、理解しやすくなります

普段何気なくやっていることだとは思いますが、言語化してみて改めておさらいすることができました。

構図ばかりに悩むとつい忘れてしまいがちなので、基本に戻ってしっかりと確認したいと思います。

まとめ

レイアウトがしっくりこない…と悩んでしまった時に確認したいポイントを、デザイン4原則に当てはめて紹介しました。

  • 「近接」関連する要素をグループごとにまとめる
  • 「整列」要素を整列させて統一感を持たせる
  • 「反復」同じ要素を繰り返して見やすくする
  • 「対比」メリハリをつけて優先度を明確にする

デザイン4原則はデザインする際の基礎となるので、悩んだら意識して振り返ろうと思います。崩すにしても一度整えてから、あくまで調和を守った上で変化をつけるよう心がけたいです。

目次