Illustration Magic

*自由な生き方の魔法をあなたへ*

まとまりがないデザインを一瞬で形にする方法

f:id:yuki1732:20170615180700j:plain

 

んにちは!ゆうきです!

 

デザインのレイアウトをしている時に全体的にまとまりがないと感じることはありませんか?それは様々なものがつまりすぎていたり、レイアウトの視線誘導の仕方が間違っている可能性があります。

 

今回は、まとまりのないレイアウトを簡単に形にするコツを教えします!

 

 

なぜ全体的にまとまりがなくなるのか?

f:id:yuki1732:20170615181421j:plain

 

人間の目に入る要素が多ければ多いほど、全体像を瞬間的に認知することが困難になります。そうすると脳が混乱して焦点が定まらなくなってしまいます。

 

そのため、1つ1つがバラバラになって全体的にまとまりのないデザインに見えてしまうんです。

 

「作成できるページが1ページしかない!」

 

そんな状況だと、その1ページにどうしても、できるだけ多くいろんな情報や写真を詰め込みがちです。たくさん情報があり、視覚的に影響力のある写真が多いのはいいことです。

 

ですがその大量の情報たちを、いかに焦点を合わせられるようにレイアウトするかが大切なところです。

 

ハチャメチャに詰め込んでギシギシにしてしまう。そりゃあまとまりがなくなってしまいますよね。

 

 

焦点を定めるレイアウトのコツ

f:id:yuki1732:20170615181742p:plain

 

あではまとまりがあって焦点を定めるためのレイアウトのコツとは一体何なのでしょうか??このコツは2つあります。

 

1つ目は「役割分担」2つ目は「削ぎ落とす」ことです。

 

役割分担というのはいわゆる「主役と脇役」です。人間はその対象物がどんな役割であるのかが明確になっているとなぜか安心する生き物です。それなので、視覚的にわかるように情報たちにも役柄をつけてあげます。

 

メインとなる情報資料とそのメインを支える脇役たち。この2つが相互にレイアウトで関係性を保つことで綺麗な安定感のあるレイアウトになります。

 

 

 

2つ目の「削ぎ落とす」とは無駄な要素や変化を徹底してそぎ落としてシンプルにすることです。

 

たくさんの要素の情報を入れようとすると、必ず関係性の薄い情報も存在します。そういった要素や無駄に工夫しようとしてつけた動きなどの変化の部分をなくすことで相手にわかりやすく視線誘導がしやすくなります。

 

 

実際にどうやって配置するのか?

f:id:yuki1732:20170615182048j:plain

 

その2つのコツを使って実際にどのようにレイアウトするのか?そのポイントを抑えながら見ていきましょう!

 

1*役割分担

 

主役を1つ作る

f:id:yuki1732:20170615185306p:plain

 

まずは最も目を引きたいと思う要素を決めて、それを主役として使いましょう。主役にするのは原則1つだけ。例外は、左右対称ページで写真を対にするときなどは、同じ役割のグループをまとめて主役とすることもあります。

 

絶対に内容の違う要素をまとめて主役視しないようにしてください。主役以外の要素は全て脇役として扱います。役割ごとにグループに分けておきましょう。

 

脇役を配置する

f:id:yuki1732:20170615202854p:plain

 

主役を配置したらその他の脇役たちを配置していくことになります。脇役は主役よりでしゃばらないように注意して配置してください。

 

主役よりも脇役の大きさを小さくし、脇役に目立つ色を使わないようにしましょう。秩序に従って整然と並べて配置するようにするとより主役を引き立てられます。

 

 

2*削ぎ落とす

 

要素を削ぎ落とす

f:id:yuki1732:20170615223735p:plain

デザイン上で生きているものは必要ですが、ただの装飾で視覚的に役に立っていないものは、情報として必要でないなら無くしてしまいましょう。

 

例えばコラム扱いの要素がある場合、そのテキストを枠線で囲んで「コラム」と言うピクトがつけられていたとします。その結果、本文よりもコラムが目立ってしまい、要素の上下関係が崩れてしまいます。

 

無駄な要素を省いて捨てることで、本来必要な要素の上下関係が生きてきて視線の流れがスムーズになります。

 

 

変化を削ぎ落とす

f:id:yuki1732:20170615231543p:plain

例えば、一つのページ内に使われる書体は原則1種類が望ましいです。書体がいくつもあると散漫に感じてしまい焦点が定まらなくてぼやけてしまいます。

 

1書体に絞った上で、太さに変化をつけることでメリハリを出しましょう。文字には書体・ウェイト(太さ)・大きさと言う要素があります。それらもできるだけ変化は1つで十分です。

 

他にも、枠線の太さや実線・点線・破線なども不用意に混在させないように注意しましょう。「別に同じでいいもの」は変化させない方が、視線を集めたい部分を引き立たせることができます。

 

 

 

まずは要素の整理をしよう

 

f:id:yuki1732:20170615182457p:plain

これらのコツを実際に使うには、どんな要素があるのかを全て洗い出す必要があります。どの情報のどの要素を主役として目立たせたいのか。そこをまずは決めるのが大切ですね。

 

それをするためにまずは今すぐに、あなたの持っている情報を整理して相手にとって不必要なようをを省く作業をしましょう。見る相手の気持ちになって考えましょう。

 

そうすることですっきりしたまとまりのあるデザインに仕上がっていきますよ。

 

 

では!また次の記事で!

ゆうき