無添加サプリのバナー課題に挑戦！！

pupuです。
最近、暖かくなってきたなあと思ったらまた急に寒くなってきましたね。
しっかりとデザインをたたき込まないと～と思い、日々積み重ねています。
振り返ってみても理解しやすいように、まとめてみました。

バナー課題で修正を繰り返し、やっと4種類のバナーが完成しました！！

バナーの目的・依頼背景など

妊活から妊娠中、子育てまで、ママをサポートすることを理念としている企業からの依頼。

妊婦さん、妊活中の人に向けた無添加のサプリをGoogle広告を出すためのバナーを用意してほしい。

ターゲット

妊娠・妊活している女性
添加物等を気にしているため、無添加のサプリを摂取したいと考えている
仕事をしているため、手軽にサプリで栄養を摂取したい

希望デザインイメージ

無添加の雰囲気が伝わるような感じ
白をメインにしたい
優しい雰囲気
ナチュラルな雰囲気

キャッチコピー（提案可）

ママと赤ちゃんの未来のために
リピーター率98.2%
助産師さん推奨No.1
40種類以上の栄養成分配合
mamaplus（ロゴ）

枚数・サイズ

枚数：4

サイズ

w336-h280
w728-h90（展開用）
w320-h50（展開用）
w160-h600（展開用）

提供素材

ロゴaiデータ

納品ファイル形式

jpg / psd

1回目のバナー作成

妊婦さんの写真を使って優しい雰囲気のバナーを作りたいと思いました。
妊婦さんの顔が写っていて、笑顔な写真を探しました。
視線を意識してロゴとタイトルを右に置きました。
商品を大きく見せ、中に何が入っているのかをみられるようにサプリメントの写真を載せました。
リピーター率と助産師さん推奨、40種類以上の栄養成分配合は、目立つように、円の中に文字を配置しました。
ボタンは、ロゴの色と同じ緑色を使って右下に配置。
妊婦さんに安心感を与えるバナーに仕上げました。

メンターさんからのコメント

①右下のテキストとボタンのサイズがアンバランス
②3つの園が背景色と同化しすぎているのでもう少し工夫が必要

修正後、2回目提出

ボタンを目立たせるということから、グラデーションにし、ドロップシャドウを使ってみました。
画面では、シャドウがあまりかかっていないように見えたのですが、画像として出してみると、ザ・シャドウという感じになっていました。
一度画像と出してみて大小してみるのも大事だと感じました。

メンターさんからのコメント

①バナー全体に対してボタンの面積、印象が強すぎ
②クリックしてほしい気持ちを出すのはいいのですが、このバナーの世界観が失われている
③色合いはいいので、ボタンをバナーに溶け込ませる（馴染ませる）という感じに変更

3回目提出

私の中では、ピンクかなあと思いつつ、色合いや世界観がこれっと言うのが決められず3パターン提出しました。

メンターさんのコメント

①ピンクが一番いい
②バナーなので、ボタンっぽくする必要もないので、そういったことも踏まえて「お問い合わせはこちら」をバナーに馴染ませるように調整
③緑は全体の雰囲気にぴったりなので、緑を使うのはOK

4回目の提出

これでOKをもらったので、展開用を作成にとりかかりました。

160×600　バナー課題1回目

縦長バナーなので、妊婦さんとロゴを上半分に持って来て、それ以外を下半分に配置しました。

メンターさんからのコメント

①3つの円が一番ユーザーにとっていい条件、心に響いてクリックしたくなる内容を一番大きい円にする（リピート率か助産師さん）

②お問い合わせボタンも「お問い合わせ」から「お問い合わせへ」に変更

もう少し変更した方がいいとのことで、メンターさんが修正していただきました。

メンターさんが修正してくださった点

①写真を大きくする
②３つの円と文字を大きくして、テキストにメリハリをつける
③テキストの行間やカーニングを調整

自分自身でも修正し直して完成させました。
縦長バナーにすると、文字の配置や大きさ等で悩みました。

320×50　バナー課題　1回目

横長バナーなので、写真は真ん中で両端に訴求したい内容を配置しました。

メンターさんからのコメント

①右側のテキストがそろっていない
②まとまりがない印象
③写真はなしでOK

修正後2回目提出

妊婦さんの写真はなくし、左の背景をピンクから緑を薄くした色を使い、右に3つの円を配置しました。

メンターさんからのコメント

①バナーサイズが小さいので、文字をいかに大きくするか、情報を削除するかがポイント
②テキストが小さすぎる
③フォントサイズ最低11px、できれば12px
④3つの円を中心に他の要素を削除する
⑤情報が多い場合は、ピンポイントの情報にする

3回目修正

小さいバナーを作ったことがなかったので、フォントサイズや配置を考えてパーツを置くのが困りました。
要らないものを省いて、バナーとしてしっかり見せることが大切だと学びました。

728×90　バナー課題1回目

横長バナーだったので、ボタンと写真とサプリメントについての3つに分けて配置しました。

メンターさんからのコメント

①円が遠いので、バラバラした印象
　まとまりをもたせるためにもう少し円を大きくして近づける
②写真のトリミングが中途半端
　もう少しお腹に焦点を当ててお腹の赤ちゃんを手で守っている感を出す
③右上の所が空間が空き過ぎている

2回目提出

右上が空き過ぎているとのことだったので、赤ちゃんの写真を配置して空間を埋めました。

メンターさんからのコメント

①フォントサイズが小さい
②写真がスパっときれてしまっている印象
　背景を透過したり、ぼかしたりしてなじませて一体感を持たせる
③お問い合わせは削除

3回目の修正

メンターさんが修正してくださったものをもう一度自分で作成し直しました。文字のメリハリと写真をぼかしてみました。

バナーのサイズを4種類作ってみて思ったこと

バナーでいかに情報を的確に伝えるかがとても大切なことが分かりました。
余計なものを削除したり、引き算をしたりすることがとても重要！
サイズによってフォントの大きさだったり、見せ方だったり、まだまだコツを掴むまでは大変だと思いました！

メンターさんに１ケ月バナーの特訓していただきました。
まだ、苦手意識があるので、引き続き頑張りたいと思います。

ご覧いただきありがとうございました。