【デザイン】オリジナルバナー制作まとめ

通っていたスクールの課題が少し前に更新されてたので、
久しぶりにオリジナルバナーをデザインしてみました。

今回のお題はWebスクールの広告バナーを作るというお題。

画像やレイアウトは自由ですが
テキストやクライアントの好きなデザインなどは支給されているという想定のもとデザインするというものでした。

スクールのSlackでフィードバックをもらって改善するところまで取り組んだので、その過程をまとめておきたいと思います。

制作前に

今回、2枚デザインしようと考えて、情報を整理するところから始めます。

・目立たせたいテキストの優先順位
・テキストのカテゴリ分け

などを紙に書いてラフな感じでささーっと整理していきます。

書き終えたら参考サイトやピンタレストなどでバナーを見漁ります。今回のバナーは参考デザインもありましたので、そちらのデザインも取り入れつつ、いい感じのデザインを探してイメージを膨らませます。

イメージが持てたら、なんとなくのデザインラフを描きます。
これは私はノートにぼわ〜っと描く感じです。

ここまでできたら素材を探していきます。

ラフのイメージに近しいフリー素材を探します。この時、余力があれば、近しいイメージの画像を数パターンDLしておくと、はめ込んでみたけどちょっと違う時に効率よく作業できるので、そういています。

いざ、制作！

準備ができたらPhotoshopで作っていきます。

今回は最初にガイドをひきました。ど真ん中センターと、上下左右20pxずつのところにラインをひきました。出来上がったデザイン見てみるとそんなに忠実ではないけど。。笑

いつも気をつけているのは全体のバランスです。

完成したもの

２パターンの構想を考え、以下のバナーができました。

●1枚目

こちらは全体を囲うデザインを作りたくて制作しました。

支給されたテキストは一言一句変えてはいけないという指定はなかったので、最小限のテキスト量にできるように、言葉や言い回しを少し変えています。

後々の反省にもつながりますが、ごちゃっとしてしまったのが気になっています。

●2枚目

こちらは、とあるシャンプーのバナーに非常にインスパイアされたデザインです。バランスよく作れたと思っていて気に入っています。

人を上手に見せたくて、ふわっとしたシャドウを付けるつもりでしたが、境界線をぼかす前に影を移動させてみたら可愛くなったので色味を調整してそのまま採用しました。

頂いたアドバイス

スクール講師の先生は基本肯定してくれるので、安心して添削依頼を投げられる環境なのでありがたいですm(_ _)m

まず、さっそく修正のスピード感を褒めてくれて

まずは1枚目

【良い点】
・見せたい文字の優先順位が伝わる
・写真の選定が◎

【アドバイス】
・端の余白が少ない
・テキストのブロック感をもっと出すと◎
・地の色とテキストの色にもう少し配慮を

などの内容をとても丁寧に優しくご指摘いただきました。

そして2枚目

【良い点】
・切り抜き写真の使い方
・飾り文字の装飾

【アドバイス】
・メイン文字のデコレーションがもう少しあってもいいかも
・色ベタ塗りが少し重い印象
・授業写真がもっと見えていた方が◎

ということでした。確かに。

文字の装飾については自覚もあって、やりすぎたらダメだし〜やらなさすぎてもダメだけど〜どうしよ〜〜〜と思って、そのままな感じになっていたので、アドバイスで色々とやりすぎない感じの装飾の例を教えてもらえてすごく勉強になりました♪

修正後

●1枚目

●2枚目

いかがでしょうかヾ(✿❛◡❛)ノ

アドバイスをもらって、自分なりに解釈し、デザインの中に取り入れました。

最初のラフデザインにこだわりすぎて最終的にごちゃごちゃしてしまった1枚目のデザインは、修正する時に、いったん最初のデザインをすべて取り壊して（目隠しマークで非表示）テキストを配置し直してから周りのデザインを整えていきました。

最初のデザインは消失しましたが、整ってる感は修正後の方がいいかなぁ〜

フッター的なところで、今だけをポイントとして左上に配置したので、バランスをとるために、右側にはスラッシュみたいな線を3本足して「ポイントだよ〜」感を出しています。これで左右のバランスがとれました。

2枚目は軽いベタ塗りを実現するために、まずはオレンジ色を乗算で重ねる。コマンドJで複製してみるといい感じに濃い色になったのでそうしました。ただ、乗算すると、切り抜きの人の存在が目立たなくなったので、白ふちを付けました。（あまり気に入ってはない）
可愛いと思って残したベタ塗りシャドウも目立たなくなってしまったので、当初考えていたふわっとしたシャドウを採用しなおして、控えめにおいています。

一番目立たせたい文字だけフォントを変えてみたり、通学と卒業の文字に強調の中黒をつけてあしらいをプラス。

ここでもフッター的なところが単純なベタ塗りでおいておくとデザインにマッチしなかったので、まずは乗算してみました。乗算すると背景の写真が見えすぎてテキストが埋もれてしまったので、白色を下にひいています。そうして透け感を調整しました。

まとめ

今回、アドバイスを頂いて、すごく参考になったし、自分のデザインの引き出しがどんどん増えていくのを実感できました。

こういう方法もあるんだ〜とか
こういう見え方になるんだ〜とか

私の気付けなかったところを教えてもらえてとても勉強になりました。

フィードバックに対する考え方として、私が思っているのは「その人の意見が絶対」とは思わないようにしたいということです。

フィードバックを「絶対的」に捉えてしまうと、自己否定が生まれてしまうことも。。

でも、最初に作ったデザインも私の考えた私が好きなデザイン。

それはそれでいいし、こういうパターンもあるよという捉え方のひとつとして受け入れたいなと思っています。
アドバイスに感謝し取り入れながらも、
自分のデザインが好きという気持ちは大切にしたいです。

いろんな表現ができるように、もっといろんなパターンを知っていって、日々考えよう〜〜〜ヾ(✿❛◡❛)ノ