2016.10.31

1,326

見えないデザイン「マージン」意識していますか?

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

今回は見えないデザイン「マージン」について

マージンとは余白のことで、
これをうまく使うとwebサイトのがとっても見やすくなるんです。

今回は実際に私が行ったマージンの調整を例に使い方ご紹介します。

今回の調整はレヴュー(お客様の声)

こちらのサイトではレビューも多く平均的な評価も高いので、
新規のユーザーにも信頼してもらえるよう、
ヘッダーにレヴュー数や評価が一目でわかるデザインを追加しました。

現状でも十分きれいなデザインになっていますが、ここにマージンを加えて調整を加えていきます。

要素ごと区切りがわかるようにマージンを調整。

こちらのデザインには、全てで赤枠で囲まれている4つの要素があります。

現在は全ての要素が均等に並んでいるので、どこに対する数値なのか、どこにかかっている★なのか等がわかりづらくなっているので、ここでマージンを加えていきます。

修正したものがこちら

細かい修正なのでわかりづらいですが、
上が修正前、下が修正後になります。

それぞれの要素ごとにマージンを調整して間を空けたのに加えて、
要素内の空白を寄せることで、どこがどこにかかっているかを一目でわかるように調整しました。

まとめ

今回はかなり細かい修正点を例にあげてしいまいましたが、
こういった調整がサイト全体でしっかりしていくことできれいで見やすいサイトに繋がってきます。

逆にここで手を抜いてしまうとサイトにまとまりが無くなってしまいます。

これをやることで売上が良くなる!!
といった目に見えた効果が望めるわけではないですが、こういったことをしっかりとやっておくことで、レイアウトを変更してみたり導線を変えてみたりするときに困らないようになりますよ!

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

ヘノブ編集部


この記事の投稿者:

次