先輩から教わった見やすいデザインのコツ〜マージンとブロック感で要素の整理〜

2019.09.04

デザイナー2年目の齊藤です。

デザイナーの先輩、大竹さんの教えがとてもしっくりきたので、モノにするためにまとめたいと思います。

このような流れで紹介します。

1.ある日のアドバイス

先日デザインを作成中、先輩からの指摘がありました。

「なんかパラパラして見えるね」

「……どうしたら良いでしょうか(´･ω･`)。」

「要素の外側からマージンを小さくしていくと見やすいよ。」

「！？( ﾟдﾟ )」

具体的にどういうことだったのか、先輩からの例も含めて例を作成し、考察していきます。
例1は大竹さんのアドバイスを描き起こしたもので、例2は別のUIの場合どうなるか実践してみたものです。

例1：タグエリア

大竹さんからは「要素を考えて、外側からマージンを決めて段々と内包されるにしたがってマージンを小さくしていくと緊張感が出るのと、見る側が初見でも情報を頭の中で処理しやすいです。」

とアドバイスいただきました。

まとまって見せたいときに背景色や境界線で区切る、というのはよくある手ですが、

さらにマージンの大小関係をつけることで、より「まとまっている感」が出せる、ということです。

自分はボタンとボタンのマージンは広く取らないと誤タップするという知識のもと、かなり広めにとっていました。
しかし、そうすることで逆に間隔が広すぎてパラパラ見えてしまう原因になっていたのでした。

また、「文字とボタンのとのマージンも広く取ってボタンを大きくする」ということでボタン内の圧迫感も解消できることにも気づきました。

例2：トピック一覧系

中央にギュッと情報を寄せているので、「押しやすそうな」エリアが大きいです。

この形はユーザは見慣れているかなとも思うのでAでも問題はないのかもしれません。

しかし、基本はわかりやすいものを目印にタップする≒大きい見出しをタップするというのが基本導線かなと思います。
ですので、できるだけエリアの中央に見出しを置き、更に他要素も近づけることで塊をつくることは正解かなと思っています。

文字数の問題や、そもそも背景色を引いて白い背景のカードにするなど、カード全体を押しやすくする方法はあると思うので、臨機応変ですね。

簡単に総括すると

「外側からマージンを決めて段々と内包されるにしたがってマージンを小さくしていく」

というまとめになりました。

このテクニックはwebだけではなく、パンフレットなどの紙のデザインや、パワポなどの提案書作りにも簡単に活用できるものだと思います。

今回感動したテクニックだったので書いてみましたが、実際学んだことを書き起こすのってとても大変ですね。

ではでは〜。

Designer

新卒で入社して現在2年目のデザイナーです。
今後もこういった学びやレポートを書いていこうと思っています。