バナーWebデザイン勉強会
投稿日 : 2022年2月16日

バナー制作過程の記録-2021年12月-

バナー制作過程の記録-2021年12月-の画像

「プログラムもいいけど、デザインもできたらもっと仕事の幅が広がるのではないか」―。
そう考えて、2021年5月からWebデザイナーの勉強を始めました。
元々少し気になっていた分野でもあるので、大変なことが多くても頑張りたい。
ここではWebデザイン関連の学習中に学んだことを自分の視点でまとめたものを掲載します。

オンラインサロン「こみゅー」のバナー部で「同じお題でバナーを作成する」活動がスタートしました。
同じお題でもかなり違ったものが出てきます。
提出された作品を見て、また自分のものにコメントをいただいて、とても勉強になります。

2021年12月のお題

今回のお題はこちらです。

※ここに出てくる団体名やイベント名、内容、日時など、すべて架空のものです。

クライアント・イベント名

SETOFAN(店舗名) 初売りセール告知

  • 雑貨、服飾品、服飾雑貨を売っている
  • 郊外の広い敷地に路面店を構えるセレクトショップ(国道沿いなどにある)
  • カジュアルからフォーマルまで取りそろえ、値段は中くらい(しまむら以上マルイ未満)

ターゲット

20~40代女性

概要・特徴

店舗の初売りセールの告知

中に入れる文言やキャッチコピー

今年も皆様にご愛顧いただき、年の瀬を迎えることができました。
来年も是非皆様にお越しいただきたいと願っております。
初売りもよろしくお願いしまSALE!!
最大90% OFF!
新春1月3日 10時~ 5日営業終了まで
SETOFAN 本店 栃木県宇都宮市xxx-xxx-xx
鹿沼店 栃木県鹿沼市xxx-xx
福袋もあるよ!(先着100名様)

希望イメージ

希望イメージ表
  • シンプル ±0
  • カラフル +4
  • 明るい +5
  • 日常 +4
  • 遊び心 +3
  • 伝統的 特になし
  • 女性的 +5

希望する色

新年のお祝いイメージを出したいと思っています。

利用用途

Twitter Facebookなどのプロモーション、自社サイト内などで使用予定

納品サイズ

1080px × 1080px

制作過程

ここからは私の作ったバナーとその制作過程です。

準備

いつものように準備します。

仕様ツール、サービスなど

レイアウトの方向性

フォント(印象)の方向性を決める

お正月バナーなので、お正月らしい筆記体を入れたいと思いました。全体のバランスでうまくいくだろうか。

カラーの方向

お正月なのでめでたく赤、ゴールド、門松の緑などを入れていくことにしました。高貴な色で紫もありかもしれません。

書いていたノート

はがきのように、縦文字と画像エリアと分けてみようかな、と考えていました。

今回は実際に配置してみたらこれとは異なる配置のものになっていきます…

素材を探す

お正月らしい写真をあらかじめ探しておきます。今回はイラストACを利用しました。

実践

イラスト多めなのでillustratorにしてみました。

文字の配置を決める

ノートに書いたイメージで文字の配置とフォント決めをします。

文字配置イメージ
文字配置イメージ はがき風

横書きのものとはがきイメージの両方を作成してみました。

配置してみてわかりましたが、今回は正方形なのではがき風の縦書きと、広告エリア半端になってしまっていまいちだと思いました。

はがきイメージができる1:1.48~2:3程度の比率の横長か縦長の長方形だったらよかったかもしれません。

今回は初めのほうの文字配置を採用しました。

色と素材を配置していく

お祝いイメージを出したかったので、黄色と赤をメインに使用します。

そしてできたのがこちら。

完成品

2021年12月作成 初売りバナー

文字配置をちょっと変更したり、お正月らしい筆書体のフォントも使いたくて一部変更しました。
なかなかにぎやかにできたと思います。

ただ、他の方の物を見ていて「お正月に引っ張られたな…」と反省が入ります。

服飾雑貨のバナーなのに、バナーの中に服飾雑貨が少しも入っていませんでした。

完成品改

2021年12月作成 初売りバナー改

お正月に引っ張られつつも服飾雑貨があることを伝えるために、一部のイラストを変更しました。

こちらのほうが断然雑貨屋さんのイメージが出ますね。初期のだるまさん配置も個人的には好きです。

これまで練習含め作ってきたバナーの中ではかなり上手にできたなと思います!