Photoshopでバナーを作るには、キャンバス作成から書き出しまで5つのステップで完結します。Web用は72dpi・RGBが基本設定で、PNG/JPGの使い分けまで押さえれば初案件にも対応できます。この記事では制作フロー全体を順に解説します。
▶ 3日で初案件PR
この記事でわかること
1枚目のバナーを1〜2時間で納品レベルに仕上げる5ステップの制作フローを習得できます。レイヤーマスクを使った非破壊編集でクライアントの修正依頼に即対応できる体制を整えられます。PSD設計の5ルールを実践することで修正対応の時間を半分以下に削減できます。
今のデザインの仕事で、一番近い悩みは？
この記事の結論
Photoshopでバナーを作る最短ルートは「サイズ決定→素材配置→テキスト追加→装飾→書き出し」の5ステップです。Web用の基本設定は解像度72dpi・RGBカラーの一択で、ここを押さえれば初心者でも1〜2時間で納品可能な品質に到達できます。フリーランス案件では修正対応を見越したレイヤー設計が採算を左右するため、制作フローと並行して管理の型も身につけてください。
今日やるべき1つ
Photoshopを開き、幅728px・高さ90px・解像度72dpi・RGBカラーで新規ファイルを作成してください。この設定を1度体で覚えれば、以降の全工程がスムーズに進みます（所要時間：3分）。
状況別ショートカット
| 状況 | 読むべきセクション | 所要時間 |
| キャンバス設定で迷っている | バナーサイズは用途別に5種類で決める | 3分 |
| 画像の切り抜きができない | 背景切り抜きはレイヤーマスクで3分以内に完了 | 5分 |
| 文字が野暮ったく見える | テキスト装飾は3つの優先順位で仕上げる | 5分 |
| 書き出し形式で迷っている | 書き出しはPNG/JPGの2択で判断する | 3分 |
| 修正対応が遅くて困っている | フリーランス向けPSD設計は5ルールで管理する | 5分 |
バナーサイズは用途別に5種類で決める
サイズは媒体ごとに異なりますが、よく使う5種類を把握しておけば大半の案件に対応できます。制作の最初の工程であるサイズ決定を素早く終わらせることが、その後の全工程を効率化するカギです。
Webバナーは72dpi・RGBが絶対的な基本
Web表示を前提とするバナーは、解像度72dpi・カラーモードRGBが基本設定です。印刷向けの350dpi・CMYKとは根本的に異なり、Web用でCMYKを設定すると色味がモニターで正確に再現されません。新規ファイル作成画面で「Web」プリセットを選ぶと、この設定が自動で適用されます（Adobe公式：バナーをデザインしてみよう）。「Web=72dpi・RGB」の組み合わせは、作業開始前に一度確認するだけでよく、以降は意識する必要がありません。
用途別の標準サイズは5パターンで網羅できる
よく使われるWebバナーのサイズは、横長レクタングル728×90px（リーダーボード）、中型レクタングル300×250px（ミディアムレクタングル）、縦長スカイスクレイパー160×600px、スマートフォン向け320×50px、SNS汎用の1200×628pxの5種類です。クライアントからサイズ指定がない場合は、300×250pxが最も掲載面が多く汎用性が高いため第一候補として提案してください。サイズを先に決定することで、その後のレイアウト設計が一気に具体化します。なお、フリーランスの開業資金と同様に、制作環境への初期投資額も事前に把握しておくと、案件の採算計算がスムーズです。
媒体ガイドラインの確認は制作着手前に必ず行う
Google広告やYahoo!広告など媒体ごとに、ファイルサイズの上限（例：150KB以下）や使用可能なフォーマットが定められています。制作を終えてからガイドライン違反に気づくと手戻りが大きく、フリーランス案件では無償で修正対応せざるを得なくなります。着手前に出稿先の仕様を確認するのは、採算を守るための最低限の作業です。
CHECK
▶ 今すぐやること: 担当案件のバナーサイズと出稿媒体のガイドラインをブラウザで確認し、Photoshopの新規ファイルダイアログに数値を入力してください（3分）
Q: バナーのサイズを複数作る場合、ファイルはどう管理すればよいですか？
A： Photoshopのアートボード機能を使うと、1つのPSDファイル内に複数サイズを並べて管理できます。修正が1回で全サイズに反映されるため、フリーランス案件での作業時間を大幅に削減できます。
Q： クライアントからサイズ指定がなかった場合、どう対応すべきですか？
A： 300×250px（ミディアムレクタングル）を基準に制作し、追加で728×90pxを提案するのが実務的な対応です。事前に「追加サイズ展開は別途費用が発生する」と書面で確認しておいてください。
背景切り抜きはレイヤーマスクで3分以内に完了
画像の切り抜きはクイック選択ツールとレイヤーマスクの2ステップで処理できます。習得するとバナー制作の幅が一気に広がります。
クイック選択ツールで選択範囲を30秒で作る
クイック選択ツール（W）を選択し、切り抜きたい被写体の上をドラッグするだけで選択範囲が自動生成されます。精度を上げたい場合は、オプションバーの「被写体を選択」ボタンを使うとAIが自動で輪郭を認識します（Adobe公式：バナーをデザインしてみよう）。髪の毛など細かい部分は「選択とマスク」ワークスペースで仕上げると、手動で1本ずつ選択する必要がなくなります。なお、画像トリミング無料サイトを補助ツールとして活用すれば、Photoshopでの前処理を省略できる場面もあります。
レイヤーマスクで元画像を破壊しない切り抜きを行う
選択範囲を作ったあと、レイヤーパネル下部の「レイヤーマスクを追加」アイコンをクリックすると、選択範囲外が非表示になります。このとき元の画像データは消えておらず、マスクを編集すれば何度でも切り抜き範囲を変更できます。直接消しゴムで消す方法と比べると、「やっぱり元に戻して」という修正依頼に即座に対応できる点が大きな違いです。フリーランスとして案件を継続受注するには、この非破壊編集の習慣が直接的な信頼につながります。
選択範囲の精度は「選択とマスク」で仕上げる
レイヤーマスク適用後に境界線がギザギザになっている場合は、マスクのサムネイルをダブルクリックして「選択とマスク」を開いてください。「スマートラジウス」を有効にし、境界線調整ブラシで髪の毛や毛並みの部分をなぞると、背景と被写体の境界が自然なグラデーションで仕上がります。この手順を省略すると、Web上でバナーを表示したときに切り抜きの粗さが目立ち、制作物の品質評価が下がります。
CHECK
▶ 今すぐやること: 手元の画像をPhotoshopで開き、クイック選択ツール→「被写体を選択」→レイヤーマスク追加の3ステップを試してください（5分）
Q: 背景が白い商品写真の切り抜きはどうすれば早いですか？
A： 「選択範囲→色域指定」で白色を選択し、反転してからレイヤーマスクを追加するのが最速です。背景がシンプルな場合は30秒以内に完了します。
Q： 切り抜いたあとに背景のにじみが残る場合はどうしますか？
A： レイヤーマスクを選択した状態で「境界線調整ブラシ」を使い、にじみが残っている部分を再トレースすると解消できます。「エッジを調整」のコントラスト値を上げることでもシャープになります。
バナーの制作フローは5ステップで設計する
全体の流れを5ステップで把握しておけば、実際の作業中に迷いが生じにくくなります。工程ごとに集中する内容を切り分けることが、制作時間を最短にするための核心です。
ステップ1から3は「骨格作り」に集中する
まず参考デザインを3〜5点収集してレイアウトの方向性を決め（ステップ1）、次に素材を写真・ロゴ・見出しテキスト・CTAの4要素に分けて整理します（ステップ2）。キャンバスを作成したらガイドを引いて余白を決め、素材を配置します（ステップ3）。この段階では色や細かいデザインに手をつけず、配置だけに集中することが時間効率を高めます。最初からデザインを作り込もうとすることが、作業時間が膨らむ最大の原因です。
ステップ4と5で「伝わるデザイン」に仕上げる
テキストを追加して視認性を高める装飾を施し（ステップ4）、最後に余白・誤字・全体バランスを確認して書き出します（ステップ5）。ステップ4では「一番伝えたいメッセージを最大サイズで配置する」という原則を守るだけで、素人感が一気に解消されます。世界観の美しさより「見た人が次の行動を取りやすいか」を優先する設計思想を持つことが、デザインの仕上がりより重要です（Photoshop × バナー制作練習記録）。作業効率を上げる方法として、工程ごとに集中対象を明確にする習慣をつけることが、フリーランスの時間単価向上に直結します。
参考デザインを集める工程は省略できる場合がある
参考デザイン収集はPinterestやBehanceでスムーズに行えますが、クライアントから既存の広告素材や競合他社のバナーURLを渡されている場合は省略できます。すでに方向性が決まっているにもかかわらず参考収集に時間をかけるのは非効率です。フリーランスとして時間単価を上げるには「やらなくてよい工程の見極め」が採算性を直接左右します。
CHECK
▶ 今すぐやること: 現在の案件または練習用バナーで、素材を写真・ロゴ・テキスト・CTAの4フォルダに分けて整理してください（5分）
Q: 制作前に参考デザインを集める時間がない場合はどうしますか？
A： 競合他社のバナーや、クライアントが「こういう雰囲気にしたい」と指定したURLを参考にするのが最速です。1〜2点あれば制作を始められます。
Q： レイアウト設計はスケッチするべきですか？
A： 紙に描く必要はありません。Photoshopのガイド機能でカラムを引くか、グレーの矩形シェイプで要素のおおまかな位置を先に置いておく「ワイヤーフレーム配置」が効率的です。
テキスト装飾は3つの優先順位で仕上げる
文字を入れてもデザインが野暮ったく見える原因は、ほぼ3点に集約されます。「フォントのサイズ差がない」「色のコントラストが低い」「余白が詰まっている」の3点を順番に解消するだけで、仕上がりが別物になります。
文字の優先順位をフォントサイズで明確に示す
バナー内のテキストは「見出し・サブテキスト・CTA」の3階層に分け、それぞれのサイズ比を「4:2:1」程度で設計してください。見出しが30pxなら、サブテキストは15px前後、CTAは8〜10px程度が目安です。すべてのテキストが同じサイズで並んでいると、読者の視線が定まらず「どこを見ればいいかわからないバナー」になります。テキストのサイズ差そのものが視線誘導の役割を果たします。
視認性向上の装飾は「影・縁取り・帯」の3択で対応する
テキストの視認性を高める方法は、ドロップシャドウ（影）、境界線（縁取り）、半透明の帯（テキスト背景）の3種類で大半のケースに対応できます。レイヤースタイルパネルから適用でき、数値を変えるだけで印象が大きく変わります（Adobe公式ブログ：ロゴ、ショップカード、バナー制作テクニック）。3種類すべてを同時に使うと過剰になるため、背景色に合わせて1〜2種類に絞ることが鉄則です。
ワープテキストとフォント変更は後工程で使う
見出しに動きをつけたい場合は、テキストツール選択中にオプションバーの「テキストのワープ」アイコンから弧・フラッグ・波などのスタイルを選べます。ワープテキストはフォントの読みやすさを損ないやすいため、まず通常のテキストで視認性を確保してから最後に適用するのが正しい順序です。フォントはまず太さの異なるウェイトを同一ファミリー内で使い分けることで、統一感を保ちながらコントラストを出せます。画像文字入れ無料ツールも参考にしながら、文字入れの基本的な考え方を体系的に整理しておくと制作効率が上がります。
CHECK
▶ 今すぐやること: 現在制作中のバナーの見出しテキストを選択し、フォントサイズを現状の1.5倍に変更して視認性の変化を確認してください（2分）
Q: フォントは何を使えばよいですか？
A： Noto Sans JP（Googleフォント、無料）は日本語対応・商用利用可・視認性が高く、初心者に最も扱いやすいフォントです。ウェイトがLight〜Blackまで揃っているため、1ファミリーだけで階層設計が完結します。
Q： 文字の色は何色にすればよいですか？
A： まず背景色との明度差を確認してください。白背景なら濃いグレー（#333333程度）、暗い背景なら白（#FFFFFF）が基本です。色相よりも明度のコントラストが視認性を決定します。
PR提供: 日本デザインスクール（デザスク）
バナーの自己診断を3分で判定する
完成したバナーが案件提出レベルに達しているかどうかは、以下の3つの質問で客観的に判定できます。
Q1: バナーを3秒間見たときに、一番伝えたいメッセージが読み取れますか？
Yesの場合 → Q2へ進んでください。
Noの場合 → 見出しのフォントサイズを現状の1.5倍以上に拡大し、他のテキストとのサイズ差を明確にしてください。Result Cです。
Q2: 画像の切り抜き部分やテキストの縁に、背景との不自然なにじみがありますか？
Yesの場合 → 「選択とマスク」でエッジを再調整してください。Result Dです。
Noの場合 → Q3へ進んでください。
Q3: 書き出したファイルのサイズが、出稿媒体の上限（多くの場合150KB）以内に収まっていますか？
Yesの場合 → Result Aです。基本品質はクリアしています。
Noの場合 → 書き出し設定で品質を80〜85%に下げるか、PNGからJPGに変更してファイルサイズを削減してください。Result Bです。
Result A: 提出レベルに到達しています。クライアントへの確認依頼に進んでください。
Result B: ファイルサイズのみの問題です。書き出し設定を調整して再書き出しすれば完了します（所要時間：2分）。
Result C: 視認性が最優先課題です。テキストサイズの見直しを先に行ってください（所要時間：10分）。
Result D: 切り抜き品質の改善が必要です。「選択とマスク」での仕上げ処理を行ってください（所要時間：5〜10分）。
CHECK
▶ 今すぐやること: 完成したバナーを3秒間見て「何が伝わるか」を声に出して確認してください。言語化できない場合は視認性の見直しが必要なサインです（3分）
Q: 自分では良く見えても、クライアントに修正を求められることが多いです。なぜですか？
A： 制作者は細部に慣れてしまい、全体の第一印象を客観的に見られなくなります。書き出しファイルを別ウィンドウで開き、実際の掲載サイズに縮小表示して確認する習慣をつけることで、クライアント目線に近い評価ができるようになります。
Q： 複数のバナーサイズを展開する場合、品質のばらつきを防ぐにはどうすればよいですか？
A： マスターとなるPSDでデザインを確定させてから、各サイズ用のアートボードまたはファイルにコピーして調整する方法が最も効率的です。コピー元を常に1つに保つことで修正の一貫性を維持できます。
書き出しはPNG/JPGの2択で判断する
書き出し形式の選択は、透過の有無とファイルサイズの2つの基準だけで判断できます。それ以上複雑に考える必要はありません。
PNGは透過必須のバナーと品質優先の静止画に使う
PNG形式は背景が透過しているバナー、ロゴを含む白背景以外のバナー、テキストの鮮明さを最優先したいケースに適しています。ファイルサイズはJPGより大きくなりますが、圧縮による画質劣化がないため品質を落としたくない素材に向いています。「書き出し形式→Web用に保存（従来）」からPNG-24を選ぶと透過を保持したまま書き出せます。
JPGは写真主体のバナーとファイルサイズ制限がある媒体に使う
写真やグラデーションが主体のバナーでは、品質85〜90%のJPGがファイルサイズと画質のバランスが最も優れています。Google広告の150KB制限など、媒体のファイルサイズ上限を超えそうな場合はJPGで品質を80%程度まで下げることで対応できます（Photoshopでバナー広告デザインの作り方を具体的に解説）。品質70%以下に下げると圧縮ノイズが目立ち始めるため、70%を下限の目安にしてください。画像圧縮で画質落とさない方法も参考にしながら、軽量化の手順を体系的に整理しておくと納品作業が効率化されます。
WebPは採用が広がっているが媒体確認が必要
WebP形式はJPGと同等の画質でファイルサイズを約30%削減できる次世代フォーマットです。Google広告やSNS広告の一部では対応が進んでいますが、すべての媒体でサポートされているわけではないため、出稿前に媒体の対応状況を確認してください。対応が確認できる場合は積極的に採用すると、ファイルサイズ制限をクリアしやすくなります。
CHECK
▶ 今すぐやること: 完成したバナーを「ファイル→書き出し→Web用に保存（従来）」から開き、PNG-24またはJPG品質85%のどちらかで書き出してファイルサイズを確認してください（3分）
Q: 書き出し後にバナーの色味がモニターと違って見えます。なぜですか？
A： カラープロファイルの埋め込み設定が原因のことが多いです。「Web用に保存」ダイアログでsRGBカラープロファイルを変換して埋め込む設定にすることで、ほとんどの環境で色味が一致します。
Q： 「書き出し形式」と「Web用に保存」はどちらを使えばよいですか？
A： バナーなどのWebグラフィックは「Web用に保存（従来）」を使うと、ファイルサイズとプレビューを確認しながら書き出せるため実用的です。「書き出し形式」はPhotoshop CC 2015以降の機能でより高速ですが、プレビュー確認の面では「Web用に保存」が有利です。
フリーランス向けPSD設計は5ルールで管理する
修正のたびに時間がかかる、どのレイヤーを触ればいいかわからない、という悩みはレイヤー設計の問題です。5つのルールを守るだけで、修正対応の時間を半分以下に削減できます。
ルール1: レイヤーは素材カテゴリ別にグループ化する
「背景」「画像素材」「テキスト」「装飾・シェイプ」の4グループを最上位に置き、その中に個々のレイヤーを入れる構造が標準的です（Photoshopで作る実務バナー：レイヤー設計・書き出し・再利用の型）。グループを折りたたんだ状態でも全体構造が把握できるため、クライアントから修正依頼が入ったときの対象レイヤーを30秒以内に特定できます。レイヤーを整理していないPSDは、自分が作ったものでも1週間後には迷子になります。
ルール2: レイヤー名は英語または短い日本語で命名する
「レイヤー1」「コピー (2)」などのデフォルト名は使用禁止です。「bg_photo」「headline_text」「cta_button」のように素材の内容を示す名前に変更しておくことで、後から見返したときの可読性が大幅に向上します。納品後にクライアント側でファイルを扱う場合でも、名前が整理されていると信頼性の評価につながります。
ルール3: スマートオブジェクトを使って画像を配置する
画像を「埋め込みを配置」または「リンクを配置」で挿入すると、スマートオブジェクトとして配置されます。これにより元画像を劣化させずに拡縮でき、後からサイズを変更しても画質が保たれます。直接ドラッグ&ドロップで配置した通常レイヤーを何度も拡縮すると画質が劣化するため、スマートオブジェクトを使わない方法は実務では避けてください。
ルール4: 編集用PSDと書き出し用ファイルを必ず分ける
PSDファイルは編集専用として保管し、クライアントへの納品や媒体入稿には書き出したJPG/PNGを使います。「PSDを直接入稿してほしい」という依頼がある場合を除き、PSDをそのまま納品することは原則として避けてください。PSDに含まれるレイヤー情報・フォント情報は、相手の環境では正常に開けない場合があります。著作権とはわかりやすくの観点からも、納品物の管理方法と権利帰属については事前に契約書で明確にしておくことが重要です。
ルール5: 修正履歴はバージョン番号をファイル名に付ける
「banner_v1.psd」「banner_v2.psd」のようにバージョン番号をつけてファイルを都度保存することで、「やっぱり前のバージョンに戻したい」という修正依頼に即座に対応できます。クラウドストレージでの自動バージョン管理とは別に、手動でのバージョン管理は案件の安全弁として機能します。
「バナー制作の流れや単価の相場感は、実際に案件を受けながら掴んでいくもの」（無名フリーランスwebデザイナーのバナー単価と作り方）
CHECK
▶ 今すぐやること: 現在のPSDファイルのレイヤーパネルを開き、「背景」「画像素材」「テキスト」「装飾」の4グループフォルダを作成してレイヤーを振り分けてください（10分）
Q: クライアントからPSDの納品を求められたとき、フォントが相手の環境にない場合はどうすればよいですか？
A： 「文字→すべてのテキストレイヤーをラスタライズ」を実行してからPSDを書き出すと、相手の環境にフォントがなくても正常に表示されます。ただしテキスト編集ができなくなるため、ラスタライズ前のPSDを別途保管しておいてください。
Q： アートボード機能とPSDファイルの使い分けはどうすればよいですか？
A： 同一デザインの複数サイズ展開にはアートボード機能が有効で、デザインを変えながら複数バナーを制作する場合は別PSDで管理する方が混乱を防げます。
Photoshopバナー制作の実例は2パターンで比較する
実際にバナーを制作した経験者の記録を参照すると、初心者が陥りやすい分岐点が見えてきます。
ケース1（成功パターン）: 手順を先に学んでから制作に入ったケース
デザインスクールの初心者が、新規作成・保存・書き出しの手順を先に確認してから制作を始めた結果、1時間以内に提出可能な品質のバナーを完成させました。事前に手順を把握していたため、ツールの操作で迷う時間がほぼゼロになり、デザインの判断に集中できたことが成功要因です。
「初心者でも短時間で形にするための手順を先に覚えることで、ツール操作に悩む時間がなくなった」（初心者でも1時間でプロの仕上がりを目指す制作記録）
手順を確認せずにいきなりPhotoshopを開いて試行錯誤した場合、同じ品質に達するまでに3〜4時間かかる計算になります。
ケース2（失敗パターン）: 見た目にこだわって訴求目的を後回しにしたケース
バナー制作の練習中に、色や装飾に時間をかけすぎた結果、「見た目は整っているが何を伝えたいバナーなのか分からない」という仕上がりになりました。デザインの統一感を先に追求しようとするあまり、最終的なバナーのゴール（クリックを促すこと）を意識できていなかったことが原因です。
「世界観だけでなく、行動を促す目的を意識して設計する視点が重要だと気づいた」（Photoshop × バナー制作練習記録）
最初に「このバナーを見た人に次にしてほしい行動は何か」を決めてから制作することで、装飾の判断基準が明確になり、修正回数を半分以下に抑えられます。
CHECK
▶ 今すぐやること: 制作開始前に「このバナーを見た人に次にしてほしい行動（クリック・購入・登録）」を1文で書き出してください（2分）
Q: 練習用バナーを作る場合、どんな素材を使えばよいですか？
A： Adobe Stockの無料素材（Adobeアカウント保有者向け）、またはUnsplash・Pixabayの商用利用可能な無料素材が実務に近い練習素材として使いやすいです。ダウンロードから配置まで10分以内に完了します。
Q： 練習バナーをポートフォリオとして使えますか？
A： 無料素材を使って制作した練習バナーは、商用利用の許諾を確認した上でポートフォリオに掲載できます。「架空クライアント」のバナーとして設定し、コンセプトを添えて掲載すると評価が高くなります。
Photoshopバナーは5ステップで完成させる
Photoshopでバナーを作る最短ルートは「サイズ決定→素材配置→テキスト追加→装飾→書き出し」の5ステップで完結します。Web用の基本設定である72dpi・RGBを最初に固定し、レイヤーマスクによる非破壊編集とPSD設計の5ルールを習慣にすることで、フリーランスとして継続受注できる品質と効率を同時に実現できます。
2枚目・3枚目と数を重ねるごとに制作時間は半分以下になります。まず1枚を完成させることが、フリーランスとしてのバナー案件への最初の一歩です。
| 状況 | 次の一歩 | 所要時間 |
| まだ1枚も作ったことがない | 300×250px・72dpi・RGBで新規ファイルを作成する | 3分 |
| 切り抜きがうまくいかない | クイック選択ツール→被写体を選択→レイヤーマスクを試す | 5分 |
| 書き出しサイズが制限オーバー | JPG品質85%で再書き出ししてファイルサイズを確認する | 2分 |
| PSD設計が整理できていない | レイヤーを4グループに振り分ける作業から始める | 10分 |
Photoshop バナー 作り方に関するよくある質問
Q: Photoshopがなくてもバナーは作れますか？
A： Adobe ExpressやCanvaなどのブラウザベースのツールでも基本的なバナーは作れます。ただしフリーランス案件ではPSD納品を求めるクライアントが多いため、Photoshopの習得が実務上の標準となっています。
Q： バナー1枚の制作時間の目安はどのくらいですか？
A： 初心者は2〜4時間、操作に慣れた段階で30〜90分が目安です。素材がすでに揃っている状態で、シンプルなレイアウトであれば30分以内に完成します。
Q： フリーランスでバナー案件を受けるために必要なPhotoshopのスキルレベルはどこからですか？
A： 新規ファイル作成・画像配置・テキスト追加・書き出しの4工程が一人でできれば、入門レベルの案件（バナーリサイズや文字変更）は受注可能です。レイヤーマスクと調整レイヤーを扱えるようになると、制作の幅と単価の両方が上がります。
【出典・参照元】
Adobe公式ブログ：ロゴ、ショップカード、バナー制作テクニック
Photoshopでバナー広告デザインの作り方を具体的に解説