Photoshopバナーの作り方｜5手順でサイズ設定から書き出しまで

Photoshopでバナーを作りたいけれど、新規ドキュメントのサイズ設定で手が止まる、生成塗りつぶしの使いどころが分からない、書き出しで画質とファイル容量のどちらを取るか迷う。つまずく場所は、だいたい決まっています。

この記事では、Photoshopバナーの作り方を、新規ドキュメントの設定から生成塗りつぶしでの素材作成、Web用の書き出しまで5つの手順でまとめました。主要媒体のサイズ早見表と、Google広告の150KB制限に収めるコツも載せています。上から順に進めれば、はじめてでも1枚を完成まで持っていけます。

この記事でわかること

• Web用の新規ドキュメントの作り方（カラーモード・解像度・サイズ）
• Google広告など主要媒体のバナーサイズ早見表と入稿規定
• 生成塗りつぶし・生成拡張で素材を作り、サイズ違いに広げる手順
• JPGとPNGの選び方と、ファイル容量を150KB以内に抑える方法
• Photoshopでの制作が向く場面と、量産には手数がかかる理由

💡 この記事で解説する作業は、Tasky ならURLを入れるだけで数分で完了します。7日間無料トライアル（クレカ登録不要）。

Photoshopバナーの作り方｜まず全体の流れを押さえる

Photoshopバナーの作り方は、次の5つの手順に分けられます。

1. 新規ドキュメントとサイズの設定
2. 背景・レイアウトの土台づくり
3. 生成塗りつぶしで素材を用意する
4. キャッチコピーとあしらいを入れる
5. Web用に書き出す

デザインの工程はこのうち2〜4です。設定と書き出しを先に押さえると、作業全体が速くなります。

TASKY GENERATED生成例の生成例

URLを入れるだけで、この品質のバナーが3案。

7日間無料トライアル。月額9,800円から。

Taskyを見る →

手順1｜新規ドキュメントとバナーサイズを設定する

バナーの出来は、最初のサイズ設定と入稿規定の確認でほぼ決まります。配信先が決まらないまま作ると、あとからサイズ変更で作り直しになります。

Web用の新規ドキュメント（RGB・72ppi）

「ファイル」→「新規」で、単位をピクセルにします。カラーモードはRGB、解像度は72ppiで問題ありません。Web上の見え方は解像度ではなく縦横のピクセル数で決まるため、72ppiより上げても表示は変わらず、容量だけ増えます。印刷物のCMYK・350dpiとは設定が違う点に注意してください。

主要媒体のバナーサイズ早見表

Google広告のアップロード画像広告は、形式がGIF・JPG・PNG、1ファイル150KBまでと決まっています（Google広告ヘルプ）。同じくGoogle広告で最も一般的なサイズは1200×628と1200×1200です（Google広告ヘルプ）。ディスプレイでよく使う定番サイズは次の通りです。

媒体ごとに対応サイズと容量の上限は違います。入稿前に各媒体の最新仕様を確認してください。全サイズは 広告バナーサイズの早見表 にまとめています。

アートボードで複数サイズをまとめて扱う

複数サイズを作るなら、アートボード機能を使うと1つのファイルで並べて管理できます。共通のロゴやあしらいを一度に差し替えられるので、配信面ごとの作り分けが速くなります。

手順2｜背景とレイアウトをガイドで組む

サイズを決めたら、文字と要素を置く位置の目安を先に引きます。

ガイドで余白とセーフゾーンを決める

「表示」→「新規ガイド」で、上下左右に10〜20px程度の余白ガイドを引きます。文字やロゴをふちギリギリに置くと、配信面によっては見切れます。重要な情報は余白の内側（セーフゾーン）に収めてください。視線は左上から入るので、キャッチコピーは左上か中央に置くと読まれやすくなります。レイヤーは背景・画像・文字・ロゴで分けておくと、あとの修正が楽になります。

手順3｜生成塗りつぶしで素材を作る・足りない部分を広げる

Photoshopの生成塗りつぶしは、Adobe Firefly搭載のAI機能です（Adobe Blog）。選択範囲に対して指示文を入れると、背景を足したり、不要なものを消したり、素材そのものを作れます。

生成塗りつぶしの基本操作

1. 選択ツールで、素材を入れたい範囲や消したい範囲を選ぶ
2. ツールバーの「生成塗りつぶし」を押す
3. 作りたいものを短い言葉で入力する（日本語で可）
4. 「生成」を押し、出てきた候補から選ぶ

不要なものを消すときは、対象より少し大きめに選択すると背景になじみやすくなります。生成にはインターネット接続が必要です。

生成拡張でサイズ違いに合わせる

横長で作った素材を正方形に変えたいときは、生成拡張（Generative Expand）が使えます。カンバスを広げてから空いた部分を生成すると、背景を自然に足した状態でサイズを変えられます。トリミングで被写体が切れる問題を避けられます。

商用利用と生成クレジットの注意点

Fireflyで生成したコンテンツは商用利用できます（Adobe Blog）。生成塗りつぶしなどの標準機能は、1回の生成につき1クレジットが基本です（Adobe公式ヘルプ）。Creative Cloud Proなどのプランでは標準生成が無制限で、クレジットはプレミアム機能でのみ減ります。クレジットは毎月リセットされ、繰り越されません。業務で多く回す場合は、プランの上限を先に確認してください。

### 毎週何十枚も作るなら

>

生成塗りつぶしは1枚を作り込むのに向きますが、配信面ごとに何十枚も量産するには手数がかかります。Tasky ならURLを入れるだけで、訴求設計からサイズ展開まで自動化できます。月額9,800円〜。無料で7日間試す

手順4｜キャッチコピーとあしらいを入れる

素材ができたら、文字情報を載せます。ここで要素を詰め込みすぎると、何を言いたいバナーか分からなくなります。

文字は要素を絞って視認性を優先する

バナーがユーザーの目に触れる時間は短く、1枚で伝えられるメッセージは1つです。載せる文字は、キャッチコピー・補足・CTAボタンの3要素までに絞ってください。キャッチは短いほど伝わります。文字と背景のコントラストを十分に取り、小さいサイズでも読めるかを縮小表示で確認します。訴求の決め方は バナー広告の作り方 の企画パートが参考になります。

手順5｜Web用に書き出して容量を抑える

最後に、配信できる画像形式で書き出します。編集用のデータ（PSD）は別に残しておくと、後で直せます。

JPGとPNGの選び方・150KBに収める

「ファイル」→「書き出し」→「書き出し形式」を開きます（旧バージョンの「Web用に保存」に相当）。写真が主役のバナーはJPG、ロゴや文字・図形をシャープに見せたい場合や背景を透過したい場合はPNGを選びます。色がくすむのを防ぐため、sRGBに変換する設定をオンにします。

Google広告のディスプレイは1ファイル150KBまでです（Google広告ヘルプ）。超えるときは、JPGの画質を60〜80%に下げる、画像の情報量を減らす、不要なレイヤー効果を削る、の順で調整します。プレビューでファイル容量と画質を見比べながら書き出してください。

Photoshopでのバナー制作が向く場面・向かない場面

Photoshopは、1枚をこだわって作り込む、独自の加工や合成をする、細かいレタッチをする、といった作業に向いています。生成塗りつぶしで素材作成まで1本で完結できるのも強みです。

一方で、同じ訴求を配信面ごとに何十枚も展開する、毎週A/Bテスト用のパターンを量産する、といった使い方には手数がかかります。1枚ずつ手で作る前提の道具だからです。サイズ違いへの展開を効率化したいなら バナーリサイズの方法、ツールの選び分けは バナー作成ソフトの比較 が参考になります。

量産とサイズ展開を自動化するなら、Taskyが選択肢になります。URLを入れると商材を分析し、訴求設計からバナー生成、各配信面サイズへの展開までを数分で行います。外注のサイズ展開は1枚あたり2,000〜5,000円が相場ですが、Taskyは追加クレジットのみです（product.md）。

よくある質問

Q1. Photoshopバナーの作り方は初心者でも実践できますか？

できます。新規ドキュメントのサイズ設定、文字入れ、書き出しの3点を押さえれば、1枚は作れます。生成塗りつぶしを使えば、素材の用意もPhotoshopの中で完結します。

Q2. 生成塗りつぶしで作ったバナーは商用利用できますか？

できます。Adobe Fireflyで生成したコンテンツは商用利用が可能です（Adobe公式）。ただしベータ表記の機能やプランの条件は変わることがあるため、業務利用の前に最新の利用規約を確認してください。

Q3. バナーのファイルサイズはどのくらいに抑えるべきですか？

配信先の規定に合わせます。Google広告のアップロード画像広告は1ファイル150KBまでです（Google広告ヘルプ）。JPGの画質調整で容量を落とすのが基本です。

Q4. Web用の解像度は72ppiで良いですか？

72ppiで問題ありません。Web上の見え方は縦横のピクセル数で決まり、解像度を上げても表示は変わりません。印刷用とは設定が異なります。

まとめ

Photoshopバナーの作り方を、5つの手順で振り返ります。

• 新規ドキュメントはRGB・72ppi。配信先のサイズと150KB規定を先に確認する
• 生成塗りつぶし・生成拡張で素材を作り、サイズ違いに広げる（商用利用可・1生成1クレジットが基本）
• 書き出しはJPG/PNGを使い分け、150KB以内に収める
• 1枚を作り込むならPhotoshop、量産とサイズ展開の自動化なら専用ツール

1枚ずつ丁寧に作るなら、Photoshopは頼れる道具です。毎週の量産とサイズ展開に追われているなら、設計から展開までを自動化する方法もあります。

## まずは試してみませんか

>

この記事の手順を毎月何十枚分も繰り返すのは、工数がかかります。Tasky はURLを入れるだけで、設計からバナー生成、サイズ展開まで数分で完了します。

>

7日間無料トライアルを始める（所要3分・クレカ登録不要）