ポートフォリオに載せるバナー作品がない
バナーの練習したいけどお題が思い浮かばない
今日は駆け出しウェブデザイナーさんにむけて「バナーデザインのお題」を10個紹介します。
「実績がなくてポートフォリオに載せる作品がない」のに「ポートフォリオがないと案件に応募できない…」
私も3年前、同じように困っていました。
お題を考えるのって意外と手間なので
サクッとこの記事を踏み台に、案件にどんどんチャレンジしていってください＾＾
ハッシュタグや引用は不要です◎気軽に使ってもらえたら嬉しいです。
お題を使ってくださった方々、ありがとうございます！！すべて見に行かせていただきました♡
バナーお題の注意事項
- 著作権は筆者「まめ」にあります。
コンセプトやキャッチコピーをデザイン作成者が作ったと勘違いさせてしまうような表現はおやめください。 - 使用する画像はフリー素材をお使いください。
フリー素材以外の画像を無断で使用すると、著作権侵害にあたります。
節度を守ってご活用いただくようお願いいたします☺️
バナーお題を選ぶポイント
- 興味のある業界（携わりたいジャンルなど）
- 得意なジャンル（「私こういうデザイン得意です！」とアピールするため）
- 苦手なジャンル（練習のため）
クラウドソーシングに提案・応募する際
依頼内容と似ているジャンル・雰囲気のサンプルデザインを提示できると、案件獲得の確率がグッとあがります。
これからどんなお仕事をしたいか想像して、選ぶのもオススメです◎
このお題を「作品」に変えるなら、次はここをチェック
お題を選んだら、ただ作って終わりにするのは少しもったいないです。ポートフォリオに載せるなら、何の目的で作ったバナーか、誰に向けたデザインか、どこを工夫したかまで一言添えると、作品として見てもらいやすくなります◎
- 1本作る：まずはこの記事のお題から、目的とターゲットを決めて1本完成させる
- 作品として整理する：ポートフォリオに載せるなら、工夫した点・改善した点を短くメモしておく
- 応募準備につなげる：作ったバナーをもとに、プロフィールや提案文で「何ができるか」を伝えられるようにする
実績がない人のポートフォリオ作りで迷ったら、Webデザイン初心者向けのポートフォリオ記事も参考にしてみてください。作ったバナーを「見せる作品」にするコツをまとめています。
作ったあとに案件応募までつなげたい方は、ココナラ提案文の書き方もあわせて確認しておくと、練習から応募準備まで流れを作りやすいです。
ココナラでバナー制作を出品してみたい方は、初心者がココナラでWebデザイン案件を取るまでの流れもあわせて読むと、練習後に何を準備すればいいかイメージしやすいです。
バナー作成の事前準備
バナーサイズ
バナーサイズは各お題に記載していますが、他サイズでも問題ありません。
- 300 × 250px
- 336 × 280px
- 468 × 60px
- 728 × 90px
- 320 × 50px
- 320 × 100px
すべて 横 × 縦 のサイズです
例えば…同じお題でもリサイズしてみると勉強＋いろんなサイズのバナーが得意！とアピールできていいですよ☺️
↑は「思わずクリックしたくなる バナーデザインのきほん」に記載されているデザインを練習したものです💡
＼ あわせて読みたい ／
フリー素材
バナーに使用する画像は、フリー素材サイトからダウンロードしてお使いください。
使用する際は各サイトの利用規約にそったご使用をお願いいたします。
オススメのフリー素材サイト
- 写真AC
- Adobe Stock（無料素材あり）
写真ACは無料会員だと検索やダウンロードに制限があるけど、素材数も多く、素材の加工OKで使い勝手も良いですよ◎
写真素材ダウンロードサイト【写真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（サービス名） 好きを副業に 基礎から実践まで独立するスキルを習得 無料体験レッスンはこちら |
| 画像 | 女性が微笑んでいる写真 |
コンセプトは「かわいく学べる♡」
新しいことを始めるとき、壁を感じる方も多くいて、そんな壁をするっと乗り越えられるように「流れ」を意識してデザインしました。
制作時間：1時間
制作ツール：Illustrator（デザイン/生成ai）・Photoshop（画像の切り抜き/色彩調整）
３. 結婚相談所のオンラインイベント申し込み
| 依頼内容 | バナー設置場所：婚活サイト ターゲット：25〜35才の女性 イメージ：ピンクと白をベースに可愛らしいイメージ。フォントは明朝体や筆記体など綺麗めな感じ。 バナーサイズ：300×250 |
| テキスト | Online Bridal House（サービス名） Matching event ゆったり自宅で始める婚活 詳細はこちら 先着20名様 参加者限定特典あり 12月14日土曜日10:00〜12:00 |
| 画像 | ウエディングドレスを着た女性の写真 |
コンセプトは「かわいく出会う、新たな一歩」
制作時間：1時間
制作ツール：Illustrator（デザイン/生成ai）・Photoshop（画像の切り抜き/色彩調整）
４. 英会話塾：短期講習の告知
| 依頼内容 | バナー設置場所：公式サイト ターゲット：25〜40才の女性（小学生の子どもを育てるお母さん） イメージ：楽しそう＋親しみやすい雰囲気・カラフル バナーサイズ：300×250 |
| テキスト | SmileyHappyEnglish 「英語で楽しく話そう」 短期集中レッスン3月12日（金）受付開始 各レッスン８名まで |
| 画像 | 子どもが笑ってる写真 |
コンセプトは「わくわくがふくらむ時間」
わくわくがふくらんでいくのを風船を連想して「丸」を多くあしらいました。
色を多く使用したため、ごちゃごちゃして視認性が低くなるのを防ぐため、メインの文字には白い縁をつけました。
制作時間：1時間
制作ツール：Illustrator（デザイン/生成ai）・Photoshop（画像の切り抜き/色彩調整）
５. ネイルサロン：定額コースキャンペーン
| 依頼内容 | バナー設置場所：公式サイト ターゲット：20〜30代の女性 イメージ：シンプル・エレガントで落ち着いた印象 バナーサイズ：320×100 |
| テキスト | ジェルネイル定額コース ハーフアート＋ストーンつけ放題 8,900円 サンプルを見てみる（Sample check） |
| 画像 | ジェルネイルをしている指先、または施術中の写真 |
コンセプトは「ふんわりと上品な美しさを指先に」
制作時間：1時間
制作ツール：Illustrator（デザイン/生成ai）・Photoshop（生成塗りつぶし/色彩調整）
Photoshopでは色彩調整と、画像の右側を生成しました
元画像がすこし暗い印象だったので、イメージにあわせて明るさや露出などを調整しました。作業は3分ほど💡
６. ヘアケアの新商品PR
| 依頼内容 | バナー設置場所：公式サイト ターゲット：20〜30代の女性 イメージ：白・緑を使用＋オーガニック/自然。 バナーサイズ：336×280px（レクタングル） |
| テキスト | MOON TREATMENT（サービス名） 今日から変わる私の髪 7日間分サンプルプレゼント 応募はこちら |
| 画像 | 女性の写真/ボトル |
コンセプトは「自然の力で輝く、なめらかな髪」
制作時間：30分
制作ツール：Illustrator（デザイン）・Photoshop（画像の切り抜き/色彩調整/生成ai）
７. 花屋：母の日のプレゼント
| 依頼内容 | バナー設置場所：公式サイト ターゲット：20〜30代の女性 イメージ：ピンクをキーカラーに、写真が目立つように。大人可愛いシンプルな印象。 バナーサイズ：336×280（レクタングル） *例はサイズが異なります |
| テキスト | Mother’s Day お花とお菓子のギフトセット 配達日指定のご注文受付は5月8日土曜日23時まで |
| 画像 | お花とお菓子の写真 |
コンセプトは「心温まるひとときを大切な人に贈る」
制作時間：1時間
制作ツール：Illustrator（デザイン）・Photoshop（画像の切り抜き/色彩調整）
８. 脱毛サロン：お友だち紹介キャンペーン
| 依頼内容 | バナー設置場所：公式サイト ターゲット：20代の女性 イメージ：水色・爽やか（子どもっぽい印象はNG） バナーサイズ：300×250 |
| テキスト | 友だち紹介キャンペーン あなたもお友だちも最大20,000円キャッシュバック 夏前に自信の肌へ！ まずは無料カウンセリングから 対象期間：3月1日〜3月31日 |
| 画像 | 女性（２人以上）の写真 |
コンセプトは「心地よくキレイを楽しむ」
制作時間：1時間
制作ツール：Illustrator（デザイン）・Photoshop（画像の切り抜き/色彩調整）
９. パスタ専門店：期間限定メニューの告知
| 依頼内容 | バナー設置場所：公式サイト ターゲット：25〜35才のカップル イメージ：落ち着いたイメージ。秋を感じられるといいな。 バナーサイズ：300×250 |
| テキスト | 秋の大感謝祭 秋野菜のパスタランチ 旨みたっぷりの絶品ソースと生パスタ、旬の食材を使って今年も再登場しました #大人の隠れ家 #一軒家レストラン #平尾グルメ |
| 画像 | パスタの写真 |
コンセプトは「秋の彩りで心満たされるひととき。」
制作時間：1時間
制作ツール：Illustrator（デザイン）・Photoshop（画像の切り抜き/色彩調整）
10 . お弁当屋さん：スタッフ求人
| 依頼内容 | バナー設置場所：親会社の公式サイト ターゲット：30〜40代の女性 イメージ：親しみやすい・楽しそうな雰囲気 バナーサイズ：336×280（レクタングル） |
| テキスト | お弁当のテイクアウト専門店：おてさげ 調理スタッフ募集中 土日休みOK 週２・５時間〜 まかない有り |
| 画像 | 「調理」を連想できる女性の写真 |
コンセプトは「自然体で働く」
制作時間：1時間
制作ツール：Illustrator（デザイン）・Photoshop（画像の切り抜き/色彩調整）
バナー10本ノックとして練習するなら、同じお題を少しずつ変えてみよう
10本すべてを完璧に作る必要はありません。まずは「同じ条件で何案か作ってみる」「色だけ変えて比べてみる」だけでも、バナーの見え方の違いがつかみやすくなります。
文字の見せ方で迷ったときは、タイトルのあしらいだけを別で練習しておくと、次のバナーにも使い回しやすいです。
バナー作成後のチェック項目
バナーを作りおわったら、以下についてチェックします。
- 必要なテキスト・画像を正確にすべて入れている
- 色覚チェックをしている
- カラーモードはRGBカラーを選択している
- サイズはpxを選択している
デザインのチェック（目線の流れや適切なあしらいなど）もありますが、まずはコレだけ押さえておけば問題ありません◎
まめ駆け出しの頃、SNSの画像作成依頼だったのにCMYKで作成してしまい、納品直前に急いですべて修正したことも💦
色の見え方は人によって個人差があります。
- P型（1型）色覚：赤を感じとりにくく、赤〜緑の区別がつきにくい
- D型（2型）色覚：緑を感じとりにくく、赤〜緑の区別がつきにくい
日本人男性の5%（20人に1人）、女性の0.2%程度は、色が見えにくい「色覚特性」を持っています。
＊参照：色彩検定公式サイト
Illustrator、Photoshopは色覚チェックができる機能があります↓
文字がハッキリ読めるか、視認性をチェックできます◎
ポートフォリオに載せる前に、ここだけ見直そう
バナーを作れたら、すぐポートフォリオに載せても大丈夫です。ただ、案件応募で見られるのは「きれいに作れたか」だけではありません。
- 誰に向けたバナーなのかが伝わるか
- 一番読ませたい文字が最初に目に入るか
- スマホで見ても文字がつぶれていないか
- 余白・配色・写真の選び方に理由があるか
- 同じテイストだけでなく、違う業種のバナーも見せられるか
この5つを入れておくと、ただの練習画像ではなく「この人に頼んだら考えて作ってくれそう」と伝わりやすくなります◎
ポートフォリオサイトがない方はいま作る！
バナーがひとつでも作れたら、ポートフォリオサイトに載せましょう🌸
「ポートフォリオサイトはバナーが10個できてから作ろう」は危ない考えだと思っています…！
「作ったものを元にどんどん営業していく」が 稼げる最短距離ですよ。
ポートフォリオサイトは作ることが目的ではなく、仕事を獲得するための手段！
作ったら公開→営業→デザインを追加→営業…
このループを心掛けると「ずっと勉強で辛い…モチベ下がる…;;」を避けられます！
案件に応募する前に見られるポイント
バナー練習を何個か作ったら、次は「案件に出せる見せ方」に変えていきましょう。
- 作品画像だけでなく、目的・ターゲット・工夫した点を書く
- 同じサイズだけでなく、SNS・広告・LP内バナーなど用途を分ける
- Canvaだけで作ったのか、Photoshop/Illustratorも使えるのかを明記する
- 提案文では「できます」より「こう考えて作れます」を伝える
最初は完璧な実績がなくても大丈夫。大切なのは、制作物を見た人が「この人は何を考えて作ったのか」を追える状態にしておくことです。
Canvaに限界を感じている方へ
ここまでバナーお題について書いてきましたが、
Canvaでバナー練習してるけど…仕事で稼いでいけるかな？
と不安に思ったことはありませんか？
正直、Webデザイナーとして稼ぎ続けていきたいならCanvaでは限界があると感じています。
なぜ、Canvaでは限界があるの？
理由は、Canvaは誰でも使えるデザインツールとして開発されているため、細かい調整はできないからです。
例えば…
- 本格的な画像加工/合成ができない
- 文字間の細かい調整機能がない
- クリッピングマスク機能がない
模写やトレースをしたことがある方は、痛感しているのではないでしょうか💦
現役Webデザイナーは仕事でCanvaは使わない？
私自身、Canvaを使った仕事を受けることもあります◎
Instagramのテンプレート制作は、Web系に慣れていないクライアントに納品する際に最適だと思っています。
しかし、ココナラやランサーズの公開依頼では「Canva不可」の案件も増えてきて、逆に「Adobe（Photoshop・Illustrator）で制作」を指定されているクライアントが多い印象です。
クラウドソーシングでCanvaのテンプレート制作の案件は応募者が多く、争奪戦になっています。
Canvaじゃないなら何を使うの？
迷うことなく…「Adobe（アドビ）」です！
Photoshop（フォトショップ）やIllustrator（イラストレーター）はAdobeのツールです💡
世界中のウェブデザイナーが日常業務においてメインのデザインソフトとして採用しています。
私もAdobeがないと仕事ができません！
収入を増やす（単価を上げていく）ためには、細部までこだわるデザインが求められます。対価に見合ったデザインを納品できなければ、収入は減っていきます…
Webデザイナーとして稼いでいきたいなら、早めにPhotoshopやIllustratorを使い始めるのがオススメです◎
ですが…公式サイトから契約するのはちょっと待ってください。
＼ 現役Webデザイナーがお得にAdobeを使っている裏ワザはコチラ ／
さいごに
オリジナルバナーの制作は、模写やトレースとは全くの別物です。
素材集め・配置・グルーピング・配色・フォント…
すべて自分で考えながら作業するので、驚くほど時間がかかると思います。
私の人生初バナーは８時間かかりましたよ💦
バナー上達の道は実践あるのみ！
何個か作ってみたら案件にチャレンジして実践でスキルを身につけていくのが近道です◎
「お題」活用してスキルアップしてくださいね☺️♡
バナー練習の次に「仕事につなげる準備」をしたい方へ
バナーは、作って終わりではなく、ポートフォリオに載せて、提案して、案件につなげていくところまでが大切です。
もし「自分はバナー制作を伸ばすべき？LPやサイト制作も学ぶべき？」と迷っている場合は、先に向いている仕事タイプを整理してみてください。
スクール選びまで考えている方は、未経験向けWebデザインスクール比較で、添削・案件獲得サポート・学び方の違いもチェックできます。
あわせて読みたい
