スポンサーリンク

ジューシー果汁に埋もれたくなるバナーデザイン【のほほんリラックス雑談付】

jucy illustration/Photoshopの操作

どうも、みなとんです。
今回もバナーの編集をしていきます!

その前に、まずは、約3分の雑談でリラックスしてくださいね。

まずはリラックス



記事を読んでいただく前に雑談でリラックスしてもらいたいなと思っています。
そこで、雑談。
朗読などと比べてちょっとラフですが、まずデザインについて考える前にすこ~しでもリラックスしてもらえたら嬉しいです。
リラックスは発想転換やひらめきのために必要なことだと聞きます。

デザインを考える中の発想やひらめきのためにも聞いてもらえたらいいなという気持ちで雑談しますので、よかったらまずはこちらをお聞きください。

↓↓↓

※他サイトへの貼り付けなどの二次使用や悪用は禁止です。著作権は放棄しておりません。

聞いてくださったあなたへ
ありがとございます!
気分転換にだけでもお役にたてたら嬉しいです。

それでは編集のお話に戻りましょう。

今回も、’’勝手に’’バナー修正させていただきました。


制作中に脳内で考えたこと(ワタシAとワタシBの会議)も恥ずかしながら、でも遠慮なく公開していきます。

はじめに~デザイン編集について~

★リピートしてきてくださったあなたへ★
どうぞこの項目は飛ばしてください。
(再訪問、とっても嬉しいです。ありがとうございます。)

初めてみてくださったあなたへ**デザイン編集について**

この記事ではセンス以外の理由で、すでにあるデザインを編集していこうと思います。

「このデザインはこうした方がもっと効果だせるんじゃないか?」という視点から「私だったら、こうしたいなあ。」とデザインを ”勝手に” 編集してみています。

センスでなんとなくこっちの方がいいかもと編集するよりも、心理学とか人の視線の傾向的なことを考えながら、勉強しつつ試しているところで、「センス」と呼ばれるモノの根っこに迫っていけたらという想いからはじめました。

なんとなくでデザインするより、どうせならしっかり成果のだせるビジュアルに仕上げたいと思い立ったのがきっかけでした。

私だったら、こうしたい!

今回のバナーはこんな感じで編集しました↓

※BeforeはPintarestさんから拝借

シャンプーの販促バナーです。
この記事を書いている今は秋なのでちょっと時期はずれかもしれませんが、お付き合いいただけると嬉しいです。

次の項目から主に大きく変更した3つのことをお話させてもらいます。

【編集ポイント】その1 全体的な雰囲気を変えたい

このバナーをみて、私はドリンク系のバナーなのかと思いました。
でも、これはシャンプーのバナーです。

脳内で下記のように考えました。

わたしA
わたしA

これってシャンプーのバナーよね?ドリンクっぽく見えるけど。オレンジとかレモンジュース的なかんじのやつ。

わたしB
わたしB

なんでだろ…そして、なんか重たいよね。

わたしA
わたしA

せっかくタイトル周りは泡があってシュワってなってるのに、全体的にその雰囲気が薄い気がする…

わたしB
わたしB

もしかして、背景がべた塗だからかね

わたしA
わたしA

たしかに、べた塗ならものによっては重くなるし、右上にひんやりってあるのにあんまり爽快感が感じられないのみそのせいかも

説明画像イラレで作成_01

ということで、背景をグラデーションにして軽みを出すことから修正しました。

全体的な雰囲気周りで修正した点は以下のような感じです。

【雰囲気を変えるための編集ポイント】

●背景をべた塗→グラデーションに
色が徐々に変化することで軽さを出す
 ※濃い色のグラデーションの場合は薄い色を間に挟むのがおすすめ

●シャンプーの雰囲気を出すために泡を全体的に散らす
白い泡を散らすことでより雰囲気も軽くなった。

●オレンジとレモンのイラストを小さくし、商品画像を大きく
→商品よりイラストが目立っているので、商品をより目立つように変更。
 バナーはパッと見が重要
 イメージ重視のバナーではないので、商品を前面にアピール。

これによって、大分雰囲気が変わったかと思います。

説明用1

【編集ポイント】その2 タイトルからも果実感をだしたい

次は、タイトルです。そこまで大きく気になったわけではありませんが、「果汁に包まれる」とのことで果汁感をもう少しだせたらいいなと考えました。

また、商品を大きくしたので、このままでは、タイトルを小さくせざるを得ませんね。

そこで、いろいろ考えてみました。

わたしA
わたしA

まずタイトルの文字は小さくしたくないよね…タイトルだし、果実感を大きくアピールしてるのってこのタイトルだし

わたしB
わたしB

それなら、逆にもっと大きくした方がいいかもしれないしね。

でも、上の小見出しがあるとタイトルは小さくしないといけんから、小見出しを違う形で伝えられないものか?

わたしA
わたしA

うん。小見出しの『すーっと冷んやり』は別で配置だ!

あとは、タイトルの感じ。もう少し果実感を伝えられたらいいかも。
もっと、お客さんが、自分がこの商品でシャンプーした時にどうなるか想像したくなるような…

わたしA
わたしA

じゃあ、タイトル文もちょっと変えていこうかね

わたしB
わたしB

あと、グラデーションの白が背景でも文字を目立たせながら、果実感を伝えられる雰囲気にしたらいいかもやわ

タイトルから果実感を味わってもらうための編集ポイント】

●タイトルを果実をより感じるものへ変更
→「ジューシー」という擬態語を入れて、もっとお客さんの感覚に訴えられるように

●文字背景にオレンジの影をつける
→冷えてスッキリした印象を与えつつ、文字を読みやすく、加えて果実を感じてもらえるように。
※影は、Photoshopレイヤースタイルの光彩(外側)と境界線で調整

●文字フォントを変更
→手書き風のフォントにしてシャンプーづくりへ強くこだわりのある感じを出すため。
※文字はもちろんそのままでもOKだったのですが、今回アレンジを加えてみました。ただ、正直もう少し太くできたらよかったなと、反省も残りました…

これによって、特にタイトルの雰囲気が変化しましたね。

説明用2

【編集ポイント】その3 アピールしたいところは目立たせて、メリハリをつけたい

最後に気になって編集したのが、右上のオレンジ内に書かれた「限定 涼やか薄荷ブレンド」とタイトル上の「すーっと冷んやり」です。

「すーっと冷んやり」は先ほどの編集で外したので、どこに配置するかを考えなければいけませんね。

わたしA
わたしA

まず、『限定 涼やか薄荷ブレンド』から考えようかね。これってもっと目立った方がいいんじゃないか?

わたしB
わたしB

たしかに!画像の解像度の関係もあるかもしれんけど、見にくい気がする。しかも、このバナーどれくらいのサイズで表示される予定なんやろ?

わたしA
わたしA

正方形に近いしインスタとかかなあ?SNSかも?

わたしB
わたしB

SNSなら大きく見えるかもだけど、でも、twitterなら画像をタップしてもらわんと見えないサイズでは?拡大して見なくても、SNSで画像が流れてる状態で読んでもらえた方がいいよね。限定なんやし

わたしA
わたしA

限定ものって特に女性の心くすぐるって言われとるしなあ。位置を変えよう!

わたしB
わたしB

でさ、右上のところに『すーっと冷んやり』を代わりに入れたらどうやろ。文字数も少なめやからきっとそんな見えずらくはないと思う

説明画像イラレで作成_03

こんな感じで考えた結果、小見出しと限定の文言を際立たせるように編集しました。

編集の内容やその意図は下記にまとめてます。

【限定文言を際立たせるための編集ポイント】

●「限定!」を際立たせる
「限定」の文字を大きくし、限定内容とジャンプ率をつけることで、まずはタイトル・商品画像の次に「限定!」が目に入るように。

●限定をアピールした斜め線は鉛筆線
→全体の雰囲気と合わせるとともに、原料が大切に扱われているような表現に。

●「すーっと冷んやり」は泡の一部として配置
商品が目立つことを邪魔せず、しっかりアピールできるように。

「すーっと冷んやり」は清涼感を泡形の「ぼかし」と抜き文字で演出

少し変えただけですが、特に限定部分は大きく目立ち、まとまりも崩れず完結できました。

説明用3


最後に、一番元の画像→最後の画像
を確認してみましょう。

<Before>

元

<After>

アレンジ-2

さいごに

編集中考えていることを、遠慮もオベッカもなしで書かせてもらいました。


方言とかもあって少しお恥ずかしいですが…(私は九州出身なのです)

私の場合、こんな風に頭の中で会話しながら過去の知識を引き出しつつ編集したり、デザインを生み出したりしています。


あなたが、デザインを考えるなかで、少しでも参考になれたら嬉しいなと思っています。

とにもかくにも、長い内容を最後まで読んでくださってありがとうございます!!

読んでいただけること、私としてはものすごく嬉しいです!

不定期更新ですが、できるだけわかりやすく&できれば楽しんでもらえるような投稿を心がけて次も楽しくやっていきたいと思います。

またきてください!ぜひ!
そして、欲を言うなら、いいねボタン押していただけるともっと嬉しいです。(飛び上がりそうになります。冗談ではなく)

もっと欲を言えば、「読みました~」とか一言でもコメントいただけると大変嬉しいです。
ただ押し売りは苦手だし嫌なので、これくらいにします~。



みなとんでした♪








※このブログは個人的な研究や視点・観点をもとに執筆しています。
したがって、読んでくださったあなたのデザインや広告内容の売上等を確実にアップさせるというものではありません。
あくまでこんな工夫があるんだなという観点でよんでいただけると嬉しいです。

抹本について
この記事をかいた人
designkagaku

プロフィール

□■□ 名前 : 抹本 港 □■□

同じものでもデザインを着せればお客さんの反応が変わる!
無駄になるようなデッドストックも表現の方法を変えて欲しいという人をつくる!
そんなプロジェクトのために勉強&実践している現役デザイナーです。

▼経歴などの詳しいプロフィール上の「designkagaku」を押してください。
プロフールのページへ移動します。(下記のページへ移動します)
https://design-kagakusiki.com/profile/hajimeni/

個人的には、お土産のパッケージや雑貨屋さんの封筒・カードデザインとか。つい目がいって長居してしまいます…

まだまだブログには不慣れですがよろしくお願いします!

designkagakuをフォローする
illustration/Photoshopの操作 すぐ使えるテクニック
スポンサーリンク
                          \ この記事をシェアする /
designkagakuをフォローする
リアクションのために私が実践してるデザインのテクニック

コメント

スポンサーリンク
タイトルとURLをコピーしました