
『バナーデザイン練習 10本ノック』をやってみる【①シャンプー】
Webクリエイターボックスの『バナーデザイン練習 10本ノック』というお題にチャレンジしています。
のちのちポートフォリオにも載せたいので、備忘も兼ねてnoteにまとめてみました。
今回のお題について
架空のシャンプーのバナー
詳細:バナーデザイン練習 10本ノック 1.シャンプー
成果物

こだわったところ
最初はパッケージと同系色のピンクを検討したが、商品が馴染んで目立たなかったことや楽しい印象を出したかったことからオレンジを採用。
テキストはシャンプーのポンプと色を揃え、統一感を出した。また、文字組みにはイラストレーターを使用。
シンプルにしすぎると高級感につながると考え、背景の装飾やよく見る日本語書体を使用し、親しみやすさを演出。
かわいさに繋がるよう、曲線的な印象を目指した。
難しかったところ
「楽しい」の表現の仕方。背景のオブジェクトをランダムに配置し、円とハートを混ぜて配置してみた。
商品の影の付け方。加減が難しかった。
テキストはどこに揃えるか。
何色が良いのか悩み、何パターンか作成してから決めた。
制作の流れ
①ざっくり方針を検討
若い女性向けのシャンプーや化粧品のバナーやウェブサイトのデザインを調べ、以下のような方針に決めた。
商品画像をわかりやすく配置する。切りすぎない。
色は柔らかめのトーンにする。
過度に安そうに見せたくはないのでごちゃごちゃさせないが、多少の賑やかさは持たせたい。
「かわいい」「安い」「楽しい」が求められているので直線よりも曲線的な印象を目指す。
②レイアウトや色を検討


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

最初に作った下部に曲線のオブジェクトを置くパターンだとシンプルすぎると感じ、背景にハートや円を置いてみた。
シャンプーは泡立つものなので円だと泡っぽくて良いのではと考えたが、若干単調に感じた。
かわいさに振り切ってハートはどうかと思ったが円をそのままハートに置き換えるとかわいくなりすぎてしまうと感じ、目がいくであろうテキスト付近はハート、それ以外は円を配置してかわいさと程よい賑やかさは持ちつつ子供っぽすぎない仕上がりを目指した。
色は背景のオブジェクトが目立ちすぎないのも賑やかさを損なうように感じたため、オブジェクトの見えやすいオレンジを採用した。