レイアウト、余白の見方のコツ【脱！初心者デザイナー】
今回は文字、図形、写真といった基本の素材を使い、実践を踏まえて解説していきます。レイアウトや余白の見方や、注目ポイントなど細かく書きますので是非参考にしてみてください。
今回の素材はこちら！この３つの素材を使って正方形でレイアウトしていきます。
この３つの素材でレイアウトしていきます。
余白が見えてないレイアウト
まずは余白が見えてないレイアウトです。ダメな例ですね。
余白が見えてないレイアウトです。
ダメなポイントは“文字や図形を配置した時に生まれる余白”、そして初心者がおちいりやすい、“写真のトリミング箇所”です。
トリミングもいまいちです。
余白もですが、この写真のトリミングはかなり重要です。ここをうまくできれば余白も解決できる場合が多いです。逆にインスタなどで写真を使ったデザインをみるとトリミングがうまくいってない方が多いように感じます。
いい感じにレイアウトします
余白を見ながら素材を配置、トリミングも修正します。
こんな感じでレイアウトします。
文字の場所はほぼ変わってませんが、図形の位置、写真のトリミングを大きく修正しました。
レイアウトした時の注目ポイントはこちらです。
余白を見ながら重さ（赤丸の箇所）でバランスをとる。
“全体を見ながら、重さが出る場所”でバランスを取ります。画像でいうと赤丸の箇所が重さが出る場所です。デザイン的には“おさえ”とも言います。余白とおさえ、この２つを大きく見てレイアウトします。
①は滝によって、明るい部分が出てます。文字も白文字なのでお互いが打ち消し合い見づらくなります。そこで重さのある図形を重ねて滝の白を“おさえます”。図形は黒のままだと重たすぎるので少し透かしてやるといいでしょう。透かすことにより文字の色や、写真の緑とのバランスもとれます。
②写真に橋があったので“全体をおさえる”ためにこういう形でトリミングしました。③の箇所も影になってますので“全体をおさえる”ために役に立ってます。
④の重なりについては、少し難しいです。滝の白、文字の白が打ち消し合ってます。間に緑がちょっとだけあり、これを利用して重さを出してます。この文字の配置箇所から左に配置すると滝の白と色が重なり、余計な余白が生まれます。逆に右にいくと緑が出過ぎて重くなりすぎるでしょう。
レイアウトするときには中心も見る
重さが出る箇所も大事ですが、レイアウトするときには中心を見ながらレイアウトします。この中心を見ながら、全体の余白も見ていきます。
青丸は画像の中心です。赤丸がデザインの中心です。赤丸を見ながら、黒い線を意識します。
画像の中心は青丸の箇所ですが、デザイナーはここを見ません。見るのは素材を配置していく際に生まれる赤丸の箇所です。ここがデザイン上の中心となります。きっちり一点を見るというより、ここら辺を少しぼやっと見ます。そしてそれぞれ重さが出る場所や全体の余白を見て配置していきます。
まとめ
今回は実際に素材をレイアウトしながら余白や重さ、中心などデザイナーが注目している点を詳しく解説していきました。今回ご紹介した“余白”、“重さ”、“中心”はとても大事でレイアウトの際、デザイナーがとても重視している点です。この３つを見れば、写真のトリミングをする箇所も決まってきます。是非いろいろな素材を使ってレイアウトの練習をしていきましょう！
