コーディングが捗る！Photoshopの画像書き出し時短術と便利な小ワザ集

はじめに

インターライフメディアでは、Photoshopでデザインされたデータを基にコーディングする機会が比較的多くあります。
そこで今回は、Web制作の現場で役立つ、Photoshopでの主な画像書き出し方法を紹介します。

なお、本文書ではmacOS版のPhotoshopを基準に解説します。Windows版をお使いの方は、ショートカットキーなどを適宜読み替えてご覧ください。
（例： command → Ctrl, option → Alt）

また、作業内容によってはPhotoshop以外のツールが適している場合もありますので、そちらも併せて紹介します。

基本的な書き出し方法

まずは、Photoshopの基本的な書き出し機能をおさらいします。

1. レイヤーを右クリックで書き出し

最も手軽な方法です。書き出したいレイヤーまたはグループを右クリックし、「書き出し形式…」または「PNGとしてクイック書き出し」を選択します。

2. Web用に保存 (従来)

アートボード全体を、Web用に最適化しながら書き出すクラシックな機能です。
ショートカット: shift + option + command + S

3. 書き出し形式

「Web用に保存」よりも新しく、高機能な書き出しダイアログです。複数のフォーマットやサイズを同時に書き出せます。
ショートカット: shift + option + command + W

Web制作の主役！「アセット書き出し」機能

レイヤー名（またはグループ名）を変更するだけで、自動的に画像を書き出せる非常に強力な機能です。Web制作のコーディング効率が劇的に向上します。

1：アセット書き出しを有効にする

まず、アセット書き出しを有効にする必要があります。
メニューバーから ファイル＞生成＞画像アセット にチェックを入れてください。これだけで準備完了です。

2：書き出せる種類

.jpg .png .gif .svg で書き出せます。(PDFはアセットで書き出せません)

svg書き出しを行う際の注意点

カラーオーバーレイなどのレイヤースタイルで色を付けると、書き出したSVGに色が反映されない可能性があります。
また、書き出したSVGがブラウザなどで正しく表示されないこともあります。解決法として、Photoshopで当該のレイヤーを選択した後、書式＞シェイプに変換 を行うと表示できる場合もあります。

以上のことから、PhotoshopでのSVG書き出しは万能ではありません。ロゴなどの重要なSVGは、なるべくIllustratorで書き出すことを推奨します。

pdfを書き出す方法

PDFはアセットでは書き出せませんが、以下の流れでしたら書き出すことは可能です。
ファイル＞書き出し＞アートボードからPDF…
※この機能は、書き出したい要素がアートボードで囲われている必要があります。

参考：https://qiita.com/hibikikudo/items/d5c1a87768f5de2d71bf

3：サイズ調節

大きさ指定（ピクセル）：例）幅250px、高さ150pxで書き出す場合
レイヤー名: 250x150 test.png

大きさ指定（%）：例）200％の大きさで書き出す場合
レイヤー名: 200% test.png

参考：https://blogs.adobe.com/japan/dtp-photoshop-kihon-tips-04/

4：解像度(画質)の指定

PNG

例）PNG-8で書き出す場合
レイヤー名: test.png8
例）PNG-24で書き出す場合
レイヤー名: test.png24

JPEG

例）画質10%で書き出す場合
レイヤー名: test.jpg1 または test.jpg10%
例）画質100%で書き出す場合
レイヤー名: test.jpg10 または test.jpg100%

「%」を記入せずとも画質をカスタマイズできますが、

他の人が見ても分かりやすいように「%」をつけることを推奨します。

ちなみに、画質の指定なし（test.jpg）の場合は「.jpg8」と同様の画質80%になります。

GIF

GIFには書き出しオプションがありません（レイヤー名に .gif と付けるだけです）。

5：同じ画像で複数バージョンを書き出す

複数の画像（例：通常版とRetina版、jpgとpngなど）を一度に書き出すには、「,」（カンマ）でつなぎます。（「,」の後のスペースはなくても問題ありません）

例）同じ画像でpngとjpgを書き出す場合
レイヤー名: test.png, test.jpg

例）Retina対応（1倍サイズと2倍サイズ）で書き出す場合
レイヤー名: 100% test.png, 200% test@2x.png

6：書き出し先をカスタマイズする

書き出す画像名の前に フォルダ名/ を接頭辞としてレイヤー名に追記します。

例）「icons」フォルダの中にtest.jpgを書き出す場合
レイヤー名: icons/test.jpg

7：余白を入れて書き出す（カンバスサイズの指定）

書き出す画像のサイズを固定し、余白を含めて書き出したい場合があります。例えば、アイコンのサイズを「100px × 100px」に統一したい時などです。

この場合、レイヤーマスクやベクトルマスクを利用します。ここでは長方形ツールを使った簡単な例を紹介します。

1. 書き出したいレイヤーの上に、長方形ツールで「100px × 100px」など、書き出したいカンバスサイズのシェイプを作成します。
2. 作成したシェイプの塗りと線を「なし」にします。
3. そのシェイプと書き出したいレイヤーを両方選択し、グループ化（command + G）します。
4. 作成したグループのレイヤー名を、アセット書き出しの命名規則（例: icon-home.png）に変更します。

こうすることで、グループ内のシェイプのサイズがカンバスサイズとして認識され、その範囲で画像が書き出されます。

TIPS: スマートオブジェクトで画像をまとめて差し替える

例えば、ECサイトの商品画像やバナーなど、同じレイアウトで複数のパターンを管理している場合に非常に便利なテクニックです。
（一枚のPSD内に、同じ画像がスマートオブジェクトとして複数配置されている状態を想像してください）

このスマートオブジェクトの参照元画像（リンクされたファイル）を、別の画像で上書き保存するか、レイヤーパネルから「コンテンツを置き換え」を実行します。

すると、PSD内で使われているすべてのスマートオブジェクトが、新しい画像に一括で差し替えられます。

注意点

※スマートオブジェクトが「リンクされたアイテム」になっていることを確認してください。（埋め込みの場合は、コンテンツの置き換えが必要です）
※参照元の画像ファイル名や格納場所を変更すると、リンク切れになるので注意してください。

差し替え終了！

もし変更が自動で反映されなかった場合は、
レイヤー＞スマートオブジェクト＞変更された全てのコンテンツを更新 を試してみてください。

TIPS: 複数の画像を一括でリサイズ・リネームする方法

ブログ記事用の画像や事例紹介の写真など、大量の画像のサイズ（特に幅や高さ）を一度に揃えたい場合にオススメです。
この作業はPhotoshopのバッチ処理でも可能ですが、専用のアプリを使うとさらに効率的です。

ここではmacOS用の「iMage Tools」というアプリを紹介します。（もちろん、他の類似アプリでも構いません）
(iMage Tools 参考 : https://pc-karuma.net/mac-app-image-tools-resize/ )

このようなツールを使うと、リサイズだけでなく、一括でのリネームや連番の付与なども簡単に行えます。

作業効率アップ！Photoshop 便利な小ワザ集

Photoshopの基本機能に加えて、知っていると作業が格段に楽になる小ワザを紹介します。

• 1：ショートカットキーをカスタマイズ
• 2：Script（スクリプト）を使って機能を拡張する
• 3：Adobe Exchangeで便利な拡張機能を入手する
• 4：CC 2019からの新機能「簡易計算」
• 5：画像からフォントの種類を特定する「マッチフォント」
• 6：画像のサイズが足りない時の対処法

1：ショートカットキーをカスタマイズ

編集＞キーボードショートカット…
普段よく使う機能は、押しやすいキーにショートカットを設定すると作業がスピードアップします。
パネルメニュー、ツール、アプリケーションメニューの各項目に設定できます。
ショートカットキーは、⌘キーと他の修飾キー（Option, Control, Shiftなど）、および英数字やファンクションキーの組み合わせで設定します。

2：Script（スクリプト）を使って機能を拡張する

例えば、下の画像のように複数のオブジェクトを「等間隔に分布」させたい時、Photoshopの標準機能を使うと、メニューの奥深くにあって毎回クリックするのは大変です。

さらに、この「分布」機能には、デフォルトでショートカットキーが割り当てられておらず、カスタマイズもできません。
そんな時はScript（スクリプト）を使って、機能を拡張しましょう！

今回の場合は↓こちらのURLで配布されているスクリプトデータをダウンロードします。

オブジェクトが横に並んでいるときには「Distribute Layer Spacing Horizontal 0-2-0.jsx」、縦に並んでいるときには「Distribute Layer Spacing Vertical 0-2-0.jsx」を使います。

Adobe Photoshop Scripts | Trevor Morris Photographics | Horizontal 0-2-0.jsx
Adobe Photoshop Scripts | Trevor Morris Photographics | Vertical 0-2-0.jsx

Scriptの導入手順

• ① 欲しいScriptのデータ（.jsxファイル）を探してダウンロードします。
• ② Finderを開き、アプリケーション＞Adobe Photoshop [バージョン]＞Presets＞Scripts フォルダに、ダウンロードした.jsxファイルを保存します。
  ※jsxのデータ名は自分が分かりやすいように変更してもOKです。

• ③ Photoshopを再起動します。
• ④ メニューの ファイル＞スクリプト を見ると、追加したスクリプトが一覧に表示され、実行できるようになります。
  ※スクリプトが反映されたら、「キーボードショートカットのカスタマイズ」（前項参照）から、このスクリプトに独自のショートカットキーを割り当てると、さらに便利です。

参考：http://www.dtp-transit.jp/adobe/photoshop/post_2093.html

3：Adobe Exchangeで便利な拡張機能を入手する

Photoshopの拡張機能を充実させてくれる公式のマーケットプレイスです。
これはPhotoshopだけではなく、IllustratorやAfter Effectsなど、他のAdobe製品の拡張機能も探せます。

リンク ：https://www.adobeexchange.com/creativecloud.photoshop.html#pfa

有料のものから無料のものまで、また評価が高い順などで検索することも可能です。
（ちなみに、筆者は整列系の拡張機能（Align and Distributeなど）をよく使っています）

4：CC 2019からの新機能「簡易計算」

幅や高さなどの数値を入力するフィールドで、簡単な計算ができる機能です。
「全体の幅は1200pxだけど、それを5等分した幅で長方形を作りたい…」といった、計算が面倒な時にオススメです。

入力欄に 1200/5 と入力してEnterキーを押すだけで、計算結果の 240px が適用されます。

ただし、いくつか注意点があります。
※ +（加算）、-（減算）、*（乗算）、/（除算）、%（百分率） が使えますが、(100+50)/2 のような複雑な組み合わせ計算はできません。（100+50 や 100/2 といった単一の計算のみ可能です）
※ 計算結果に小数点以下（.5以下）が含まれる場合、切り捨てられます。

5：画像からフォントの種類を特定する「マッチフォント」

デザインデータがラスタライズ（画像化）されていても、使われているフォントを特定したい場面があります。
テキストレイヤーならフォント情報が分かりますが、画像としてもらったテキストでは手がかりがありません。

そんな時は「マッチフォント」機能を使いましょう。

• ① 画像の中にある検索したい文字を、選択ツールで囲みます。
• ② 書式＞マッチフォント… を選択します。

これだけで、選択範囲の文字に近いフォントを、自分のPCにインストールされているフォントやAdobe Fontsの中から探してくれます。
テキストオプションで「日本語」か「欧文」かを指定して探すこともできます。（欧文フォントに比べて、日本語フォントはまだ対応範囲が少ない場合があります）

6：画像のサイズが足りない時の対処法

クライアントから提供された画像でバナーなどを作成する際、「もう少しだけ背景の幅（高さ）があれば、デザインが収まるのに…」と思うことがあります。
背景が単色なら簡単ですが、グラデーションがかかっていたり、複雑な模様だったりすると大変です。
そんな時は「コンテンツに応じた切り抜き」を試してみましょう。

• ① 切り抜きツール（Cキー）を選び、カンバスを広げたい方向へドラッグします。
• ② オプションバーにある 「コンテンツに応じる」にチェックを入れます。
• ③ Enterキーで切り抜きを確定します。

これだけで、Photoshopが画像の端を解析し、自動で背景を自然に（それっぽく）生成してくれます。

応用編：コンテンツに応じて拡大・縮小

上の作業の応用編です。画像の内容によってはうまくいかない場合もありますが、非常に便利な機能です。
例えば、対談バナーなどで二人の人物の間隔だけを詰めたい、といった場合に便利です。

編集＞コンテンツに応じて拡大・縮小
この機能を使うと、Photoshopが「重要」と判断した部分（人物など）を保護しながら、背景など「重要でない」と判断した部分だけを伸縮させることができます。

よくある質問（FAQ）

Q1. Web制作初心者です。書き出し方法がたくさんありますが、どれを使えば良いですか？

A1. **「アセット書き出し」を推奨します。**
レイヤー名に「.png」や「.jpg」と付けるだけで自動で書き出されるため、コーディング作業と並行して画像を管理できます。デザイン修正が入った時も、Photoshopのデータを更新するだけで画像が自動で上書きされるため、Web制作者にとって最も効率的な方法です。

Q2. PhotoshopでのSVG書き出しに注意が必要なのはなぜですか？

A2. Photoshopはピクセル（点の集まり）を扱うのが得意なソフトですが、SVGはIllustratorのようなベクター（計算式）ベースの形式です。そのため、PhotoshopからSVGを書き出すと、**レイヤースタイル（カラーオーバーレイなど）が反映されなかったり、** 意図しない表示崩れが起きたりすることがあります。簡単なシェイプなら問題ない場合もありますが、確実性を求めるならIllustratorからの書き出しを推奨します。

Q3. アセット書き出しで画質を調整する際の目安はありますか？

A3. レイヤー名で画質を細かく指定できます。目安として、**JPEG（.jpg）の場合は .jpg8（80%）** が画質とファイルサイズのバランスが良い標準設定です。より高画質が必要なら .jpg10（100%）、ファイルサイズを軽くしたいなら .jpg6（60%）などを試してみてください。PNGの場合は、色の少ないロゴやアイコンは .png8、写真のように色数が多い場合は .png24 を使うと良いでしょう。