この記事ではWebデザインの基本でもある広告/SNSバナーデザインを学びたい人のために、おすすめの学習動画や書籍をまとめました。
この記事を書いているのは、現役プロのWebデザイナーです。
バナーデザインは、Web学習の初期の方に学ぶものです。
バナーデザインに限らずですが、商業デザインというのは、センスではなくロジックで作成します。
バナーはあの小さいスペースに、視覚的に目を引くインパクトを与えてユーザーの注目を引き、見せたいページへ誘導させる役割を与えます。
つまり、適当にセンスで作るのではなく、広告媒体としてユーザーの目に届くものを作る必要があります。
そのためのノウハウやコツが、今から紹介する参考動画や書籍にまとまっていますので、ぜひ効率よく学習を進めてみてください。
バナーデザインをやり込めば、全体のデザインセンスのレベルも確実に上がってきます。
デザイン初心者の方やWebデザインを学んだけど伸び悩んでいる人は、ぜひ今一度基本のバナーデザインを勉強してみましょう。
バナーデザイン練習におすすめの動画
最初におすすめの学習動画を紹介します。
Figmaで【副業向け】バナーデザインの作り方マスター！バナー作成テクニック・コツ・あしらい例・考え方・練習ドリル付き！
動画学習サイトUdemyで学べるバナーデザインの作り方講座です。
講師の方が20年近くWebデザインの現場で培ったバナーデザインのノウハウを、実践的な練習をしながらマンでいるコースとなります。使用ソフトはFigmaになります。
2023年と新しい動画で、講座で学べるバナーのセンスも今風でクオリティが高いです。
バナー制作のコツやあしらい、実際の案件を通しての制作の工程等、プロの知識を余すことなく教えてくれる講座なので、とてもおすすめです。
学習時間は6時間、動画の費用はセール時で1,200円となり、非常にお買い得でもあります。
※Udemyの動画は普段は高めですが、セール時は95%OFFとかになりますので、セール時に購入しましょう。
【上級者用】続！バナーデザインマスター講座｜Adobe Illustrator（イラストレータ） ＆ Photoshop
こちらもバナーデザインをメインに学習するデザイン講座です。
動画のトータル時間は、なんと14時間！という超ボリューム。バナー作成の基礎から応用まで、しっかりと学べます。
上記の動画と違うところは、使用ソフトがAdobe IllustratorとPhotoshopになりますので、Adobe使用者はこちらの動画がおすすめです。
- Adobe IllustratorとPhotoshopによるバナーデザイン技術の習得
- デザイン基礎知識の習得
- 高画質WEB画像の作成方法の獲得
- テンプレートによる効率の良いバナーデザイン手法の獲得
以上の内容を学べます。
上級者用とありますが、デザインの上級者という意味ではなく、IllustratorとPhotoshopを使えるスキルがある人を意味しているかと思います。
バナー作成にあたってのそれぞれのデザインソフトの特殊な使用方法や、画質調整のテクニックが学べます。
また、バナーで使用されるさまざまなデザインのあしらいについても、IllustraotorやPhotoshopで作る方法を教えてくれます。
バナーデザイン練習におすすめの書籍
動画ではなく書籍で勉強したいという方はこちらがおすすめです。
思わずクリックしたくなる バナーデザインのきほん
ビフォー（修正前）アフター（修正後）の２例を通して、バナーデザインを作成する上で必要なことを学べます。自分のバナーデザインがなぜいけてないかが、作例をみるとわかります。
最初の章は、フォントの見せ方、文字組みのレイアウト等、プロなら誰でもやっているテクニックについて学びます。
次の章からは、よく見られるレイアウトや困った時の見せ方等について、応用のテクニックがたくさんまとめられています。
徹底的にバナーデザインのみにこだわった書籍なので、バナー制作の時には傍に置いておくのがおすすめです。
おすすめ練習方法：バナー参考まとめを見ながら模写しよう
バナーデザインの参考には、数多くのまとめサイトがあります。おしゃれなデザインデザインを各サイトがカテゴリ別、サイズ別にまとめてあります。最新のトレンドが一発でわかりますので、私も作成の際には必ず目を通しています。
更新頻度が高く、似ている様で違うバナーが集まっているのがすごいんですよね。
このバナーデザインの参考サイトに載っているバナーを片っ端から模写するだけで、かなり力になると思いますよ。
バナーデザインに必要なソフトは
バナーデザインには、デザインソフトが必要です。よく使われるのは
・Adobe Photoshop
・Adobe Illustrator
です。Photoshopは写真や画像の加工に、Illustratorは文字の加工やあしらい、ロゴの作成、切り抜きなどにも使えます。
個人的にはバナー作成にはIllustratorをメインに使っていますが、写真の加工（色調の変更やレタッチ等）をやりたい時もあるので、どれか一つと言われると、Photoshopがおすすめです。
スクールで学びたい人は
バナーデザインを独学ではなく、誰かに教えてもらいたいとなった時はどうすれば良いでしょうか。
副業希望者向けに、バナーデザインの学習を中心としたオンラインスクールがあります。HTML等をカリキュラムに入れないため、デザインのみを集中して学ぶことができます。
女性向けキャリアチェンジスクール – WeRuby
WeRubyでは、主にWebスキル能力を高めてキャリアチェンジを実現したい女性のためのオンラインスクールです。
特色は以下の通り。
- デザイン講座がメイン
- HTML/CSSといったコーディングはカリキュラムに入っていない
- 講座期間は3ヶ月
- 14日間の返金保証あり
最初は広告/SNSバナー等のデザインをしっかり学び、後半はWebサイトのデザインについても学ぶことができます。
1番の特色としては、WebデザインスクールにありがちなHTML/CSSの学習がないため、デザインをしっかり学ぶことができることです。
まとめ
バナーデザインはHTML等のコードやサーバーの知識も必要なく、デザインソフトでデザインできるスキルがあれば十分という手軽さも魅力です。
また、バナーは有り余るほどのバナーが量産され、期間を終えては消えていきます。
手軽に作れて発注が途切れないバナー制作は、副業としても人気が高いです。
ぜひ今一度バナーデザインを勉強してみてください。