ネット広告 Photoshopのクラウドドキュメントを活用して、最短でディスプレイ広告バナーを量産する方法！

こんにちは。クリエイティブディレクターの深谷です。

サイズ違いの広告バナーを量産する場合、
数量に応じてかなりの工数が必要となります。

モバイル用の最小サイズ(320 × 50)まで含めると、
想定以上に工数が掛かることもよくあります。

今回は、効率化を意識し続けて改善した、
最短で広告バナーを量産する方法についてご紹介いたします。

最短ポイント1
スマートオブジェクトの活用

1つ目の最短ポイントは、
写真素材をスマートオブジェクトに変換し一元管理しておくことです。

広告バナーにおいてメインビジュアルの写真は、
クリック率に寄与する大きな要素としてとても重要です。

写真の差し替えが発生した場合も、
スマートオブジェクトで管理しているため、
量産したバナーを一瞬で変更することが可能です。

最短ポイント2
画質とサイズパラメーターの指定

2つ目の最短ポイントは、
画質パラメーターとサイズパラメーターの指定です。

サイズ違いのバナー展開は、
同じPSDファイル内でフォルダを分けて管理してますが、
フォルダ名をパラメーターで指定すると、
書き出しを思い通りに制御することが可能となります。

パラメーターは画質とサイズの2種類があり、
以下の法則に沿って定義します。

画質パラメーターの指定

フォルダ名の後にパーセント(低画質：0%　～　高画質：100%)を追加すると、
書き出し時に容量を自動調整することができます。

Google広告など150KB以下の容量制限があるため、
1200 × 628の大きなバナーは40%ぐらいで書き出すことが多いです。

Photoshopのフォルダ名
bnr_1200-628.jpg40%
↓
書き出し後のファイル名
bnr_1200-628.jpg

サイズパラメーターの指定

フォルダ名の前に指定したいサイズ(300 x 200)を追加します。

Photoshopのフォルダ名
300 x 250 bnr_300-250.jpg
↓
書き出し後のファイル名
bnr_300-250.jpg

レクタングルバナー(300 x 250)と同じ比率の量産は、
ファイルごとにカンマ(,)で区切ると、自動で拡大縮小しながらサイズ展開が可能となります。

Photoshopのフォルダ名
bnr_300-250.jpg,336 x 280 bnr_336-280.jpg,600 x 500 bnr_600-500.jpg80%
↓
書き出し後のファイル名
bnr_300-250.jpg
bnr_336-280.jpg
bnr_600-500.jpg

※書き出し時にエラーとなる場合は、同じファイル名になっていないか確認してください。サイズパラメーターだけ変更しても、書き出し後のファイル名が同じであればエラーとなります。

最短ポイント3
クラウドドキュメントのアセット生成

3つ目の最短ポイントはクラウドドキュメントのアセット生成です。

ファイル　＞　生成　＞　画像アセット

をクリックすると、以下のフォルダに自動で量産バナーが生成されます。

Windows
C:\Users\yourname\Documents\Adobe\Photoshop Cloud Associates
macOS
/Users/yourname/Documents/Adobe/Photoshop Cloud Associates

最後にバナーサイズや容量を確認しながら、
画質とサイズパラメーターを微調整して完成となります。

まとめ

いかがでしたでしょうか？

• スマートオブジェクトで写真を一元管理
• 同じ比率のサイズ展開はパラメーターを活用して自動作成
• アセット生成を活用して自動書き出し

この3つを活用するだけで、
今までより半分ぐらいの工数で量産することが可能となります。

ぜひご活用いただければと思います。