【Photoshop】Web用画像を保存するなら「書き出し形式」が正解
Photoshopには保存・書き出しに関わるたくさんの機能（「別名で保存」「コピーを保存」「書き出し形式」など）があります。
結論から言うと、ウェブサイトやブログに掲載する画像を作る場合、「書き出し形式」を選ぶのが正解です。
なぜなら、Photoshopにおける「保存」と「書き出し」は、そもそも使う目的がまったく違うからです。この違いを解説します。
「保存」と「書き出し」の違い
ノンデザイナーの方がPhotoshopを使う際、まず頭に入れておきたいのが以下の違いです。
| メニュー | 主な目的 | データの状態 |
| 保存 （別名で保存 など） | 作業の「途中経過」を キープする | レイヤーなどの編集情報をすべて残したデータ（PSD形式など）。 後から文字の打ち替えや色の変更ができる。 |
| 書き出し （書き出し形式） | Webに載せる「最終形」を 出力する | 編集情報をきれいに削ぎ落とし、 1枚の軽い画像（JPEGやPNG形式など）に変換したもの。 |
「保存」はデータの中に「編集用の情報」が含まれるため、ファイルサイズが非常に重くなります。これをそのままウェブサイトにアップしようとしても、重すぎてエラーになったり、サイトの表示速度を著しく低下させたりしてしまいます。
「書き出し」は、 ウェブサイトの枠組みに合わせて、見た目を保ったまま、余計なデータを削ぎ落として出力されます。
つまり、「作業中はこまめに『保存』し、ウェブサイトにアップしたりSNSに投稿したりするときに『書き出し』を行う」と理解しておきましょう。
従来の「Web用に保存」と「書き出し形式」の違い
次にPhotohopの主な書き出し方法「Web用に保存」と「書き出し形式」について違いを解説します。
- Web用に保存：画質とファイルサイズのプレビューを見比べながら調整可能。アニメーションGIFにも対応。
- 書き出し形式：レイヤーやアートボード単位での書き出しに特化した機能。複数の解像度（@2xや@3xなど）を一括で書き出せるため、アプリやWebデザインの素材作成に便利。
次の章では、「書き出し形式」の方法を解説します。
【Photoshop】「書き出し形式」でWeb用画像を保存する手順
「保存」と「書き出し」の違いがわかったところで、ここからは実際にPhotoshopを使って、Web用に画像を書き出す具体的な手順を3つのステップで解説します。
一度覚えてしまえばとても簡単な流れですので、Photoshopの画面を開きながら一緒に進めてみましょう！
STEP1：メニューから「書き出し形式」を選択する
まずは、書き出したいデザインデータを開いた状態で、上部のメニューバーから以下の通りに進みます。
ファイル→書き出し→書き出し形式
クリックすると、新しく「書き出し形式」の専用ウィンドウ（設定画面）が立ち上がります。
STEP2：適切な「ファイル形式」を選ぶ
画面が切り替わったら、まずは右側の上部にある「ファイル設定」という部分に注目してください。ここで画像の「形式（フォーマット）」を選びます。
ノンデザイナーの方が一番迷いやすいポイントですが、基本的には以下の3つの特徴を基準に選べば間違いありません。
| 形式 | 画像の種類 | 特徴 |
| JPG | 写真やグラデーション | 色の数が豊富な画像に向いています。 画質を保ちながらデータを軽くできます。 |
| PNG | ロゴ・イラスト・背景透過 | 文字やイラストの輪郭がくっきりきれいに残ります。 背景を透明にしたいときは必須です。 |
| GIF | アニメーション・簡易アイコン | パラパラ漫画のように動く画像を作りたいときや、 色数の極端に少ないアイコンに向いています。 |
基本は「写真＝JPEG」「背景透過＝PNG」「動かすなら＝GIF」と覚えておくだけで、実務の9割はカバーできます。
※アニメーションGIFを書き出す場合は「Web用に保存」を使用します
STEP3：画像のサイズを設定して書き出す
1．「画像の大きさ（幅と高さ）」を確認する
カンバスサイズ（制作したサイズ）のまま書き出す場合は、ここの数字はそのままで大丈夫です。もし「幅1200pxで作ったけれど、ウェブサイトには600pxで載せたい」という場合は、ここに「600」と数値を入力すれば、縦横比を保ったまま自動で縮小してくれます。
2．「書き出し」ボタンを押す
すべての設定を確認したら、画面右下にある青い [書き出し] ボタンをクリックします。
3．保存先を決める
パソコンのどこに保存するか（デスクトップなど）を決めて、ファイル名を入力し、保存すれば完了です！
これで、レイヤーなどの重い編集データを一切含まない、Webサイトにアップロードするための「軽くてきれいな最適化画像」が完成しました。
【Photoshop】Webサイトが重くならないためのWeb用画像の「容量削減」テクニック
ステップ通りに「書き出し形式」を使えばWebに適した画像になりますが、ここからさらに一歩踏み込んで「画質はきれいなまま、データの容量を限界まで軽くするプロのテクニック」をご紹介します。
Webサイトの表示速度をサクサク快適に保つために、ぜひ覚えておきたいポイントです。
画質を落とさずに容量を減らす「品質」の目安（JPGの場合）
ファイル形式で「JPG」を選んだ場合、そのすぐ下にある「画質」の項目を調整できます。
Photoshopのバージョンによって表記は変わる可能性がありますが、上記の場合、低～高の7段階で設定可能です。画質を低くすれば粗くはなっていきますが、7～5辺りの違いは人の目では判断できないレベルです。（書き出す画像にもよります）
画質：7
画質：6
画質：5
上記の画像の場合、見た目はあまり変わりませんが、書き出された画像の容量は、画質7：413KB、画質6：142KB、画質5：62KBと削減されました。
画像形式「JPG」「PNG」「GIF」の違い
最後に簡単に画像形式「JPG」「PNG」「GIF」の違いをまとめておきます。
| 形式 | 得意な画像 | 背景の透過 | 画質（圧縮方法） | 特徴 |
| JPG (JPEG) | 写真・グラデーション | ❌ できない | 劣化あり（可逆ではない） | 色数が多く写真がキレイ。ファイル容量を小さくできる。 |
| PNG | イラスト・ロゴ・図解 | ⭕️ できる | 劣化なし（高品質） | 文字や境界線がくっきり残る。透明な背景を作れるが、容量は大きめ。 |
| GIF | 動く画像・簡単なアイコン | ⭕️ できる（粗め） | 最大256色まで | パラパラマンガのようなアニメーションができる。色数が少ない。 |
次世代の画像形式「WebP」と「AVIF」について
最近のWeb業界で主流になりつつある、さらに進化した画像形式についてもサラッとご紹介します。
- WebP（ウェッピー）：Googleが開発した画像形式です。JPEGやPNGと見た目のきれいさは変わらないのに、データの重さをさらに「2〜3割」も軽くできる優れものです。
- AVIF（エーブイアイエフ）：WebPよりもさらに圧倒的な圧縮効率を誇る次世代の画像形式です。
カラープロファイルについて
書き出し形式の設定に「カラープロファイルの埋め込み」という項目があります。これは、様々なデバイスで表示された際、一貫したカラーで表示されるようにデータの色情報を書き出す画像に埋め込む設定と認識しておきましょう。
まとめ：Photoshopの正しい知識を身に付け、ユーザーにも検索エンジンにも優しいサイトへ
今回は、ノンデザイナーの方に向けて、Photoshopを使った「Web用画像の正しい保存・書き出し方法」について解説しました。
最後に、今回お伝えした重要なポイントをまとめます。
・「保存」と「書き出し」は目的が違う
作業中のデータを残すときは「保存（PSD形式）」、Webサイトにアップするときは「書き出し形式」を使いましょう。
・ファイル形式は「3つ」を使い分ける
「写真＝JPEG」「背景透過＝PNG」「アニメーション＝GIF」の違いを理解しましょう。
・容量の削減は「画質」を調整
見た目の美しさを保持したまま容量を削減しましょう。
適切な方法で書き出された「軽くてきれいな画像」は、Webサイトを訪れるユーザーにとって快適なだけでなく、検索エンジン（SEO）からも高く評価されるという大きなメリットがあります。日々のブログ更新やサイト運用のルーティンとして、ぜひ「書き出し形式」をクセにしてみてくださいね。
スタジオカレンでは、デザインの美しさはもちろん、表示速度やSEOまで考慮した「成果の出るWebサイト・バナー制作」を行っています。まずは現在のサイトが抱える課題を洗い出すお手伝いも承っておりますので、どうぞお気軽にお問い合わせください。
また、スタジオカレンのブログでは、企業やショップのウェブ担当者様に向けてウェブ制作関連の記事を投稿しています。Photoshop以外にもFigma、Notionといったツールの使い方や用語解説などの記事を公開していますのでお読み頂ければ幸いです。
