はじめに
「デザインは苦手です」「センスがなくて」
エンジニア界隈で、何度も聞いたこの言葉。
でも本当に“センス”の問題なんだろうか？
この記事では、私が実務や現場で見てきた 「デザインができるエンジニア」と「できないエンジニア」の違い を、実体験ベースでまとめていきます。
「デザインができるエンジニアになりたい」と思ってる人に、少しでもヒントになればうれしい。
違い①：目的からUIを逆算してるか？
できるエンジニアは「誰が・何を・どの文脈で見るか？」を聞く。
できないエンジニアは「パーツ単位の見た目」から入る。
例えば：
- できる人：「この入力欄って何文字ぐらい入る？」「ユーザー、焦って入力してない？」
- できない人：「なんかデフォルトの青ダサいな、影つけとくか」
→ 目的と文脈を読まずに、CSSだけいじっても“気持ちよくはならない”
違い②：「余白」や「文字サイズ」に気づけるか
デザイン力＝色や形のセンスじゃない。
本当に差が出るのは、
- 行間の気持ちよさ
- コンポーネント間の“間”
- フォントサイズやweightの階層感
✅ できるエンジニアは「違和感に気づく能力」が高い
→ そしてそれを「構造」や「コンポーネント設計」で直す
→ センスじゃなくて、“観察力”と“構造化能力”
違い③：「デザイン＝UIだけ」だと思っていない
実は：
デザインとは、“選択と制限”の設計である。
できる人は、
- 入力パターンを減らす
- 説明文を省略する
- 状態が伝わるような“色以外の情報”を使う（形・位置・余白）
つまり、「どうすれば迷わせずに操作できるか」を考えてる。
→ UIを美しくするんじゃなく、“思考コストを減らす”ための仕組みを作ってる。
違い④：FigmaやXDを「触れる」だけじゃなく「読み取れる」
デザインツールを開いて、
- 余白設定が何pxか
- line-heightの比率が揃ってるか
- 色が意味に応じて使われてるか
…そういった 「ルール性」や「一貫性」を読める人は、コーディングで迷わない。
✅ コードに“設計の意図”が乗る人は、結果としてデザインが上手くなる。
違い⑤：「仕組み化」まで考える
「デザインができるエンジニア」は、1回の見た目じゃ終わらない。
- 「このルール、
tailwind.config.jsに切り出しとくか」 - 「このパターン、コンポーネントにして再利用しとくか」
- 「この間隔、変数で定義した方が良さそう」
→ これは完全に “デザインを設計として扱えるか” という話。
見た目を再現するだけで終わる人と、仕組みにまで昇華できる人。
これが圧倒的な違いを生む。
おわりに：デザイン力は“スキル”であって“才能”じゃない
何度も言いたい。
デザインができるエンジニアは、センスがあるんじゃない。
「見る→気づく→直す」を繰り返してきただけ。
見た目じゃなく、目的・構造・文脈・選択・再利用。
それが“デザインができる”ということの正体。
CSSの記事を書いてはいるが、あくまで技術的な観点でしか書いていない。
デザインをする意味をもう一度考えて、UI/UXを見直してみてほしい。
自己満足のデザインじゃなく、ユーザー視点のデザインができるようになれば立派なUI/UXデザイナー。