デザインとコードのハンドオフ

デザインとコードのハンドオフ

はじめに

デザインと開発のハンドオフ（引き渡し）は、プロダクト開発で最も摩擦が生じやすいポイントです。デザイナーの意図がエンジニアに正確に伝わらず、実装がデザインと異なってしまう問題は、多くのチームが経験しています。この章では、摩擦を最小化するハンドオフの仕組みを学びます。

ハンドオフの課題

従来のハンドオフで起きがちな問題を理解しましょう。

• ◆ピクセルパーフェクト問題: 「デザイン通りに実装してほしい」が「1px単位で合わせる」と解釈され、不毛な調整が発生
• ◆状態の見落とし: エラー状態、ローディング状態、空状態などがデザインに含まれていない
• ◆レスポンシブの曖昧さ: モバイルとデスクトップだけデザインがあり、中間サイズの挙動が不明確
• ◆インタラクションの不明: ホバー、フォーカス、アニメーションの仕様がドキュメント化されていない

Figma Dev Modeの活用

Figmaの開発者向け機能を最大限に活用しましょう。

• ◆Inspect: 要素のサイズ、色、フォント、余白などのCSS値をワンクリックで確認
• ◆コードスニペット: CSS、iOS（SwiftUI）、Android（Compose）のコードを自動生成
• ◆Compare: デザインの変更箇所をバージョン間で比較。何が変わったかを即座に把握
• ◆Readyマーク: デザインが実装可能な状態になったらReady for devフラグを付与

コンポーネント1対1マッピング

Figmaコンポーネントとコードコンポーネントを1対1で対応させます。

• ◆命名統一: FigmaのButton/Primaryはコードの<Button variant="primary">と同じ命名にする
• ◆プロパティ統一: Figmaのバリアント名とコードのProp名を完全に一致させる
• ◆ドキュメント連携: FigmaコンポーネントからStorybookのURLへリンクを貼る
• ◆変更通知: Figmaでコンポーネントが更新されたら、開発チームに自動通知する仕組みを作る

仕様書としてのデザインファイル

デザインファイル自体を仕様書として機能させる方法を学びます。

• ◆ページ構成: カバー/デザイン/フロー/状態一覧/レスポンシブ/アニメーション仕様の6ページ構成
• ◆状態マトリクス: 各コンポーネントの全状態（空/1件/多数/エラー/ローディング）を一覧化
• ◆フロー図: 画面遷移とユーザーフローをFigJamまたはFigmaのPrototype機能で表現
• ◆注釈: デザインの意図や判断理由をコメントとして残す。「なぜこのサイズか」が重要

スタイルガイドの自動生成

デザインシステムの仕様ドキュメントを効率的に維持します。

• ◆Storybook: Reactコンポーネントのカタログ。全バリアントを視覚的に一覧表示
• ◆Chromatic: Storybookのビジュアルリグレッションテスト。UIの意図しない変更を検出
• ◆zeroheight: Figmaと連携したデザインシステムドキュメントツール。常に最新のデザインを反映
• ◆Notion/Confluence連携: 社内Wikiにデザインガイドラインを統合し、チーム全員がアクセス可能に

🏋️実践ワーク

以下の課題に取り組みましょう。

• ◆Figma Dev Modeで自分のデザインファイルを開き、コードスニペットを確認してみましょう
• ◆1つの画面について、全状態（通常/空/エラー/ローディング）のデザインを作成してみましょう
• ◆Figmaコンポーネントとコードコンポーネントの命名対応表を作成してみましょう

📝まとめ

デザインとコードのハンドオフは、Dev Mode活用、コンポーネントの1対1マッピング、仕様書としてのデザインファイル整備によって大幅に改善できます。目指すべきはハンドオフの「自動化」であり、人間の伝達に依存しない仕組みの構築です。次の章では、アクセシビリティの設計と実装を学びます。