【デザインチーム通信vol.1】リッチバナー広告について
皆さんこんにちは！ヒトクセ開発本部デザインチームの齋藤と申します。
今回、ヒトクセ開発本部の情報発信の担当をすることになりました！
「デジタル広告の会社といっても、開発サイドは実際に何をしているの…？」という方も多いかと思いますので、
普段私たちが携わっている業務の技術や、制作の時に気をつけていることなどを当ブログでご紹介していけたらと思います！
ちなみに私はヒトクセ勤務3年目で、普段はバナーやWEBサイトのデザイン・イラスト制作・コーディング等に携わっております。
まず今回は「ヒトクセと言えば！」というところでリッチバナー広告に関する業務についてです。
そもそも、リッチバナーって…？？
という方もいらっしゃるかと思いますので、改めてご紹介させていただきます！
リッチバナーは、動きがあって触ることができるバナーです。アンケートやゲーム性のあるもの等、触ってもらうための仕掛けが施されており、見た人に興味を持ってもらえる可能性が静止画バナーよりも高いです。
弊社サービスの「Smart Canvas」はこのような動きがあって触れるWebコンテンツ「リッチクリエイティブ」を誰でも簡単に作れることが強みです！
ヒトクセで扱うリッチバナー広告にはさまざまなフォーマットをご用意していますが、やはりその時のトレンドに合わせた新しいものを追加していく必要があります。
ビジネス開発本部のメンバーと情報共有をしながら、新しいフォーマットを使ったデザインの制作や活用事例のアイデアを出していくのが私たちの仕事です。
それでは、今回は３種類のリッチバナーフォーマットについて、紹介を兼ねて、制作のポイントをご紹介したいと思います！
｜プリズムバナー
例えばこちらのプリズムバナーは、回転する角柱でユーザーの視線を集めてアクションを促すことができ、各面で異なった内容を表現したり、４コマ漫画のようにストーリー性のある訴求をしたりすることも可能なフォーマットです。
制作のポイントとしては、
・どう触るか分かる様に指と矢印をつける
→エンジニアに相談して指に動きも付けてもらうことが多いです。そうすることで見ている人に触り方を理解して貰いやすくなります！
・文面で触ってもらえるよう誘導する
→動きと合わせてインパクトのある文面でも説明することで、相乗効果を生みます。
｜スクラッチバナー
こちらは、スクラッチというフォーマットのバナーです。
スクラッチバナーは、訴求したい内容をあえて隠しユーザーにアクションさせる事で訴求内容を強く印象づけるバナーです。
制作のポイントとしては、
・思わず触りたくなるような質感を意識する
→こちらでは、Illustratorのグラデーション機能を使って触る部分を現実のスクラッチ銀紙の質感に寄せ、「こするもの」だということが直感的に分かるようにしています。
・めくれることが分かるようなデザインにする
→銀紙の端にめくりを入れることで、「この下になにか情報がある！」ということを意識してもらえるようにしています。
｜ライブラリーバナー
こちらのライブラリーバナーは、インビューに合わせてパラパラとバナー内の画像がスクロールするフォーマットです。バナー内の画像を3D化し、動きを大きくすることでユーザーの視線を引きつけることができます。
制作のポイントとしては、
・動く部分(今回だとピンクの枠内)の情報を絞り、印象的にする
→こちらのバナーは複数ある画像が数秒ごとにめくれ、次々に表示されていきます。1枚あたりの表示時間はそこまで長くないので、まずは大きな写真でインパクトを与え、次に金額・割引率にぱっと目が行くようし、少ない情報でも見ている人の興味を引くようにデザインしています。Illustratorのクリッピングマスク機能で写真にワンポイントを入れているのも、目を引くためのちょっとした工夫です。
さらに制作全体での話になりますが、リッチバナーは通常のバナーと異なり、デザイン制作後にエンジニアのコーディング作業が入るため、Illustrator・Photoshop上の素材が切り出ししやすいようにレイヤーを分け、バナーの内容がすぐ分かるように不要なデータは整理しておく必要があります。順序や動きがあるバナーの場合は流れを想定してアートボードを並べ替えます。
細かいことかもしれませんが、「自分と異なる職種の方が見てもちゃんと伝わるかどうか」を意識するのは、スムーズなやり取りのためにとても大切なことだと思っています！
今回ご紹介したような動きがあるバナーはやはり目を引くのですぐ気付きますし、私も見つけた時は思わず触りたくなってしまいます…！
みなさんも、もしリッチバナー広告を見かけたら、どんな動きをするのか是非注目してみてくださいね！
