新卒デザイナーが研修で気がついたバナーを作るコツ
こんにちは。アジケ新卒デザイナーのkbです。前回はアジケのリモートで実施される新人研修についてお話ししました。
今回はバナー制作研修を行なって気がついた、バナー制作におけるコツについてお話しします！
初稿バナーデザイン
バナー制作研修では、毎回違ったお題で新卒デザイナーがバナーを制作します。そのバナーを先輩社員に見てもらい、FBを頂いた後に修正を行います。
今回のバナー初稿は下記のお題のもと制作しました！
バナーのお題
◾️目的：アプリの特徴の伝達とダウンロードへの誘導
◾️デザイン要素 : テクノロジー感を出すためのモダンでシャープなライン使用
◾️整列：テキストとビジュアルがクリーンに整列し、情報がスキャンしやすい形で配置
作成時に気をつけた点
バナーの初稿を作る際に自分が気をつけたことは以下の3点です。
①：テクノロジー感の演出
運転席に青いエフェクトをつけ、またスマホから電波が出ているような装飾をつけることで、テクノロジー感を出しました。
②：シャープさを出す
テキストには細いゴシック体のフォントを利用、またスマホから発信される電波も細めにし、統一感を持たせつつシャープさを出しました。
③：スマホアプリのバナーであることを強調する
スマホアプリのバナーであることを強調させるために、スマホ側の画像を大きく配置しました。
全体的に、シャープさとテクノロシー感が出るようにバナーを制作してみました。
先輩デザイナーからのFB
バナーの初稿を提出後、先輩社員の方から下記のFBをいただきました。
・コンバージョンについて
「詳しくはこちら」ではなく、アプリストアの誘導ボタンパターンも必要
・アプリの説明について
サービス名と説明テキストが離れていてなんのサービスかわかりづらいので近づける
・テキストの可読性を上げる
また、修正のステップとしてはテキストの可読性を高めるところから始めるとゴールが見えやすそうというアドバイスもいただきました。
修正バナーデザイン
FBをもとに修正したバナーがこちらです。
アプリの説明とコピーを近づけ、コンバージョンにおいては、「詳しくはこちら」ボタンから、アプリダウンロードためのボタンに変更しました。
また、テキストの可読性を高めるためにコピーはブランドカラーの青を用い、テキスト全体のフォントの太さを大きくしました。
修正後の反省点
修正前後のバナーを見比べると、テキストの可読性は高めることができたと思います。ですが、修正後のバナーは少し寂しい印象もあるのでもっとテキストのフォントサイズを大きくしても良かったなと思いました。
また、バナーのコピーもこのアプリがどのようなアプリなのかがわかりにくいものなので具体的にどんなことができるのかがわかるコピーを作れば良かったなと思います…。
研修で気づいたバナー作る3つのコツ
バナー研修をやってみて私なりに気づいたバナー制作のコツを以下の3点です。
文字組の調整
文字組に気を遣うだけでも、バナーのクオリティがぐんと上がった気がします！具体的には文字間の調整や、一つの文章でもひらがなは小さく、漢字は大きくなどフォントサイズを変えたりするなどです。また可読性を高めるためには、フォントにシャドウをつけたり、文字を枠で囲ったりすることも有効だと感じました。
目的を意識する
当たり前ですが、バナー制作を開始する前に目的をしっかりと把握することが大事だなと思いました。
例えば今回のバナーの目的は「アプリの特徴の伝達とダウンロードの誘導」でしたが、この目的を達成するためには何が必要なんだろう、とまず考えるだけでも「アプリダウンロードの動線がいるな」、「アプリの特徴を説明するための文章がいるな」、などに初稿を制作する際に気づくことができたのかなと思います。
また、制作しながらも目的を達成できるバナーなのかという視点を持ってバナーを観察することも大事だなと思いました。
最初から作り込まない
バナー研修を行なう中で、自分はバナー制作のスピードが遅いなと感じていました。なので、他の新卒のバナーの制作プロセスを覗いてみたのですが、そこで気づいたことは、デザインツール上で最初に制作するバナーは本当にラフで良いということです。
どれくらいラフでいいかというと、
「色は白黒、文字組や画像の配置も大体。文字組などは行わない。」
くらいで大丈夫だと思います。
なぜかというと、最初から色や文字組などを作り始めると後で迷走することが多いからです。
なので最初は全体の構成を考えるくらいの感覚でラフを制作し、構成が決まったら装飾を足していくという順番で制作すると、迷走せずに作業スピードが上げることができると思います。
自分もこのやり方で始めたら、作業スピードが2倍くらい早くなりました！
さいごに
大学時代を含めて今まで、ここまで集中的にグラフィックデザインの勉強をしたことがなかったのでこの研修はとても勉強になりました。もっともっと練習して、上手にバナーを作れるようになりたいです！
以上、今回はアジケ新卒研修の中でもバナー研修について取り上げてお話いたしました。最後まで読んでいただきありがとうございました！
🤝メンバーを募集しています！【チーム伴走型のサービスデザイン会社｜アジケ】✒️]
アジケでは、一緒に「人にとって豊かな体験をデザインすることで、『味気ある世の中』をつくる ”同志”を募集しています！
＜働き方＞
・フルリモートワークOK
・フレックスタイム制（コアタイム11:00~16:00）
＜現在募集中のポジション＞
・リードUI/UXデザイナー
・リードエンジニア（テックリード）
詳細は[採用サイト https://ajike.co.jp/recruit/]、または[Wantedly https://www.wantedly.com/companies/ajike]をご覧ください！
＜アジケってどんな会社？を3分でお伝えします＞
https://note.com/ajike/n/n7fe891c3ec83
<数字で見るアジケ紹介 〜こんな社員が働いています〜>
https://note.com/ajike/n/na2874b20f6df
選考の前段階として、お互いを知るカジュアル面談も大歓迎です！
「まだ応募までは決めきれないけど、会社のことを知りたい」という方もお気軽にご連絡ください🙌
（カジュアル面談をご希望の方はこちらから：https://ajike.co.jp/recruit/interview_form）
採用に関するご不明、ご質問などがございましたら、お気軽に recruit@ajike.co.jp までご連絡ください📩
▼アジケのカルチャーを知りたい方｜アジケのカルチャーデック
https://www.craft.do/s/ki01ioOMjsgvSv
▼アジケの事業内容と今後の展望を知りたい方｜アジケの事業紹介
https://www.craft.do/s/K8K1fm63kxSmG8