コラムColumn

【Webデザインがワンラックアップするマージン基礎】

はじめまして。

9月上旬からKAIDOGROUPにデザイナーとして入社しました「やっさん」です。
以前は都内で占いサイトや女性向けコンテンツのデザイン、コーディングを担当していました。
制作していたサイトデザインがわりと特殊(?)だったので、まだまだ勉強することが多く、
日々刺激を受けています!
そんな中、入社してから苦戦している項目が「マージン」についてです。
記事を並べる時や、文章、画像の間をどれぐらい開けたらいいのか・・・悩んでしまうことがとても多いです。

今回はそんな「マージンの基礎」について書いていきたいと思います。

 

1.上下左右のマージンを均等にする
10_y_001
隣り合う要素との間隔や、ボタン、バナーなどの内側と外側の要素の上下左右マージンをできるだけ均等にすることでデザインがスッキリ見えます。
こうすることで規律性のある安定した印象を与えることができますね。

 

 

2.内側のマージンは外側のマージンより狭くする
10_y_002

内側のマージンを外側より狭くとることによって、全体のまとまりを出すことができます。
逆になってしまうと全体がばらけて見えてしまいがちです。

 

 

3.段落の下はマージンを広くとる
10_y_003
段落の間隔を広く取ることにより、まとまりが出て全体が見やすくなります。
ここの間隔を狭くしすぎると、全体のコンテンツが詰まって見えてしまうので注意しましょう。

 

 

4.文字周りにはクッションをつける
10_y_004
右の状態だと窮屈に見えるうえに文章が読みずらい印象です。
適度に文字周りに余白をあけることで、視認性を高めることができます。
記事系サイトなんかはこのマージンの取り方が絶妙だなぁ…といつも思います。
私はこの間隔を詰め過ぎる傾向にあります…(;一_一)

 

 

5.間隔で”区切り”を表す
10_y_005
余白があることで見やすさだけではなく、2つが別々の情報だということが分かりやすくなります。これにより、知りたい情報へ素早く辿り着くことができますね。
この間隔が詰まりすぎていて、コンテンツの区切りが分かりづらい…なんてことになっていませんか?

 

 

いかがでしたでしょうか?
シンプルなデザインこそ「余白」がとても大切なポイントになってきます。
「余白」を奇麗に、うまく使えているサイトは見ていてとても気持ちいいですよね。

もちろん、今回書いたことが絶対!という訳ではありません。デザインによって、適切なマージンの取り方が
あるかと思います。
私もまだまだ勉強が必要ですが、今回の記事も参考程度に見て頂けたら嬉しいです^^

WEBデザイン / WEB制作 / デザイン基礎 / マージン

執筆者:nagata

お問い合わせフォーム