バナーデザインお題20選【無料】実務に近い練習でポートフォリオにも使える

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

「実績がなくてポートフォリオに載せる作品がない」のに「ポートフォリオがないと案件に応募できない…」

私も3年前、同じように困っていました。

お題を考えるのって意外と手間なので

サクッとこの記事を踏み台に、案件にどんどんチャレンジしていってください＾＾

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

お題を使ってくださった方々、ありがとうございます！！すべて見に行かせていただきました♡

バナーお題の注意事項

• 著作権は筆者「まめ」にあります。
  コンセプトやキャッチコピーをデザイン作成者が作ったと勘違いさせてしまうような表現はおやめください。
• 使用する画像はフリー素材をお使いください。
  フリー素材以外の画像を無断で使用すると、著作権侵害にあたります。

節度を守ってご活用いただくようお願いいたします☺️

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

 もくじへ戻る

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

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

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

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

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

バナー作成の事前準備

バナーサイズ

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

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

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

＼ あわせて読みたい ／

 もくじへ戻る

フリー素材

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

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

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

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

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

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

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

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

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

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

 もくじへ戻る

10本ノックで練習するなら、順番を決めて作るのがおすすめです

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

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

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

バナーお題一覧

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

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

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

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

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

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

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

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

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

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

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

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

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

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

６. ヘアケアの新商品PR

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

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

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

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

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

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

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

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

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

 もくじへ戻る

キャンペーンバナーお題

ここからは、より実務に近い「キャンペーンバナー」のお題です。数字（金額やポイント）・期間・キャンペーン名が入るので、情報の優先順位を決めて配置する練習になります。

企業のロゴやアイコンを使用する際の注意点

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

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

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

Facebook

X （旧Twitter）

LINE

Instagram

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

 もくじへ戻る

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

さいごに

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

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

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

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

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

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

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

あわせて読みたい