バナーデザインお題20選【無料】想定時間つき・ポートフォリオ掲載OK

今日は駆け出しウェブデザイナーさんにむけて「バナーデザインのお題」を20個紹介します。

ハッシュタグや引用は不要です◎気軽に使ってもらえたら嬉しいです。

最終更新：2026年8月4日｜今月の更新：全お題に「想定時間」を追加しました。今後も配布素材・講師作例を順次追加していきます。

【開示】本記事で紹介しているWebデザインスクール「illume」は、当メディアを運営する株式会社design meが提供するサービスです。

INDEX目次開く ＋閉じる −

バナーお題一覧【全20本】

それでは、本題「バナーお題一覧」です＾＾

バナーお題の使い方ルール

お題はすべて架空の依頼です。安心して練習・公開できるように、掲載と権利まわりのルールをここにまとめました。

ポートフォリオ・SNSへの掲載について

完成した作品は、ポートフォリオやSNSに自由に掲載してOKです。ハッシュタグや引用の明記も不要です◎

1点だけお願いです。コンセプトやキャッチコピー（お題のテキスト）は筆者「まめ」が制作したものなので、お題自体をご自身が考えたと誤解させる見せ方は避けてください。「お題を使って制作した練習作品」であることが分かる形が安心です。

実在企業名・ロゴ・商用利用の扱い

お題に登場するサービス名・店舗名はすべて架空です。練習とポートフォリオ掲載の用途に限って利用OKで、作品をそのまま実案件・商用の制作物として転用することはできません。

使用する写真・イラストは必ずフリー素材を使ってください。フリー素材以外の画像を無断使用すると著作権侵害にあたります。

企業のロゴやアイコンの使用は、ガイドラインを遵守する必要があります。

ダウンロードの方法やガイドラインは公式サイトをチェックしてください。

以下に各公式サイトのリンクを貼ります。ダウンロードも同ページから可能ですよ◎

Facebook

X （旧Twitter）

LINE

Instagram

配布素材のライセンス

各お題で使える配布素材（画像セット）を現在準備中です。公開後は「このお題の練習・ポートフォリオ掲載に限り利用可・再配布不可」のライセンスで提供します。素材が揃ったお題から順次このページに追加していきます。

基本のバナーお題10本

まずは基本の10本。すべて「依頼内容・テキスト・使用画像・想定時間」まで指定しているので、実際の案件のように取り組めます。

例：１. 保護猫カフェのオープン告知

私が駆け出しの頃にポートフォリオに掲載していたオリジナルバナーのお題です☺️

依頼内容	バナー設置場所：地域の情報サイト ターゲット：30代の女性 イメージ：ベージュをベースに温かみのあるナチュラルな雰囲気 バナーサイズ：336×280（レクタングル）
テキスト	保護猫カフェオープン 4月7日（日）10:00←英語表記でもOK 夢丘駅徒歩1分 20匹以上のかわいい猫がお出迎えします 新しい家族に会いにきてね
画像	室内にいる猫の写真
想定時間	約2時間（初回制作の目安）

私が実際に掲載した画像と紹介文↓

コンセプトは「ほっこり」
保護猫カフェは営利目的と猫の支援を両立している場所ということで
来てくれる方に寄り添うようなデザインを心がけました。
制作時間：２時間
制作ツール：Illustrator・Photoshop

２. 占いのオンラインスクールの生徒募集

依頼内容	バナー設置場所：占いブログのサイト ターゲット：20〜30代の女性 イメージ：白を基調に紫やピンクを使用。怪しい感じはNG・爽やかな印象 バナーサイズ：468 × 60px
テキスト	占いオンラインスクール MyFortune（サービス名） 好きを副業に 基礎から実践まで独立するスキルを習得 無料体験レッスンはこちら
画像	女性が微笑んでいる写真
想定時間	約1時間（初回制作の目安）

３. 結婚相談所のオンラインイベント申し込み

依頼内容	バナー設置場所：婚活サイト ターゲット：25〜35才の女性 イメージ：ピンクと白をベースに可愛らしいイメージ。フォントは明朝体や筆記体など綺麗めな感じ。 バナーサイズ：300×250
テキスト	Online Bridal House（サービス名） Matching event ゆったり自宅で始める婚活 詳細はこちら 先着20名様 参加者限定特典あり 12月14日土曜日10:00〜12:00
画像	ウエディングドレスを着た女性の写真
想定時間	約1時間（初回制作の目安）

４. 英会話塾：短期講習の告知

依頼内容	バナー設置場所：公式サイト ターゲット：25〜40才の女性（小学生の子どもを育てるお母さん） イメージ：楽しそう＋親しみやすい雰囲気・カラフル バナーサイズ：300×250
テキスト	SmileyHappyEnglish 「英語で楽しく話そう」 短期集中レッスン3月12日（金）受付開始 各レッスン８名まで
画像	子どもが笑ってる写真
想定時間	約1時間30分（初回制作の目安）

５. ネイルサロン：定額コースキャンペーン

依頼内容	バナー設置場所：公式サイト ターゲット：20〜30代の女性 イメージ：シンプル・エレガントで落ち着いた印象 バナーサイズ：320×100
テキスト	ジェルネイル定額コース ハーフアート＋ストーンつけ放題 8,900円 サンプルを見てみる（Sample check）
画像	ジェルネイルをしている指先、または施術中の写真
想定時間	約1時間30分（初回制作の目安）

６. ヘアケアの新商品PR

依頼内容	バナー設置場所：公式サイト ターゲット：20〜30代の女性 イメージ：白・緑を使用＋オーガニック/自然。 バナーサイズ：336×280px（レクタングル）
テキスト	MOON TREATMENT（サービス名） 今日から変わる私の髪 7日間分サンプルプレゼント 応募はこちら
画像	女性の写真/ボトル
想定時間	約2時間（初回制作の目安）

７. 花屋：母の日のプレゼント

依頼内容	バナー設置場所：公式サイト ターゲット：20〜30代の女性 イメージ：ピンクをキーカラーに、写真が目立つように。大人可愛いシンプルな印象。 バナーサイズ：336×280（レクタングル） *例はサイズが異なります
テキスト	Mother’s Day お花とお菓子のギフトセット 配達日指定のご注文受付は5月8日土曜日23時まで
画像	お花とお菓子の写真
想定時間	約1時間30分（初回制作の目安）

８. 脱毛サロン：お友だち紹介キャンペーン

依頼内容	バナー設置場所：公式サイト ターゲット：20代の女性 イメージ：水色・爽やか（子どもっぽい印象はNG） バナーサイズ：300×250
テキスト	友だち紹介キャンペーン あなたもお友だちも最大20,000円キャッシュバック 夏前に自信の肌へ！ まずは無料カウンセリングから 対象期間：3月1日〜3月31日
画像	女性（２人以上）の写真
想定時間	約1時間30分（初回制作の目安）

９. パスタ専門店：期間限定メニューの告知

依頼内容	バナー設置場所：公式サイト ターゲット：25〜35才のカップル イメージ：落ち着いたイメージ。秋を感じられるといいな。 バナーサイズ：300×250
テキスト	秋の大感謝祭 秋野菜のパスタランチ 旨みたっぷりの絶品ソースと生パスタ、旬の食材を使って今年も再登場しました #大人の隠れ家 #一軒家レストラン #平尾グルメ
画像	パスタの写真
想定時間	約1時間30分（初回制作の目安）

10 . お弁当屋さん：スタッフ求人

依頼内容	バナー設置場所：親会社の公式サイト ターゲット：30〜40代の女性 イメージ：親しみやすい・楽しそうな雰囲気 バナーサイズ：336×280（レクタングル）
テキスト	お弁当のテイクアウト専門店：おてさげ 調理スタッフ募集中 土日休みOK　週２・５時間〜 まかない有り
画像	「調理」を連想できる女性の写真
想定時間	約2時間（初回制作の目安）

 もくじへ戻る

キャンペーンバナーお題10本

実務で発生頻度の高い「キャンペーン訴求」のお題です。割引率・期限・条件など、情報の優先順位を決める練習になります。

1. 飲食店（ビアガーデン）：LINE友達登録キャンペーン

2. 体操教室：友達紹介キャンペーン

3. ヨガ：春の入会キャンペーン

4. エアコンクリーニング：レビューキャンペーン

5. キャンプ用品店：新規会員登録キャンペーン

6. 家具：新生活応援キャンペーン

7. アパレル：会員限定セールキャンペーン

8. サウナ：3,000円オフキャンペーン

9. Wifi入会：キャッシュバックキャンペーン

10. ブログ添削：フォロー＆リツイートキャンペーン

講師の作例と講評

お題の中から、illume講師・柴田響の講評つきで「どこを判断すべきか」を解説します。作例画像は制作中で、完成し次第このセクションに追加します（講評の判断ポイントは先行公開）。

作例1：お題1「保護猫カフェのオープン告知」の判断ポイント

講評（illume講師・柴田響）：このお題の難所は336×280という小さい面積に日時・場所・情緒の3種類の情報を同居させることです。最初に決めるべきは「主役はどれか」。ここでは“会いに来てね”の情緒が主役なので、日付と駅名は読める最小サイズまで下げて構いません。ベージュ基調の指定は彩度を上げにくい制約なので、CTAだけ明度差で立てると全体の温度感を壊さずに視線を止められます。丸みのあるフォントを使う場合は、文字間を広めに取ると「ほっこり」が安っぽくなりません。

作例2：お題18「サウナ：3,000円オフキャンペーン」の判断ポイント

講評（illume講師・柴田響）：割引バナーは金額の数字が主役です。「3,000」を最大サイズに、「円OFF」を半分以下に落とすだけで訴求力が大きく変わります。配色はサウナの熱（暖色）と水風呂（ネイビー）の温冷コントラストが定番ですが、面積比は7:3程度に振り切ると迷いがなくなります。期限や適用条件は小さくても必ず入れてください。実務では条件の欠落がそのまま修正依頼になります。

バナー10本ノックの進め方

バナー練習は、ただ10枚作るよりも「何を伸ばすための1枚か」を決めて作る方が、ポートフォリオに載せやすくなります。

• 1〜3枚目：文字の強弱と余白を意識する
• 4〜6枚目：写真・イラスト素材の選び方を変えてみる
• 7〜8枚目：CTAボタンやキャンペーン感を作る
• 9〜10枚目：案件応募で見せる前提で、目的・ターゲット・工夫した点まで書く

「作ったけど、これをどう見せればいいか分からない…」という方は、バナー画像だけでなく、制作意図までセットで残しておくと提案文やポートフォリオに使いやすいです。

バナー10本ノックとして練習するなら、同じお題を少しずつ変えてみよう

10本すべてを完璧に作る必要はありません。まずは「同じ条件で何案か作ってみる」「色だけ変えて比べてみる」だけでも、バナーの見え方の違いがつかみやすくなります。

文字の見せ方で迷ったときは、タイトルのあしらいだけを別で練習しておくと、次のバナーにも使い回しやすいです。

バナー作成の準備と基本

バナーお題を選ぶポイント

 もくじへ戻る

このお題を「作品」に変えるなら、次はここをチェック

お題を選んだら、ただ作って終わりにするのは少しもったいないです。ポートフォリオに載せるなら、何の目的で作ったバナーか、誰に向けたデザインか、どこを工夫したかまで一言添えると、作品として見てもらいやすくなります◎

実績がない人のポートフォリオ作りで迷ったら、Webデザイン初心者向けのポートフォリオ記事も参考にしてみてください。作ったバナーを「見せる作品」にするコツをまとめています。

作ったあとに案件応募までつなげたい方は、ココナラ提案文の書き方もあわせて確認しておくと、練習から応募準備まで流れを作りやすいです。

ココナラでバナー制作を出品してみたい方は、初心者がココナラでWebデザイン案件を取るまでの流れもあわせて読むと、練習後に何を準備すればいいかイメージしやすいです。

バナー作成の事前準備（サイズ・素材）

バナーサイズ

バナーサイズは各お題に記載していますが、他サイズでも問題ありません。

例えば…同じお題でもリサイズしてみると勉強＋いろんなサイズのバナーが得意！とアピールできていいですよ☺️

↑は「思わずクリックしたくなる バナーデザインのきほん」に記載されているデザインを練習したものです💡

 もくじへ戻る

フリー素材

バナーに使用する画像は、フリー素材サイトからダウンロードしてお使いください。

使用する際は各サイトの利用規約にそったご使用をお願いいたします。

オススメのフリー素材サイト

• 写真AC
• Adobe Stock（無料素材あり）

写真素材ダウンロードサイト【写真AC】※無料会員登録はこちら

バナーを作る際のポイント

バナーを作る際のポイントは以下の3つです。

クライアントがポートフォリオを見る際、ただバナーが並んでいるよりも

• このバナーはコンセプトが〇〇だからこういうデザインにしたんだ！
• 制作時間がこのくらいなら納期を確実に守ってもらえそう！
• キャッチコピーを目立たせるためにこういう工夫をしているのか！
• 苦戦したところ（振り返り）も書かれていて、これからの成長も期待できる！

など、デザインへの姿勢もアピールすることができます◎

 もくじへ戻る

作ったバナーをポートフォリオに載せる

作って終わりではもったいないので、案件応募に使える形まで仕上げましょう。載せ方の目安です。

枚数：多く見せるより質で絞ります。目安は8〜12枚。得意なジャンル・見せたいテイストの作品を先頭に置きます。
説明文：1枚ごとに「コンセプト／ターゲット／制作時間／使用ツール」を添えます（書き方はお題1の掲載例がそのまま型になります）。
画像：ぼやけ防止に実寸の2倍で書き出し、バナーの実寸（例：336×280）を明記します。

バナー作成後のチェック項目

バナーを作りおわったら、以下についてチェックします。

• 必要なテキスト・画像を正確にすべて入れている
• 色覚チェックをしている
• カラーモードはRGBカラーを選択している
• サイズはpxを選択している

デザインのチェック（目線の流れや適切なあしらいなど）もありますが、まずはコレだけ押さえておけば問題ありません◎

 もくじへ戻る

バナー練習の次に「添削を受けたい」「ポートフォリオまで見てもらいたい」と感じた方は、未経験向けWebデザインスクールの比較記事も参考にしてみてください。質問・添削・案件獲得サポートの違いをまとめています。

ポートフォリオに載せる前に、ここだけ見直そう

バナーを作れたら、すぐポートフォリオに載せても大丈夫です。ただ、案件応募で見られるのは「きれいに作れたか」だけではありません。

• 誰に向けたバナーなのかが伝わるか
• 一番読ませたい文字が最初に目に入るか
• スマホで見ても文字がつぶれていないか
• 余白・配色・写真の選び方に理由があるか
• 同じテイストだけでなく、違う業種のバナーも見せられるか

この5つを入れておくと、ただの練習画像ではなく「この人に頼んだら考えて作ってくれそう」と伝わりやすくなります◎

ポートフォリオの作り方で迷う方は、練習バナーをどう見せるかまで整理しておくと、案件応募につなげやすくなります。

ポートフォリオサイトがない方はいま作る！

バナーがひとつでも作れたら、ポートフォリオサイトに載せましょう🌸「ポートフォリオサイトはバナーが10個できてから作ろう」は危ない考え。作ったものを元にどんどん営業していくのが稼げる最短距離です。

forrioならコーディング知識ゼロ、ドメイン取得やサーバー契約も不要、1分で作成→公開までできます◎

案件に応募する前に見られるポイント

バナー練習を何個か作ったら、次は「案件に出せる見せ方」に変えていきましょう。

• 作品画像だけでなく、目的・ターゲット・工夫した点を書く
• 同じサイズだけでなく、SNS・広告・LP内バナーなど用途を分ける
• Canvaだけで作ったのか、Photoshop/Illustratorも使えるのかを明記する
• 提案文では「できます」より「こう考えて作れます」を伝える

最初は完璧な実績がなくても大丈夫。大切なのは、制作物を見た人が「この人は何を考えて作ったのか」を追える状態にしておくことです。

作品が3〜5個ほどそろってきたら、次は「どう提案するか」も大事です。練習で作ったバナーを案件応募につなげたい方は、提案文の見せ方も一緒に整えておきましょう。

「練習はできたけど、次に何を準備すればいい？」という方は、デザイナータイプ別診断で、バナー制作・LP制作・運用サポートなど、自分が目指しやすい方向を先に整理してみてください。

よくある質問

Q. お題で作った作品を実際の案件やコンペに流用してもいいですか？

A. 流用はできません。お題は練習とポートフォリオ掲載のための架空依頼です。実案件にはクライアントの要件から制作したものを使ってください。

Q. SNSに載せるときにタグ付けや出典の明記は必要ですか？

A. 不要です◎「まめぶろぐのお題で練習しました」のように書いてもらえるのは嬉しいですが、義務ではありません。

Q. AIツール（生成AIなど）を使って作ってもいいですか？

A. OKです。筆者の作例でも生成AIを併用しています。ただしポートフォリオに載せるときは、使用ツールを正直に書くことをおすすめします。

Q. 指定サイズ以外で作ってもいいですか？

A. 練習としてはOKです。ただし指定サイズで作ると「制約の中で優先順位を決める」実務の練習になるので、まずは指定どおりがおすすめです。

Q. 作ったバナーを添削してもらえますか？

A. 当メディア運営のWebデザインスクール「illume」では課題添削を行っています（無料体験あり）。独学で進める場合は、本記事のチェック項目でセルフレビューしてみてください。

さいごに

オリジナルバナーの制作は、模写やトレースとは全くの別物です。

素材集め・配置・グルーピング・配色・フォント…

すべて自分で考えながら作業するので、驚くほど時間がかかると思います。

私の人生初バナーは８時間かかりましたよ💦

バナー上達の道は実践あるのみ！

何個か作ってみたら案件にチャレンジして実践でスキルを身につけていくのが近道です◎

「お題」活用してスキルアップしてくださいね☺️♡