デザインルールのベストプラクティスを考えてみる。
はじめに。
自分が携わってきた案件では、
明確なデザインルールというものがなく、
(あったのかもしれないがエンジニアにまで見える化されていなかった。)
逆になかったからこそここがこうだったらいいなーとか、
ちゃんと決まっている方がデザインする側も
スムーズにデザインすることが出来そうと思った事をまとめていきます。
ルール化するべき理由
- 理由のないデザインにならない。
- デザイナーとエンジニア間での齟齬が来たしにくくなる。
- 先方の要望によって急な変更があった場合でも、変更の対処がしやすくなる。
- 実装する上でも明確に初めからルール化されていれば、ベースカラーやベースサイズを変更するだけで対処が済むので、無駄な作業をしなくて済む。
- デザインに説得力を持たせることが出来る。
配色を明確にルール化して決める。
マテリアルデザインでいう、
プライマリカラー、セカンダリーカラー等です。
色ルールを明確化することで配色迷子にもならなくなりますし、
何故この色が使われているかを明確化する事ができます。
ベースサイズを決めてルール化する。
4や8の倍数に合わせて大きさを固定するなど、
ガイドラインとなる基準を決める。
フォントサイズもルール化する。
フォントサイズもパーツ毎に最初から明確にルール化しておく。
例えばAppBarのタイトルだと、
ab_title(
text_size = xx.sp
font_weight = bold
)
// 上記はかなり適当に書いてます。
のようにスネークケースで、
頭にパーツ名(AppBarなのでab)
その後に箇所(タイトルなのでtitle)
のような形でわかりやすく決めていく。
ルールを見える化する。
デザイナー内で完結せず、
必ずチーム全体、寧ろ先方に見せれるような形で見える化出来ている事がベスト
チーム全体で共有する事で、
何故デザインがこのように組まれているかが共有できますし、
先方に見せれるレベルでルール化できていれば、
意味のわからない要望に対して説得力を持った回答を用意する事ができます。
ルールは決めるがカスタマイズは出来るようにする。
ルールはあくまでベースとして絶対とはしないでおきましょう。
案件によっては決めたルールを適用する事が難しい場合もありますし、
その案件に沿ったものにカスタマイズしましょう。
代表例
MATERIAL DESIGN
その１はマテリアルデザインです。
上記で書いたものはほぼ全て適用する事ができますし、
流石にGoogleが採用しているだけの理由があります。
Human Interface Guidelines
その２はHuman Interface Guidelinesです。
こちらに関してはそこまで詳しくはないのであまり何も言えないのですが、
要は大手二社がデザインガイドを明確にしてルール化しているという事は、
それなりに理由があり、それだけのメリットがあるという事です。
まとめ
- ルールが見える化して齟齬が来たし辛くなる。
- 急な変更にもエンジニアが対応しやすくなる。
- 知見のない人にも説明しやすくなりデザインに説得力が生まれる。
- 一度設定決めてしまえば何度でも流用できて、開発効率が上がる。
まとめとしては以上になります。
デザインルールを活用して気持ちの良い開発をしましょう！！
参考記事
Discussion