キャンペーンバナーのデザイン参考インプット🎨 #01
新卒1年目デザイナーの@ktrk1625です🐈
UIやグラフィックデザインに関心があります🎨 / コーディングにも関心があります⚙️
この記事は何？
デザインの幅を広げるために、バナーの印象とその理由を言語化する記事です📝 シリーズになる予定です🗓️
今回はキャンペーン系のバナーを3つ紹介します！参考になれば嬉しいです。
時間がない方は、目次から🔗今日のポイントだけでも見てみてください👀
⚠︎注意：個人的な見解に基づくことを前提としてお読みください🙏
言語化の手順📝
以下の手順でバナーのデザインを言語化します。
次の章からさっそくバナーの言語化していきます💪
1. バナーを見た印象を書き出す
2. 印象の理由になりそうなことを書き出す
3. その他気になった点を書き出す
今日のバナー #01
印象
夜
冬
情報が多い
目の動いた順番👀
カルピスサワーの写真 -> カルピスサワーの濃い、贅沢な味わいとフォロー&リツイート -> 抽選で100名様とその周辺 -> 新発売と下の文
リッチ感
印象の理由になりそうなこと
夜・冬
画像の中で寒色の紺が多くを占めている
主に紺・白・金で暖色系が使われていない
全体的にフォントが細い
細くてしなやかな感じが冷たそうに見える
もし太いゴシックだとすると、暑苦しい感じが出ると思う
リッチ感
細い明朝体
装飾がシンプル（ラインやサークルなど）
紺×金色グラデ
背景の紺色もグラデーションになっている
目が動いた順👀
（カルピスサワーの写真 -> カルピスサワーの濃い、贅沢な味わいとフォロー&リツイート -> 抽選で100名様とその周辺 -> 新発売と下の文）
写真の左右は余白が広く、真ん中に配置されている
金色ラインより上の部分は縦書きだから右から読んだ
フォロー&リツイートは領域が広くて目立つ
抽選で100名様の部分は写真が左側にあるのもあり、ひかれた
100が大きいのも目に入る
その他
凝ってると感じる部分
抽選で100名様に当たる！付近のカルピス映り込みがある
大きいカルピスサワーの画像がちゃんと地に足ついて見える
背景のグラデーションとは別で下に影がついている
今日のバナー #02
印象
勢いがある
華やか
背景暗めなのに
「5」が目立つ
あまり見ないレイアウト！
印象の理由になりそうなこと
勢いがある
「得々祭」と概要の斜め配置
提灯が大きさ変化したり、角度が変わることで奥行きが出る
夏のオブジェクトが画面外に飛び出す勢いで散らばっている
「得々祭」の赤が強い
メルカリ！感もあるし、勢いが増して目に入る
華やか（背景暗めなのに暗く見えない）
背景が真っ暗ではなく、紫〜紺のグラデになっている
花火や提灯、細かい光のテクスチャーがあってキラキラ
テキスト情報が大きめだから、暗いなと思う領域が意外とない
その他
出品横のカメラアイコンが花火の真ん中にちょうど重なって収まりが良
オブジェクトが浮かんでるように感じる
うちわは持ち手の紐の動きがふわっとしてるから
水風船も角度が落下する時の水の傾き
情報がうまくまとまっている
文章にすると長い→「出品するだけで5%ポイントバックお得チケット（おひとり様最大5枚まで）もらえる！」
「5%」や 「もらえる！」お得に感じるワードが大きく目立っている
おひとり様最大5枚までが白背景なことで、概要部分のかたまり感が増してる
今日のバナー #03
印象
コアラかわいい🐨
子供向け
手が込んでいる
にぎやか
キュート
ポップ
図工
印象の理由になりそうなこと
子供向け
バナーに動きがある
散らばるオブジェクトや特徴的なタイトル
色合い＋諸々装飾
色合いは黄色・オレンジがメインぽくてカラフル
コアラの写真の加工
白ふちに影があって、ステッカーのようなラフさ
タイトル周りの装飾
はらいが省略されていたりして、キッズっぽいフォント
手が込んでいる
ネジで止まっているような 「コアラ自由研究」
「由」と「研」の横がギザギザ
全部ネジだと単調になってしまう
板が組み合わさってるみたいな文字
図工感！🪚
太い・はね/はらいが省略されている
線の太さが一律
「キャンペーン」
「ぺ」の丸が歯車など細かいところの装飾
「夏休み」の虫眼鏡のツヤや背景がちゃんと抜けて見えている
現実と比べて違和感がないことも大事
背景の装飾が多い
方眼紙のようなチェックでノート感がある
散らばっているオブジェクト
全部にちゃんと影がついている
角が調整されている
掠れてるテクスチャー
オーストラリアの図や背景
コアラのマーチくん
ちゃんと夏休み仕様
その他
情報量的には少ないけど、スカスカ感がなく充実している
タイトルと背景が凝っている
コアラの写真をうまく動きがあるように使っている
今日のポイント
目立たせるには、一旦デカくしてみる！
目立たせたいものの周りを余白広めにするのも一手！目線の誘導の仕方も大事です。しかし、何よりデカいと目立つ。
何か単純すぎる！と思った時にやってみると良いこと
背景やオブジェクトにテクスチャーをつけてみる
オブジェクトの影や動きを現実で見た時のように調整する
雰囲気にあったフォントを選ぶ＋オブジェクトに一部置き換えてみる
まとめ
最後までお読みいただき、ありがとうございます🍨
バナーの言語化、いかがでしたでしょうか？
手順はシンプルなので、軽いインプットとしておすすめです⭐️
他にも気づいた点などあれば、コメントください💭