洵デザイナー2年目の齊藤です。デザイナーの先輩、大竹さんの教えがとてもしっくりきたので、モノにするためにまとめたいと思います。考察まとめこのような流れで紹介します。1.ある日のアドバイス先日デザインを作成中、先輩からの指摘がありました。「要素の外側からマージンを小さくしていくと見やすいよ。具体的にどういうことだったのか、先輩からの例も含めて例を作成し、考察していきます。例1は大竹さんのアドバイスを描き起こしたもので、例2は別のUIの場合どうなるか実践してみたものです。例1:タグエリアBefore.マージンのサイズ関係がバラバラAfter.外側からだんだんマージンが小さくなる関係性+ボタンを大きく大竹さんからは「要素を考えて、外側からマージンを決めて段々と内包されるにしたがってマージンを小さくしていくと緊張感が出るのと、見る側が初見でも情報を頭の中で処理しやすいです。」とアドバイスいただきました。まとまって見せたいときに背景色や境界線で区切る、というのはよくある手ですが、さらにマージンの大小関係をつけることで、より「まとまっている感」が出せる、ということです。自分はボタンとボタンのマージンは広く取らないと誤タップするという知識のもと、かなり広めにとっていました。することで逆に間隔が広すぎてパラパラ見えてしまう原因になっていたのでした。「文字とボタンのとのマージンも広く取ってボタンを大きくする」ということでボタン内の圧迫感も解消できることにも気づきました。例2:トピック一覧系Before.文字エリアのマージンが外側のマージンより広いAfter.位置関係を調整して押しやすいように中央にギュッと情報を寄せているので、「押しやすそうな」エリアが大きいです。この形はユーザは見慣れているかなとも思うのでAでも問題はないのかもしれません。基本はわかりやすいものを目印にタップする≒大きい見出しをタップするというのが基本導線かなと思います。できるだけエリアの中央に見出しを置き、更に他要素も近づけることで塊をつくることは正解かなと思っています。文字数の問題や、そもそも背景色を引いて白い背景のカードにするなど、カード全体を押しやすくする方法はあると思うので、臨機応変ですね。3.まとめ簡単に総括すると「外側からマージンを決めて段々と内包されるにしたがってマージンを小さくしていく」というまとめになりました。このテクニックはwebだけではなく、パンフレットなどの紙のデザインや、パワポなどの提案書作りにも簡単に活用できるものだと思います。今回感動したテクニックだったので書いてみましたが、実際学んだことを書き起こすのってとても大変ですね。洵Designer新卒で入社して現在2年目のデザイナーです。今後もこういった学びやレポートを書いていこうと思っています。NextBLOG一覧へPrevCONTACTお仕事のご相談など、まずはお気軽にご相談ください。