意外と簡単！初心者でも簡単にバナーを作成する方法

ウェブサイトを訪れると、このような画像を見つけることができます。

これは「バナー」と呼ばれており、画像にマウスのカーソルを合わせてクリックすることで別のリンク先に飛ぶようになっています。日常的にパソコンやスマホを使っている方ならすでにお馴染みかもしれません。

バナーは画像のためウェブサイトを訪問したユーザーの目に留まりやすいという効果があります。テキストより目立ち、かつクリックしやすいため、別のページやウェブサイトへ誘導したいときに用いられます。

初心者にはバナーを作成するのは難しいと思われがちですが、今では簡単に、しかも無料でバナーを作れるツールも広く出回っています。

今回は初心者でも作成可能なバナーの作り方について、Keynoteを用いた便利な機能をご紹介したいと思います。

バナーを作成するときはまず伝えたい文字を先に考える

バナーを作成する際はデザインやレイアウトなどに気をとられがちです。しかし肝心なのはユーザーが一瞬でバナーの宣伝内容を理解できることです。そのために最初にキャッチコピーを考えたほうが良いでしょう。

ECサイトなどの物販を行っているウェブサイトであれば、遷移先でユーザーに商品購入を促したいはずです。であれば、商品の特徴や売りを的確に宣伝する必要があります。

例えば、ダイエット商品を売りたいとして、これに合ったキャッチコピーを考えます。一目で商品の特徴をユーザーに理解してもらいたいため、具体的な数字をあげることで説得力のある広告にしたいと思います。今回はバナーに「30日間」「80%の人」「ウエスト-5cmを達成」というフレーズを盛り込みたいと思います。

この後にレイアウトを考えていきます。

フリーソフトを使用して実際にバナーを作成していく

バナーを外注することもできますが、今回は初心者でも簡単にバナーを作る方法について解説したいと思います。「バナーを作るためにはPhotoshopを購入しなければいけないのではないか？」と思う方もいらっしゃるかもしれませんが、初心者であればいきなりPhotoshopを購入して使うよりは、フリーソフトで作成できるバナーから入ったほうがそれほど抵抗はないため良いのではないかと思います。

まず、バナーに使用する写真を選びます。自分で撮影した写真があればそれを使うことが望ましいですが、なければフリー素材を使用することもできます。商用使用可能な画像を検索できる便利なウェブサイトとして、「タダピク」があります。基本的に無料で利用できますが、画像が投稿されているウェブサイトによって利用規約が異なるため、利用前にはしっかりと規約を読むようにしましょう。特に人物の顔が写っている写真については肖像権の問題があるため、モデルとなった人の使用許可が出ている写真かどうかしっかりと確認することが必要です。

今回はこちらの画像を利用したいと思います。

次に、実際にバナーを作っていこうと思います。今回利用するのはMacbookにデフォルトで入っているKeynoteです。

Keynoteを最初に開くとこのような画面が出てくるので、今回のテーマはホワイトにします。

編集画面が出てくるので、早速バナーに用いる画像を挿入します。

次に、テキストを入れていきたいと思います。先ほど考えたキャッチコピー「30日間」「80%の人」「ウエスト-5cmを達成」を写真に入れます。

編集画面上部にテキストのボタンがあるため、これをクリックしてキャッチコピーを入れていきます。適宜フォントの大きさや色を調整しつつ、整えていきます。

真ん中に図形を挿入し、黄色のグラデーションに塗りつぶしてテキストを入れています。

編集が全て終わったらファイル→書き出す→イメージで画像を任意の場所に保存します。

こちらが出来上がったバナーです。

良いバナーの例

非常にシンプルなバナーですが、ウェブサイトを訪問した人が一目でわかるようなバナーとなっています。この程度のバナーであればできそうな気がしますね。最近はバナーを作成してブログのアイキャッチ画像（記事一覧に表示される記事単位の画像）に用いている方も多いので、ECサイトだけではなく個人ブログなどにも活用できます。なお、こちらのバナー作成にかかった時間はキャッチコピーを考えるところから開始して30分程度で仕上がりました。

以上がKeynoteでバナーを簡単に作成する方法ですが、KeynoteはApple社の製品のためOSがWindowsでは使えないのでは？と思ってしまいますが、WindowsでもApple IDがあればiCloudを通してKeynoteが使えるようになるようです。

参考：(Degilog WindowsでKeynoteを使えるようにするための手順)
http://degilog.jp/windows-keynote/

Keynoteを使いたくないという方は以下のリンク先にWindowsでダウンロードできるバナー作成ソフトについて紹介されていますので、参考にされても良いかと思います。

参考：初心者でも簡単！おすすめの無料バナー作成ソフト5選
いさろぐ　https://third-party.org/isalog/banner-tools/

バナーを作成する際に気をつけること

バナーを作成する際に気をつけたいことは何点かあります。

一つは、バナーに情報を入れすぎないことです。
文字や画像が盛り込まれすぎて雑然となっていると、どれが重要な情報かわからないため、ユーザーにとっては一体何の広告なのか理解できずに無視されてしまいます。

ユーザーはバナーを見るためにウェブサイトに来ているのではありません。何か知りたい情報があってウェブサイトに訪問しているのであって、バナーはあくまでもそのついでに目にするものです。バナーは訪問者に対して一目でわかるものでなければ意味がありません。

以下に前述のダイエットのバナーを用いてさらに情報量を増やしたバナーを作成してみました。一目で見てどれが重要な情報か理解できるでしょうか？

悪いバナーの例

これだけ多くの情報が一つのバナーに盛り込まれていると、どれが重要な情報なのか瞬時に理解できません。どの数値をもとに判断したら良いのかもよくわかりません。

バナーをクリックしてもらいたいため多くの情報を入れたい気持ちもわからなくもないですが、バナーはシンプルであるほうがユーザーは理解しやすく、かつ気になるキャッチコピーであればユーザーが興味を持ってバナーをクリックするようになります。

二つ目は色調です。バナーに何色も色を用いると雑然とした印象を与えます。
色調を意識し、色を多用しないことで整った印象の広告となります。

参考：Microsoft Officeのバナー

Microsoft Officeのバナーでいうと、基本的に赤色を基調にしたバナーであることがわかります。バナー下部に異なる色が用いられていますが、バナーに占める面積が少ないためそれほど気にならず、整然とした印象を抱きます。

(出典：Wikipedia )
https://ja.wikipedia.org/wiki/Tポイント

色相環でいうと全く対極にある色、つまり補色を用いるのは難易度が高いですが、デザインが優れていれば目立つ効果的なバナーになります。こちらはバナーではないですが、書店・DVD/CD販売・レンタルを行っているTSUTAYAのロゴは対照色である青と黄色を用いており、非常に目立つデザインとなっています。

まとめ

いかがでしたか？初心者でもできるバナーの作成方法をご紹介しました。Keynoteを活用したバナー作成方法、またバナーを作成する上で情報を盛り込みすぎないこと、色調に注意することでユーザーの目に留まりやすいバナーを作成することができます。バナー作成自体は簡単なので、いくつかのバナーを作成し一定期間設置してみてそれぞれのクリック率を比較してみるのも良いでしょう。
以上、初心者でもできるバナー作成方法のご紹介でした。