レイアウトを上手く使いこなすルール

レイアウトを上手く使いこなすルール

こんにちは!

今回の記事は「レイアウト」についてです。

皆さん、一度は聞いたことある単語だと思います。ですが、レイアウトをきちんと理解し、使いこなせていますか?

今回はレイアウトの法則・黄金比・困った時の対処法などを紹介していきます!

今日からすぐに使える法則もあるので是非試してみてください。

 

 ー 目次 ー

【1】レイアウトとは?

【2】イヤでもキレイに見える黄金比

【3】困った時の3分割ライン

【まとめ】

 

【1】レイアウトとは?

少しデザインから離れますが、あなたは「話し上手な人、話がわかりやすい人の特徴は?」と聞かれたらなんと答えますか?

・主題、結論がわかりやすい

・話が整理されている

・声の抑揚があって聞きやすい

などたくさん挙げられると思います。

実は「上手な話し方」「レイアウト」は似ているんです。

レイアウトとは、上記と同じ効果を紙やWEBで表現することで、得たい結果を得るために、伝えたいこと・伝わるべきことが伝わるように、限られた空間内に入れるべき情報を上手に収めることです。

あなたが直接会えずとも、伝えたいことをより効果的に伝えることができるようになる、強力なスキルの1つになってくれます。

【レイアウトの基本4原則】

相手に正しく価値を伝えるためには、

正しい主張を、正しい順番で、正しく伝えれば、実現できます。

それをレイアウトで実現するための4原則をお伝えします!

【対比】複数の要素のそれぞれの違いをハッキリさせる

【反復】統一感を出して関係性を分かりやすくする

【整列】関連する要素が繋がって見えるようにする

【近接】要素の関連度を見える化して相手の視線移動を促す

多くのデザインが今でも使っている鉄板のルールです。

この4原則に関してはまた別の記事でより詳しく扱いますので是非御覧ください!

 

【2】イヤでもキレイに見える黄金比

レイアウトのデザインで最も多く使われるのは四角形です。

四角形も縦横比次第でバランスが良くも悪くもなります。

ここではたった1つ、この縦横比にさえすれば、嫌でもキレイと感じさせることができる比率をお伝えします。

それは、、、「1:1.6」の黄金比と言われているものです。

黄金比を取り入れて美しいウェブデザインを作る5つのポイント | LISKUL

黄金比を使った代表的な例をあげると「Appleのロゴ」「ミロのヴィーナス」「名刺・ハガキ」「 パルテノン神殿」などがあります。

レイアウトの基本サイズを知っておくだけで、たとえセンスがなくてもキレイに見えることができるので覚えておきましょう。

またあらゆるレイアウトに使えるので覚えておいて損はありません!

黄金比と合わせて覚えてほしい【Fの法則・Zの法則】

人は1つのレイアウトを見るとき、それがチラシでも看板でもWEBサイトでも、面白いほどに似たような順番で中身を見ています。

本を読む時などに無意識のうちにすり込まれている2つの法則があります。

・Fの法則           ・Zの法則

      

デザインする時にプレゼン資料でも、ポスターでも中身の優先順位をこの順番にする必要があります。

そうすることで、相手の見るべき優先順位とレイアウトが合致していき、違和感も不快感もなく全てを見て理解することができますので、あなたが得たい結果に向けて自ずと誘導されていく仕組みになっています。

 

【3】困った時の3分割ライン

 レイアウトしたい要素をそれぞれの黄金比のボックスを作って収めて、Fの法則・Zの法則に当てはめてみた時、それだけでは画面全体が埋まらず余白ができることはよくあります。

そんな時は画面を3分割する線を引いてみると、悩みは解決できます!

このように画面の縦と横をそれぞれ3等分します。そうすると9つのブロックができると思いますので、その中に収まるように要素を配置すると驚くほどキレイなレイアウトになります。

三分割法をつかった、美しい構図レイアウトの早業デザインテクニック | PhotoshopVIP

もう1つ方法として、交差する4つのポイントを使ってその中心として要素をレイアウトする方法でもバランスのよいレイアウトを作ることができます。三分割イラスト/無料イラストなら「イラストAC」

【まとめ】

今回は以上となります!

「センスがなくても知っているだけでセンスのいいものに見える」今日から今すぐにでも使える」「簡単で誰でも使える」ルールを活用して更にいいデザインを作っていきましょう!

 これからどんどんデザインの見せ方が上手くなる方法をお伝えしていきますので楽しみにお待ち下さい!

ではまた次回お会いしましょう。