はじめに
エンジニアやってるとよく聞く悩み：
- デザインは苦手
- 色が決まらない
- 余白が不安になる
- フォント選びが闇
- 結局「ダサい」と言われる
わかります。自分もそうでした。
でも、実は「ここだけ抑えれば8割マシになる」ポイントが存在します。
この記事では、デザイン専門家じゃないエンジニアでも即実践できるモダンUIのコツをまとめます。
CodePenでデザインが見られます。フレームワーク不使用なので、コピペで使っちゃってください。
https://codepen.io/mukai3/pen/RNPVZpL
① 余白は "不安な2倍" 取る
エンジニアは余白をケチりがちです。
- ボタンの内側パディング：上下16px、左右24px以上
- セクション間のマージン：最低32px
- コンテンツ上下余白：画面幅の5〜10%取ると安定
迷ったら広めに。 余白は「呼吸」です。
② 色は"3色ルール"で固定
- ベースカラー（背景・土台）
- アクセントカラー（ボタン・強調）
- テキストカラー（本文・説明）
具体例：
- ベース：#F9FAFB（薄グレー）
- アクセント：#3B82F6（ブルー）
- テキスト：#111827（ほぼ黒）
「色数が多い＝オシャレ」ではありません。
③ フォントは迷わず"2種まで"
- 見出し：
InterorNoto Sans - 本文：同じフォントをサイズだけ変える
フォント選びは沼なので、迷ったらGoogle Fontsの上位人気から選べば外しません。
④ 影は"薄く、距離短く"
ドロップシャドウのおすすめ：
box-shadow: 0px 4px 8px rgba(0,0,0,0.1);
影は自己主張させない。"気づかれない存在感"が理想。
⑤ 角丸は"均一に"
- ボタン・カード・モーダル：全て8px〜12pxで統一
- 中途半端にバラけると途端に素人感が出ます
border-radius: 8px;
⑥ アイコンは"統一ライブラリ"に頼る
HeroiconsLucideMaterial Icons
アイコンを統一するだけで、プロ感3倍増し。
⑦ 配色は"既製品パレット"を活用
自分で0から作るのはプロでも難しい。
既製の配色をそのまま使うのが賢い選択です。
⑧ モダン感は"行間"で作れる
- 行間（line-height）は1.5〜1.75倍推奨
- 行間を広げると一気に今っぽくなります
line-height: 1.6;
⑨ レスポンシブは"幅600px"を基準に作る
- スマホでもPCでも破綻しにくい幅感
- カード幅も600px以内に抑えると安定感が出ます
⑩ 迷ったら"Tailwind UI"を丸パクリする
デザインのプロが作ったものを真似るのが最短。
おわりに
デザインは「センス」ではなく「型」で7割は解決できます。
しかも、これらは全て エンジニア的な再現性 を重視したコツです。
これからポートフォリオや個人開発を作る人の参考になれば嬉しいです！