webデザイン初心者のバナーデザイン制作手法【#バナーお題】

デザインの練習でバナー制作はとても有効的な手段だと思います。

今回はTwitterで見かけた こばやす 📙現役Webデザイナーさん(@kobayas_s)という方が発信している#バナーお題に挑戦してみました。

 

走るとり
webデザイナー初心者の備忘録です。どうか温かく見守りください

作成したバナーとお題確認

今回作成したバナーがこちらです。

コンセプト:冬限定一口チョコ。普段高いが今だけ割引価格

キャッチコピー:ちょっと一息。贅沢をお裾分け

期間:11/◯~12/◯まで

ターゲット:2040代の働く男女

イメージカラー:白、水色

バナーサイズ:W300×H280px

文章指定があるところは誤字・脱字を防ぐためにコピー&ペーストします。

どんなデザインにするかは次の工程で決めていきます。

 

必ず最初に情報収集をする

基本的に作ったことのないものはまずデザインの参考になるものを探すことから始めます。

どんなものでもそうですが、ゼロからイチを生み出す労力は半端じゃありません。時間削減のためにどんどん真似ていくスタイルを取っています。

今回のテーマはチョコなので

「チョコ バナー」

「冬 チョコ バナー」

「チョコ クリスマス」

と検索してみました。

ここでなんとなくレイアウトや素材の使い方のイメージを掴みます。チョコなので当然ですがほぼ茶色のデザインしか出てきません。

イメージカラーである白・水色に焦点を当てて検索もしてみます。

「ウィンター バナー」

「水色 バナー グルメ」

「普段高いが今だけ割引価格」に焦点を当てて検索。

「期間限定 グルメ バナー」

そもそも高いチョコって何だろうということでこちらも検索。

「高級チョコ」

GODIVA

「デメル」

だいたいこれくらい検索すると、ざっくりですがチョコレートを使ったデザインイメージやカラーなどがぼんやり浮かんできます。

調べてつくるって楽だしデザインの勉強にもなるのでおすすめです。

 

制作時はコンセプトを常に意識してつくる

情報が集まったので少し手を動かしてみます。アナログで手書きラフを作成する方法もありますが、面倒だったのでPCで作っていきます。

PsAiのどちらかで制作しましょう。

1.300×280pxでアートボードを作成

2.いいなと思うデザインはいつでもみれるようにしておく。

3.必ず入れなければいけないキャッチコピーを貼る。

3は文字を入れることで全体のイメージを掴めたり、文字以外の要素をどれくらいの大きさで入れたらいいか掴めたりもします。

バナーデザインでは「誰に・何を・どのように」伝えるかが重要になってくるので、最初のお題に従って制作します。

男女が対象

性別を問わないデザインをします。といっても特にこだわる点もなく、ハートや可愛い模様は女性向きなので控えるようにしました。

普段は高い

高級感を出したかったので、線の細い明朝体に近いフォントを使ってます。でも硬すぎないように。少しポップな要素を加えています。

働く人向け

働く人が対象なので「贅沢」を強調してみました。働く人って贅沢するの好きですよね?

仕事で疲れた体に甘いチョコレートをという意味も込めました。

冬のデザイン

冬ということも忘れないようにします。

うるさくならないように雪の結晶を載せました。

 

使用した素材

写真・イラスト

写真AC

イラストAC

綺麗なデザインや細かいデザインが豊富。どちらも無料会員登録で使えます。

フォント

「漢字タイポス415 Std R」

数字部分のみ「冬青黑体简体中文」

フォント指定は見た目でなんとなく決めることが多いです。勉強が必要。

カラー

00caff・・・水色

00a3ff・・・濃い青

そのほか白のドロップシャドウを使用しています。

 

反省点と他に制作したバナー

  • 自分でつけるキャッチコピーのセンスのなさ
  • カチッと決めすぎてつまらないレイアウト
  • アクセントのない配色
  • フォントの知識不足
  • 写真があまり目立たない

反省点は必ず出てきます。次に活かせるように頑張ります。

現在#お題バナーはvol3まであるので、他にも作った作品も紹介します。

vol2:旅館

特典:下記通常料金より10%OFF、夕食時1ドリンク無料、遅めのチェックアウトOK 〜12:00

対象:Web予約限定

ターゲット:30〜40代 カップル 1泊2食付

大人一人12,000円〜

バナーサイズ:W500×H500px

vol3:遊園地

遊園地 Kobayasランド開園記念を宣伝するバナー制作

キャッチコピー:行こうよ夢の国!発見と驚きを体験しよう!

特典:Web購入で入館チケット20%割引

適用期間:2018年1月31まで

ターゲット:ファミリー、10〜20代学生

バナーサイズ:H200×W800px

#お題バナーのいいところは誰でも気軽に参加できること。コンペじゃないので競う必要もなく、勉強のために参加できます。ハッシュタグを辿れば他の人の作品も見れることですね。

Twitterで定期的にお題は発信されているようなので、ぜひTwitterをやっているwebデザイナーさんは挑戦してみてください。

走るとり
Twitterの気軽さを活かしたいいお題でした!