塾長 尾上こんにちは！ぬるま湯デザイン塾の尾上です。
メモりすこんにちは！Webデザイナーのメモりすです。
クライアントから「PSDで納品してください」と言われたけれど、PSDが何なのか分からない…
Wordみたいに開けばいいのか、専用のソフトが要るのか見当がつかない…
「PSDで送ります」と言われて困る経験は、Webデザイナーだと一度は経験します。ただ、意味が分からないまま案件を進めると、納品のタイミングで慌てることになります。
この記事では、PSDファイルとは何か、Photoshopを持っていなくても開けるのか、Web制作の現場でどう使われているのかを、実務の流れに沿って解説します。
- PSDとは何か、何の略か
- Photoshopが無くても開けるかどうか
- 「PSD納品」と言われたときにすべきこと
- 独立初期に気をつけたいポイント
PSDファイルとは？（何の略か・仕組み）
メモりすPSDって聞いたことあるけど、普通の画像ファイルと何が違うの？
PSDとは、Adobe Photoshopの標準ファイル形式である「Photoshop Document」の略です。拡張子は.psdになります。
PSDとは
Adobe Photoshopのネイティブファイル形式（Photoshop Document）。拡張子は.psd。レイヤー構造を保ったまま保存できる画像ファイル形式。
JPGやPNGは「完成した1枚の画像」として書き出されたファイルです。それに対してPSDは、文字・写真・図形をレイヤーごとに分けたまま保存できる、作業中の設計図のようなものです。Adobe公式の説明でも、PSDは「コンテンツの複数のレイヤー、画像、オブジェクトを、多くの場合は高解像度で保存できる」形式だとされています。
クライアントが「PSDでください」と言うとき、単に画像そのものがほしいわけではないことが多いです。あとで自社の担当者が文字を差し替えたり、別のデザイナーが引き継いで更新したりする前提があるケースがほとんどです。ファイル形式ひとつの選び方が、納品後の運用方法まで左右します。
PSDは幅・高さとも最大30,000pxまで対応し、ファイルサイズは最大2ギガバイトまで扱えます。バナー1枚程度なら気にする場面は少ないですが、レイヤー数の多い大きなカンプでは容量が膨らみやすい点は覚えておきましょう。
Photoshopが無くてもPSDファイルは開ける？
塾長 尾上「見る」だけなら他ソフトでもいけますが、「直す」ならPhotoshopが必要ですね。
レイヤー構造を保ったまま編集できるのはPhotoshopだけです。ここは他のソフトに置き換えが効きません。
一方、「中身を見る」だけであれば選択肢があります。Adobe公式によると、PSDファイルはIllustratorやPremiereなど他のAdobe製品にも読み込めるほか、macOSのプレビューアプリでも開いて表示できます。ただし、いずれも表示用で、レイヤーを編集する用途には向きません。
| 比べるポイント | Photoshop | Illustrator・Premiere／macOSプレビュー |
|---|---|---|
| PSDを開ける | できる | できる（表示のみ） |
| レイヤーの編集 | できる | できない |
| 納品データの作成 | できる | できない |
ブラウザ上で動くPhotopeaのような無料ツールも存在します。インストールなしでPSDの中身を確認できるため、「とりあえず開いて中を見たい」という場面の選択肢にはなります。ただし、本格的な編集や納品データの作成は、結局Photoshopが前提になる場面がほとんどです。操作手順の紹介対象はPhotoshopのみです。
「見るだけ」と「直す」の間には、実務上はっきりした境界線があります。クライアントから来た指摘に沿って文字を差し替えたり、レイヤーの並びを調整したりする作業は、レイヤー情報を保持したまま書き込めるPhotoshopでないと成立しません。表示専用のツールで確認だけ済ませて安心してしまうと、いざ修正の段になって手が止まります。
クライアントから届いたPSDを開いてみると、使われているフォントが特定できないことも珍しくありません。その場合の調べ方は以下の記事にまとめています。
「PSD納品」とは？Web制作での使われ方
メモりす「PSDで納品して」って言われたら、レイヤーを残したまま渡してほしいってことなんだね！
「PSD納品」とは、完成データをレイヤー構造を保ったままPSD形式で渡すことです。JPGやPNGのような書き出し済みの画像は、あとから文字や色を直すのに向きません。PSDのまま渡せば、受け取った側が中身を開いて修正できる状態になります。
Web制作の現場でPSDが登場するのは、主に次の3つの場面です。
- サイト・LP・バナーのデザインカンプを、コーダー（実装担当）へ渡すとき
- クライアントから「あとで修正できる状態で欲しい」と言われたとき
- 逆に、クライアントから修正依頼としてPSDが送られてくるとき
LPのデザインをカンプとして作成し、実装をコーダーへ依頼する案件を考えてみましょう。書き出し済みの画像だけを手元に残していると、公開後にキャッチコピーの文言を1つ直したいだけでも、デザインを一から作り直す手間が発生します。レイヤーを保ったPSDを手元に残しておけば、文字だけの差し替えで済む範囲です。
案件を受ける段階で「納品形式はPSDでよいか、書き出し済みの画像でよいか」を先に確認しておくことが、後工程での手戻りを防ぐコツです。コーダーが実装するだけなら書き出し済みの画像で足りることもありますし、社内で更新を続けるクライアントなら編集できるPSDのほうが喜ばれることもあります。判断は「その先、誰が触るか」で決めるといいです。
レイヤー構造を崩さず渡すという考え方は、Photoshopの非破壊編集の仕組みとも関係しています。詳しい仕組みは以下の記事で解説しています。
独立初期のデザイナーがPSDで気をつけたいこと
塾長 尾上ファイル形式を「誰が・何のために使うか」で選べると、案件のやり取りが一気に楽になりますよ
PSDとは何かが分かったところで、実際にPSDを扱うときに独立初期のデザイナーが気をつけたいポイントを3つ挙げます。
- レイヤー構造を整理してから渡す
レイヤー名を分かりやすくしておく、不要なレイヤーは統合・削除しておく - Web用に書き出す視点を持つ
PSDのまま渡すだけでなく、用途に応じてJPG・PNG・SVGなどに書き出す判断も必要になる - ファイルサイズを意識する
レイヤーが増えるほど重くなりやすいので、やり取りの前に整理しておく
レイヤー名が「レイヤー1」「レイヤー1のコピー」のまま残っていると、受け取ったコーダーはどこを触ればよいか探すところから始めることになります。渡す前に数分整理しておくだけで、その後のやり取りはかなり変わります。
納品形式に迷ったときは、憶測で決めずにそのまま聞いてしまってかまいません。「納品はPSDでよいか、それとも書き出し済みの画像でよいか」と一言確認するだけで、あとからの手戻りはかなり減ります。
まとめ
PSD
Adobe Photoshopのネイティブ形式でレイヤー構造を保ったまま保存できるファイル
確実に開いて編集できるのはPhotoshopのみで、表示だけならIllustrator・Premiere・macOSのプレビューアプリも使えます。「PSD納品」は、レイヤーを残したまま完成データを渡すことを意味します。
PSDはWeb制作の実務で扱うファイル形式のひとつです。こうした小さな疑問をひとつずつ潰していくことが、案件対応の土台になります。学習の順番に迷っている方は、以下の記事も参考にしてください。
Webデザインの学び方に関する情報を受け取りたい方は、ぬるま湯デザイン塾のLINEにご登録ください。5日間チャレンジ（無料体験）も実施中です。
5日間チャレンジの内容や案内時期などの詳細については、LINEでご案内します。
＼ LINEのお友達登録はこちらから ／
参考にした情報源
- Adobe公式「PSDファイルとは」https://www.adobe.com/jp/creativecloud/file-types/image/raster/psd-file.html（PSDの定義・拡張子・レイヤー構造・開けるソフト・ファイルサイズ上限・互換性）
※2026年9月時点の情報です。仕様は変わることがあります。
塾長 尾上次のブログでもまたお会いしましょう！
メモりすバイバイ！またね！
