PhotoshopでJPGを書き出す方法は「別名で保存」「書き出し形式」「クイック書き出し」の3種類で、画質スライダーは60〜80%が実務の標準です。Adobe公式ヘルプでも3系統それぞれの用途が明示されており、この記事では方法の選び方から画質設定・一括書き出しまで実務に即した手順を解説します。
▶ 3日で初案件PR
この記事でわかること
この記事を読むと、3つの書き出し方法をワンアクションで選べるようになります。画質60〜80%の根拠と用途別の数値基準が明確になり、書き出し設定をアクションに登録して毎週の作業時間を43時間削減する仕組みを手に入れられます。
今のデザインの仕事で、一番近い悩みは？
この記事の結論
PhotoshopのJPG書き出しは「1枚だけ保存するなら別名で保存、細かい設定が必要なら書き出し形式、繰り返し作業を減らしたいならクイック書き出し」の3択で使い分けるのが最短ルートです。画質スライダーは60〜80%に設定すれば、ファイルサイズを抑えつつ納品に耐える品質を確保できます。フリーランス案件では書き出し設定をあらかじめ統一しておくことで、毎回の迷いをゼロにできます。
今日やるべき1つ
今すぐ「ファイル」メニューから「書き出し形式」を開き、JPGの画質スライダーを70%に設定してテスト書き出しを実行してください（所要時間：3分）。
状況別ショートカット
| 状況 | 読むべきセクション | 所要時間 |
| 1枚だけJPGで保存したい | Photoshop JPG書き出しは3方法で使い分け | 3分 |
| 画質とファイルサイズを両立したい | JPG画質は60〜80%が実務の標準 | 3分 |
| 自分の用途に合う方法を診断したい | Photoshop JPG書き出し方法を3分で診断 | 3分 |
| 複数レイヤーをまとめて出力したい | Photoshop JPG一括書き出しは2方法で解決 | 5分 |
| 透過背景をJPGにする処理を知りたい | Photoshop透過JPG書き出しは背景処理で解決 | 3分 |
| 書き出しを仕組み化して時短したい | Photoshop JPG書き出しは5つの仕組みで効率化 | 5分 |
Photoshop JPG書き出しは3方法で使い分け
別名で保存はCMYK対応の唯一の選択肢
「ファイル」→「別名で保存」→「形式：JPEG」と選択するのが最も基本的な手順です。保存ダイアログでJPEGを選ぶと品質設定（0〜12の13段階、または低・中・高・最高の4択）が表示されます。
CMYK・RGB・グレースケールのすべての色空間に対応しているのが、この方法の最大の特徴です（Photoshopでのグラフィック形式でのファイルの保存）。印刷物と並行して制作しているケースでは、CMYKカラーモードのままJPEG保存できる唯一の手段となります。色空間を問わず確実に保存したい場面で選ぶのが正解です。
書き出し形式はWeb用の設定が最も細かく行える
「ファイル」→「書き出し」→「書き出し形式」と進むと、ファイル形式・画質・カラースペース・解像度・メタデータ・カンバスサイズを1画面で確認しながら設定できます。プレビューが同時に表示されるため、書き出し後の見た目を事前に確認できる点が他の方法にない強みです（書き出し設定と書き出し場所の環境設定）。
Web納品でファイルサイズを詰めたい場面、初めて扱うクライアント案件で品質を慎重に確認したい場面に向いています。画像圧縮で画質を落とさない方法と組み合わせることで、さらに最適なファイルサイズを実現できます。
設定確認の手間はかかりますが、その分だけ意図どおりの出力が得やすい方法です。
クイック書き出しは繰り返し書き出しを最速化する
「ファイル」→「書き出し」→「クイック書き出し」を選ぶと、あらかじめ設定した形式で一発書き出しができます。形式は「ファイル」→「書き出し」→「クイック書き出し形式の設定」から変更でき、JPGの場合は品質スライダーもここで固定できます（クイック書き出しオプションを使用して作品を書き出す）。
同じ設定で何度も書き出す案件では、初回にクイック書き出し形式を設定しておくことで2回目以降はメニュー操作1ステップで完了します。毎回ダイアログを開く手間が省けるため、修正対応が多い案件ほど効果が大きくなります。
3方法の使い分けは目的で即決できる
3つの方法を選ぶ基準は次のように整理できます。CMYKの印刷データを兼用するなら「別名で保存」、Web用に品質を細かく確認しながら書き出すなら「書き出し形式」、同一設定で繰り返し書き出すなら「クイック書き出し」です。
| 方法 | 主な用途 | CMYKサポート | プレビュー | 向いているケース |
| 別名で保存 | 汎用保存 | あり | なし | 印刷兼用・確実な保存が必要なとき |
| 書き出し形式 | Web向け精密設定 | なし | あり | 品質確認しながら丁寧に書き出すとき |
| クイック書き出し | 繰り返し書き出し | なし | なし | 同じ設定で何度も書き出すとき |
CHECK
▶ 今すぐやること: 「ファイル」→「書き出し」→「書き出し形式」を開き、JPGを選択して現在のファイルを書き出してみる（3分）
Q: 「別名で保存」と「書き出し形式」はどちらがWeb用に向いていますか？
A： Web用ならファイルサイズのプレビューや解像度設定が一画面で確認できる「書き出し形式」が向いています。「別名で保存」はCMYKのような特殊な色空間が必要なときに選びます。
Q： クイック書き出しのデフォルト形式はPNGですが、JPGに変えられますか？
A： 変えられます。「ファイル」→「書き出し」→「クイック書き出し形式の設定」から形式をJPGに変更し、品質スライダーを設定してください。
JPG画質は60〜80%が実務の標準
品質スライダー1〜100%の意味を理解する
書き出し形式でのJPG品質スライダーは1〜100%の範囲で、値が高いほど元のデータに近い画質を保ちますが、ファイルサイズも増加します。JPEGは「選択的にデータを破棄する圧縮形式」であり、一度保存すると元に戻せない不可逆圧縮（非可逆圧縮）が行われます（Photoshopでのグラフィック形式でのファイルの保存）。
この不可逆圧縮という特性がポイントです。何度も上書き保存するたびに画質が劣化するため、編集中はPSD形式で保管し、納品時のみJPGに書き出す運用が基本となります。「JPGでの保存は最終工程の1回限り」という意識が長期的な品質維持に直結します。
60〜80%が最も費用対効果の高いゾーン
品質設定の目安は用途別に次のように整理できます。80〜100%はほぼ劣化なしですがファイルが重くなります。60〜79%は人間の目では劣化をほとんど感知できない範囲で、ファイルサイズを大幅に圧縮できる領域です。50%以下になると圧縮ノイズが視認されやすくなり、写真系コンテンツでは商用利用に耐えない場合が出てきます。
Web納品の標準として70%前後を選んでいるフリーランスが多い理由は、この「視認劣化なし×サイズ削減」のバランスが最も取れているからです。初回納品は70%で書き出してクライアントに確認を取り、問題なければ以降もその設定を踏襲する流れが実務では確実です。
別名で保存の品質スケール（0〜12段階）との換算
「別名で保存」の品質設定は0〜12の整数で設定します。12が最高品質でスライダー100%相当、8〜10が60〜80%相当の実用ゾーン、5以下は用途が限られます。
| 別名で保存（0〜12） | 書き出し形式（1〜100%） | 相当品質 | 向いているケース |
| 12 | 95〜100% | 最高 | 印刷・原稿保管 |
| 8〜10 | 60〜80% | 実用 | Web納品・プレビュー提出 |
| 5〜7 | 35〜55% | 低品質 | サムネイル・下書き確認 |
| 0〜4 | 1〜30% | 最低 | 特殊用途のみ |
解像度と画質の組み合わせが最終サイズを決める
JPGのファイルサイズは品質スライダーだけでなく、解像度（ppi）とキャンバスサイズ（ピクセル数）の組み合わせで決まります。Web用なら72ppiで書き出す、印刷用でも配信するPDFのプレビュー用途なら150ppiに落とすなど、解像度を先に決めてから品質スライダーを調整する順序が実務では正確な判断につながります。
CHECK
▶ 今すぐやること: テストファイルで品質70%・75%・80%の3パターンで書き出し、ファイルサイズと目視の差異を比較する（5分）
Q: 画質を上げるほどJPGは鮮明になりますか？
A： 80%を超えたあたりから人間の目では差がほぼわからなくなります。90%以上はファイルサイズが大幅に増えるため、Web納品では80%以下を上限として使うのが一般的です。
Q： 同じJPGファイルを再保存すると画質は劣化しますか？
A： 劣化します。JPEGは非可逆圧縮形式のため、上書き保存のたびに画質が落ちます。編集中はPSD形式で保存し、最終書き出しのときだけJPGにする運用が正しい使い方です。
Photoshop JPG書き出し方法を3分で診断
Q1: 書き出すファイルはCMYKカラーモードで作成されていますか？
YesならResult Aへ。NoならQ2へ。
Q2: 複数のレイヤーまたはアートボードをまとめてJPGに書き出したいですか？
YesならQ3へ。Noでレイヤーが1枚（または統合済み）ならResult Bへ。
Q3: 同じ設定で今後も繰り返し書き出す予定がありますか？
YesならResult Cへ。NoならResult Dへ。
Result A: 「別名で保存」を選択してください。
CMYKカラーモードに対応しているのはこの方法だけです。「ファイル」→「別名で保存」→形式でJPEGを選び、品質8〜10（60〜80%相当）を目安に設定してください。
Result B: 「書き出し形式」を選択してください。
プレビューを確認しながら品質・解像度・サイズを1画面で設定できます。初めての案件や品質確認が重要な案件に最適です。品質スライダーは70%から試してください。
Result C: 「クイック書き出し」を選択してください。
初回に「クイック書き出し形式の設定」でJPG・品質70%を設定すれば、2回目以降はメニュー1操作で書き出し完了です。修正対応が多い案件に特に有効です。
Result D: 「書き出し形式」または「アートボードからファイル」を選択してください。
複数を一度だけ書き出すなら「書き出し形式」（複数アートボード選択時）、またはレイヤー名を命名した「画像アセット」機能が使えます。次のセクションで詳しく解説します。
CHECK
▶ 今すぐやること: 上記の診断を実行し、自分の用途に該当するResultの手順を試してみる（3分）
Q: 「書き出し形式」でJPGとJPEGはどちらを選べばいいですか？
A： どちらを選んでも同じファイルが出力されます。JPGとJPEGは表記が異なるだけで同一の形式です。Photoshopの書き出し形式メニューでは「JPEG」と表示されています。
Q： クイック書き出しで保存先を毎回変えたい場合はどうしますか？
A： 「ファイル」→「書き出し」→「クイック書き出し形式の設定」→書き出し場所で「書き出すたびに場所を指定」を選択してください。これで毎回保存先ダイアログが表示されます（書き出し設定と書き出し場所の環境設定）。
Photoshop JPG一括書き出しは2方法で解決
アートボードからファイルはアートボード単位の一括書き出し
「ファイル」→「書き出し」→「アートボードからファイル」を選ぶと、Photoshopドキュメント内のすべてのアートボードを個別のJPGファイルとして一括書き出しできます。各ファイル名にはアートボード名が自動的に使われます。
このとき命名規則を事前に統一しておくことが実務では重要です。たとえば「product_top」「product_detail」「product_sp_top」のように接頭辞＋内容＋デバイス種別を組み合わせたルールにしておくと、書き出し後のファイル整理が不要になります。
画像アセットはレイヤー名を変えるだけで自動書き出し
「ファイル」→「生成」→「画像アセット」をオンにすると、レイヤー名に「layer-name.jpg」のような拡張子付きの名前をつけるだけで、変更のたびにJPGが自動的に書き出されます（Photoshop CCの基本：Web用画像を書き出す4つの方法をマスター）。
複数素材をまとめて書き出す方法として書き出し形式・画像アセット・アートボードからファイルを比較したWebデザイナーは「用途によって使い分けることで書き出し後のリネーム作業がゼロになった」と語っています（複数素材データの一括書き出し体験談）。
画像アセットは修正を加えながらリアルタイムで確認ファイルを出し続けたい場面に向いています。一方で、レイヤー構成が複雑なファイルではレイヤー名の管理に注意が必要です。グループレイヤーに命名した場合は、グループ内のレイヤーがすべて統合された1枚のJPGとして書き出されます。
一括書き出し2方法の使い分け基準
アートボードを使った多ページ構成のデザイン（Webページ複数画面・バナー複数サイズ等）には「アートボードからファイル」が適しています。パーツ単位でアセットを書き出しながら開発側と並行作業するケースでは「画像アセット」が有効です。画像トリミング無料サイトのように用途に応じたツール選びと同じ考え方で、書き出し方法も目的で使い分けることが効率化の鍵です。
| 方法 | 基本操作 | 向いているケース |
| アートボードからファイル | ファイル→書き出し→アートボードからファイル | 複数ページ・複数バナーを一括書き出し |
| 画像アセット | レイヤー名に拡張子を付けてオンにするだけ | パーツ単位の自動書き出し・開発連携 |
CHECK
▶ 今すぐやること: 複数レイヤーがある場合は「生成」→「画像アセット」をオンにし、1つのレイヤー名に「test.jpg」と付けて自動書き出しを試す（5分）
Q: 「アートボードからファイル」ではJPGとPNGを混在させられますか？
A： 現在のバージョンでは形式を一括で統一する設定が基本です。ファイル形式を混在させたい場合はレイヤー名を使った画像アセット機能を使い、拡張子をレイヤーごとに設定する方が柔軟に対応できます。
Q： 画像アセット機能でJPGの品質はどこで設定しますか？
A： レイヤー名に「layername.jpg60%」のように品質数値を付けると、品質を指定して書き出せます。品質を省略した場合はデフォルト値（通常90%相当）が適用されます。
Photoshopを仕事で使えるようになりたい方へ
Photoshopの全工程の解説動画をLINEで受け取る
LINEで無料で届くもの
- 全工程Photoshopの解説動画
- 20本Webデザインの無料レッスン
- 4本限定のPDF・動画
登録1分・情報収集だけでもOK・セミナー参加は自由
タップするとLINEの友だち追加画面が開きます
スマホのカメラで読み取ると
LINEの友だち追加が開きます
LINE登録のよくある質問
- お金はかかりますか？
- LINEの登録と、届くレッスン・動画・PDFは無料です。
- どんな連絡が来ますか？
- レッスンや動画のほか、無料セミナーの案内が届きます。参加するかは自由です。
- やめたいときは？
- LINEでブロックすれば、それ以上は届きません。
PR提供: 日本デザインスクール（デザスク）
Photoshop透過JPG書き出しは背景処理で解決
透過部分は白またはマットカラーに変換される
透過レイヤーを含むPhotoshopファイルをJPGで書き出すと、透過部分は「白」に自動変換されるのが基本動作です。ただし、「別名で保存」でJPEGを選んだ場合はマットカラーの設定が表示され、透過部分を任意の色に置き換えることができます。
これを活用すると、たとえばWebページの背景色が#f5f5f5（薄いグレー）の場合はマットカラーを同色に設定してJPG書き出しするだけで、見た目上の透過を自然に再現できます。透過が必要なロゴやアイコンはPNGを選ぶのが正解ですが、背景色が固定されているWebページ上に配置する用途ではこのマットカラー手法でJPGを使うことも実務では行われています。
透過が必要ならPNGを選ぶのが唯一の正解
WebやSNSの用途で透過背景を維持したまま画像を配布・掲載する場合は、JPGではなくPNGを選んでください。PNGはJPGと異なり透過情報（アルファチャンネル）を保持できます。ファイルサイズはJPGより大きくなりますが、透過が崩れるリスクはゼロです。
| 用途 | 推奨形式 | 理由 |
| Web写真・バナー背景 | JPG（品質70〜80%） | ファイルが軽く表示速度が速い |
| ロゴ・アイコン・切り抜き素材 | PNG | 透過情報を保持できる |
| 背景色固定のWebページ上のロゴ | JPGまたはPNG | マットカラー設定でJPGも選択肢に |
| アニメーション | GIF / WebP | 静止画JPGは非対応 |
書き出し前に色空間とメタデータを確認する
Web納品前の確認項目として、色空間がsRGBになっているかどうかも重要です。AdobeRGBやProPhotoRGBで作業したファイルをそのまま書き出すと、ブラウザで開いたときに色がくすんで見える場合があります。「書き出し形式」ダイアログではカラースペースをsRGBに変換するチェックボックスが用意されているため、Web用途では必ずオンにしてください。PNG→JPG一括変換のような形式変換でも同様に色空間の確認が必要です。
CHECK
▶ 今すぐやること: 透過レイヤーを含むファイルで「書き出し形式」からJPG書き出しを試し、透過部分が白になることを確認してからPNGに切り替える判断をする（3分）
Q: JPGで書き出した透過部分が黒くなってしまいました。なぜですか？
A： 一部のPhotoshopバージョンや書き出しルートでは透過部分が黒で塗りつぶされる場合があります。「書き出し形式」でJPGを選び、マット設定で白（#ffffff）を指定するか、PNGで書き出して対応してください。
Q： WebPやAVIFにも書き出せますか？
A： 書き出し形式の対応フォーマットはPhotoshopのバージョンによって異なります。最新版ではWebPに対応しており、書き出し形式のフォーマット一覧から選択できます。AVIFも対応バージョンが拡大しています。
Photoshop JPG書き出しは5つの仕組みで効率化
ハック1: クイック書き出し設定の固定で毎回の判断をゼロにする
【対象】: 同一クライアントへのWeb納品を継続的に行うフリーランス
【手順】: 「ファイル」→「書き出し」→「クイック書き出し形式の設定」を開きます（30秒）。形式をJPGに変更し、品質スライダーを70〜75%に設定します（1分）。書き出し場所を「書き出すたびに場所を指定」にして保存してください。2回目以降は「ファイル」→「書き出し」→「クイック書き出し」の1操作で完了します（所要時間：初回設定2分、2回目以降5秒）。
【ポイントと理由】: 毎回ダイアログを開いて設定する代わりに、初回に設定を固定してしまえば以降は操作コストがゼロになります。クイック書き出しは形式・品質・保存場所のすべてを事前定義できるため、同一仕様の案件では判断コストが書き出しのたびに発生しなくなります。
【注意点】: クライアントごとに品質要件が違う場合、単一のクイック書き出し設定で全案件を賄おうとする必要はありません。その場合は書き出し形式ダイアログを使えばよく、クイック書き出しは「設定が統一されている案件専用」と割り切るのが正しい使い方です。
ハック2: ファイル名規則の事前統一で書き出し後の整理をゼロにする
【対象】: 複数ページ・複数バナーを一括書き出しして納品するフリーランス
【手順】: アートボード名またはレイヤー名を「[接頭辞][内容][デバイス]」の形式（例: lp_main_pc、lp_main_sp）に統一します（1ファイルあたり2〜3分）。画像アセットを使う場合はレイヤー名末尾に「.jpg70%」のように品質まで指定します。書き出し実行後、そのままクライアントに提出できる状態のファイルが出力されます（所要時間：命名規則設定5分＋書き出し1分）。
【ポイントと理由】: 書き出し後にファイル名を一括リネームするのではなく、書き出し前にレイヤー名で命名を完了させるアプローチを取ります。書き出し後のリネーム作業は修正ループのたびに繰り返し発生するため、原因元であるレイヤー名の段階で解決することで、修正対応のたびに発生するリネームコストをゼロにできます。
【注意点】: レイヤー名に日本語を使うと、OSやWebサーバーによってファイル名が文字化けするリスクがあります。ファイル名はアルファベット・数字・アンダースコアのみで構成するのがWebフロントエンド案件での標準です。
ハック3: PSD保存とJPG書き出しを別フォルダーに分けて上書き事故をゼロにする
【対象】: 長期継続案件で修正が繰り返し発生するフリーランス
【手順】: プロジェクトフォルダー内に「01_psd」「02_jpg」「03_納品」の3フォルダーを作成します（30秒）。PSDファイルは「01_psd」に、書き出したJPGは「02_jpg」に格納するルールを決めます。クライアント提出前に「03_納品」にコピーしてから提出します（所要時間：フォルダー構成設定1分）。
【ポイントと理由】: 同一フォルダーにPSDとJPGを混在させると、書き出し時に旧バージョンのJPGを上書きしたことに気づかないまま提出してしまうミスが発生します。フォルダー分離によってバージョン管理と提出管理が視覚的に明確になります。
【注意点】: 「03_納品」フォルダーはクライアントごとに作り直してください。前回案件のJPGが混入したまま提出するミスは、フォルダーを使い回すことで発生します。
ハック4: 書き出し前チェックリスト3項目でリテイクをゼロにする
【対象】: 初回提出でリテイクが発生しやすいと感じているフリーランス
【手順】: 「書き出し形式」ダイアログを開いた状態で、形式がJPEGになっているかを確認します（10秒）。カラースペースの「sRGBに変換」にチェックが入っているかを確認します（10秒）。メタデータの設定を「なし」または「著作権のみ」に指定して書き出します（30秒）（所要時間：毎回1分）。
【ポイントと理由】: 「ダイアログを開くたびに前回設定が保持されているかを明示的に確認する」ことで防げるリテイクが複数存在します。特にカラースペースの設定ミス（AdobeRGB→sRGB変換忘れ）はWeb納品案件でのリテイク原因の上位に入ります。3項目チェックに要する時間は1分以下で、1回のリテイク対応（修正・再書き出し・再提出の往復）が平均30分以上かかることを考えると、費用対効果は30倍以上になります。
【注意点】: メタデータを「すべて」で書き出すと、GPSデータや撮影機器情報が含まれる場合があります。個人の写真素材を使ったファイルでは、クライアントに渡す前にメタデータを「なし」または「著作権のみ」に設定してプライバシーを保護してください。
ハック5: 書き出し設定をアクションに登録して手順をゼロ化する
【対象】: 毎週同じ書き出し作業を繰り返しているフリーランス
【手順】: 「ウィンドウ」→「アクション」を開き、新規アクションを作成します（30秒）。記録を開始した状態で、「書き出し形式」→JPG・品質70%・sRGB変換・メタデータなしで書き出す操作を実行します（2分）。記録を停止してアクション名を「JPG納品書き出し70%」等に設定します。以降は「アクション」パネルからワンクリックで同じ書き出し工程が再現されます（所要時間：初回登録3分、2回目以降10秒）。
【ポイントと理由】: 毎回メニューから手動で書き出す代わりに、アクションに登録してワンクリック完了にすることで、週5回書き出す案件であれば年間で約43時間の作業時間を削減できます（1回10分×週5回×52週÷60分）。アクションはPhotoshop本体に保存されるため、別PCへの移行は「アクション」パネルのメニューから「アクションを保存」でATNファイルを書き出し、移行先でロードすることで引き継げます。
【注意点】: アクションに保存先（フォルダーパス）がハードコードされている場合、フォルダーを移動したり別PCで使ったりするとパスエラーが発生します。保存先は「書き出すたびに場所を指定」にしておくことで、アクションの汎用性が保たれます。
CHECK
▶ 今すぐやること: 「ウィンドウ」→「アクション」を開き、新規アクションを作成してJPG品質70%の書き出し手順を記録する（3分）
Q: アクションはどこに保存されますか？別PCで使えますか？
A： アクションはPhotoshopの環境設定フォルダーに保存されます。別PCへの移行は「アクション」パネルのメニューから「アクションを保存」でATNファイルを書き出し、移行先でロードすることで引き継げます。
Q： アクション登録後に設定を変えたいときはどうしますか？
A： アクションパネルでステップを展開し、該当ステップをダブルクリックすると再記録モードになります。品質スライダーを変えたい場合は書き出し形式ステップを再記録してください。
Photoshop JPG書き出し実例は2パターンで比較
実際の案件でのJPG書き出し対応が成功・失敗に分かれた理由を、具体的な状況と選択から整理します。
ケース1（成功パターン）: 初回設定を仕組み化してリテイクなしで納品
Webデザインのフリーランスが、ECサイトのバナー20点を一括書き出しする案件を受注しました。アートボードを20枚作成し、名前を「banner_product_01」から「banner_product_20」までで統一。「アートボードからファイル」でJPG・品質75%・sRGB変換の設定で一括書き出しを実行しました。書き出し後のファイルはそのまま「03_納品」フォルダーにコピーして提出し、1回目の提出でクライアントからの承認が得られました。
アートボードやレイヤーを選んで書き出し形式やクイック書き出しを使い分けたWebデザイナーは「PNG・JPG・GIFを用途ごとに整理して書き出せることで作業フローが大幅にシンプルになった」と語っています（Photoshop画像の書き出し手順メモ）。
もし書き出し前にアートボード名を統一していなければ、20点のファイルを手動でリネームする作業が別途20〜30分発生していた可能性があります。
ケース2（失敗パターン）: 色空間の設定ミスで全件リテイクが発生
別の案件では、AdobeRGBで制作したバナー画像をそのままJPG書き出しし、クライアントから「画像の色が暗く見える」とリテイクが入りました。書き出し形式でsRGB変換のチェックを忘れていたことが原因で、ブラウザ上で色が沈んで表示されていました。全20点を再書き出しして再提出する対応に、確認・修正・提出で合計約2時間を要しました。
PSDデータをJPGへ書き出す工程を実務で整理したWebデザイナーは「Web用に使うメニューの違いを実体験ベースで理解してから、カラースペースの確認が書き出し前の必須チェックになった」と振り返っています（画像の書き出し方法の比較と使い分け）。
書き出し前チェックリスト（sRGB変換・メタデータ・形式の3項目確認）を習慣化することで、このケースの2時間のリテイク対応は防げます。作業効率を上げる方法として、このような確認フローを仕組み化することがフリーランスの作業品質を安定させる基本です。
CHECK
▶ 今すぐやること: 書き出し形式ダイアログを開き、「カラースペース：sRGBに変換」のチェックボックスがオンになっているか確認する（1分）
Q: AdobeRGBとsRGBの違いは何ですか？
A： AdobeRGBは色域が広く印刷向きですが、Webブラウザの多くはsRGBを基準に表示します。AdobeRGBのままWeb用に書き出すと、対応ブラウザ以外では色が沈んで見える場合があります。Web納品では書き出し時にsRGBへの変換を必ず行ってください。
Photoshop JPG書き出しは方法と設定で決まる
フリーランスの書き出し作業でリテイクが発生する原因の多くは、方法の選択ミスではなくsRGB変換漏れやファイル名の不統一といった確認不足です。この記事で解説した3方法の使い分けと5つの仕組みを一度設定してしまえば、以降の案件では書き出し工程を意識しなくて済む状態になります。フリーランスの作業効率化を積み重ねることで、案件対応のスピードと品質が同時に向上します。
| 状況 | 次の一歩 | 所要時間 |
| まず1枚JPG書き出しを試したい | 「ファイル」→「書き出し形式」でJPG・品質70%で実行 | 3分 |
| 繰り返し案件の設定を固定したい | クイック書き出し形式をJPG・70%に設定する | 2分 |
| 複数バナーを一括で出したい | アートボード名を統一して「アートボードからファイル」を実行 | 5分 |
| 書き出し手順をアクション化したい | 「ウィンドウ」→「アクション」で新規記録を開始する | 3分 |
Photoshop JPG書き出しに関するよくある質問
Q: 「別名で保存」と「コピーを保存」は何が違いますか？
A： 「別名で保存」は作業中のドキュメントがJPEGファイルに切り替わります。「コピーを保存」は元のPSDを開いたまま、JPEGのコピーを別途作成します。編集を続けながらJPG書き出しをする場合は「コピーを保存」を選んでください。
Q： Photoshopで書き出したJPGのファイルサイズを小さくするにはどうすればいいですか？
A： 品質スライダーを下げることが最も効果的です。70%から60%に下げるだけでサイズが20〜40%削減される場合があります。また、書き出し前にキャンバスサイズ（ピクセル数）を実際の表示サイズに合わせてトリミングすることも有効です。
Q： JPGとPNGはどちらを使えばいいですか？
A： 写真・グラデーションが多いバナー・背景ありの画像はJPG（品質70〜80%）を選んでください。透過が必要なロゴ・アイコン・イラスト素材はPNGを選んでください。同じ画像でJPGとPNGのサイズを比較すると、写真ではJPGが60〜70%小さくなる場合が多く、フラットなイラストではPNGが小さくなる場合があります。
【出典・参照元】
Photoshopでのグラフィック形式でのファイルの保存 – Adobe Help Center
書き出し設定と書き出し場所の環境設定 – Adobe Help Center
クイック書き出しオプションを使用して作品を書き出す – Adobe Help Center
Photoshop CCの基本：Web用画像を書き出す4つの方法をマスター – Adobe Blog
Photoshop画像の書き出し手順メモ – note
画像の書き出し方法の比較と使い分け – note
複数素材データの一括書き出し体験談 – note