見出し画像

『バナーデザイン練習 10本ノック』をやってみる【①シャンプー】

Webクリエイターボックスの『バナーデザイン練習 10本ノック』というお題にチャレンジしています。

のちのちポートフォリオにも載せたいので、備忘も兼ねてnoteにまとめてみました。


今回のお題について

架空のシャンプーのバナー
詳細:バナーデザイン練習 10本ノック 1.シャンプー

成果物

Happy Hair, Happy You! かわいさ、手軽さ、楽しさ。全部このシャンプーで。WCB
今回作成した架空のシャンプーのバナー。制作時間は約3時間。

こだわったところ

  • 最初はパッケージと同系色のピンクを検討したが、商品が馴染んで目立たなかったことや楽しい印象を出したかったことからオレンジを採用。

  • テキストはシャンプーのポンプと色を揃え、統一感を出した。また、文字組みにはイラストレーターを使用。

  • シンプルにしすぎると高級感につながると考え、背景の装飾やよく見る日本語書体を使用し、親しみやすさを演出。

  • かわいさに繋がるよう、曲線的な印象を目指した。

難しかったところ

  • 「楽しい」の表現の仕方。背景のオブジェクトをランダムに配置し、円とハートを混ぜて配置してみた。

  • 商品の影の付け方。加減が難しかった。

  • テキストはどこに揃えるか。

  • 何色が良いのか悩み、何パターンか作成してから決めた。

制作の流れ

①ざっくり方針を検討

若い女性向けのシャンプーや化粧品のバナーやウェブサイトのデザインを調べ、以下のような方針に決めた。

  • 商品画像をわかりやすく配置する。切りすぎない。

  • 色は柔らかめのトーンにする。

  • 過度に安そうに見せたくはないのでごちゃごちゃさせないが、多少の賑やかさは持たせたい。

  • 「かわいい」「安い」「楽しい」が求められているので直線よりも曲線的な印象を目指す。

②レイアウトや色を検討

Photoshopのキャプチャ。テキストと商品写真と曲線の装飾を入れた状態。ピンク、青、オレンジ、黄色の4パターンが並んでいる。
パッケージと同じピンクだと商品が目立たない気がして、青、オレンジ、黄色のパターンも作成。
Illustratorのキャプチャ。「Happy Hair, Happy You! 」のコピーを調整して組んでいる。
要素が揃って見えるよう、単語や記号ごとに区切ってIllustratorで調整した。

③色を絞り、背景のパターンを検討

Photoshopのキャプチャ。色と背景違いで8パターン並んでいる。
暖色が「楽しさ」に繋がると感じ、黄色とオレンジで悩む。

最初に作った下部に曲線のオブジェクトを置くパターンだとシンプルすぎると感じ、背景にハートや円を置いてみた。
シャンプーは泡立つものなので円だと泡っぽくて良いのではと考えたが、若干単調に感じた。

かわいさに振り切ってハートはどうかと思ったが円をそのままハートに置き換えるとかわいくなりすぎてしまうと感じ、目がいくであろうテキスト付近はハート、それ以外は円を配置してかわいさと程よい賑やかさは持ちつつ子供っぽすぎない仕上がりを目指した。

色は背景のオブジェクトが目立ちすぎないのも賑やかさを損なうように感じたため、オブジェクトの見えやすいオレンジを採用した。

いいなと思ったら応援しよう!