【実践】Webサイトのバナー制作課題！独学の人にもオススメ！

今回は、バナー制作課題を用意しました！PENGIN BLOGの前身、クリ★スタ時代のメディアに掲載するバナーを想定した内容です！

制作フローとあわせてご紹介します！

また、こちらの課題と連動したランディングページ制作課題も用意してますのでこちらもチェックしてみてくだい！

要件を確認しよう！

案件概要

ここでは同じ志の方達が集まって学習内容の相談や実案件の相談などができる「オンラインギルド」への誘導を目的としたバナーを作成していただきます。

バナー制作で重要なことを学ぼう

バナー制作では、制作前に理解しておくべき重要な点がありますので最初に理解しておきましょう！

バナーの目的はクリックであることが多い

バナーをなぜ制作するかというと、何からのサイトからランディングページなどに集客するためです。

集客するためには、クリックさせないと意味がありません。

ユーザーの目が止まるように目立たせられるようにデザインしていきましょう！

遷移先のファーストビューを参考にする

バナーの目的はクリックさせることであると先ほど述べました。しかし、もっというとバナーをクリックしてランディングページに遷移してそこでお申し込みや購入にまで繋がって欲しいですよね！

そこで重要になるのが、バナーをクリックしてランディングページに遷移したユーザーに違和感を与えないことです。

違和感を与えないためのポイントは以下になります。

上記を意識してバナー制作を行いましょう！

ちなみにデザイナーは心理学を用いてより効果的なデザインを制作することもあります！

デザインに活かせる心理学を知らない方は下記の記事も読んでみてください♪

参考バナーを5つ探そう！

案件の概要をみてからすぐにデザインを始めると良い案が思いつかなかったり、素人っぽさの強いデザインになってしまいます。

まずは、プロが制作したバナーのをみて参考にするものを集めてみましょう！

集める時は、バナーのサイズ×配色など掛け算をしながら検索をすると効率的に参考バナーにであるので実践してみましょう！

ラフを作成しよう！

参考バナーを見つけることができたら、ラフを作成していきます。

手書きでも良いですし、figmaやPhotoshop・Illustratorなどデザインツールを使用しても構いません！

参考バナーや参考バナーを探す際に見つけたレイアウトなどを色々ブレストしていきましょう！！

>> 【参考サイト付き】バナーデザインを美しくする10のステップ | 株式会社LIG

モノクロで制作しよう！

モノクロでデザインを制作していきましょう！！

いきなり配色などしてしまうと修正する際に修正箇所が増えてしまうためここでは、モノクロでレイアウトを整えていきます！

この際にフォントの種類も選んでいきましょう！！

実務を想定しながら5~10案ほど丁寧に作ることが大切です！モノクロを作る際にもLIGさんの記事は役立ちます💪

>> 【参考サイト付き】バナーデザインを美しくする10のステップ | 株式会社LIG

配色しよう！

さあ、いよいよ配色ですね♪

配色は、もともと色が決まっている場合が多いですが、どのくらいの割合でそれぞれの色を使用するかが大切となります！

ユーザーにクリックさせられるようにボタンの配色など細部までこだわっていきましょう💪

最後に

バナー制作お疲れ様でした♪

制作を終えたら、人に見てもらうまでがデザインの学習です。いろんな人の意見に触れることでデザインの引き出しを増やせたり、新しいことに気がつくことができます。

早速Twitterで下記の情報を入れて投稿してみましょう💪

こちらの課題と連動したLP制作課題も用意しているので見てみてください！