【サンプルつき】組み合わせいろいろ！動くバナーのデザインアイデア集
本記事では、動くバナーのデザインサンプルをいくつかご紹介します。今回はgifアニメを用いて制作しました。動きのアイデア解説を参考にしたり、サンプルをきっかけにプライムナンバーズへ興味を持っていただければ幸いです。
バナーには2つの目的があります。1つはユーザーにクリックを促し別サイトへ誘導すること、もう一つは、ブランドの認知を拡大させることです。これらを達成するためには、ユーザーの興味を引くこと・潜在顧客の発掘等が必要です。では、ユーザーに興味をもってもらうにはどうしたら良いでしょうか。
例えば静止画のバナーの中に、動くバナーがあったとしたら目立ちますよね。これは人間の目の「動くものに注意を向けやすい」という性質によるものです。動くバナーはバナーの目的・役割を果たすためのフックづくりに、とても効果的と言えます。
実際にバナーを制作する際は、最初から動きをつけることはしません。まずは静止画のデザインから始めましょう。動きの元となるデザインを丁寧に作ると、動かした後のクオリティが各段に変わります。本記事では、静止バナーのデザインができていることを前提に解説します。基礎となるバナーデザインの解説はこちらの記事をご覧ください。
目次
動きのアイデア1.流れながら段々消える
動くバナーは、文字通り動きがあることが最大の魅力です。動きの種類には、制作が簡単で応用しやすい「上下左右・斜めへの移動」が挙げられます。これは「スライド」と呼ばれ、他の動きと組み合わせやすいため頻繁に使用されます。
スライドだけでは物足りないため、ここに段々消えていくような動き「フェードアウト」を追加してみます。組み合わせると流れながら消える」動きとなり、ただ画像が切り替わるよりも自然に見えます。きれいめであたたかみを感じるため、画像の美しさを表現するにはぴったりです。それでは、実際にどんなものか見てみましょう。
式場探しサイトの春のフェア開催告知バナー
写真のゆったりとした動きで、式場の静かで厳かな雰囲気や空間の広さを表現しています。写真や画像を、大きく扱いながら複数配置できるのは動くバナーの良いところです。
春のブライダルフェアを宣伝する想定のもと、文字・写真をしっかり立たせました。一番大事なフェアの文字情報は、あえて動きをつけず読みやすくしています。
新発売の焼き菓子を告知するバナー
プライムナンバーズから発売される架空のフィナンシェ、「プナンシェ」のバナーです。リッチキャラメル味という設定のため、高級感とキャラメル、フィナンシェ特有のバター味を連想するようなデザイン・色味にしました。「じゅわっ」の文字の動きは、バターがとろけるように段々消えていくイメージです。
文字や画像がふわっと消えていくように見える「フェードアウト」は、柔らかな表現をしたい時に使い勝手が良さそうです。逆に段々現れる動き「フェードイン」を試してみても良いでしょう。
動きのアイデア2.光らせる
高級感を出したい時に、文字色などを金色にするケースは多いかと思います。そこへ動きをつけるなら、本物の金属のように光がキラリとしたら面白いですよね。光らせる手法は動くバナーで広く使われます。速さや光の強さを変えると表情が大きく変わり、作り方次第で色々な種類の光り方に応用できます。文字やオブジェクトを光らせて、リッチな雰囲気を演出してみましょう。
なお、使い方によっては一気に古臭く見えてしまうことがあるため、目立つからといって使いすぎたり、激しい明度差でチカチカさせないようにする注意が必要です。
新規リリースのスマホアプリゲームの告知バナー
タイトルと数字の部分を別々に光らせています。リッチ感はもちろん、ファンタジーな世界観を表現するのに光らせる手法はうってつけです。今回は流れるように光らせていますが、色の切り替わりで表現しても良いでしょう。
炎の女神から祝福を受けた主人公は、運命に翻弄されていく――――という設定で炎の力をまとう剣をロゴに組み込んでいます。本当に存在するゲームなら、実際の短時間のプレイ動画を埋め込んでも良いですね。
二子玉川の新築レジデンスの告知バナー
光る動きにも色々種類があり、このようにレンズフレアの素材を動かすことでもきらめきが表現できます。文字エリアも光らせるとやりすぎ感が出るため、静止させました。光らせるときには高級感が薄れないように加減を調整することが大切です。
レジデンスはタテに動かすことで、高層レジデンスの高さを連想させています。高さのある画像は動きのないバナーの場合、小さい配置になってしまうことも多くあります。動くバナーであれば高さを表現しつつ大きく扱うことができ、かつ情報量が増やせるのです。
動きのアイデア3.素材を動かす
イラストなどの素材を動かすことで、楽しげな雰囲気を演出できるのも動くバナーの魅力です。もちろん、素材を動かさずにそのまま使って活気を出すことも可能です。しかし、いまひとつ物足りないと感じたら動かしてみることも良い一手です。
動かし方は大きく分けて２つあります。1つは「まとめて動かす」、もう1つは「パーツごとに動かす」方法です。「まとめて動かす」とは、1つの素材を分解せずそのまま塊で動かします。例としては、いくつかのハート素材を同じ距離感・角度のまま移動させるなどです。
「パーツごとに動かす」とは、例えばキャラクターの素材を手とその他に分け、手を振る動作をしているように見せることを指します。素材とバナーの雰囲気に合うのはどういう動きか、試しながら考えてみましょう。
物流事業会社の告知バナー
イラストは、全体の印象から受ける堅さを減らしてくれます。そのため、印象UPを狙う堅い業種におすすめです。
トラックはパーツを分けて動かすことで、車体が揺れているのが分かります。背景はまとめて動かすと、トラックが進んでいるように見えます。この2つが合わさることで、トラックが地道に荷物を運んでいるような動きとなります。このように、塊としてまとめて動かす・分けてパーツごとに動かす手法を使い分けると動作表現が豊かになります。
塾の新規生徒募集バナー
小学生以下を対象にした、将来のエリートを育てる塾のバナーです。子供向けの商材を扱うデザインには、手書き風のイラストを使うのがおすすめです。動きも可愛くなるように、比較的簡単な動きにすると良いでしょう。イラストと相性のいい動きを使うと、より演出のクオリティが上がります。
例えばこのバナーのように、電球のイラスト周りの効果（サンバースト）を表示・非表示の部分で分けるなどです。電球がピカピカと光っているように見えて、可愛い印象になります。色が変わったり角度を変えたりするのも可愛い表現に使える手法です。
動きのアイデア4.ストーリー性を持たせる
動くバナーは、色々なシーンを1つの画面で表示できるためストーリー表現に向いています。注意点として、広告の秒数指定の確認が必要です。クライアントや広告の種類によって、指定される秒数は違います。複雑に展開していくものは、構成案を作成するのも手です。構成案があると、指定時間内に収まるようにシーン数の調整がしやすくなります。
ストーリーは簡単に、かつ最後まで見たくなるものにします。そうすることで、ユーザーの離脱率が下がり、クリックしてもらえる確率が上がります。実際にストーリー展開のあるサンプルを見てみましょう。
転職エージェントサイトのバナー
この転職サイトは20代～30代をターゲットにしています。そのため、分かりやすくコマ送りの動きで展開し、キャラクターのコミカルな表情でキャッチーなテイストにしました。
ストーリー性を持たせることは、複雑に人物が動いたり場面が変わったりするものだけではありません。今回のように、同じキャラクターの表情で起承転結が移り変わるのも立派なストーリーです。現職の不満に寄り添いながら転職を促す、というようにターゲットの興味を引けるような展開にしましょう。
まとめ
ここまでで、「流れながら段々消える」「光らせる」「素材を動かす」「ストーリー性を持たせる」の4アイデアをご紹介しました。お気に入りや取り入れたい動きはあったでしょうか。
4つのほかにも、動きの種類はたくさんあります。また、複数の動きを合わせることで何通りにもなります。扱う商材や表現したい雰囲気に合うように、色々と試してみることをおすすめします。
依頼する際の注意点
もし動くバナーを制作会社に依頼する時には、以下の3点に注意しましょう。
- 通常バナーより少し価格帯が上がる
- 静止画の修正点は動かす前の段階で依頼する
- 伝えたいことに優先順位をつける
通常バナーより少し価格帯が上がる
静止画のバナーより価格が少し上がるのは、動かす作業のぶん制作工数が増えるためです。こちらに関しては、皆さんなんとなく想像がつくかと思います。工数量は、動きの難しさにも関わるためまちまちです。
静止画の修正点は動かす前の段階で依頼する
静止画の修正（画像の入れ替えや文字の修正など）は、なるべく動きをつける前にまとめて依頼します。動きを付けた段階で、静止画の修正を行うのは骨が折れます。なぜなら、極端な場合ワンシーンずつその修正をする必要があるからです。
動きが複雑であればあるほど修正の難易度は上がります。できる限り静止画での修正は動きがつく前に依頼するのが良いでしょう。
伝えたいことに優先順位をつける
伝えたいことに優先順位をつけるのは、静止バナーでも同じです。ただ、動くバナーはそのシーンごとに文言や画像を表示・非表示にできるため、よりはっきり付ける必要があるのです。順位があやふやだと、一番伝えたいことが途中のシーンで一瞬出てくるだけということになりかねません。文言に限らず画像にも表示したい順番などがあれば、依頼時に伝えておくと良いでしょう。
プライムナンバーズに依頼するメリット
動くバナーを初めて依頼するなら、プライムナンバーズへお声がけください。まずはお困りごとや訴求したいことなどを整理するところからヒアリングいたします。初めてで不安なこと、気になっていることなどお気軽にご相談ください。
また、広告運用の成果を踏まえて効果的なクリエイティブの提案が可能です。これまで培ってきたノウハウとその時々の市場・ターゲットを鑑みて、ご要望に合わせた成果の出るバナーをご提案します。
