Adobe XD × Zeplin：ハンドオフの「儀式」を破壊し、開発速度を極限まで高めるエンジニアリング・ワークフロー
デザイナーがAdobe XDで描いた夢を、エンジニアが実装という現実へと落とし込む。この境界線で発生する「仕様の解釈違い」「アセットの取りこぼし」「無駄なCSS調整」……これらは現代の開発における最大のコスト要因だ。
私はこれまで多くの現場を見てきたが、「ハンドオフはデザインの終わりではなく、実装のスタート地点である」という共通認識がないチームは、例外なくスケールしない。
今日は、XDとZeplinを使い倒し、設計から実装への接続を「摩擦ゼロ」にするための、現場の血が通ったノウハウを伝授する。
—
1. デザイナーと交わすべき「3つの契約」
ツールを語る前に、まずはチームの合意形成を整える。これがなければ、どんな自動化も無駄になる。
1. Naming Convention（命名規則の同期）: XDのレイヤー名がそのままコンポーネント名になる。`Rectangle 1`のようなゴミを残すデザイナーには、「これはコンパイラにエラーを吐かせるのと同じだ」と伝えよ。
2. Component-Driven Design: XDのコンポーネントが、React/Vueのコンポーネントと1対1で対応しているか？ ここがズレると、Zeplinでのハンドオフがただの「絵の切り出し」になる。
3. Responsive Grid Contract: 画面幅のブレークポイント（例：375px, 768px, 1440px）を共通言語化せよ。XDのレスポンシブサイズ変更機能を活用し、Zeplin上で各画面の余白がパーセンテージや`calc()`で計算可能か確認する。
—
2. 実務で震える「神プラグイン」と「ショートカット」
XDで導入すべき必須プラグイン
- [Rename It]: レイヤー名のクリーンアップを自動化。プロジェクトの命名規則をプロジェクト開始時に定義し、これで一括変換する。
- [Zeplin for Adobe XD]: 言わずもがな。ここから「Export to Zeplin」する際の精度が、その後のCSS自動生成の質を決める。
現場で開発者が使うべき最強ショートカット（XD）
- `Ctrl + Shift + C` (Cmd + Shift + C): プロパティのコピー。スタイルを一気に移植する際に必須。
- `Alt + ドラッグ` (Option + ドラッグ): 距離計測。Zeplinに頼らずとも、エンジニアは常にこのショートカットで「余白の正解」を掴み取る感覚を研ぎ澄ませ。
—
3. Zeplinで「設計書」を自動生成するベストプラクティス
Zeplinをただの「色とサイズの確認ツール」として使っているなら、それは宝の持ち腐れだ。「Configファイル」の同期こそが真髄である。
プロジェクト設定の共有化ルール（Styleguide運用）
ZeplinのStyleguideに、デザインシステムの「シングルソース・オブ・トゥルース（SSoT）」を構築する。
- Colors/Text Styles: プロジェクト固有の変数名を定義（例: `Primary-500` → `color-brand-500`）。これにより、Zeplinから出力されるCSSが直感的な変数名に変わる。
- Assets: SVGは必ず「Exportable」設定にし、iOS/Android/Webそれぞれのフォーマットを自動生成させる。
実用的な設定ファイル構成例（Design Tokens）
Zeplinで定義したカラーやフォントを、コードベースにそのまま落とし込むためのJSON形式の定義例だ。これがあれば、デザイン修正時に「再コーディング」は不要になる。
// tokens.json : デザインシステムとコードをつなぐ架け橋
{
“colors”: {
“brand”: {
“primary”: { “value”: “#3B82F6”, “type”: “color” },
“secondary”: { “value”: “#10B981”, “type”: “color” }
}
},
“spacing”: {
“sm”: { “value”: “8px”, “type”: “spacing” },
“md”: { “value”: “16px”, “type”: “spacing” }
},
“typography”: {
“h1”: {
“fontSize”: “32px”,
“lineHeight”: “1.2”,
“fontWeight”: “700”
}
}
}
※これを Style Dictionary などのツールで各言語（Sass, TypeScript, Swift）に変換するパイプラインを組めば、デザイン変更が即座にコードに反映される。
—
4. チーム開発を加速させる「エンジニアへの引き継ぎ」チェックリスト
ハンドオフを行う際、デザイナーは以下の3点を必ず満たした状態でZeplinにプッシュすること。
1. 「クリック可能領域」の明示: ボタンのPadding（ヒットエリア）は十分か？ Zeplin上で確認できるか。
2. ステートの網羅: ホバー、アクティブ、ディセーブル状態がすべてデザインされているか。
3. エラーハンドリング: 入力値が不正な場合の「赤枠」や「エラーメッセージ」がコンポーネント化されているか。
—
最後に：ツールは「共通言語」である
エンジニア諸君。XDやZeplinを「デザイン確認ツール」と呼ぶのはやめよう。これらは、「デザイナーの脳内にある複雑なUIロジックを、コードへ翻訳するためのコンパイラ」だ。
デザイナーとエンジニアが、同じ命名規則、同じトークン、同じ思考プロセスを共有できたとき、初めてUI/UXはプロダクトの強力な武器になる。
さあ、今すぐZeplinのStyleguideを開け。そこにある変数が、君たちのタイピング回数を年間で数万回減らすはずだ。現場からは以上だ。