キャンペーンバナーのデザイン参考インプット🎨 #02

新卒1年目デザイナーの@ktrk1625です🐈
UIやグラフィックデザインに関心があります🎨 / コーディングにも関心があります⚙️

この記事は何？

デザインの幅を広げるために、バナーの印象とその理由を言語化する記事です📝

今回はキャンペーン系のバナーを3つ紹介します！参考になれば嬉しいです。
時間がない方は、目次から🔗今日のポイントだけでも見てみてください👀

⚠︎注意：個人的な見解に基づくことを前提としてお読みください🙏

言語化の手順📝

以下の手順でバナーのデザインを言語化します。
次の章からさっそくバナーの言語化していきます💪

1. バナーを見た印象を書き出す
2. 印象の理由になりそうなことを書き出す
3. その他気になった点を書き出す

---

今日のバナー #01

LINEマンガ推し活WEEK

印象

• ダークかわいい

• ステージっぽい

• ポップ

• ネオン

• 立体感がある

印象の理由になりそうなこと

ダークかわいい

• 紫が夜っぽさとか暗い雰囲気を出している

• 使っている色合いはポップなので、暗すぎない

  • ペンライトの色とか黄色・ピンク・蛍光緑などなど

• 日が暮れる前の空の色合い

日が暮れる前のピンク色の空の写真

ポップ

• 黒が影やラインで使われていて、輪郭はっきりする

• タイトル「推し活WEEK」

  • 「活」のキラキラ

  • WEEKがドット絵ぽくなっている

    • 昔のゲーム感、レトロ感が出る

• モチーフ

  • 星、ハート、煙、ポインター

  • 形は単純でポップだが、ハートと星は塗りが多面的になっている

    • ポリゴンっぽい？

    • 3種類ぐらい同じ色の明度違いを使っている

    • リッチさが出る

  • ポインターも「WEEK」のようにドットぽい

立体感がある

• タイトルの白フチ、黒いかげ

  • 飛び出している感じが出る

  • 白フチがあることで立体感でる

• ハートとペンライトに奥行きを感じる

  • ペンライトが内側に狭まるように配置されていることでハートが奥に感じる

• ポストでもらえる！が手前に飛び出ている感じ

• 星やキラキラの大小

その他

• ハートの形が隠れ気味だけど、ハートを感じる

  • 紫と色が近いピンクだけど黒のラインがあることで境界はっきりしてる

• 単調に見えないのは、

  • 煙が細かいイラスト

  • 星・ハートの色の付け方

  • タイトルの装飾

今日のバナー #02

2023年11/23~のユニクロ感謝祭

印象

• 冬

• ユニクロ〜！

• シンプル

• フラット

• 目線の動き方👀

  • 感謝祭（うっすら上のサブタイトル）-> 日付 -> 「何着て冬本番に進む？」-> フォロー&リプライ〜 -> 10000円分

印象の理由になりそうなこと

冬

• 背景のアイボリー

• イラストの人の服装

  • 全体的に抽象度高いけど黄色の人、ダウンだとわかる

  • マフラー、耳当て、ニット帽

  • 長袖で分厚そうな感じがするニット

  • シルエットが大きめだからか

・ユニクロ〜！
・シンプル

• 赤白

  • 背景がアイボリーでも赤の面積が大きく見える

• フォント

  • 癖ない

  • ヒラギノ角ゴが近い？

  • DINとのバランスがいい、日付のところ

• イラスト

  • 目や口に特徴がない

  • 線が単純

  • ベタ塗り

  • 手などかなり省略されている

• 装飾

  • 特徴的な装飾がない

    • 下の訴求部分との境目がまっすぐ

    • 座布団

    • ノーマル吹き出し

その他

• イラストが色んな年代の人、国の人、性別の人、髪色の人が描かれている

• 引きがあるところの強調  「UNIQLOギフトカード」「10,000」

今日のバナー #03

8/8(月)～10(水)の3日間限定で「ダブルカップにパチパチキャンディ無料トッピング」クーポンが貰えちゃう✨

印象

• 情報がたくさん！でもみやすい

• 目線の動き方👀

  • パチパチの日 -> お持ち帰り-> 3日間限定〜 -> 配信期間（画像はイメージです）-> 31Clubアプリ会員限定

• サーティーワンだ〜

• 元気

• ポップ

• 華やか

印象の理由になりそうなこと

情報がたくさん！でもみやすい

• 帯やバッジのように塊になっていて、ただテキストが並んでるよりも見やすい

• 強弱がある、目立たせる部分が訴求効果高い

  • タイトル部分でも トッピングが特に大きい

  • 「3日間限定」はお客さんにとって、希少性が生まれて訴求文として大事

  • 「無料」お得感を持たせるキーワード

サーティーワンだな〜

• 写真の影響が大きい

• 上部の帯の色がパチパチキャンディーの色

  • 人気のアイスだから、色の印象で31だ〜となる

ポッピングシャワーのアイス

・ポップ
・華やか

• 文字がウキウキ

  • 全く同じではないけどこういう感じ

  • https://lets.fontworks.co.jp/fonts/218?utm_source=mojicity&utm_medium=referral&utm_campaign=mojicity_photokara

  • 安定してない感じがする

• 「パチパチの日」の背景装飾

  • ラインや影が入っていてポップな印象

  • 「パ」の丸がトゲトゲになってる

  • パチパチがずれて配置されているのが動きが出ていて元気

• 彩度高めで色数多い

• 背景がただの無地ではなく、888...の模様

  • 無地背景でなんか足りないなって時にバナーのモチーフを薄く背景に載せてみたりするとリッチになるかも

• パチパチキャンディをかけているような動き

• アイスの画像を少し角度つけてることで動きが出ている

• 帯のあしらいがギザギザ

---

今日のポイント

背景の装飾を工夫すると、リッチになる！

• 無地の背景で物足りない時

  • バナーのモチーフを薄く背景に載せてみる

  • テクスチャーつけてみる

バナーの世界観を大事にする

• 季節感も含めて、世界観を壊さないようにする

  • ユニクロの例：冬のバナーなら冬の服装、色合い、オブジェクトにこだわる

  • LINEマンガの例：推し活 -> ステージを連想するネオンの配色、ペンライトモチーフ

• タイトルやキャンペーン内容から連想して、配色・オブジェクトを決める

まとめ

最後までお読みいただき、ありがとうございます🍨

バナーの言語化、いかがでしたでしょうか？
手順はシンプルなので、軽いインプットとしておすすめです⭐️

他にも気づいた点などあれば、コメントください💭