Webデザイン

バナーの作り方!簡単4ステップをデザイン経験ゼロの初心者に解説

cream-puffs

Webデザインの仕事の中では、バナーを作る作業が起こることがあります。

まだ制作経験の無い方からすると、「なんであんな綺麗なものが創れるんだろう…」と思うこともあるかもしれません。

ただし、誰でも「初めの内」は上手く作れないものです。そこで今回は、僕が初めてバナーを作るようになった頃に取り組んでいたことをご紹介していきます。

ちなみに今では有名なウェブライダーの方が作られたバナープラス0 - バナーの作り方!簡単4ステップをデザイン経験ゼロの初心者に解説というサービスがありますので、1.5万円ぐらい払える方はバナープラスを利用されるのが一番簡単かと思います。

公式サイト(バナープラス):https://rider-store.jp/banner-plus/0 - バナーの作り方!簡単4ステップをデザイン経験ゼロの初心者に解説

バナーの前提を理解する

まずは、何のためにバナーを作るか?を再確認します。

これをしておかないと、とにかく派手に作ろう!みたいな感じで始めてしまい、結果としてグチャグチャになってしまうことがあります。

バナーの前提としてとりあえず押さえておくべきだと個人的に思っているのは、以下の3点です。

  • クリックされる要素が入っていること
  • 文字が読みやすいこと
  • 画像の画質が汚くないこと

これらについて、もう少しお伝えします。

1. バナーにクリックされる要素が入っていることが重要

まずは、バナーにクリックされる要素が入っていることが重要です。

これは、CTA(call to action)の要素としてとても大事なことです。CTAを簡単に言うと「ユーザーにアクションを促すもの」です。

バナー画像は基本的に、どこかにリンクを飛ばす際に使います。なので、ユーザーがそのバナーを見てリンクを踏んでくれなかったら作った意味がありません。

ということは、デザイナーとしては「リンクを踏む工夫」をしてなかったら意味が無いのです。

例えばCTAの要素が入った文章としては、「詳しくはこちら」「今すぐクリック」などがあります。

2. バナーは文字が読みやすいことも重要

次は、文字が読みやすいことです。

最近は、画像メインのデザインが流行しているので、バナーにも綺麗な画像をいれて終わり!としたい気持ちはわかります。

ですが、ほとんどのユーザーは、バナーの文字を読んでクリックします。

ユーザーは、クリックする時に「怪しいサイトに飛んだりしないか?」などの不安を感じ、文字をしっかり読みます。

そのため、バナーを作る際には、文字が読みやすいかどうかは確認しましょう。

3. バナーは画像の画質が汚くないことも重要

最後に、画像についてです。

バナーの画像はもちろん、綺麗に越したことはないです。そのため、時間の限り拘ることをおすすめします。

ただし、例えばサイズが合わなかったり等で、画質が汚くなる時があります。これだけはNGです。

画質が汚くなって見栄えが悪くなるくらいでしたら、いっそのこと画像を使わない方が良いとさえ思います。

バナーの作り方に入る前の下準備3つ

それでは、実際にバナーを作り始める前に下準備をしましょう。

最初のうちは画像が揃ったり、photoshopを前にしたりすると、考えがごちゃごちゃしてしまい、最終的に訳が分からなくなったりしてしまいます。

実際に画像が揃ってきてしまうと、「その画像に合わせた文章」「その画像が好きそうなユーザー」を考えてしまのです。

そのようなトラップに陥らないように、下記の手順を踏まれるのがおすすめです。

1. 文言(文章)を決めよう

まずは、バナーに入れる文章を決めます。

この時、キャッチコピーみたいなイメージで作っても良いのですが、まず一旦は文字数を気にせずに書き出してみるのがおすすめです。

そしてそれを段々と短くしていく作業をするのが効率的です。例えば、いらない助詞や、改行すれば省けるものなどは省いていきましょう。

そして最後に、音読して意味が伝わればOKだと思います。

2. バナーを見ることになるユーザーを想像しよう

次は、バナーを見ることになるユーザーをイメージします。できれば、頭のなかで「この人!」と一人設定しておけると、バナーがぐっと作りやすくなります。

なおその際は、なるべく細かく年齢や性別、ライフスタイルなどをイメージしておくのがおすすめです。

3. 参考バナーを取っておく

最後に、ここまでの手順が整ったら、参考バナーを見つけるのがおすすめです。

例えばASPサイト(A8.net0 - バナーの作り方!簡単4ステップをデザイン経験ゼロの初心者に解説など)には色んなバナーがありますので、登録されてその中から近い広告を探したりするのもおすすめです。

公式サイト:A8.net0 - バナーの作り方!簡単4ステップをデザイン経験ゼロの初心者に解説

こうして、文字数や対象のユーザーが似ているバナーを見つけたら、画像を保存しておきましょう。

このようなASPで使われて続けているバナーというのは、基本的に効果が出ていますので、最初のうちはそれらを参考にすべきだと思います。

簡単なバナーの作り方4ステップ

それでは、実際のバナーの作り方に入っていきましょう。

とはいっても、細かなツールの使い方やレイアウトの組み方というよりは、もっと初歩的な部分にフォーカスしています。

1.文字を書き出す

まずは、文字を書き出しましょう。さっきの下準備で用意した文章を、書き出しておいてください。

2.画像を準備する

次は、画像を準備してきます。

クライアントから依頼を受けていて、画像が既にいくつか渡されているという方は、そこから選抜してください。

練習のために作っているという方は、フリー画像でも良いと思われます。

3.バナーサイズを決める

そして、バナーのサイズを決めます。

国際標準でバナーのサイズはある程度参考にできたりするので、下のURLを参考にしてみてください。

作っておくと便利なバナーサイズ一覧(ネットワーク広告対応)

4.実際に作り始める

それでは、実際に作り始めましょう。

細かな工程については、具体的に書いてある記事がたくさんありましたので、それを紹介しておきます。

どちらも、モノクロでの書き出しを一度おすすめしていますね。

バナーの作り方の注意点2つ

最後に、バナー製作時の注意点についてお話します。

1. 色は最後!フォントは途中で変えてもOK

まず、製作途中に、文字の色やフォントを変えたくて仕方なくなる瞬間があると思います。

ただし、色は途中で変えず最後に変えましょう。一方で、フォントは途中で変えてもOKです。

何故かと言うと、色はもともと他の要素との兼ね合い・組み合わせで綺麗に見えたりするものだからです。

なので、途中で変え始めてしまうと、あとから画像を追加した時にまた色を変えたいと思うことがあるからです。

一方で、フォントの場合はフォントを変えると文字幅が変わったりするので、早い内に変えておきましょう。最後の最後にレイアウト崩れをすると凹みます。

2. 一度出来上がったら他人に見てもらう

続いて、一度出来上がったら他人に見てもらうのがおすすめです。

自分で作った作品は、総じて綺麗に見えてしまいます。自分が重要なポイントと思って盛り込んだ要素は、一番最初に目についてしまいます。

そのため、他人に一度見てもらって、客観的なフィードバックをもらうのがおすすめです。

自分が作ったバナーを見せる時の聴き方としては、「このバナーどう?」ではなく、「これってクリックしたくなる?」の方が、良いフィードバックがもらえます。

初心者向けのバナーの作り方のまとめ

以上、いかがでしたか?

今回は、バナーの作り方でした。初めて作った頃は、どんなこと考えていたかなと思って記事を書いていたら懐かしくなってしまいました。

確か、3つ目くらいの作品を作った時に、クライアントからクソミソに言われた気がします。初めのうちは、そういうこともたまにありますね。

これからバナー画像を作ってみようという方は、参考にしてみてください。また、ある程度お金を払っても良いようでしたら、バナープラスの利用がおすすめです。

公式サイト(バナープラス):https://rider-store.jp/banner-plus/0 - バナーの作り方!簡単4ステップをデザイン経験ゼロの初心者に解説

最後まで読んでいただき、ありがとうございました。