🎨
個人開発でも '見た目で損しない' UI をつくるためにやったこと
はじめに
個人開発では「機能を作るのが楽しいけど、デザインは後回し」になりがちです。僕自身、Figma で 1 から UI を考えるのは正直モチベーションが続きませんでした。
でも、shadcn や MUI などのコンポーネントライブラリを使えば、それなりに見栄えする UI がすぐに組めます。ただし、パーツ単位では綺麗でも、全体としての統一感がないという課題によく直面しました。
その原因は、階層構造・余白・配色・視線誘導といった基本的な"デザインの原則"を守れていなかったからです。
デザインの原則を学び直す
そうしたときに出会ったのが、Refactoring UIとMDN のデザインガイドでした。
"美しいデザインはセンスではなく、原則の積み重ね" という考え方が自分に刺さり、以下のようなルールを自分のプロジェクトに取り入れるようになりました。
実践したデザイン改善ポイント
1. 視覚的階層を意識する
- 全ての要素が同じ強さで主張していた → 情報の優先度を整理して、サイズ・色・余白で強弱をつけた
- ラベルやアイコンでごまかさず、見ただけで意味が伝わる UIを目指す
2. 余白をケチらない
- コンポーネントを詰め込みがちだったが、大胆な余白で呼吸感を持たせた
- spacing system（例えば 4 の倍数）を使い、バラバラな padding/margin をやめた
3. 色の使い方を整理する
- HEX ではなく HSL で管理 → 明度や彩度を意識したトーン調整がやりやすくなった
- 色を先に定義 → テーマカラー・グレー系・アクセントをしっかり分ける
- "色だけで状態を伝える"のをやめて、アイコンやテキストも併用
4. タイポグラフィを整える
- フォントサイズ・行間・字間のスケールを事前に決めた
- 1 行の文字数は多くても 70 文字以内に抑え、読みやすさを意識
- 見出しは左揃え、段落との距離感もルール化
5. 構造を持ったシャドウとレイヤー
- 影をただ付けるのではなく、光源の位置を統一
- シャドウは 1 つだけでなく、柔らかく 2 段階構成にして深みを出す
効果と気づき
これらをルール化して .cursor にまとめたことで、
- デザイン全体に統一感が出た
- ライブラリのコンポーネントを使ってもバラバラ感がなくなった
- デザインを最初から作らずとも、モダンな印象に仕上がるようになった
何より、コードを書く感覚でデザイン原則を守れるようになったのが個人的には大きな進歩です。
以下にて公開もしていますので、是非活用してください！
まとめ
Figma で凝った UI を作らなくても、原則を知り、少し工夫すれば「サクッと良い見た目」が実現できます。
良い Web デザインの思想にあるように、良い UI は才能ではなく、再現可能な法則です。デザインが苦手だと思っていたエンジニアの方ほど、このルールベースな考え方はフィットするかもしれません。
AI やコンポーネントの力を借りて、僕たちでも“まとまりある見た目”を手に入れられる。
これからも少しずつルールを育てながら、コードと同じように UI も改善していきたいと思います。
Discussion