メニューを開く

メニューを開く

メガメニュー を閉じる

お電話でのお問い合わせはこちら 0120-388-801

受付時間/平日10時〜19時定休日/毎週日祝日・隔週土曜日

HOME(名古屋のホームページ制作会社 株式会社アババイ)

BLOG

スタッフブログ

9月 2021 
 
1
2
3
4
5
6
7
9
11
12
14
16
18
19
20
21
22
23
24
25
26
27
28
29
30
 

RANKING

    • 2021/07/23

      web広告のバナーって実際どうなの?というあなたへ!webバナーはこう考えてつくっています!

      アババイスタッフ 画像

      宮本

      eyecatch01_670x376

      こんにちわ!今年の1月に入社しましたデザイナーの宮本と申します。

       

      僕は紙媒体をメインとした制作会社でグラフィックデザイナーとして6年働いた後

      建築関係の現場仕事を3年経験し、webデザイナーとして再出発するという少々異色な経歴で頑張っています!

       

      今回はそんな僕が「デザイナーが何を考えてwebバナーを制作しているか」を、事例を交えてお話させていただこうと思います。

       

       

      目次

      ▶なぜバナーについて語ろうと思ったか

      ▶そもそもデザインとはなんぞや

      ▶バナー制作時にデザイナーが考えること

      ①文字要素について

      ➁写真について

      ③他にもいろいろ

      ▶まとめ

       

      なぜバナーについて語ろうと思ったか

       

      「わが社もバナー広告を打ち出してみようかな」

      と考えたことがある方は多いかと思います。

       

      とはいえ、そもそもデザインの良し悪しがわからないから、

      大切な予算を割いてまで、ぱっと見が良くても効果が出るかわからないバナー広告を打ち出すことに意味があるのかな…

      と躊躇してしまっている方も多いのではないでしょうか。

       

      で、あれば!

       

      デザイナーが何をバナーを制作しているのかを知ってもらえれば、

      デザインに対する知見も広がり、

      「バナー広告を打ち出してみようかな!」

      と思ってもらえるのではないか!?と思い、筆を執らせていただいた次第でございます。

       

       

      成果物を見ただけでは分からない、

      そこにたどり着くまでの脳みその中身を公開することで、

       

      「意外といろいろ考えてくれてるんだな~。やるじゃん!」

       

      と思ってもらえたら本望です。笑

       

      brain_nou_suisou

      そもそもデザインとはなんぞや

       

      デザイナーの思考を紹介するまえに、少しだけデザインそのものについて語らせてください。笑

       

      デザインって言葉は日本ではすごく曖昧な定義で浸透しているのではないかと感じます。

       

      とりわけデザイン≒アートだと思っている方も多いのではないでしょうか。

       

      実際僕もデザインの勉強をする前までは、「良い感じのもの」がデザインされたものだと思っていました。

       

      しかし、デザインの仕事をしていくうちに気が付くのですが

      デザイン≠アートだったんですね。

       

      僕は

      アート → 自分が良いと思うものは何か?を突き詰めること

      デザイン → お客さんが良いと思うもの何か?を突き詰めること

      だと思っています。自分ありきか、相手ありきか…。

       

      なのでデザイナーってアーティストよりも職人に近いと思うのでございます。

      そうなると、工務店さんもなんだかデザイナーに親近感が湧きませんか?笑

       

       

      バナー制作時にデザイナーが考えること

       

      それでは実際の事例(お客さんの情報を伏せるため一部改変)を元にデザイナーの思考を紹介していきます!

       

      試しに、アババイを工務店に見立ててWEB広告バナーを制作してみました。

       

       

       

      1_1080x1080_A

       

       

      ①文字要素について

       

      今回のバナー制作の要素としていただいた情報は

       

      ・イベント名:完成見学会「お家時間が好きになる。」
      ・開催日:7月24日・25日開催

      ・20組限定

       

      でした。

       

       

      しかし完成形では「OPEN HOUSE」という文言を足しました。

      また「7月24日・25日開催」については「開催」をなくし表記も「7/24 Sat. 25 Sun.」に変更しています。

       

      デザイナーの役割の一つに「情報の整理」があります。

       

      「OPEN HOUSE」の文言を増やしたのは、日本語ばかりだと堅苦しい印象を受け結果読む気がしない…。となるのを防ぐためです。

      OPEN HOUSEという欧文を入れ、完成見学会の文字は添える程度に小さくすることで、カジュアルな印象を持たせ窓口を広げる狙いがあります。

       

      また、そもそも「完成見学会」という漢字ばかりの文字は欧文・ひらがな・カタカナに比べて視覚的に詰まっている印象を受けるので、それを和らげる意図もあります。

       

      「7月24日・25日開催」→「7/24 Sat. 25 Sun.」の変更に関してはまずタイトルからイベントの情報だと分かるため、「開催」の文字を入れる必要がないので削除しました。

       

       

      逆に「土日」開催の情報は、ターゲットにとって重要な情報なので追加しています。また欧文で表記することで、「OPEN HOUSE」と同じくカジュアル感を演出しつつ全体のトーンの統一にもつながります。

       

       

      ただ欧文は日本人にとって日本語より情報が脳に伝わる速度が遅いので(ほんの一瞬ですが、そこが重要)、青と赤の背景を敷くことで、「土日感」を感覚でも伝えられるようにカバーしています。

       

      ➁写真について

      子供の写真を撮る母親のイラスト

      「お家時間が好きになる。」というキャッチコピーから

      家での時間を楽しむ家族の写真を数点ピックアップしました。

       

      ここで気をつけているのは、見た人が感情を移入しやすい写真を選ぶことです。

      こんな生活いいなと思ってもらえることを意識して写真を選んでいます。

       

      また、この選んだ写真をどう見せるかと考えた時、「お家時間が好きになる。」がテーマだったので、家のイラストで写真を囲うことにしました。

      この家のイラストの形にもこだわります。

       

      そもそもバナーにおけるビジュアルの考え方として僕はなるべく“既視感がないもの”を作れるようにという点を意識しています。

      もちろん突飛なものをつくれば良いということではありません。

      ただwebバナー含め広告物は基本的に見ようと思って見る人はいません。

      webバナー自分が見たいwebサイトを見ている際に、突如現れるものです。

       

      そういったなかで、バナーに興味を持ってもらうためには、視覚的に「ん?」となってもらう必要があります。

      その方法の一つとして“既視感のないビジュアル”というだけで、なんだこれ?と目を引いてもらえるフックになると考ています。

       

      そうなると、

      こういった形や

      スクリーンショット 2021-07-22 162835

      こういったものは

      スクリーンショット 2021-07-22 162935

      よく見るので

      結果こうなりました。

       

      1_1080x1080_A

       

      また見せたい写真を邪魔しすぎないよう、家と認識できる最低限の要素で構成できるイラストを意識しています。

       

      最後に実際の外観写真を添えて、感情移入してもらうためのイメージ写真から、こういった生活が現実になるかもと思ってもらえるリアリティを意識してもらうために外観写真を添えています。

       

      ③他にもいろいろ

      その他にも考えているポイントいつくもあります。

       

      例えばフォント選びにしても、なんとなくいい感じだから使っているわけではなく、

      ・読みやすさ

      ・フォントが与える印象

      ・デザインのトーンとの相性

      などを総合的に判断して、選んでします。

       

      背景の色ベタに関しても、

      ・写真を全面に使用しているバナーとの差別化が図れる。(埋もれない)

      ・バナーが掲出されるwebサイトの中で色ベタのバナーは埋もれにくい。

      という点から使用しています。

      そこから、夏という季節や、外観写真の色味とのバランスを考えて緑になりました。

       

       

      この一枚のバナーから

      「ん?なんだこれ?」

      →「あ、完成見学会があるんだ」

      →「お家時間が好きなる?あ、たしかにこんな写真みたいに家で過ごす時間もたのしそうだな~」「20組限定だったらコロナ対策もしてるっぽいな~」

      →「あ、こんな外観の家なんだちょっとオシャレでいいかも」

      →「今週末あるんだ、予約してみようかな??これどこの工務店だろ?ABABAI?(実際は実在の工務店さんのお名前)とりあえずクリックしてみようかな」

       

      という風に思ってもらえることを狙って制作しました。

       

       

      まとめ

       

      いかがだったでしょうか。

      デザイナーは感覚で制作しているイメージをお持ち方もおられたかもしれませんが、どのデザイナーもお客さんが伝えたい情報をどのようにしたら一番効果的に伝わるかをゴールと設定し、デザインを制作しています。

       

      完成形だけを見ただけでは、パソコンの知識が明るい人からは、たまに

      こんなの自分でもできるんじゃないの…?

      と思われることもあったりするバナーですが、意外と色々考えているんです!笑

       

      さて、バナーについての知見が広がり、これぐらい色々考えられているならバナー広告打ち出してもいいかな…と思ったあなた!

      是非アババイにご相談ください!

       

       

      ▶お問い合わせはこちらから https://ababai.co.jp/contact/

      ▶制作実績 https://ababai.co.jp/case_cat/case01/

      ▶今HOTなSNS運用 https://ababai.co.jp/sns/

    CONTACT CONTACT

    お電話でのお問い合わせはこちら 0120-388-801 お電話でのお問い合わせはこちら 0120-388-801

    受付時間/平日10時〜19時定休日:毎週日祝日・隔週土曜日