静岡・浜松のWebマーケティング|株式会社シーエムエー

お問い合わせ

CMA BLOG

株式会社シーエムエー ホーム > CMA BLOG > ネット広告 > Photoshopのクラウドドキュメントを活用して、最短でディスプレイ広告バナーを量産する方法!

ネット広告 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つを活用するだけで、
今までより半分ぐらいの工数で量産することが可能となります。

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

  • このエントリーをはてなブックマークに追加

人気の記事ランキング

  • posted on 2019/02/042019年1月Google for Jobsが日本上陸!Googleしごと検索で上位表示させる構造化マークアップの実装方法とは?

  • posted on 2021/06/16Google PageSpeed Insights(ページスピードインサイト)を使って読み込み速度を改善したら、何点になるのかチャレンジしてみた

  • posted on 2021/07/08初心者の私にもできた。自作パソコンの組み立てに挑戦してみた!

  • posted on 2018/04/11構造化マークアップはSEO対策に効果があるのかやってみた

  • posted on 2021/02/10インスタグラムが突然表示されなくなった!最新のInstagram Graph API(v9.0)を使って再表示する方法とは

Top