バナー作成への道②〜配置を決める〜
こんにちは、ソラです。
スクールの講義がバナー作成に入りましたが、工程が多くて少し弱気になってきました💦
小刻みに作業を進めて「ここまでできて偉い！」と自分をいちいち褒める作戦で乗り切りたいと思います！
今回進めた作業をまとめていきます。
ちなみに、このブログでは講義で使われている画像や文言とは別のものを仮で考えてデザインしています。
前回までの作業は「バナー作成への道①にまとめてます〜！
前回のおさらい
前回は
- Illustratorの設定
- クライアントからの依頼内容の確認
- ペルソナの設定
をしました。
依頼内容とペルソナ設定は今回も使うので、もう1度書いておきますね。
依頼内容
バナーサイズ：300×300pixel
商品概要：ダイエット食品（とろこてん）
ターゲット：女性
掲載必須素材：商品画像
掲載文言：「WEB限定！先着500名様！」「無料モニター募集中！」「たくさん食べても太らない」「ところてんのテンちゃん」「100%天然の食物繊維」「参加はこちら」
ペルソナ設定
性別：女性
仕事：パート（週3回）
年齢：45歳
価値観：自分の容姿にお金をかけない。家族優先。
家族構成：夫、上が広告生（受験生）、下が中学生（サッカー少年）の息子2人
趣味：食べること。食べるのがストレス発散。
悩み：体型を気にしているがお金と時間をかけたくない。習い事に受験にと子供にお金がかかる。お金をかけずに痩せたい。
ゴール：お金をかけず、食べるのも我慢せずに痩せる。
要素を並べる
- クライアントからもらっている商品画像
- クライアントからもらっている文言
をバナーサイズのアートボードに並べます。
文言は依頼内容にある通りです。
商品画像はところてんです。
今回は仮なのでいらすとやからDLしてきました。
文言と画像を並べるとこうなります
「参加はこちら」はボタンにする文言なので、他の文言とは離しています。
まだバナーっぽさは皆無ですね…
文言に優先順位をつける
設定したペルソナに届けたい順に文言に優先順位をつけていきます。
ペルソナは「お金をかけない」ことを重視する価値観の女性でした。
そのため「無料モニター募集中！」を打ち出すことで、興味を持ってもらえると想像できます。
訴求ポイント＞それにまつわる文言＞商品が何か＞商品の詳細
という風に優先順位をつけます。
デザインに取り掛かる時には、優先順位の高い方から順に目立つようにデザインします。
イメージ画像を探す
クライアントから提供された商品画像の他に、商品の訴求ポイントを画像に落とし込んだイメージ画像も用意しましょう。
ペルソナは体型を気にしている女性なので、それに合わせた「痩せる」画像を探します。
いらすとやで探した画像がこちら。
普通はバナーって写真ですよね。
なんでいらすとやで統一しちゃったんだろう…
バナーっぽくなるかな？
とここにきて思ってきましたがこのまま進めます！
単色で配置を決めていく
素材が揃ったら色は気にせずに、配置をしていきます。
この時、スクールではF先生が手描きのラフ画を描いてそれを指針にデザインしていってました。
しかし……私は……破滅的に絵が下手すぎて手描きのラフのハードルが高すぎます😭😭😭
既存のバナーの配置を真似する（今回は先生を真似する）方向でいきます。
ただ、この手描きラフは別に絵が描けなくてもレイアウトや画像のシルエットが描ければOKなんだそうです。
次はそれでやってみようと思います…！
優先順位をつけて配置した画像がこちら。
少しだけバナーっぽくなりましたか？
ところてんの画像、こっちの方が収まりがいいかなーと思って向きを変えました。
変えなくてもよかったかも？
うーん…まだデザインの感覚が身に付いていないのでどっちがいいかよくわかりません😂
これちゃんと完成するの？😂
まだ配置しかしていない状態なのでいまいちバナーぽっくないですが、ここから仕上げていきます！
今回の感想
今回はバナーの要素を配置するところまでやりました！
初めて作るものなので、もしかしたら完成形も微妙になるかもしれません😭
でも何にもできないところから始めたので、大きな進歩ですよね。
次回もバナーの講義を進めていくので、暖かく見守ってください🙇♀️