design-handoff

デザインの引き継ぎ

目次

• 概要
• 使用するタイミング
• クイックスタート
• リファレンスガイド
• ベストプラクティス

概要

デザインの引き継ぎは、デザインと開発をつなぎ、開発者がデザインを正確かつ効率的に実装するために必要な情報をすべて把握できるようにします。

使用するタイミング

• 開発開始前
• デザイン上の機能が完成したとき
• コンポーネントライブラリの更新時
• デザインシステムの変更時
• 反復的な改善内容を引き継ぐとき

クイックスタート

最小限の動作例：

Design Handoff Package:

Overview:
  - Feature description
  - User flows
  - Key interactions
  - Platform (web, iOS, Android)

Screens & Components:
  - All screen designs
  - Responsive variants (mobile, tablet, desktop)
  - All component states (default, hover, focus, disabled, error)
  - Dark mode variants (if applicable)

Specifications:
  - Typography (font, size, weight, line-height)
  - Spacing & layout (padding, margin, gaps)
  - Colors (hex values, opacity)
  - Shadows & elevations
  - Border radius
  - Animations & transitions

Interactions:
  - Click/tap behaviors
  - Hover states
// ... (see reference guides for full implementation)

リファレンスガイド

詳細な実装ガイドは references/ ディレクトリにあります：

ガイド	内容
開発者にわかりやすいドキュメント	開発者にわかりやすいドキュメント
引き継ぎチェックリスト	引き継ぎチェックリスト
デザインと開発の連携	デザインと開発の連携

ベストプラクティス

✅ 推奨事項

• 包括的なドキュメントを作成する
• すべてのアセットと仕様をエクスポートする
• すべてのコンポーネントの状態を文書化する
• レスポンシブ対応のバリエーションを含める
• デザインの決定理由を説明する
• 開発者にとって使いやすい仕様を提供する
• 共有のデザインツールを使用する
• キックオフミーティングを設定する
• 質問に対応できるようにしておく
• 実装をレビューし、改善を繰り返す

❌ 避けるべきこと

• 開発者が推測してくれると期待する
• レスポンシブデザインを成り行きに任せる
• エッジケースの文書化を省略する
• わかりにくい仕様を使う
• 引き継ぎ後に連絡が取れなくなる
• 通知せずに開発中のデザインを変更する
• ベクターファイルの代わりに画像を提供する
• 技術的な制約を無視する
• パフォーマンスに関する考慮事項を見落とす
• 引き継ぎ時にアクセシビリティへの配慮を省略する