こんにちは、バナー制作に初チャレンジしたアヤトです!(^o^)!
バナー制作で大事なことは何でしょうか？
かっこいいまたはかわいい、キレイなデザインで、デザインセンスがないとダメって思ったりしませんか？
わたしもそうでした。
でも全然そんなことないんですよ。
大切なことはセンスではなく、バナーをひと目見て、どれだけユーザーの気持ちに寄り添えるかです。
ユーザーが考えていそうなことを表現し、共感を得ることでクリックしてもらえるのではないでしょうか？
私が所属しているWeb制作の学習をするオンラインサロン「Shibajuku」の先生から学んだことをヒントに、初心者ながらバナーを作ってみました。
また、初心者のうちはスキルがないのは当たり前なので、まずはどれだけ考えて作ったかを大切にするように、とアドバイスをいただきました。
この記事では、制作する上で意識したことや添削いただいたポイントなどを交えて紹介していきます。
初めてバナー制作する方何か参考になればと思います。
バナー制作のお題
私はWeb制作スキルを学習するオンラインサロン「Shibajuku」のメンバーで、Shibajukuのブログに掲載するバナーの制作企画にチャレンジしました。
オンラインサロンの詳細に誘導するバナーと、サロンに加入する手段のクラウドファンディングサイト「CAMPFIRE」に誘導するバナーの２つです。
オンラインサロンという概念は認知度が低いので、このブログに足を運んできた人がどんな気持ちで来たか？何を求めているか？を考えながら作りました。
このブログに来た人は、きっとこんなことを思っているのかなーと。
- Web制作の勉強をしていて、有益な情報を知りたい
- 独学が辛くなってきてスクールに通うか迷っている
そこで私は、このブログに来た人が考えている「心の内に秘めている気持ち」を代弁するバナーを作りました。
横長バナー完成品
制作時間 ：5時間
使用ソフト ：Adobe XD
リンク先 ：Shibajukuの紹介ページへ誘導
意識したこと
- 配色は、shibajukuのコンセプトカラーの白と緑（#9DBF4A）と黒（#2C2C31）を基調とした
- サロンの紹介ページのキーワード「わくわく」「わいわい」を取り入れた
- このサロンはweb系のサロンですよ〜っていうアピールを「Webで生きていく」っていう文言で表現した
当初作品も公開します！ポイントはパーツごとの役割を明確にすること
【ブラッシュアップ前】
【ブラッシュアップ後】
上がプロトタイプ的な作品で、下が添削いただいた後に修正を加えたものです。
添削でいただいたアドバイスは、各パーツの役割を明確にすることです。
- 「わくわく」「わいわい」は雰囲気を表現するものなので、雲のように丸で囲んでワイワイ、ワクワク感を表現
- 「Webで生きていく！」は雰囲気の言葉ではないので、装飾を分けるとそれぞれの役割が明確になる
- 行間や文字詰の調整は結構見落としがちになるので、常に意識しておくとより良いデザインになる
これらを意識してあげるとよりメリハリのあるデザインになりました！
大きめバナー（ラージレクタングル）完成品
制作時間 ：6時間（縦割り・斜め割り）/３時間（ドラクエ風）
使用ソフト：Adobe XD
リンク先 ：Campfireの紹介ページへ誘導
意識したこと
【縦割り・斜め割り】
わたし自身の経験で、独学が辛くなってきたけど、スクールに通いたくない、他に何か方法は無いかな？と思っていた気持ちを表現しました。
独学のいいところ、スクールのいいところを出して２つのいいところで「いいとこどり」という表現にしました。
画像は左が独学さん、右がスクールさんと仮定して、いいところがつながってるよーっていうイメージです。
ボタンがあるとクリックしたくなるかなーと思ってボタンとクリックアイコンを付け加えてみました。
【ドラクエ風】
こちらも同じく独学が辛くなってきたけど、スクールに通う以外に方法はないかな？っていう気持ちを表現しました。
選択肢はスクール通う以外にもオンラインサロンがあるよっていう表現をするため、ドラクエ風の選択肢にして遊び心を加えています。
ゲームの中でも最も馴染みのあるゲームなので、目を引いてもらえるかなと思いました。
当初のドラクエ風バナーも公開！実はボツ作品として考えていたけど、ブラッシュアップを重ねたら良くなった
【当初】
めちゃくちゃシンプルですよね。
なんとなくドラクエ風のバナーとかどうだろうと思って作ったものです。
ただの思いつきで作ったボツ作品のはずが、添削していただいた際に「これ、アイデアはいいのに惜しい！もっと良くなる！」と言われたものです。
添削いただいたアドバイスでは
- これだとスクールに行く選択肢が際立っていて背中を押すような文になっているため、そこの問いかけは、まず、ユーザーの気持ちを代弁して興味を持たせる
- 「独学がきつくなってきた・・・」という心の叫びの方が同じ心境の人に興味を持たせられる
- ただし、文章だけだと何の独学なのかもわからないので、背景にWebの独学で辛いってのがわかる写真を探して配置すれば、より直感的にイメージがわき、その文章が活きる
- 選択肢で行動を促す（スクールに通う ▶︎Shibajukuに入会する 的な感じ）
【ブラッシュアップ後】
添削アドバイスを参考に修正したものがこちらです。
ドラクエ風のドット絵を取り入れつつ、選択肢を変えてみました。
ただ惜しいのが、ドラクエの世界観にこだわりすぎちゃったところです。
そこで、真ん中の困っている画像が小さくて伝わりにくいため、写真を全面に出してもっと訴えるような形にしてみては？というアドバイスをいただきました。
【更にブラッシュアップ後】
完成品がこちらです。
これで独学がキツくなってきた・・と悩んでいる雰囲気が伝わりやすくなりました。
そして選択肢を与えてあげることで行動を促すという流れです。
バナー制作はデザインのセンスじゃなくてどれだけユーザーの気持ちに寄り添えるか
バナー制作は初チャレンジで、ぶっちゃけデザインのセンスないと無理でしょと思っていました。
でもそうじゃなくて、どれだけユーザーの気持ちに寄り添えるかが大切なんだと思います。
どんなにかっこいいデザインでも、メッセージ性がなかったり共感が得られなければクリックはしてもらえないですよね。
「どうやったら興味を引きつつ、共感を得られるデザインになるか？」をじっくり考えることができて勉強になりました。
なお、これらの作品はShibajukuのブログに公開されています。
大きめバナーの方は、アンケートを取ったところ意見が割れたのでランダム表示という形で全部採用になりました。
ぜひぜひ、ご覧になってみてくださいね。
少しでも参考になればうれしいです。
それではっ
