レイアウトデザインが劇的に上手くなるコツ

なんか、ツイッターで最近やたら、あるウェブサイトやスマホアプリの画面をトレースしてデザインを勉強するというものが流れてきたので、私からのアドバイスとして、レイアウトデザインが劇的に上手くなるコツについて話したいと思います。

そもそもトレースする意味が、レイアウトデザインではなく違う分析がテーマだった場合は用途が違うと思いますので、今回はレイアウトデザインに限っての話ということでお話ししたいと思います。

というわけで、いいレイアウトバランスをつくるのが劇的に上手くなるコツは、

マージンやエレメントを測る

です。

素晴らしいウェブサイトや、スマホサイト、アプリの画面で、あーこのサイト美しいなー、ここのボタン、フッター押しやすいなーとか、ここのタイポグラフィのバランスが絶妙だなーとか思ったらですね、すべてその要素をとりまくエレメントやマージンは測るということです。なんでこのバランスがいいのかを調べるということですね。

実は、レイアウトが上手ではないデザイナーさんは、大体これやってないので、自分の感覚でテキトーにやってしまうわけです。こんな感じだろーって、そして山勘でやってるんで、ん〜微妙だなーとか言いながら、微妙なのをわかっていながら、もうこれでいいやって決めて、終わらせちゃうんですね。微妙だな〜って思ってるデザインは、そこに課題が生じていると思ってください。いいものは、一発でいい！となるからです。ん〜っていってる時点で課題は生じています。

ぜひ、やってみることをおすすめします！！

いろんな美しいサイトやアプリを見たら、マージン、エレメントサイズを測る癖をつけるといいと思います。そうすることで自ずと、引き出しとして十分に力がつくようになります。

上手いデザイナーの人は、美しいレイアウトや、文字のジャンプ率、line-heightや、文字と文字のマージン、段落ごとの抑揚をつけるためのマージンを、なぜ美しいマージンになっているのか？とその理由を全部測って分析しています。測った上で、さらに比率も計算し、自分の作っているレイアウトに取り込もうとおもったら、これくらいの比率ではいる必要があるなと感覚ではなく、測って分析をするわけです。

そういった日々の積み重ねが、上手い絶妙な空間バランスや、文字の抑揚、エレメントのサイズ感などの引き出しをになり、実際のデザインに反映されていってるわけです。

文脈と文脈の間は、80pxとか、キャプションと本文の間は24pxとか、そういった、いろんな要素を、美しいサイトやアプリはなぜ見やすく操作しやすいレイアウトなのかを測っているわけですね。

これは、ウェブに限った話ではなく、紙でも同じです。紙においても、印刷エリアから10mm中にいれて余白を入れるみたいに。マージン、エレメントの距離感などは測ることで、バランス感は身につきます。

そういったいろんな分析から、美しいレイアウトのセオリーを見つけていくことで、レイアウトの引き出しが劇的によくなっていくわけです。そして、自分がデザインするとき、適材適所でそのセオリーを引き出して組んでいく。最終最後は、自分でセオリーを作っていくなんてことにもなっていくわけですね。

というわけで、美しいレイアウトには理由があるので、普段からレイアウトが苦手だよという方はですね、ぜひ、素敵なサイトやエディトリアルデザイン、アプリ、もしくは、ゲーミングUIでもいいです、まず測って、実践のための引き出しをつくって準備していく、やってみてはいかがでしょうか。

これは、普段からというか私もずっとデザイナーになった頃から今でもずっと続けているもので、この引き出しというか基礎があって、今のデザインをつくっているといっても過言はありません。継続は力なりです。

もし、普段やっていない方がいたら、やってみると劇的に変わってくるので、オススメです！

以上、今回は、

マージンやエレメントを測る

でした。

なにかご質問などございましたら、Twitterまで！

https://twitter.com/hirokishindo818

なんか、ブログらしくなってんのかしら。。。どうなんだろ。。。

ではまた！