はじめまして、ピュアポムのデザイナー きゃらこ です！🐸
ピュアポムに入社して2ヶ月が経ち、日々の業務を通してデザインに対する考え方が大きく変わりました。

その中でも、最近特に意識するようになったのが「デザインルールを作ること」です。
以前は、デザインは個々の案件ごとに調整して作るものだと思っていましたが、チームでの開発を経験するうちに、ルールを決めることで作業がスムーズになり、コミュニケーションコストを減らせることに気づきました。

今回は、「デザインルールの大切さ」について、私が学んだことをお話ししたいと思います！

"ルール"を意識していなかったころの私

ピュアポムに入社する前は、デザインだけでなくコーディングまで自分で担当することが多かったため、デザインルールを特に気にせず作業していました。

• ボタンのサイズや余白がページごとに違う

• パディングやマージンも、その場のバランスを見ながらなんとなく調整

• 「この場合はこう」といったルールがなく、デザインごとに都度考えて決めていた

一人で作業するなら特に問題にならなかったのですが、チームで開発する場合、こうしたバラつきが原因で作業が滞ることがあることに気づきました。

チーム開発でデザインルールの重要性

ルールがないと…

• 「このボタンのサイズはどれを使えばいいの？」

• 「どのアイコンを使うのが正しい？」

• 「余白の基準は？」

毎回確認作業が発生し、細かいやり取りが増えてしまいます。

ルールがあると…

• 「このパターンはこのルールで作る」と共通認識が持てる

• 一つひとつのデザインを確認しなくても、スムーズに開発できる

• コミュニケーションコストが下がり、余計な手戻りが減る

デザインの統一感が保たれるだけでなく、開発メンバーの作業効率も上がることを実感しました。

具体的なデザインルールの例

私が実際に意識するようになったデザインルールの一部を紹介します👇

✅ ボタンのルール
• ボタンの高さは 40px に統一
• 余白（パディング）は 左右24px、上下16px

✅ カラーのルール
• プライマリーカラーは #4E6C89（青）に統一
• グレーの階層は #333, #666, #999, #CCC の4段階

✅ フォント・テキストのルール
• H1, H2, H3のサイズを明確にする
• 行間（Line-height）は 1.5倍 に統一

✅ スペーシング（余白）のルール
• 余白は 8px を基準に、8の倍数（16px、24px など）で統一

ルールを明確にすると、「このデザインはこう作る」という共通の基準ができ、迷いが減るようになりました。

まとめ

これまで、「ルールを決めなくても、それぞれのデザインごとに最適な形にすればいい」と思っていました。
でも実際にチームで開発を進めてみると、ルールがないことで何度も確認が発生したり、お互いに意図が伝わらなかったりする場面が増えました。

デザインルールを整えてからは、

✅ エンジニアからの質問が減り、作業がスムーズに進むようになった
✅ レビュー時も「なぜこのデザインなのか」が伝わりやすくなった
✅ 似たようなUIパーツを再利用できるようになり、効率が上がった

こうした小さな変化の積み重ねが、結果的に開発全体のスピードや品質にもつながっていると感じています。

今後も、「自分のためのデザイン」ではなく、「チームで育てるデザイン」を意識して、ルール作りに向き合っていきたいと思います！