members

members

要素をまとめて映えるバナーに!SNSキャンペーンバナーで使えるアクセントデザイン

Tweet

皆さんはSNSのキャンペーンに参加したことはありますか?
フォロー&RTするだけの手軽なもの、ハッシュタグを流用した遊び心あるものなどさまざまありますよね。
実は、SNSのキャンペーン企画のバナーは差し込むテキストや要素が多く、制作が大変な時があります。

今回は、SNSキャンペーン画像を作成する際、要素が多くても伝わりやすくするアクセントデザインを上記のバナーの修正を通して紹介いたします!

タイトル画像

 

目次
はじめに
【テクニック1】効果的な装飾・漫符
【テクニック2】文字を規則的に配置する
【テクニック3】色を分ける
【テクニック4】背景色のある図形をつける
まとめ

 

はじめに

こちらは、ある水族館のキャンペーンをテーマにしたバナーの例です。
でも、このデザインでは、文字が淡々としていて何を伝えたいのか分かりづらいですよね・・・

 

【テクニック1】効果的な装飾・漫符


画像元

これは、Instagramハッシュタグキャンペーンのバナー例です。
Instagramのアイコン補足として、サンタの帽子イラストを添えてあります。
こうすることにより、開催時期が直感的に捉えやすくなります!
また、アイコンの横に漫符(集中線や喜怒哀楽を表現するマークなど)を入れることにより気づきが深まります。
また、文字裏の装飾にかぶりがありません。背景に何も引かないことにより視認性が上がります!

▼実践

バナー上部にペンギンをイラストにしたカメラアイコンを挿入。
冬感を強調するため雪の結晶を挿入。

 

【テクニック2】文字を規則的に配置する

これは、Instagram・Twitterのハッシュタグキャンペーンのバナー例です。
キャッチコピーの「ポカリ、のまなきゃ。」に「ふえる」「あがる」が同じ規則で波打っています。
文字列に一定のルールを組み入れることで一貫性・統一性を持たせることが出来ます!
また、この場合は「ふえる」「あがる」の文字の意味と比例して波打っており、目がいくように工夫されています。

▼実践

一番注目してほしいハッシュタグに波がゆらめくイメージで文字を配置。

 

【テクニック3】色を分ける


画像元

これは、TwitterのRTキャンペーンのバナー例です。
商品パッケージと比例して文字の色が半分違いになっています。
色を使い分けることにより隣の要素との線引きを図っています。
また、文字色を変えることによりポップな印象に仕上がります!

▼実践

ハッシュタグとキャンペーン説明の裏に濃い青を挿入。
下のキャンペーン期間の文字はハッシュタグより優先度が低めなので、濃い青を使用。

 

【テクニック4】背景色のある図形をつける


画像元

これは、オンラインショップで行われたキャンペーンです。
背景に丸や帯を引いています。
背景色を一部分に引くことにより他の要素を差別化し、優先したいものがはっきりわかるようになります。
「1POINT1円」を黄色ではなく赤にすることにより、パッと情報が入りやすくなります!

▼実践

「水族館グッズが当たる」「キャンペーン期間」「曜日」の背景に図形や帯を挿入。
「水族館グッズが当たる」を寒色ではなく暖色のオレンジに配色。

追加で日付の記述を2.15→29に変更。濃い青の中でも目立たせたい要素のため大きく配置しました。

 

まとめ

最後まで読んでいただきありがとうございます!
今回、要素が多いSNSキャンペーンバナーのアクセントデザインを書かせていただきました。
要素が多いバナーに困ったとき、少しでも参考にしていただけたら幸いです。
キャンペーンバナーを作成するときは一つ一つの情報の塊を意識して配置・装飾することが、ユーザーを混乱させない近道なのではないかと思います。
 

参考

バナーデザインで困ったら試してみたいポイント集
デザインで確実に覚えておきたい、20の基本原則まとめました。
 

使用素材

画像:雪の上の真っ白なアザラシの赤ちゃんの可愛い写真壁紙画像
画像:ペンギンの雪中散歩
イラスト:冬の背景03

 

コラム執筆

  • 尾藤琴菜(びとうことな)
  • 2019年に入社。サービス推進室-SNS/マーケティング推進グループ所属のデザイナー。
  • 趣味は関西にある水族館のあざらしをみること。

【動画解説付き】Googleアナリティクスを使っても 「何が問題か分からない」というディレクター必見の分析術

【動画解説付き】Googleアナリティクスを使っても 「何が問題か分からない」というディレクター必見の分析術

なぜ、Googleアナリティクス(GA)で「何が問題か」に辿りつけないのか、どんなデ ータが不足しているのかが分かり、ユーザテストとGoogleアナリティクスの組み合わせ方が分かります。

資料ダウンロード