SONICMOOV Googleページ

新人Webデザイナーがワンラックアップするためのマージン基礎

新人Webデザイナーがワンラックアップするためのマージン基礎

  • このエントリーをはてなブックマークに追加

こんにちわ!さいどうです。

今回は大雑把な私が最も苦手とする、マージンについてお話しします。

マージンとは 余白 の事です。
流行のフラットデザインやグリッドデザインでは、この余白を大胆にとってますよね。
しかし、とりあえず余白をとればいい!というわけではありません。
シンプルなデザインこそ、きちんとした基礎が必要になってきます。

というわけで、今回は、初心にかえりマージンの基本についてご紹介します。
 
 
 

マージンの5つの基本

私なりに5つにまとめてみました。

基本その1.文字まわりはマージンをとる!

文字まわりはマージンをとる
 
大きさをかえるだけでもメリハリは出ますが、読みやすさには今ひとつ・・・
そんなときは文字周りに余白を設けることで、パッと見の視認性を高めることができ、窮屈な文字組によるストレスを軽減することができます。
 
 
 

基本その2.上下左右は均一にする!

上下左右は均一にする

ボタンやコンテンツの内側にある上下左右のマージンを均一にすることで、すっきりとした規律性のある安定した印象を与えることができます。
 
 
 

続きを読む

基本その3.間隔を区切ることでまとまり感が出る!

間隔を区切ることでまとまり感が出る
 
 
間隔を区切り、余白を設ける事でまとまりをだします。
こうすることで見やすさだけではなく、2つが別々の情報だということが分かり、知りたい情報へ素早く辿り着くことができます。
 
 
 

基本その4.内側のマージンは外側よりも狭くする!

内側のマージンは外側よりも狭くする

黄色の部分です。
 
内側のマージンが広いと、コンテンツがばらけて見えてしまいがちです。
狭くすることで全体のまとまりがでるだけでなく、見た目もすっきりします。
 
 
 

基本その5.段落の下は広くマージンをとる!

段落の下は広くマージンをとる

みどりの部分です。
 
私はここを意識せずデザインしてコンテンツがぎゅうっぎゅうっ!になるときがあります・・・
たとえば、小さな文字が多いコンテンツをたくさん並べなければならない時も、段落の下の余白を広めにとることで、文字が読みやすくなります。
 
 
 

見比べる!

以上を踏まえて、マージンのないデザイン、マージンあるデザインを実際に比べてみます。

マージンあるデザインを実際に比べてみる
かなり極端ではありますが・・・
右はファーストビューにたくさんの情報が見れる代わりに、要素が多すぎて窮屈な印象を受けます。
それに比べ、左は余白があいている事でそれぞれの情報がとても見やすいです!

みなさんは ”Vertical Rhythm” という手法をご存知ですか?

位置、大きさ、間隔がそろっていることでリズムがうまれ、見る人のストレスが減るんだよ~!というものです。
ただシンプルにするのではなく、法則性を持たせる事が大事みたいです!
(参考サイト:http://liginc.co.jp/designer/archives/12071
 
 
 

おまけ…トレンドのマージンを意識してみよう

基本を学んだだけでは心もとない・・・もっとかっこいいデザインが作りたい・・・
というわけで、トレンドのサイトがどうなっているか研究をしてみましょう
気になるサイトをキャプってグリッドをいれてみます。
 
 
 

brooklynbridgepark(http://www.brooklynbridgepark.org/

brooklynbridgepark その1
 

brooklynbridgepark その2

wanderlusthotel(http://wanderlusthotel.com/

wanderlusthotel その1

 
wanderlusthotel その2

位置、大きさ、間隔もきれいに揃っています。
こんな風に、気になるサイトをキャプチャしてグリッドを入れてみるだけでも勉強になりますね~!

ただ見て「ほ~」と感じるのもいいですが、こうしてデザインの「しくみ」を知るともっと面白いかもしれません。
あ・・・ここ1pxずれてる・・とか・・
 
 
 

まとめ

今回はマージンの基礎中の基礎ということで記事を書きましたが、決してこれが絶対!というわけではなくて、それぞれのデザインに合うマージンの取り方があると思います。

私はまだ勉強不足で、どこを広く、どこを狭くすべきか、デザインをするときに迷ってしまう事が多いです。
みなさまもそんな迷った時に、参考程度に見て頂けたらと思います。

  • このエントリーをはてなブックマークに追加

記事作成者の紹介

さいどう(デザイナー)

ソーシャルアプリ事業部デザイナーのさいどうです。 好きな衛星はエウロパです。

関連するSONICMOOVのサービス

Webデザイナー募集!

イラストーレーター募集!

×

SNSでも情報配信中!ぜひご登録ください。

×

SNSでも
情報配信中!
SONICMOOV Facebookページ SONICMOOV Twitter SONICMOOV Googleページ

Webデザイナー募集!

新着の記事

mautic is open source marketing automation