見出し画像

[更新]バナートレーニングの記録

しいのき | Webデザイナー

こんにちは！Webデザイナーのしいのき(@ShinokiDesign)です。

2021年の1月から10代〜20代女性をターゲットにした商品を開発する会社に転職したので、若い女性に刺さるデザインを勉強するため、他社バナーの模写を始めました。

その記録をこちらのnoteに更新していきます。
フィードバックなどコメントでいただけると励みになりますので、
ぜひぜひ、よろしくお願いいたします🙇‍♀️

この記事のサムネイルはこれまでの模写で学んだ「女性向けのポイント」を使っています。

◆サムネイルで使用した女性向けデザインのポイント◆
①丸は正円ではなく少し歪ませる
②グラデーション
③影を半透明にすると艶感が増す
④手書き風英字の筆記体
⑤フォントは数種類使用する


#01_口紅・新商品の認知広告

20210203_バナトレ01_分析

20210203_バナトレ01

#01 banner training

◆ターゲット：10代後半〜20代女性
◆目的：新商品に認知
◆所要時間：120分
◆感想：最も発見だったのは、右下の円。正円ではなく、少し歪んだ円になっていて、3色のカラーが使われている。このあしらいを入れた途端にデザインが今っぽい感じになり、グッと女性向けの雰囲気になったことに驚いた。

とくに影になっている部分を入れたときに全体の抜け感が出たような気がした。ルージュの艶感を現すようにモデルさんが艶っぽい雰囲気になっているが、この影の部分も唯一半透明になっていて、艶感をプラスして全体を引き締めている。

目立つ部分に口紅で書いたような筆記体の英字が配されていて、手前のピンクの文字は掠れたような加工がされている。全体的に「正統派ルージュ」ではなく少し崩した感じ、濡れ感・艶感が意識されていると感じた。

◆女性向けポイントまとめ◆
・彩度高すぎない対比色
・手書き風英字の筆記体
・少し崩した円のモチーフに半透明の影
・濡れ感・艶感

おまけ
モデルさんの画像はフリー素材のこの方を加工しました。
メイクもバナーに合わせたことで「バナーが何を意識しているか」がすごくわかりました。

画像3

◆メイク加工で気付いたこと◆
・ルージュのピンクを映させるために画像は青みがかっている
・「艶感」「濡れ感」を出すためにハイライトをかなり入れている


#02_Vogueオンラインのリップ特集記事

分析#02

20210204_バナトレ02

#02 banner training

◆ターゲット：20代女性
◆目的：カジュアルリップの特集記事内容を1枚で表現する、集客
◆所要時間：120分
◆感想：Vogueのリップ特集のバナー。ポップだが、扱うリップにハイブランドの物もあるので、書体にセリフ付きを選んで崩しすぎないように配慮されていると感じた。

バラバラとしているようで、視点が真ん中に集まるようにリップが外側に向くように配されていたり、あしらいの三角も中心で重なるように置かれている。

#01でも思ったが、丸を崩してふにゃっとした感じにすると今感が出る気がする。

「日常使いで使えそうなリップを沢山見れそう」という記事の内容とワクワク感が表現されている。

◆女性向けポイントまとめ◆
・彩度高すぎない対比色
・黒をアクセントカラーにする
・ふにゃっとしたモチーフ
・影に柄を使う
・英字のフォントを複数使う

おまけ

前回メイクでかなりバナーの意図が掴めたので、
今回もモデルさんのメイクから加工してみました。

画像6

◆メイク加工で気付いたこと◆
・口紅のピンクを映させるためにかなり白い肌の人を起用している
・「口紅の特集」ということが分かりやすいように口紅が濃い
・モデルさんにそばかすを入れるとぐっとカジュアル感が増した


#03_モデルさんがいない場合の特集記事バナー

分析

20210210_バナトレ03

#03 banner training

◆ターゲット：10代後半~30代女性
◆目的：ファンデーションの特集記事内容を1枚で表現する、集客
◆所要時間：120分
◆感想：人気雑誌「LDK」のWeb版記事のバナー。
#02のリップが散っている特集バナーのモデルさんがいないverを練習するために選びました。

「LDK」の雑誌版は人力感を表現するために手書き風文字を多用しているため、バナーの一部手書きのような加工にして、一目でLDKの記事である事がわかるような工夫がされている。

背景の幾何学模様の作り方が勉強になった。

◆幾何学模様の作り方◆
①六角形ツール
②回転ツール30度回転
③直線ツールでベンツのマークのように3本ラインを引く
④パスファインダーから「分割」
⑤分割したパーツをカラー変更
⑥おびジェクト＞パターン＞作成
⑦タイルの種類を「六角形」にする
⑧保存


#04_モデルさんを活かした魅せ方

分析

20210514_バナトレ04

#04 banner training

◆ターゲット：10代後半~20代前半女性
◆目的：カラコン商品のイメージビジュアル、商品ページへの誘導
◆所要時間：120分
◆感想：橋本環奈さんがイメージモデルのカラーコンタクトレンズの訴求バナー。文章の途中に目元が見えることで、目線の流れ的にも目元が凄く印象的に感じた。

テキストのサイズや置く配置にリズム感があり、見ていて心地よいテキストの配置が勉強になった。

商品の透明感を表現し、画像を邪魔しないように「瞬」と「透」がぼやけているところにテクニックを感じた。右にテキストが多い分、真ん中よりも少し左側に寄っている。目元が綺麗に見えるように白目が本来よりもかなり白く補正されている。

◆女性向けポイントまとめ◆
・背景の淡いグラデーション
・ハイライトを部分的に強めに入れて瑞々しさを表現
・文字の大小とボケ具合はまるで文字が動いているようなエモーショナル感


ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー

最終更新：2021年5月14日
今後も随時更新してまいりますので、
応援いただけるとやる気が出るので嬉しいです🙇‍♀️

ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー

▼進捗


ご覧いただきありがとうございます☺️Webデザイナーの方のためになる記事、一緒に勉強が頑張れるような記事を書きたいと思っていますので、応援していただけるととても嬉しいです。