サイズや形式をその都度決めるなら［書き出し形式］、決まった条件で繰り返すなら［クイック書き出し］、旧来の比較画面で画像を調整するなら［Web 用に保存］を使います。
WebPの保存はこの3方式とは別で、［コピーを保存］から選びます。
3つの保存経路と確認項目
| 方式 | 向いている作業 | 確認する項目 |
|---|---|---|
| 書き出し形式 | サイズ・倍率を指定する | 形式、幅と高さ、倍率、透明、色空間 |
| クイック書き出し | 同じ条件で繰り返す | 事前設定の形式、保存先、メタデータ |
| Web 用に保存 | 比較プレビューで調整する | JPEG・PNG・GIFなどの形式、寸法、推定サイズ |
［ファイル］→［書き出し］の中に、［PNGとしてクイック書き出し］［書き出し形式］［書き出しの環境設定］［Web用に保存］が並んでいます。
Photoshop 27.11.0の日本語メニューでは［PNG としてクイック書き出し］［書き出し形式］［書き出しの環境設定］［Web 用に保存］と表示され、［Web 用に保存］に「（従来）」は付いていませんでした。
メニューに表示されていたショートカットは、［書き出し形式］がAlt+Shift+Ctrl+W、［Web 用に保存］がAlt+Shift+Ctrl+Sです。
［PNG としてクイック書き出し］には、ショートカットが表示されていませんでした。
キーを押して開く操作は、確かめていません。
ここでは画像全体を書き出します。
レイヤーだけを選んで書き出す場合は、そのレイヤーの範囲と文書全体のサイズが同じとは限りません。
対象が文書・アートボード・選択レイヤーのどれなのかを先に決めてください。
書き出し形式で1倍と2倍のPNGを作る
練習ZIPのpractice-transparent.pngを開きます。
入力は256×128pxです。
［ファイル］→［書き出し］→［書き出し形式］で文書全体を対象にし、PNG、透明を保持する設定、幅256・高さ128を確認します。
出力倍率を1xと2xに分け、2x側には@2xなど区別できる接尾辞を付けます。
別の空フォルダーに保存し、1xが256×128px、2xが512×256pxになっていることを開き直して確認します。
倍率を変えても元のPNGやPSDを拡大して保存する必要はありません。
元画像が小さい場合、2倍出力で細部が新しく増えるわけではないことにも注意してください。
上の画像は2026年10月12日に600×300pxの別の画像で開いたときの画面で、形式がPNG、［透明部分］にチェック、幅600・高さ300、倍率100%でした。
書き出したPNGを開き直すと、透明な背景がそのまま残っていました。
2026年10月17日に1xと2xを書き出した結果
2026年10月17日に、Photoshop 27.11.0（Windows 11 Pro）で練習ZIPのpractice-transparent.pngを開き、［書き出し形式］を試しました。
開いた直後の設定は、形式がPNG、［透明部分］にチェック、幅256・高さ128、拡大・縮小100%、メタデータ［なし］、［sRGB に変換］と［カラープロファイルの埋め込み］にチェックでした。
左上の［すべて拡大・縮小］の［＋］を押すと、サイズ0.5x・サフィックス@0.5xの行が足されました。
サイズ欄の0.5を2に書き換えると、サフィックスは自動で@2xに変わりました。
［書き出し］を押すとフォルダーを選ぶ画面が開き、選んだ空のフォルダーに2つのPNGが保存されました。
| ファイル名 | 寸法 | 透明と大きさ |
|---|---|---|
| practice-transparent.png | 256×128px | 透明・半透明とも元と同じ。3,172バイト |
| practice-transparent@2x.png | 512×256px | 透明あり。4,076バイト |
1xは、透明な部分と不透明度50%の部分が、元のPNGと同じ値でした。
2xは拡大して作られるため、四角の縁に中間の不透明度が加わります。
画面左の一覧には542 バイトと出ていましたが、保存した1xのファイルは3,172バイトで、カラープロファイルが埋め込まれていました。
寸法と透明は、保存したファイルを読み取って確かめました。
クイック書き出しの設定を確認する
［書き出しの環境設定］で現在の設定を記録し、練習用にPNGと保存先を毎回確認する設定を選びます。
［ファイル］→［書き出し］のクイック書き出しを実行し、別フォルダーへ保存してください。
出力を開いて256×128pxと透明を確認したら、環境設定を元へ戻します。
設定した形式は次回にも使われるため、その場だけの指定と思い込まないようにします。
2026年10月17日にクイック書き出しを実行した結果
2026年10月17日の時点で、［編集］→［環境設定］→［書き出し］は次の状態でした。
クイック書き出し形式はPNGで［透明部分］にチェック、［クイック書き出しの場所］は［書き出すたびに場所を指定］、メタデータは［なし］、［sRGB に変換］にチェックでした。
練習に向いた状態だったので、設定は変えずに［ファイル］→［書き出し］→［PNG としてクイック書き出し］を選びました。
［名前を付けて保存］の画面が開き、ファイル名欄にはpractice-transparent.pngが入っていました。
最初に開いたフォルダーは文書のあるフォルダーではなく、以前に使った別のフォルダーでした。
保存先を空のフォルダーに替えて保存すると256×128pxのPNGができ、透明と半透明の部分も元と同じ値でした。
ファイルは542バイトで、カラープロファイルは入っていませんでした。
クイック書き出しの環境設定には、カラープロファイルを埋め込む項目がありません。
プロファイルを付けたいときは、［書き出し形式］の［カラープロファイルの埋め込み］を使います。
今回は環境設定を変えていないので、元へ戻す操作はしていません。
Web用に保存で比較する
［ファイル］→［書き出し］→［Web 用に保存］を開き、原稿と最適化後のプレビューを比べます。
透明を使う練習ではPNGを選び、寸法と透明の設定を確認してから保存します。
JPEGを選ぶ場合は透明を保持できないため、背景をどうするかも決めてください。
表示される推定サイズだけでなく、保存後の実ファイルも確認します。
2026年10月17日にPNG-24で保存した結果
2026年10月17日に開いた［Web 用に保存］には、前回使った設定が残っていました。
画像形式はPNG-24で、［透明部分］［カラープロファイルの埋め込み］［sRGB に変換］にチェック、メタデータは［著作権情報および問い合わせ先］でした。
ダイアログ上部の［2 分割］タブを選ぶと、元画像と最適化後の表示が上下に並びます。
最適化後の表示の左下には、PNG-24・1.023Kと出ていました。
［保存］から空のフォルダーに保存したPNGは256×128pxで、透明と半透明の部分は元と同じ値でした。
ただしファイルは3,917バイトあり、カラープロファイルとXMPのメタデータが入っていました。
表示の1.023Kと実ファイルの大きさは、この条件では一致しませんでした。
次に開いたときは［2 分割］のタブが選ばれた状態で開き、表示のタブも引き継がれていました。
形式や表示を変えたら、作業の後で元の設定に戻しておくと、次の書き出しで迷いません。
押さえておきたい最新仕様と注意点
2026年10月12日に、Photoshop実機の日本語表示で、書き出しの画面を確認しました。
- ［Web用に保存］は「従来」の画面で、形式はGIF（256色）が選ばれ、［透明部分］にチェックが入っていた
- ［書き出し形式］は、メタデータが［なし］、［sRGBに変換］にチェックが入っていた
- 書き出しの設定は版によって名前や場所が変わるため、実際の画面で確認する
- JPEGは透明を保持できないため、透明が必要ならPNGを選ぶ
練習用の画像で試してから、本番の画像に使ってください。
あなたはどっち？作業に合わせた書き出し方式の判定フロー
次の順に確認すると、3方式のどれを使うかを決めやすくなります。
- サイズや形式を、その都度決めたい：［書き出し形式］を使います。形式、幅と高さ、倍率、透明、色空間を確認します。
- 決まった条件で、繰り返し書き出したい：［クイック書き出し］を使います。事前設定の形式、保存先、メタデータを確認します。
- 旧来の比較画面で、画像を調整したい：［Web 用に保存］を使います。原稿と最適化後のプレビューを比べられます。
- 透明を保ちたい：PNGを選びます。JPEGは透明を保持できないため、背景をどうするかも決めます。
- WebPで保存したい：この3方式とは別に、［コピーを保存］から選びます。
- 2倍の画像が必要：［書き出し形式］で1xと2xに分けて出力します。元の画像が小さい場合、2倍出力で細部が新しく増えるわけではありません。
レイヤーだけを書き出す場合は、そのレイヤーの範囲と文書全体のサイズが同じとは限りません。対象が文書・アートボード・選択レイヤーのどれなのかを、先に決めてください。
形式・画質・保存先で迷ったとき
JPEGの画質値は画面によって尺度が異なります。
Adobeの［書き出し形式］の説明にある1〜100%と、JSXのJPEGSaveOptionsの0〜12を同じ値として扱わないでください。
ファイルが見つからない場合はクイック書き出しの保存先設定を確認し、生成したフォルダーを開いて名前・拡張子・寸法を照合します。
SVGはPhotoshop 22.5で従来の書き出し機能が廃止された経緯があり、2026年の一般向けヘルプにSVGの記載があることだけで、手元の版で選べると判断できません。
実際の形式欄で確認し、ベクターとして保持したい制作物はIllustratorなど対応する作成元で書き出してください。
WebPについてはコピーを保存からのWebP手順へ進みます。
よくある質問：Photoshopの書き出しで迷ったときのチェックリスト
書き出し形式・クイック書き出し・Web用に保存は、どう違いますか？
サイズや形式をその都度決めるなら［書き出し形式］、決まった条件で繰り返すなら［クイック書き出し］、旧来の比較画面で画像を調整するなら［Web 用に保存］を使います。
クイック書き出しの設定は、次回にも使われますか？
使われます。設定した形式は次回にも使われるため、その場だけの指定と思い込まないようにします。練習などで設定を変えたら、環境設定を元へ戻します。
書き出したファイルが見つからないときは？
クイック書き出しの保存先設定を確認し、生成したフォルダーを開いて、名前・拡張子・寸法を照合します。
JPEGの画質の数値は、どの画面でも同じですか？
同じではありません。Adobeの［書き出し形式］の説明にある1〜100%と、JSXのJPEGSaveOptionsの0〜12を、同じ値として扱わないでください。
SVGで書き出せますか？
SVGは、Photoshop 22.5で従来の書き出し機能が廃止された経緯があり、2026年の一般向けヘルプにSVGの記載があることだけで、手元の版で選べると判断できません。実際の形式欄で確認し、ベクターとして保持したい制作物は、Illustratorなど対応する作成元で書き出してください。
Web用に保存の推定サイズは、そのまま信じてよいですか？
表示される推定サイズだけでなく、保存後の実ファイルも確認します。
確認範囲と公式資料
2026年10月3日に、Adobeのクイック書き出し、書き出し設定、Web用に保存と、Adobe担当者のSVG廃止説明を確認しました。
2026年10月12日に、Photoshop実機で書き出しメニュー・書き出し形式・Web用に保存の画面を確認し、PNGを書き出して開き直しました。
2026年10月17日に、Photoshop 27.11.0（Windows 11 Pro 10.0.26200）で練習ZIPのPNGを3方式で書き出し、寸法・透明・ファイルの大きさを確かめました。
JPEG・GIFでの書き出し、レイヤーやアートボード単位の書き出し、ショートカットキーでの実行、Macとほかの版は確認していません。
