余白で迷わないためのデザインルール

こんにちは。
合同会社ピクセルグラムでウェブ制作をやっている上平(@hacocooo)です。

悩み

普段はフロントエンド業務をやっているのですが、フロントエンドとデザインは切っても切れない関係性ですので、デザインをやることも少なくありません。デザインをしていると、よく悩むこととして「余白(マージン間)」の設計があります。よく悩む例としては、

「このオブジェクト間は何ピクセルにしよう。。6ピクセル?10ピクセルかな」

そんなことを悩み始めて作業がストップして時間を浪費してしまうときがあります。もうこれ以上こんなこと悩んでてもいけないと思ったので次のようなことは解決策としてデザインルールを設定しました。

8の倍数を使うというルール

余白を考えるときに8の倍数を使うというルールを自分の中で設定しました。8の倍数なので8, 16, 24, 32, 40, 48...と続きますが、これをルールとして設定することによって、

「。。6ピクセル?10ピクセルかな」

と、悩んでたところ8の倍数以外使えなくなってしまったので、選択肢が少なくなり、余白を何ピクセルに設定しようと悩む機会も極端に減りました。

恩恵はそれだけじゃない

他にも色々恩恵があって、例えば8の倍数ルールをプロジェクト単位で共有することによって、複数デザイナーがいる場合での余白の設定がバラバラになってしまうことをふせげたり、フロントエンジニアがCSSで数値を設定するする際に、デザイナーが8の倍数を使うルールを設定していると知っておけば、デザインツールで生まれてしまうズレを吸収できると考えています。

まとめ

今回は余白の話でしたが、デザインをするときにはある程度ルールを設定してやるほうがいいと思っています。デザインでの悩みはセンスなどでカバーすることは到底不可能で、もっと理にかなったものだと信じています。僕は8の倍数でデザインしていますが、デザイナーやプロジェクトによっては8の倍数以外もありえると思っています。
また、他にも自分はこんなデザインルールを作ってるよってひとがいたらコメントで教えてください。勉強させてもらいます。

上平 千晶 / Chiaki Uehira
合同会社ピクセルグラム 代表 / フロントエンジニア
合同会社ピクセルグラムではウェブ制作してます。




この記事が気に入ったら、サポートをしてみませんか?気軽にクリエイターを支援できます。

28

合同会社ピクセルグラム

合同会社ピクセルグラムは、大阪市港区にオフィスを構えるウェブ制作・デジタルコンテンツ制作会社です。
コメントを投稿するには、 ログイン または 会員登録 をする必要があります。