この記事の監修者
今回は、バナー制作課題を用意しました！PENGIN BLOGの前身、クリ★スタ時代のメディアに掲載するバナーを想定した内容です！
制作フローとあわせてご紹介します！
また、こちらの課題と連動したランディングページ制作課題も用意してますのでこちらもチェックしてみてくだい！
要件を確認しよう！
案件概要
クリ★スタのWebサイトに掲載するバナー作成
ここでは同じ志の方達が集まって学習内容の相談や実案件の相談などができる「オンラインギルド」への誘導を目的としたバナーを作成していただきます。
▼バナー情報設計
- 優先順位1番：実案件で学習しよう！
- 優先順位2番：案件紹介&ディレクション、案件の相談可能、学習の質問可能、転職相談可能
- 主体者表記：クリ★スタ オンラインギルド（ロゴ、フォント指定あり）
▼ロゴデータ、画像などはこちらをご使用ください。
▼遷移先（現在は募集を停止しています。）
https://crestaguild.com/
※オンラインギルドは現在停止していますが、PENGINが運営する架空のオンラインサービスとして想定いただければと思います。
▼目的
https://crestaguild.com/へ流入させるため
バナー制作で重要なことを学ぼう
バナー制作では、制作前に理解しておくべき重要な点がありますので最初に理解しておきましょう！
バナーの目的はクリックであることが多い
バナーをなぜ制作するかというと、何からのサイトからランディングページなどに集客するためです。
集客するためには、クリックさせないと意味がありません。
ユーザーの目が止まるように目立たせられるようにデザインしていきましょう！
遷移先のファーストビューを参考にする
バナーの目的はクリックさせることであると先ほど述べました。しかし、もっというとバナーをクリックしてランディングページに遷移してそこでお申し込みや購入にまで繋がって欲しいですよね！
そこで重要になるのが、バナーをクリックしてランディングページに遷移したユーザーに違和感を与えないことです。
違和感を与えないためのポイントは以下になります。
- ファーストビュー とバナーのデザインが似ている。または極端に違わない
- バナーの訴求とファーストビュー の訴求が同じである。（→バナーだけ盛ってると不満を感じてユーザーが離れる）
上記を意識してバナー制作を行いましょう！
ちなみにデザイナーは心理学を用いてより効果的なデザインを制作することもあります！
デザインに活かせる心理学を知らない方は下記の記事も読んでみてください♪
参考バナーを5つ探そう！
案件の概要をみてからすぐにデザインを始めると良い案が思いつかなかったり、素人っぽさの強いデザインになってしまいます。
まずは、プロが制作したバナーのをみて参考にするものを集めてみましょう！
集める時は、バナーのサイズ×配色など掛け算をしながら検索をすると効率的に参考バナーにであるので実践してみましょう！
ラフを作成しよう！
参考バナーを見つけることができたら、ラフを作成していきます。
手書きでも良いですし、figmaやPhotoshop・Illustratorなどデザインツールを使用しても構いません！
参考バナーや参考バナーを探す際に見つけたレイアウトなどを色々ブレストしていきましょう！！
>> 【参考サイト付き】バナーデザインを美しくする10のステップ | 株式会社LIG
モノクロで制作しよう！
モノクロでデザインを制作していきましょう！！
いきなり配色などしてしまうと修正する際に修正箇所が増えてしまうためここでは、モノクロでレイアウトを整えていきます！
この際にフォントの種類も選んでいきましょう！！
実務を想定しながら5~10案ほど丁寧に作ることが大切です！モノクロを作る際にもLIGさんの記事は役立ちます💪
>> 【参考サイト付き】バナーデザインを美しくする10のステップ | 株式会社LIG
配色しよう！
さあ、いよいよ配色ですね♪
配色は、もともと色が決まっている場合が多いですが、どのくらいの割合でそれぞれの色を使用するかが大切となります！
ユーザーにクリックさせられるようにボタンの配色など細部までこだわっていきましょう💪
最後に
バナー制作お疲れ様でした♪
制作を終えたら、人に見てもらうまでがデザインの学習です。いろんな人の意見に触れることでデザインの引き出しを増やせたり、新しいことに気がつくことができます。
早速Twitterで下記の情報を入れて投稿してみましょう💪
【クリ★スタ、バナー作成課題】
・デザインで意識したことや工夫した点は、〜〜〜〜です。
＃クリスタチャレンジ
（ラフ案・モノクロ・配色したバナーそれぞれの画像を添付）
こちらの課題と連動したLP制作課題も用意しているので見てみてください！
