結論:PSD指定の案件は「目的確認→対応パターン決定→“編集できる範囲”の合意」で怖くなくなる
「PSD形式で納品してください」——クライアントからのこの一言に、ヒヤッとした経験はありませんか?
「Figmaで作ってしまった…」「変換ツールを使えばなんとかなる?」最近はFigmaが主流でも、制作現場では運用上の理由でPhotoshop(PSD)データが必要なケースがあります。ここで焦って変換に頼り、レイヤーが崩れたPSDを納品すると、修正対応が増えて赤字になったり、信用を落としたりしがちです。
前提として、Figmaの標準的な書き出し形式はPNG/JPG/SVG/PDFで、PSDの直接書き出しは一般に案内されていません。だからこそ、「正しい手順で“組み直す”」「そもそもPSDが必要な理由を確認して交渉する」のが、最も事故が少ない王道ルートです。
- ①Photoshopで制作してPSD納品:要件に直球で最短
- ②Figmaで設計→Photoshopで組み直してPSD化:Figmaメインでも対応しやすい
- ③PSD指定の理由を確認して納品形式を交渉:実はPSDが不要なケースもある
この記事では、PhotoshopとFigmaの使い分け、PSD指定の背景、そしてPSD納品で失敗しない実務フローを手順書としてまとめます。
PhotoshopとFigmaの使い分け:得意領域を先に分ける
「どっちが上」ではなく、成果物に合わせて役割分担するのが最も現実的です。
- Figmaが得意:UI/LPのレイアウト設計、コンポーネント管理、共同編集、レビュー、プロトタイプ、開発連携
- Photoshopが得意:写真補正・合成、質感作り、画像中心のKV/バナー制作、PSDレイヤーでの納品運用
現場視点で重要なのは「クライアント側の編集環境」です。先方がPhotoshop前提で運用(社内テンプレ・過去資産・制作フローがPSD)なら、PSD指定は“嫌がらせ”ではなく、編集・再利用の都合で起きています。
なぜPSD指定が来るのか:クライアント側の事情5つ
PSD指定の理由が分かると、対応が一気にラクになります。よくあるのは次の5つです。
- 社内の編集担当がPhotoshopしか使えない:文字差し替え・画像差し替えをPSDで回している
- 広告運用でサイズ違いを量産する:レイヤー構造を残したまま展開したい
- 別の制作者へ引き継ぐ:印刷会社・制作会社・レタッチャーがPSD前提
- 過去資産がPSDテンプレで揃っている:新規もPSDに統一したい
- 慣習としてPSDと言っている:実はPNGで足りるのに、とりあえずPSDと言っている
ここでのポイントは、PSD指定=必ずしも「Photoshopでゼロから作れ」という意味ではないこと。多くの場合、先方が欲しいのは“編集できる状態”です。だからこそ、最初に目的を聞くと、納品形式の最適化(交渉)や、PSDの作り方(編集対象の絞り込み)ができます。
対応方針は3択:あなたの状況で決める
①Photoshopで制作してPSD納品(王道・最短)
バナーやKVなど画像中心で、PSDが必要な理由が明確な案件は、最初からPhotoshopで作るのが安全です。変換や組み直しが不要で、納品要件にそのまま合います。
②Figmaで設計→Photoshopで“組み直し”してPSD化(Figma派の現実解)
LPやUI設計はFigmaで進め、納品要件としてPSDが必要な範囲だけPhotoshopで再構築します。重要なのは「変換」ではなく組み直しです。完全自動の変換前提だと、テキストやマスク、エフェクト、レイヤー構造が崩れやすく、編集性を満たせないことが多いからです。
③PSD指定の理由を確認して、納品形式を交渉(実は一番コスパがいい)
「PSD必須」に見えても、実態は「最終画像(PNG/JPG)+編集指示書」で足りるケースがあります。“PSDでないと困る工程”がどこかを聞いて、納品をすり合わせるのが合理的です。
案件開始前に確認する:PSD納品の要件チェックリスト
PSD指定で事故るのは、制作が始まってから「それもPSDで」「それも編集可能で」と条件が増えるときです。開始前にこれだけ確認すると、トラブルが激減します。
- PSDは何に使われますか?(社内編集/広告差し替え/引き継ぎなど)
- 編集対象はどこですか?(テキストだけ?画像も?色も?全部?)
- レイヤー要件はありますか?(レイヤー名、グループ分け、不要レイヤー削除の有無)
- サイズ・解像度・カラーモード(WebならRGBが基本、印刷は別途確認)
- フォント指定・フォント共有(先方が同じフォントを持っているか)
- 納品物のセット(PSD+書き出しPNG/JPGも必要?)
- 修正の流れ(PSDで先方が直す?あなたが直す?)
この時点で「PSDは欲しいけど、編集はテキスト差し替えだけ」と分かれば、PSDの作り方が一気に簡単になります。
FigmaからPSDへ変換・書き出しする際の注意点(プラグインは完璧ではない)
「Figma PSD 変換」「Figma Photoshop 書き出し」で検索すると、変換プラグインや外部サービス、オンライン編集ツール(例:Photopeaなど)が見つかります。こうした手段自体は存在しますが、初心者が“そのまま納品”に使うのは要注意です。
- テキストが行ごとに分割される:あとで編集しづらい
- マスクや効果が崩れる:見た目が微妙に変わる
- レイヤー構造が荒れる:クライアントが触れないPSDになる
- フォントが置き換わる:先方環境で再現できない
結局、納品で求められるのは「変換できたか」ではなく相手が編集できるかです。だから、記事全体のスタンスは変えず、確実に通る“組み直し”を王道として扱います(変換系は「検証が必要な補助」として位置づけるのが安全です)。
【手順】Figma→PDF/SVG書き出し→Photoshopで組み直してPSD納品する
ここが一番実務で使う部分です。ポイントは、Figmaで作ったものを「そのままPSD化」ではなく、PSD納品に必要な“編集可能性”を満たすように組み直すことです。
ステップ1:Figma側で「PSDにしやすい設計」に整える
- レイヤー名を整理:button_primary / text_h1 など意味が分かる命名に
- テキストスタイルを統一:後でPSDでも階層が追えるようにする
- エフェクトを使いすぎない:複雑な影・ブラーは再現がズレやすい
- “編集対象”を決める:どこを編集可能に残し、どこを画像固定にするか決める
ステップ2:Figmaから必要素材をエクスポートする(PNG/SVG/PDF)
- 写真・背景・装飾:PNGで書き出す(透過が必要ならPNG優先)
- アイコン・図形:SVGで書き出す(可能ならベクターとして扱える)
- 全体の見本:PDF(またはPNG)で書き出し、完成見本にする(照合用)
この“見本データ”があるだけで、Photoshop側の組み直しの精度が上がり、納品前のズレ確認が一気にラクになります。
ステップ3:PhotoshopでPSDを作り、レイヤー構造を先に設計する
Photoshop側では「あとで誰が編集するか」を前提に、レイヤー構造を先に決めます。
- グループ分け:背景 / 写真 / テキスト / CTA などでフォルダ分け
- 編集するものはレイヤーで残す:特にテキストはテキストレイヤーのまま
- 固定要素は統合してOK:装飾など編集しない要素は軽くする
ステップ4:素材を配置し、差し替え前提はSmart Object(スマートオブジェクト)で管理する
差し替えが想定される画像(商品画像、人物写真、背景など)は、Smart Object(スマートオブジェクト)で管理すると運用が楽になります。
- 差し替え前提の画像:スマートオブジェクト化(更新・差し替えの手間を減らす)
- ボタンや図形:可能ならシェイプレイヤーで作る(色変更しやすい)
- テキスト:ラスタライズしない(編集できなくなる)
ステップ5:Figmaの見本と“ピクセル単位で照合”する
組み直し方式の落とし穴は「見た目が微妙に違う」ことです。納品前に、Figma見本(PDF/PNG)とPSDの書き出しを並べて確認します。
- 行間・字間・フォントウェイトのズレ
- 影の広がり・透明度
- 余白(左右上下)
- アンチエイリアスによる印象差
ステップ6:納品セットを作る(PSD+書き出し画像+使い方メモ)
実務では「PSDだけ」より、次のセットにすると親切でトラブルが減ります。
- PSD本体:レイヤー整理済み(不要レイヤー削除、命名)
- 書き出しPNG/JPG:実際に使う最終画像
- メモ(1枚でOK):編集して良いレイヤー、フォント、画像差し替え箇所
互換性で詰まりやすいポイント:PSD指定の“怖いところ”を先に潰す
PSD納品で揉めやすいのは、技術よりも「編集可能だと思っていたのに違った」という期待値のズレです。先に潰しておきます。
- フォント問題:先方が同じフォントを持っていないと表示が変わる(代替フォントになる)
- エフェクトの差:Figmaの影・ぼかしをPhotoshopで同じ見た目にするには調整が必要
- ベクターとラスター:図形が画像化されると後編集がしにくい
- “完全互換”は前提にしない:変換は便利でも、常に同じ結果になるとは限らない
だからこそ、納品前に「編集対象はここまで」「ここから先は画像固定」という線引きを作り、クライアントと合意するのが安全です。
よくある失敗5選と回避策
失敗1:PSD指定の理由を聞かずに作り始める
回避策:「PSDで何を編集したいか」を確認。テキスト差し替えだけなら、構造も工数も大きく下げられます。
失敗2:全部を編集可能にしようとしてレイヤー地獄になる
回避策:「編集対象だけ編集可能、残りは固定」が基本。編集対象一覧をメモで渡すと揉めません。
失敗3:テキストを画像化(ラスタライズ)してしまう
回避策:テキストはテキストレイヤーのまま保持。どうしても崩れる場合は、先方と「フォント共有」「編集方法」を相談して決めます。
失敗4:レイヤー名が「Layer 1」「Group 2」のまま
回避策:最低限「bg / photo / text / cta」レベルで命名。納品品質は“整理”で評価されます。
失敗5:納品後に「このフォントないんだけど」と言われる
回避策:フォント指定と共有可否を事前確認。共有できないなら代替フォントでの運用に合意する、または「編集対象を限定」するなど方針を決めます。
Photoshopがない/まだ自信がないときの対処(無理に背負わない)
副業初心者が無理をして「PSDを完璧にやります」と言うと、納期直前に詰まりやすいです。落としどころは次の3つです。
- 交渉する:「Figmaリンク+PNG書き出し」で足りるか確認(PSDが本当に必要か聞く)
- PSD範囲を限定する:「テキスト差し替え可能なPSDのみ」など編集対象を絞る
- 外注/協業する:PSD整備だけ得意な人に部分依頼して品質を担保する
また、PSD指定の案件を継続的に受けるなら、Photoshopを使える環境を用意しておくと対応範囲が広がります。例えばAdobeのCreative CloudフォトプランにはPhotoshopが含まれます(価格やプランは変更されることがあるため、契約前に公式ページで必ず確認してください)。
まとめ:チェックリストと次にやること
PSD指定の案件は、「先方の目的を聞いて、編集可能性の範囲を握る」ことで安全に回せます。Figmaメインなら、Figmaで設計→素材を書き出し→Photoshopで組み直してPSD化が最も確実です。変換プラグインや外部ツールは、便利でも“編集性”が崩れることがあるため、納品で使うなら必ず検証し、基本は王道の組み直しを軸にしましょう。
PSD指定案件用:開始前チェックリスト(要件ヒアリング)
- PSDが必要な理由(用途)を確認した
- 編集対象(テキスト/画像/色/全部)を確認した
- フォント共有の可否を確認した
- レイヤー命名・グループ分けのルールを決めた
- 「編集可能にする範囲」と「固定する範囲」を合意した
- 納品セット(PSD+書き出し画像+メモ)を用意する方針にした
【付録】PSD納品前のセルフチェックリスト(コピペで使える)
- レイヤー名が整理されている(Layer 1のままが残っていない)
- グループが分かれている(bg / photo / text / cta など)
- 編集対象のテキストがテキストレイヤーのまま残っている(ラスタライズしていない)
- 差し替え前提の画像がスマートオブジェクト化されている(必要な場合)
- 不要なガイド・下書き・使っていないレイヤーを削除した
- 色設定(RGB/CMYK)とサイズ(px)を要件どおりにした
- 書き出しPNG/JPGがPSDと同じ見た目になっている(見本と照合した)
- 「編集して良い箇所」メモ(テキスト差し替え箇所、フォント名など)を用意した
次にやること(3ステップ)
- ステップ1:案件テンプレに「PSDの用途・編集対象・フォント共有」の確認項目を追加する
- ステップ2:小さなバナー案件で一度「Figma→書き出し→Photoshop組み直し→PSD納品」を練習し、手順を固定化する
- ステップ3:交渉用の定型文(PSDが必要な理由の質問、納品形式の代替案)を作って毎回使える状態にする
参考リンク(公式)

