デザインとエンジニアリングの境界デザインとエンジニアリングの境界

境界は「役割」ではなく「責務」

デザイナーとエンジニアという役割で線を引くと、UIの細部がどちらの担当か曖昧なまま残ります。実務では、体験の意図を誰が担保するかで切る方が衝突が減ります。

たとえば「ホバー時のフィードバック」は体験意図、実装手段はエンジニアリング側、という分担です。ピクセル値までデザインデータで固定しないことで、実装の余地が生まれます。

共通言語としてのトークン

Figma の変数とコードのトークンを対応させると、レビューが速くなります。色名や余白名が一致していると、「この余白は md で」だけで通じます。

const cardStyles = stylex.create({
  root: {
    padding: spacing.lg,
    borderColor: colors.border,
    borderWidth: "1px",
    borderStyle: "solid",
    borderRadius: radius.md,
  },
});

実務で効いたルール

1. 画面ごとに「非交渉点（アクセシビリティ、主要導線）」を1つだけ明文化する
2. コンポーネント単位で状態表を作り、実装前に境界ケースを潰す
3. 仕様変更は Issue ではなく、再現手順付きで共有する

まとめ

境界をなくす必要はありません。むしろ、受け渡しの形式を標準化することで、両者が同じ品質基準で速く回せます。ポートフォリオサイトでも、その思想をコードベースに反映しています。