全くの初心者が本格的なバナーを作れるようになる方法&お役立ちツール6選

Canvaを使えば簡単にバナーがデザインできます!
今すぐCanvaでバナーをデザイン!
全くの初心者が本格的なバナーを作れるようになる方法&お役立ちツール6選

仕事でバナーを作ることになったけれど、バナーを作った経験はない。さて何から手を付ければ良いのかも分からない…そんな「バナー初心者」の方が見栄えの良いバナーを作るには、いったいどうすれば良いのかお困りではないでしょうか。

バナーは Web サイト上に貼り付けられている画像の一種で、そこをクリック(タップ)するとリンク先に飛ぶようになっているもので、リンク先を閲覧してもらうには魅力的なバナーである必要があります。ここまでは分かっていても、じゃあどうすれば魅力的なバナーが作れるのかが分からないという方はとても多いと思います。

しかし、ご安心ください。今はデザインの心得や経験がなくても本格的なバナーを作るための方法論やツールが充実している時代です。「バナー初心者」の方がこの記事 1 本を読むだけで本格的なバナーを今すぐ作ることができるよう、最低限必要な知識をまとめましたので、ぜひ最後までお付き合いください。

この記事は 10 分程度で読み終えることができますので、 10 分後には本格的なバナーを作れるようになっているはずです。

目次

1. 突然バナーを作ることになった人が知っておくべき5つの基本

最初に、バナーを作るのにあたって「バナーとは何か」という基本を押さえておきたいと思います。知っておくべきことは、5つだけです。

1-1. バナーとは

バナーは英語で「 Banner 」と表記します。これは幟(のぼり)や旗といった意味の言葉で、お店の前に立てて目立つようにするためのものという意味合いで用いられています。この記事で解説するバナーは、 Web サイトに貼り付けるためのもので、いわばリンク先のサイトに誘導するための幟や旗のような役割を果たします。

こちらは、大手ポータルサイト「 Yahoo! Japan 」のトップページです。この場合、赤い色を付けた3ヶ所がバナーです。

それぞれリンク先に何があるのかが分かるようにバナーが作成されているのが分かります。これはとても重要なことなので、後述していきます。

1-2. バナーの役割

バナーが設置されている最大にして唯一の目的は、対象となるサイトへの誘導です。実店舗にある幟や旗なども通行人に対して来店を促すためのものなので、それと役割は同じです。

1-3. デザインとバナーの関係

集客につながるバナーを作りたいとお考えの方が、バナーに必要だと思うことは何でしょうか。「やっぱりカッコいいデザイン!」とお考えの方は多いと思いますが、それだけでは目的を果たせないのがバナーの奥深さです。

バナーの役割を再確認すると、リンク先への誘導です。そのリンク先にどんな情報があるのかを正確に伝え、しかもそのリンク先に期待を持たせるようなバナーでなければなりません。その要件を満たすためには、ただ単にカッコいいデザインであれば OK ということにはならないでしょう。

見やすいこと、目立つこと、リンク先に期待を持たせられることなど、こうした要件を満たしているバナーが、優れたバナーと言えるのです。こうしたバナーとデザインの関係については、次章で詳しく解説します。

1-4. バナーの種類

一口にバナーと言っても、実に多くの種類があります。先ほど Yahoo! Japan のトップページを例にご紹介しましたが、この例だけを見てもバナーには異なる大きさのものがあることが分かります。規格や目安となるサイズはありますが、バナーには横型だけではなく縦型があり、静止画像だけでなく簡単なアニメーションになっているものもあります。

バナーといってもすべてが同じサイズや形であるわけではなく、それぞれの役割や広告予算などによって、さまざまな大きさや形があることを認識しておいてください。

1-5. プロでなくても本格的なバナーは作れる

ここまでバナーについての基本をお読みになって、「やっぱりプロでないと難しそうだ」とお感じになった方もおられるのではないでしょうか。確かにバナー職人と呼ばれるようなプロがいるのは事実なので、こうしたプロと張り合うほどのバナーを作るには知識や経験が必要かもしれません。

しかし、今は優れたツールがたくさんあるので、これらのツールを活用すればプロの作品と比べてもそん色のないバナーを作ることは決して難しくはありません。その可能性をお感じだからこそ、この記事をお読みになっているあなたは検索をしてこの記事にたどり着いたのではないでしょうか。

プロではなくても本格的なバナーを今すぐ作ることは十分可能なので、どうぞご安心の上読み進めてください。

2. 結果の出るバナーデザインの基本

デザインがカッコいいだけでなく、結果の出るバナーが重要であることをお伝えしたうえで、それではどんなバナーが結果につながるのかを解説したいと思います。

2-1. リンク先の内容や訴求ポイントをしっかり表現する

バナーに与えられた最大の役割は、リンク先への誘導です。そのために重要なのは、「リンク先に何があるのか」を伝えることです。リンク先の内容を簡潔にまとめ、それを図案化したものである必要があります。

さらに、そのリンク先の情報に触れたくなるよう、訴求するポイントも伝えることも忘れてはいけません。これらが、バナー上で表現する必要がある情報です。バナーを作成するのにあたって、まずはこれらの情報が何であるかを整理するのが良いでしょう。

2-2. バナーを設置するサイトとの関わりを考慮する

バナーを設置するサイトには、それぞれの世界観やターゲットとしている人たちがいます。例えば株に関連するサイトであれば株式投資をしている人、関心を持っている人たちがターゲットです。こうしたサイトからの誘導を期待するリンク先ももちろん、株に関連したサイトということになります。

ここで考慮したいのは、「株をやっている人、株に興味を持っている人」が見たくなるようなバナーであることです。そんな人たちが興味を持つような情報が盛り込まれていること、そして「もっと見たい」と思ってもらうことを考慮すると、より誘導効果が高くなります。

2-3. バナーを最適な大きさにする

バナーには、最適な大きさがあります。伝えたいことが多いのに小さなサイズだと文字が小さくなって読みにくくなりますし、設置するサイトの事情によって思い通りの大きさのバナーを設置できないこともあります。

こうしたさまざまな事情を考慮して、バナーを最適な大きさにする必要があります。こちらは「みんなの株式」という株式情報サイトの、広告主向けバナー仕様です。このサイトにバナーを掲載した場合は、以下のような選択肢がある中から選び、それぞれのサイズに合ったバナーを作成することになります。

2-4. できるだけデータ量を小さくする

バナーの「サイズ」には、見た目の大きさだけではなくデータ量の「サイズ」もあります。データ量が大きくなると読み込みに時間がかかるため、バナーのデータ量は可能な限り小さくする工夫をしましょう。

近年では光ファイバーによるブロードバンドや無線高速通信によるネット閲覧が主流になっているのでデータ量のことをあまり意識することはありませんが、それでもやはり Wi-Fi が混雑している場合など通信速度が遅くなる状況も十分考えられます。その場合にバナーのデータ量が大きいと表示が遅くなり、そのバナーを見る前にページを閉じられてしまう可能性もあります。

逆にデータ量が小さいバナーだと他のバナーよりも早く表示されて目立たせられる余地も生まれるので、データ量を小さくする工夫はとても重要です。

2-5. 原則として色は 3 色まで

バナーのデザインに色を多く使いすぎるとゴチャゴチャした印象を与える可能性が高くなるため、デザインの際には使う色を絞り込むことも有効です。メインカラーとサブカラー、そしてアクセントして一部に 3 つ目の色を使うのがデザインの定石なので、その定石に沿ったデザインをするとすっきりとした印象になり、同時にコーポレートカラーやイメージカラーなどを際立たせる効果も期待できます。

2-6. 文字は伝えたいことだけに絞り込む

伝えたいことが多くなると、どうしてもバナーの中の文字が多くなりがちです。リンク先に誘導したい思いが強いほど文字で伝えたいことも増えてしまいますが、文字が多くなることもゴチャゴチャした印象につながりやすいもの。文字はできるだけ少なく、伝えたいことだけに絞り込むのがひとつのポイントです。

文字の大きさにも工夫をして、本当に伝えたいことを一番大きな文字にして、それ以外の部分と差別化するのも有効です。

3. 参考になるバナーデザイン集まとめ

バナーのデザインについて基本を解説しましたが、やはり色々と実物を見てみないことにはピンとこないというお声も多いと思います。そこで次には、参考になるバナーデザイン集を 3 つご紹介します。それぞれのサイトにはたくさんのバナーが収録されているので、ぜひ参考にしてみてください。

3-1. Banner Matome

日本国内のバナーまとめサイトです。日本のバナーなので日本人の感性にマッチしやすく、2 万点以上あるバナーを閲覧することができます。

3-2. レトロバナー

とてもシンプルなバナーデザイン集です。サイズ別に絞り込んで検索することができるので、特定のサイズによるバナー作成をしたい方には特に参考にしやすいと思います。

3-3. MOAT

日本だけでなく、海外にも秀逸なバナーデザイン集のサイトがあります。世界的にも有名なサイトなので膨大な収録数と、日本ではあまり使われていないようなデザインのバナーを見ることもできるので、視野が広がります。

MOAT

4. バナーデザインに使えるアプリ、サービスまとめ

ここでは、可能な限り楽にバナーを作成したいという方のために、バナー作成を支援するアプリやサービスを 3 つご紹介します。これらのツールを使うと、デザインの心得がなくても本格的なバナーをすぐに作成可能です。

4-1. バナー工房

自分で用意した写真などの画像をアップロードして、そこに飾りフレームや文字を入れることができる加工ツールです。ソフトをインストールすることなくオンライン上で完結するので、手軽なバナー作成ツールとして使えます。

4-2. buttonmaker pro

ツール名だけを見るとボタンを作るツールのように感じますが、ここでいうボタンとはバナーのことです。年額 7,800 円の有料ツールだけあって、テンプレートから簡単に本格的なバナーを作成することができます。

4-3. Canva

オーストラリア発の本格的デザインツールです。日本版ではもちろん日本語に対応しており、膨大なテンプレートから簡単な操作で本格的なバナーを作成できます。無料版でもかなり本格的なデザインが可能なので、継続的にバナーの作成をする方には強力な武器となります。

次章では、この Canva を使って簡単にバナーを作る流れを解説します。

5. Canva で今すぐ本格的なバナーを作る方法

ここでは、Canva を使ってバナーのデザインを作成する流れを解説します。いまのインターネットサービスを使えば、この程度のことは簡単にできてしまうんです!

5-1. Canva なら今すぐ無料でバナーデザインができる

Canva は、バナーだけでなくさまざまなデザインを簡単な操作で実現できる強力なツールです。画像の加工ソフトとして Photoshop はとても有名ですが、こうした高価なツールを使わず、なおかつデザインの知識や心得がなくても本格的なデザインを作れてしまうところが Canva の面白さです。

バナーデザインには「ありがちな形」がありますが、 Canva にはそういったセオリーに沿ったテンプレートが用意されているので、そこに画像や文字を入れていくだけでバナーを作ることができます。

5-2. Canva のアカウントを作る

Canva を利用するのが初めての方はサインアップのページにアクセスをして、無料アカウントを作成します。Google アカウントや Facebook のアカウントをお持ちの方であればそれも利用できますし、メールアドレスを使ってアカウントを作成することもできます。

すでに Canva のアカウントをお持ちの方は、この作業は不要です。

5-3. テンプレートを選択する

Canva にログインしたトップ画面右上にある、「デザインを作成」をクリックし、表示されるメニューの中から「 Blog バナー」を選んでみましょう。

左側にたくさんのテンプレートが表示されるので、好きなものを選びます。ここでは一番左上にあるものを選んでみました。

デザインの雰囲気や文言からは母の日をテーマにしたテンプレートであることが分かりますが、写真や文言を変更することで自由にテーマを変更してオリジナルのバナーにすることができます。

5-4. 画像や文字を変更する

それでは先ほどのテンプレートに使用されている画像と文言を変更してみましょう。ここでは沖縄をテーマにしたバナーにしてみたいと思います。

最初に、背景を沖縄らしい写真に変更します。左側メニューの「アップロード」を選択し、好きな画像をアップロードしたうえでその画像に変更します。

ここでは、石垣島の有名な観光スポットである川平湾の風景にしてみました。

次に、母の日のままになっている文言も変更してみましょう。

文言を変更して、不要なテキストエリアを削除して位置を揃えました。ここまでの作業で、7~8分程度です。

5-5. ダウンロードする

ここまでの作業でできあがったバナーを、最後にダウンロードして完成です。 作業画面の右上にある「ダウンロード」をクリックして、後は画面の指示に従うだけです。

こんなバナーが完成しました。

ここまでの方法を知っている方であれば、10 分もかからないうちにバナーが完成します。少しでもお手軽に、かつ迅速にバナーを作りたい方にはこの Canva のような無料で利用できるウェブサービスがおすすめです。

6. まとめ

デザインの経験や知識がないのにバナーを作ることになってしまったという方に向けて、全くの初心者の状態から本格的なバナーを作成するまでに必要な知識と方法を解説してきました。

今は便利なツールがあるので、いかにそれを知っているか、そしてそれを活用できるかがバナーの出来栄えだけでなくコストの省力化にもつながることがお分かりいただけたのではないでしょうか。

 

他のバナー関連記事はこちら

関連記事

すべて表示

Group 3 (3) (1)

アイディアを形に

もっとも簡単なデザイン作成サービス