「Adobe Photoshop」で Web ページ用に画像を作成したら“書き出し”をします。その方法を初心に帰ってまとめてみました。
- 「Web 用に保存（従来）」での画像の書き出し方法
- 「書き出し形式」と「アートボード」を活用した画像の書き出し方法
目次
書き出し方は
２種類
フォトショで Web 用画像を画像を書き出す方法として、現時点（2024年11月）では代表的なものが２種類あります。
「Web 用に保存（従来）」と「書き出し形式」の２種類です。
どちらがいいというわけではなく、
どちらも必須スキルです！
使い分けて使えるようになりましょう！
「クイック書き出し」は、そういえば、一度も使ったことないかも笑
「Web 用に保存」で
書き出す！
まずは大まかな手順をざっくり把握！
以下のような流れです。
STEP. 1 「Web 用に保存(従来)」を選択
STEP. 2 フォーマットを選択する
STEP. 3 画質を調整する
STEP. 4 保存する
STEP.1 「Web 用に保存 (従来)」を選択
メニューバーより「ファイル(F)」>「書き出し(E)」>「Web 用に保存 (従来)」をクリックします。
すると、
書き出しの設定をするウィンドウが表示されます。
ショートカットキーを覚えよう！
「Web 用に保存(従来)」は、[ Alt ] + [ Shift ] + [ Ctrl ] + [ S ] のショートカットキーで操作することが可能です。（Mac の場合は、[ Alt ] + [ Shift ] + [ Ctrl ] + [ S ]）絶対に覚えた方がよいショートカットのうちの１つだと私は強くオススメします！！！
指４つで無理？
ﾉﾝﾉﾝ。為せば成る！
絶対にできるようになります！
STEP.2 フォーマットを選択する
画像のフォーマット（ファイル形式、JPEG や GIF など）が表示されている場所から、書き出したいフォーマットをプルダウンから選択します。
今回は、説明のために JPEG を選択します。
STEP.3 画質を調整する
画質を調整する場所は、ウィンドウ右側。いろいろな項目を操作します。
細かな設定についてはフォーマットの種類や用途によって変わるので割愛しますが、「画質」を調整するときに考えるポイントを２つだけ書き記しておきます。
それは「見た目」と「容量」です。
その２つの折り合いがつくところで書き出し！
見た目
単純に目で見て問題ないか、ということです。
画質を下げながら、自分自身の目を信じて、今見ている画像が他の人が見て耐えられるか耐えられないか見定めます。
その際、ターゲット層（見る人やジャンル）を意識すると画質の基準として考えられるのでよいかもしれません。
例えば、
一眼レフで撮った写真を掲載するサイトで、ガビガビな写真を載せていたらどう思いますか？
例えば、
さんすうの解説サイトで、図が無駄に高画質、ハイクオリティだったらどうでしょう？
そういうことを考えながら、画像をつくったりすると、またちがった楽しさが生まれますね！
また、
操作の説明に戻りますが、
「Web 用に保存」ウィンドウの左上の方にあるタブが「最適化」が選択されていることを確認しましょう。元画像と比較するなら「2分割」、異なる調整を比べたい場合「4分割」を選択します。
容量
容量を確認するには、ウィンドウの左下を見ます。
小さく、さり気なく表示されています。
「時間」と「通信速度」が書いてありますが、その速度で書き出す画像が実際に Web で表示される目安の時間です。右の小さいメニューから任意の速度に変更できます。
例えば『スマホで通信制限（128Kbps）がかかる人が、見るのにどれくらい時間がかかるのかな？』と考えるとイメージしやすいですよね！
とはいえ、
Web ページを表示するのに実際には画像１枚だけではないし、HTML や JavaScript などのあらゆる要素を読み込むので、なんにしても、容量は小さいに越したことはないということですね！
要チェック
お仕事用データなど厳格な容量制限がある場合は、書き出した後にプロパティからチェックしましょう！微妙に Photoshop で表示されている容量よりも少しだけ超えている場合があります。制限容量よりもちょっとだけ下げて書き出しするのがオススメ！
そんな感じで「見た目」と「容量」の折り合いを付けながら、ベストなクオリティの画像を書き出します！
基本は「見た目」の良し悪しのふり幅で調整して、「容量」は軽ければ軽いほどイイ！って感じでしょうか。お仕事とかで、納品する画像に容量制限が指定されているときは、その容量限界まで画質を上げちゃえばいいですね。
STEP.4 保存する
容量の調整が終わったら、ウィンドウ右下の「保存」をクリックします。
すると保存先のウインドが出現するので、保存先を指定して、ファイル名をつけます。
この際に、書き出し設定が「初期設定」になっていますが、一枚の書き出しであればそのままでまったく問題ありません。（スライスという機能を使って書き出すときに関わってくる設定です。フォルダやファイル名などの設定をします。詳細は割愛します。）
あとは「保存」ボタンを押して、書き出し(Web用に保存)完了です！
「書き出し形式」
オススメの使い方
「書き出し形式」でのやり方も、「ファイル」から開いて～というのは「Web 用に保存 (従来)」と同じ感じですが、
せっかくなので、
私のオススメの使い方を交えてまとめてみます！
オススメというのは、
「アートボード」の機能で画像を用意しつつ、「書き出し形式」で書き出す！という感じです。
流れはこんな感じ。
STEP. 0 「アートボード」で画像を用意する
STEP. 1 右クリックから「書き出し形式」を選択
STEP. 2 『書き出したい画像』と『調整したい画像』を選択する
STEP. 3 フォーマットを選択する
STEP. 4 画質を調整する
STEP.5 書き出しする
STEP. 0 「アートボード」で画像を用意する
私は普段に載せるブログの画像を作るときは、こんな感じで一つのファイルに「アートボード」をいくつも作って作業しています。（作業画面をまるっとお見せするのは恥ずかしいですが、、、！）
この「アートボード」と「書き出し形式」の相性がめちゃめちゃよいので、その紹介を先にいたします。
「アートボード」は、ツールパネル一番上の移動ツールの裏側に隠れています。長押しで選択することができます。
イメージ的には「カンバス（１枚だけで作るときのやつ）」を同じファイルで複数作ることができる感じです。
そして、作ったアートボードは「レイヤー」パネルで管理することができ、サイズ変更は直感的にも、数値を指定することも「プロパティ」パネルから容易に操作可能です。
なぜ、「書き出し形式」と相性がよいのかは、次から！
STEP.1 右クリックから「書き出し形式」を選択
さて、
すこし遠回りしてしまいましたが、先ほど用意した「アートボード」の画像を「書き出し形式」で書き出す手順を紹介します。
「レイヤーパネル」の書き出したい「アートボード」の上で右クリック、「書き出し形式」をクリックします。その際に [ Ctrl ] や [ Shift ] で複数選択することも可能です。
せっかくなので複数選択してみます。
「Web 用に保存 (従来)」のウィンドウと似ていますが、すこし違います。操作性の大きな違いは複数選択するときでしょうか。
「Web 用に保存 (従来)」の場合は、スライスという機能を使うことで複数の画像を書き出すことが可能です。スライスは、それはそれで便利な機能ではありますが、細かい調整をするのがめんどくさいので、「書き出し形式」の方が圧倒的に楽かもしれません！
STEP.2 『書き出したい画像』と『調整したい画像』を選択する
ウィンドウの左側より、『書き出したい画像』にチェックを入れ、『調整したい画像』はクリックして選択します（選択されると濃いグレーになる）。選択された画像は真ん中に表示されます。
個別に調整したい場合は、その都度、選択すればOK！
ただし、ミスしがちな部分もあるので要注意！
一つだけ選択した状態で画像を調整し、全部書き出したら、他の画像は調整されていなかったなんてこともあります。特に流れ作業時！
STEP.3 フォーマットを選択する
ウィンドウ右側の「形式：」から、書き出したいフォーマットをプルダウンから選択します。
今回は、説明のために JPEG を選択します。
STEP.4 画質を調整する
画質を調整する場所は、ウィンドウ右側。いろいろな項目を操作します。
細かな設定についてはフォーマットの種類や用途によって変わるので割愛します。
画質の調整についてですが、
「Web 用に保存 (従来)」と違い、７段階で調整する感じでやや大雑把になっています。
より細かな調整が必要な場合は初めから「Web 用に保存 (従来)」で書き出す前提で作業した方がよいかもしれません。
また、調整後の容量は、ウィンドウ左側のところに表示されています。
「時間」と「通信速度」の表示も「Web 用に保存 (従来)」と違い、なくなってしまいました。“従来”に比べて、昨今での通信速度の進化に伴い不要と判断されたのかもしれません。。ですが、やはり、容量は小さいに越したことはないと私は思います！
STEP.5 書き出しする
容量の調整が終わったら、ウィンドウ右下の「書き出し」をクリックします。
すると保存先のウインドが出現するので、保存先を指定して、ファイル名をつけて「保存」ボタンを押します。
上書きされるとき、１枚だけの場合は「上書きしますか？」とメッセージが出現しますが、複数枚の場合は何もメッセージが出ずに上書きされてしまいますので、注意が必要です。（Windows 11 で確認。Mac の場合は不明です。）
これで、
書き出し完了です！
まとめ
Photoshopで画像を書き出す方法として「Web 用に保存 (従来)」と「書き出し形式」の2種類をまとめました。
「Web 用に保存 (従来)」は、画像一枚でデータを作っているときにオススメ！スピーディに書き出しできるので積極的に使いたいです！ショートカットは絶対に身につけましょう！「書き出し形式」と比べて、容量を細かく調整できるのは利点です。
「書き出し形式」では、「アートボード」と組み合わせることで効率よく書き出すことができるのでそのやり方をオススメします！
