はじめに
「実装を意識したデザインを」とはよく言うけれど、
実際にエンジニアと仕事をしてみると「伝わらない」「意図と違う」「ズレる」など、すれ違いは多いもの。 この記事では、HTML/CSSやVueでの実装も行うUIデザイナーが、フロントエンド実装者と円滑に連携するために気をつけているポイントを7つ紹介します。
1. コンポーネント単位で考えてデザインする
- Header, Button, Card などの再利用前提でパーツを設計
- 状態（Hover/Disabled/Active）も一緒に揃える
- Figmaでは
Variantsで表現しておく。
2. 命名規則はCSSでそのまま使えるように意識する
btn-primary,form-control,card--highlightのようにBEMやutility設計も見据えて命名- CSSクラス名に変換しやすい命名は実装者が喜ぶ！
3. スペーシングはルール化してブレを減らす
8の倍数で統一（8px, 16px, 24px…）- FigmaのSpacing TokenやGrid使用で可視化
- 実装時の
padding,gapを考えた設計ができる
4. フォント・カラー・角丸などを変数ベースで統一
- Design Token的に
color.primary,font.body,radius.baseを設計 - Figma Tokens + SCSS変数で実装までリンク可能
5. レスポンシブ対応を想定したレイアウトにする
- Auto Layoutでスマホ〜PCの可変を想定しておく
- 「画面幅が狭くなったらどうなるか？」をデザイナー側から先出ししておく
- EmptyStateなども考えておく
6. 実装者に渡す前に「意図」を明文化する
- コンポーネント単位で 実装ポイントを記述（Figma注釈）
- 例：「ここの幅は固定です」「テキスト量で高さ可変です」など
- コミュニケーションの齟齬を最小限に
7. 修正しやすいファイル構成・管理を意識する
- コンポーネント単位でFigmaファイルを整理
- 「一部だけ修正」がしやすい構成
- 共有リンクや命名もシンプルに
- スタイルガイド、デザインシステムの作成
- デザインが属人化しないように注意する
まとめ
フロント実装をする人にとって「実装しやすいデザイン」は、見た目だけでなく「構造や再現性」に配慮されたものと考えます。
- パーツ単位で考える
- 命名や余白はルール化
- 実装の流れや制約を知っておく
デザインが、プロダクト全体の質を支える存在になるように。
