あなたはどうしている?効果的なバナーを制作するために必要な5つの考え方

久々に実践的なことをまとめていきます。僕が制作という仕事をしてきて早15年が経過して来年で16年目を迎えようとしていますが、僕が行ってきた制作の中で特に効果が高い制作の方法をシェアします。

1 効果的な写真の使い方

b7a479f5a8434d1ad851c91e0e2b1ca8_s

まずバナー制作において一番重要といえる素材それは写真です、この写真がないと効果は半減するでしょう。それもできれば綺麗な女性が良いです女性がない場合はとにかく記憶に残るキャッチなイメージが必要です。
更にイメージが人の場合は人物の顔の目がキャッチコピーと平行になるようにするのがポイントです。それにより自然とキャッチコピーが頭に入り自然とこの情報が必要か脳が判断します。これこそが自然な広告の目線移移動と脳による認識なのです。

2 リンク先の情報を一言でまとめるポスター

646870d731d61d3f7011231a3c5a0741_s

バナーを制作する時に以前も話しましたが、バナーはリンク先のポスターと思って制作してください。ポスターは大きさが決まっており訴求することの塊です。ただし訴求する事は、見ている人の利益があるかどうかです。
ここで重要なのはリンク先の事をユーザー目線に落とし込んであげないとクリックされません。クリックされないと無用の産物です。重要なのでもう一度言います。ユーザー目線で考えて何がユーザーの利益にリンク先はなるか考えてください。

3 効果的な文言の使い方

20471a06d08c3c721ea4c5b3e113c153_s

写真と同様の優先度を占めるのが、このキャッチーコピーと説明文言です。このポイントとしてはリンク先を一言で表すと何なのか?それも5文字以内で表してかつ相手の記憶に残り、相手の利益になる文言を考えてください。わかりやすく言うとスポーツ新聞の見出しです。
例えば芸能人のスキャンダルで、浮気していた男性芸能人がいた場合紙面はの見出しは何でしょうか?
ズバリ「有名芸能人浮気!」などですかね。この場合これだけだと誰か?がわかりません、しかしそこが狙いなのです脳はわからないことが大嫌いです。なので、クリックしたくなる、あるいは新聞を読みたくなるという動機に結びつきます。これが効果的な文言の使い方です。
また、必ず具体的な数字を入れてください。数字は非常に覚えてもらえやすく数字ほど具体的な訴求はありません。
具体例としてはこちらはYahooさんに貼られていたバナーです。必ず数字が入ってます。

nt5jhigh10nmqqmn4zy0-a
画像参照先:http://www.Yahoo.co.jp/

4 脳の記憶のメカニズム

1226d5544a74f50b8bb576d58177d163_s

これは1でも触れましたが、脳が記憶するというのは何かに紐付いて記憶しているのです。単体では記憶のひっかりが弱いのです。だから写真や色などを使ってよりキャッチに紐付けるように行っているのです。なので、効果的に記憶してもらう為に必要なのが、人物の目を文言の近くに綺麗に配置するのが重要なのです。
ちなみに人の目は一番初めに目につくと言われてます。

5 リサーチする事、制作するという事は制作する前に終わってなければならない

0c969e27bca93169f7256404ea5b9c05_s

これは前回のエントリーでもありましたが、まず競合を分析しろ!という事ですが分析しないでデザインするのは素人同然です。制作に入るませに8割は終わっていなけばなりません。
また、僕の仕事方法としてこの工程は非常に重要です。リテイクが極力ないために競合を分析する必要があるのです。このリサーチする時間は制作の半分をかけます。それだけ重要なのです。

まとめ

どうでしょうか。バナー制作において必要なことをシェアしておきますが、効果的なバナーを作れるとよりクリック率が上がり利益につながります。これこそがデザイナーの真骨頂です。そして、デザイナーこそが一番心理学やマーケティングに敏感でなければなりません。

この記事の関連書籍


以上あなたはどうしている?効果的なバナーを制作するために必要な5つの考え方でした。気に入ってくれたらシェアしてね!

関連記事

domain_cms

今年こそWebデザイナーになりたい!現役Webデザイナーに必要なサーバー・ドメイン・CMS 基本知識について

今回で第5回を迎えました。なんとか頑張って続けていきます!Webデザイ...

記事を読む

cssjshtml_img15

今年こそWebデザイナーになりたい!Webデザイナーに必要なコーディングスキル編(html/css/js)

今回はコーディングスキル編として、Webデザイナーとして就職するために...

記事を読む

thmb_03_218

今年こそWebデザイナーになりたい!結局何を覚えればいいの?ソフトスキル編

今年こそWebデザイナーになりたい!結局何を覚えればいいの?ソフトスキ...

記事を読む

thmb_02

今年こそWebデザイナーになりたい!デザインスキル(グラフィクデザイン編)

今年こそWebデザイナーになりたい!デザインスキル(グラフィクデザイン...

記事を読む

thmb_01bg

今年こそWebデザイナーになりたい!現役Webデザイナーが教えるプロになる為の8つのメソッド(UI/UX編)

Designed by Freepik 最近周りの若い子...

記事を読む

新着記事

document_img01

15年の経験から理解した!書類選考を通す為に必要な5つのこと

すっかり時間が空いてしまいましたが、しっかり書いていきましょう。 ま...

記事を読む

design_skill

今年こそWebデザイナーになりたい!初心者の為のデザインスキルを上げる簡単な2つの方法

今回は、諸々スキルも大筋ついてきたけど肝心なデザインスキルがどうしても...

記事を読む

carrier_img01

今年こそWebデザイナーになりたい!経験者になる為に必要な考え方とその方法

今回はWebデザイナーとして勉強してそこそこのスキルはついたけど、実際...

記事を読む

domain_cms

今年こそWebデザイナーになりたい!現役Webデザイナーに必要なサーバー・ドメイン・CMS 基本知識について

今回で第5回を迎えました。なんとか頑張って続けていきます!Webデザイ...

記事を読む

cssjshtml_img15

今年こそWebデザイナーになりたい!Webデザイナーに必要なコーディングスキル編(html/css/js)

今回はコーディングスキル編として、Webデザイナーとして就職するために...

記事を読む

Message

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

次のHTML タグと属性が使えます: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

document_img01
15年の経験から理解した!書類選考を通す為に必要な5つのこと

すっかり時間が空いてしまいましたが、しっかり書いていきましょう。 まず

design_skill
今年こそWebデザイナーになりたい!初心者の為のデザインスキルを上げる簡単な2つの方法

今回は、諸々スキルも大筋ついてきたけど肝心なデザインスキルがどうしても

carrier_img01
今年こそWebデザイナーになりたい!経験者になる為に必要な考え方とその方法

今回はWebデザイナーとして勉強してそこそこのスキルはついたけど、実際

domain_cms
今年こそWebデザイナーになりたい!現役Webデザイナーに必要なサーバー・ドメイン・CMS 基本知識について

今回で第5回を迎えました。なんとか頑張って続けていきます!Webデザイ

cssjshtml_img15
今年こそWebデザイナーになりたい!Webデザイナーに必要なコーディングスキル編(html/css/js)

今回はコーディングスキル編として、Webデザイナーとして就職するために

→もっと見る

  • -売る技術-

    ウエブデザイン暦15年目。犬をこよなく愛するデザイナー。今はディレクションとデザイン を中心に制作全般をしてます。主にマーケティングを軸にデザインを組み立て商品が売れるサイトを構築しています。 デザインとマーケティングについて研究の日々。現在はオランダでWebデザイナーとして働いています。

    ツイッターやってます。
  • Amazonアソシエイト・プログラム規約による記載

    売る技術はamazon.co.jpを宣伝しリンクすることによってサイトが紹介料を獲得できる手段を提供することを目的に設定されたアフィリエイト宣伝プログラムである、Amazonアソシエイト・プログラムの参加者です。

PAGE TOP ↑