静岡・浜松の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 2023/02/082023年度版 Google PageSpeed Insights(ページスピードインサイト)を使って読み込み速度を改善したら、何点になるのかチャレンジしてみた

  • posted on 2023/12/07迫る、浜松市の行政区再編(中央区、浜名区)。住所変更だけじゃない。Webサイトで必要な対応とは?

  • posted on 2022/10/21DockerでPHP環境を簡単に構築してみよう

  • posted on 2020/06/10ノンデザイナーのためのデザイン基本ルール ~文字編 文字詰め~

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

おすすめタグ

ECサイト 動画 HTML レクリエーション 創業記念日 ASP SSL PageSpeed Insights スピードアップデート 動画広告 ECcube wordpress 構造化マークアップ カスタマイズ Transport Layer Security 保護されていない通信 HowTo Chrome TLS クリック率 ハウツー ノンデザイナー リッチリザルト Instagram広告 文字 デザイン フォント Core Web Vitals 自作PC 初心者 構造化データ Facebook広告 リモート iPhone CSS 動画制作 AMP 広告 HTML5広告 Google Chrome videoタグ GoogleMapsPlatform Zapier Facebook Audience Network Google my map ワイヤーフレーム Google for jobs Googleしごと検索 撮影 iPad 一眼レフカメラ 写真 自作パソコン ウェブサイト翻訳 Adobe XD PC組み立て XMLサイトマップ PHP タスクランナー gulp.js node.js WebP画像 楽天GOLD スマートフォン用新店舗トップページ Threads(スレッズ) Instagram Adobe Firefly 画像生成AI アセット生成 生成塗りつぶし Adobe MAX Japan 2023 UI UX Adobe Stock アンチックフォント Adobe Express Webマーケティング デジタルマーケティング 文字コード 符号化文字集合 生成拡張 Google Search Console レクタングルバナー 画質パラメーター shopify ショッピングサイト ショッピファイ Shopify使い方 WebP リモートワーク remotework プラグイン IE コーディング サイズパラメーター モダンブラウザ gridレイアウト object-fit aspect-ratio any-hover docker Photoshop クラウドドキュメント ディスプレイ広告 スマートオブジェクト gap Unicode(ユニコード)

Top