こんにちわ！さいどうです。
今回は大雑把な私が最も苦手とする、マージンについてお話しします。
マージンとは 余白 の事です。
流行のフラットデザインやグリッドデザインでは、この余白を大胆にとってますよね。
しかし、とりあえず余白をとればいい！というわけではありません。
シンプルなデザインこそ、きちんとした基礎が必要になってきます。
というわけで、今回は、初心にかえりマージンの基本についてご紹介します。
目次
目次
マージンの５つの基本
私なりに５つにまとめてみました。
文字まわりはマージンをとる！
大きさをかえるだけでもメリハリは出ますが、読みやすさには今ひとつ・・・
そんなときは文字周りに余白を設けることで、パッと見の視認性を高めることができ、窮屈な文字組によるストレスを軽減することができます。
上下左右は均一にする！
ボタンやコンテンツの内側にある上下左右のマージンを均一にすることで、すっきりとした規律性のある安定した印象を与えることができます。
間隔を区切ることでまとまり感が出る！
間隔を区切り、余白を設ける事でまとまりをだします。
こうすることで見やすさだけではなく、2つが別々の情報だということが分かり、知りたい情報へ素早く辿り着くことができます。
内側のマージンは外側よりも狭くする！
黄色の部分です。
内側のマージンが広いと、コンテンツがばらけて見えてしまいがちです。
狭くすることで全体のまとまりがでるだけでなく、見た目もすっきりします。
段落の下は広くマージンをとる！
みどりの部分です。
私はここを意識せずデザインしてコンテンツがぎゅうっぎゅうっ！になるときがあります・・・
たとえば、小さな文字が多いコンテンツをたくさん並べなければならない時も、段落の下の余白を広めにとることで、文字が読みやすくなります。
見比べる！
以上を踏まえて、マージンのないデザイン、マージンあるデザインを実際に比べてみます。
かなり極端ではありますが・・・
右はファーストビューにたくさんの情報が見れる代わりに、要素が多すぎて窮屈な印象を受けます。
それに比べ、左は余白があいている事でそれぞれの情報がとても見やすいです！
みなさんは ”Vertical Rhythm” という手法をご存知ですか？
位置、大きさ、間隔がそろっていることでリズムがうまれ、見る人のストレスが減るんだよ～！というものです。
ただシンプルにするのではなく、法則性を持たせる事が大事みたいです！
（参考サイト：http://liginc.co.jp/designer/archives/12071）
おまけ…トレンドのマージンを意識してみよう
基本を学んだだけでは心もとない・・・もっとかっこいいデザインが作りたい・・・
というわけで、トレンドのサイトがどうなっているか研究をしてみましょう
気になるサイトをキャプってグリッドをいれてみます。
brooklynbridgepark
http://www.brooklynbridgepark.org/
wanderlusthotel
http://wanderlusthotel.com/
位置、大きさ、間隔もきれいに揃っています。
こんな風に、気になるサイトをキャプチャしてグリッドを入れてみるだけでも勉強になりますね～！
ただ見て「ほ～」と感じるのもいいですが、こうしてデザインの「しくみ」を知るともっと面白いかもしれません。
あ・・・ここ1pxずれてる・・とか・・
まとめ
今回はマージンの基礎中の基礎ということで記事を書きましたが、決してこれが絶対！というわけではなくて、それぞれのデザインに合うマージンの取り方があると思います。
私はまだ勉強不足で、どこを広く、どこを狭くすべきか、デザインをするときに迷ってしまう事が多いです。
みなさまもそんな迷った時に、参考程度に見て頂けたらと思います。
