Design Stock

デザインのアレコレ

  1. HOME
  2. レイアウト
  3. 【レイアウトの基礎】まずは版面とマージンを設定しよう!

【レイアウトの基礎】まずは版面とマージンを設定しよう!

デザイン制作に取り組む前に、必ず決めなければならないことがあります。

それは版面とマージンを設定することです。

設定する版面とマージンの大きさによって、読み手に与える印象やデザインの仕上がりが大きく変わります。

下のデザイン例をご覧ください。

f:id:mtk-hcwj:20180312102200j:plain

左と右のチラシで受ける印象が違うことに気がつくと思います。

今回は、そんなレイアウトの基礎知識である版面とマージンとは何か?

また、設定する値が変わることによって読み手に与える印象はどう異なるのか?

などを見ていきましょう!

版面とマージンって?

版面とは、文章や写真、図版を配置する領域のことです。

「レイアウトスペース」とも呼ばれます。

一方、マージンとは要素を配置しない領域のことを指します。つまり余白のことですね。

一見余白とは「余分な白い部分」と、不必要な領域だと捉えられがちですが、デザインではこの余白をうまく使うことがとても大切になってきます。

余白がいかに重要な役割を担っているかについては下記の記事をご覧ください。

www.design-stock.jp

版面率で印象が変わる

版面率とは版面の大きさのことです。

版面が大きい場合を「版面率が高い」、版面が小さい場合を「版面率が低い」といいます。

そして、版面の大きさと読み手に与える印象は密接に関わっています。

もう一度、以下のデザイン例をご覧ください。

f:id:mtk-hcwj:20180312102200j:plain

左側は版面率が高いチラシ、右側は版面率が低いチラシですね。

情報量を見てみると、左側は多く、右側は少ないことがわかります。

つまり、版面率を決めるときは

  • 掲載する情報が多い→高い版面率
  • 掲載する情報が少ない→低い版面率

という基準で考えるのが一つの手段です。

また、パッと見たときに左側はたくさんの情報が掲載されているため「楽しい」「にぎやか」といった印象を受け、右側は「落ち着いた」「上品な」といった印象を受けますよね。

とすると、

  • 「楽しい」「にぎやか」な印象を与えたい→高い版面率
  • 「落ち着いた」「上品」な印象を与えたい→低い版面率

という基準で考えることもできます。

デザインのコンセプトや表現したい目的に沿って適切な版面率を選びましょう。

標準的なマージンの幅

マージンの幅は自由に設定することができるのですが、ある程度の目安があった方が決めやすいと思います。

今回は情報量とマージンの大きさについての表を掲載するので、制作するデザインに合った幅を検討してみてください。

最後に

版面とマージンは印刷物のデザインでよく設定されるものですが、Webデザインでも要素同士を揃える際の基準線を作ることにもなるので、参考になると思います!

版面率と印象の関係をデザイン制作の中で自分に取り込みながら、制作物によって最適な幅を設計できるようになるといいですね。

また、あえて要素を版面から外す「裁ち落とし配置」というテクニックもあるので興味のある方は以下の記事をご覧ください。

www.design-stock.jp