PSDでのHandoff手順
PSDファイル（Adobe Photoshopのネイティブファイル形式）でデザインカンプが提示された場合、FigmaやXDとは異なり、専用の開発者向けビューワーがないため、Handoffの方法が大きく変わってきます。
PSDの場合、コーダー（あなた）は基本的にPhotoshopのソフトウェアを操作するか、専用のツールを導入する必要があります。
ステップ1: PSDファイルでのHandoff手順
PSDファイルでコーディングに必要な情報を取得する方法は、大きく分けて以下の3つがあります。
1. Photoshopを直接利用する（伝統的な方法）
これが最も確実で、PSDファイルの内容をすべて把握できる方法です。
1-1 CSS情報の取得（手動とCSS生成機能）| 情報 | 取得方法 | 詳細 |
| カラーコード | スポイトツールで色を取得し、カラーパネルでHEX値を確認します。 | テキストやシェイプ（塗りつぶし）の色、境界線の色など。 |
| テキストスタイル | テキストツールでテキストレイヤーを選択し、文字パネルでフォント名、サイズ、太さ、行間などを確認します。 | |
| レイヤースタイル | レイヤーを右クリックし、「レイヤースタイルをコピー」を選択。 | 影（ドロップシャドウ）、グラデーション、境界線（ストローク）などのスタイルをCSS形式でクリップボードにコピーできます。 |
| サイズ/余白 | 長方形選択ツールや定規ツールを使って、要素のサイズや要素間の距離を手動で測定します。 | これはFigma/XDのようにAltキーを押すだけで自動計測できる機能がないため、手間がかかります。 |
1-2. 画像アセットの書き出し| アクション | 詳細 |
| スライスツール | 必要な画像部分（写真やボタンなど）を矩形に指定し、書き出し設定（PNG, JPGなど）をして書き出します。 |
| レイヤーの書き出し | 書き出したいレイヤー（例：ロゴ）を右クリックし、「書き出し」 > 「PNGとしてクイック書き出し」などの機能を使って個別に出力します。 |
| Web用に書き出し（レガシー） | 複数の画像を最適化しながら一括で書き出すための古い機能です。 |
2. Adobe Extract（抽出）を利用する（現在は非推奨）
かつてAdobeが提供していた、Photoshopファイルをアップロードしてブラウザでインスペクトできるサービスがありましたが、これは現在Creative Cloud Librariesなどに機能が統合されており、Figma/XDほどの使いやすさはありません。
3. 外部プラグイン・ツールを利用する（推奨）
| ツール例 | 詳細 |
| Zeplin (ゼプリン) | PSDファイルをアップロードすると、ブラウザ上で要素をクリックするだけでCSSコードの表示、余白の測定、アセットの一括ダウンロードが可能になります。 |
| Avocode (アボコード) | 同様にPSDなどのファイルを読み込み、開発者向けのインスペクト機能を提供します。 |
PSD Handoffの注意点
作業の煩雑さ: FigmaやXDに比べ、CSS情報の取得や余白の測定に手間と時間がかかります。特にレイアウトの計測は手動になるため、ミスが発生しやすいです。
ファイルサイズ: PSDファイルは非常に重くなることが多く、ファイルを開くのにも時間がかかります。
デザイナーとの連携: デザイナーには、レイヤーをグループ化し、分かりやすい名前をつけ、不要なレイヤーを削除するなど、コーダー向けの整理を徹底してもらう必要があります。
PSDファイルを受け取った場合、可能であればデザイナーにZeplinなどのツール経由でHandoffしてもらうか、Photoshopの「レイヤースタイルをコピー」機能を活用してCSS抽出の手間を削減することをお勧めします。