2021年4月30日
井上翔太
OPTIO

Canvaでバナー制作!無料でオシャレバナーを制作する方法とは?

ご訪問いただき誠にありがとうございます。

マーケティングチームが実際に活用して役立つと思ったツールやサービスのみ紹介や、使い方について発信しているWebマーケハックコーナーです。

マーケハックnoteでは、以下のようなお悩みを抱えた方々に向けて発信しております。

  1. 動画編集やデザイン制作ツールが使いこなせない
  2. LPやブログ、事例など特定ページやディレクトリの改善がしたい
  3. 無料ですぐ使えるツールと、その利用方法を知りたい
  4. ツールを活用している時間がなく、人手も足りない
  5. アイディアはあるが、それを形にできない

上記1つでも当てはまるようでしたら読み進めていただけましたら幸いです!

目次

  • バナーとは
  • バナーの種類
    • (1)広告で活用するバナー
    • (2)自社サイトで活用するバナー
  • バナーのお悩みあるある
  • デザイナーがいなくても簡単無料でバナー作成_Canvaとは!?
  • バナーの作り方(静止画編)
  • バナーの作り方(アニメーション編)
  • アニメーションバナーをポップアップさせる方法

今回はWeb広告やSNS、自社サイトのポップアップやCTA(お問い合わせはこちらボタン)など、様々な場面で使われているバナーに注目してみました。

バナーとは

バナーとは、Web上のユーザーへの認知獲得やサイト訪問ユーザーを自社サイトの特定のページ(カート、商品購入、資料請求、問合せなど)に誘導し、アクションさせるためのツールです。

例えば、 EC サイトにて、新商品販売、キャンペーン企画がある時やセミナー集客や資料請求、問合せ獲得と様々な場面で必要となります。

そのためWebマーケティングにおいて重要な役割を果たしていると言っても過言ではありません。

バナーの種類

バナーには大きく分けて2種類が存在します。

(1)広告で活用するバナー
(2)自社サイトで活用するバナー

(1)広告で活用するバナー

企業や製品・サービスを紹介する広告用バナーです。広告用バナーは、ユーザーを自社サイトへの誘導や商品購買につなげるために、訴求メッセージの分かりやすさ、デザイン性、競合の差別化を行う必要があります。

一般的には1つのバナーではなく、複数のパターンを用意しABテストを行い、2週間に一度など広告出稿料量に応じてテストを繰り返します。

また広告用バナーの注意点として出稿する際にサイズやメディア(Webサイトや各種SNS)によってデザインを考慮する必要があります。

(2)自社サイトで活用するバナー

自社サイト内でバナーを利用する場合は、サイト閲覧者をゴール(商品・サービスページ、カート、問合せフォーム、資料請求フォームなど)に最短ルートで誘導する必要があります。また、バナーは自社サイトに埋め込むだけでなくポップアップさせるのも有効です。

バナーを有効活用するにはゴールを明確にする必要があります。そこで事業者ごとにゴールをまとめました。(業種業態や目的に応じてゴールはそれぞれです)

●BtoB事業者の主なゴール
  ・製品詳細ページへ誘導し、認知獲得、理解促進につなげる
  ・特定のブログへ誘導し理解を深め、信用してもらう
  ・セミナーページへ誘導し、セミナーに参加してもらう
  ・資料請求ページから資料請求してもらう

●BtoC事業者(ECサイト、ランディングページ、オウンドメディア)の主なゴール
  ・カートページで商品を購入してもらう
  ・オウンドメディアからサービスサイトへ誘導し購買につなげる
  ・試供品(サンプル品)請求・資料請求ページから試供品や資料請求してもらう

バナーのお悩みあるある

「バナーとは」という基本概念から、種類を整理しました。
ここまででバナーが様々な用途で利用され、Webマーケティングにおいて重要であると分かってもらえたと思います。

重要だからこそ「自分では作れない。」外部に委託すべきだと思われている方が多いのではないでしょうか。

しかし、外部へ依頼をしたからといって必ずしも思い通りになるとは限りません。

私が実際に聞いたバナー制作に関するお悩みが以下です。

  1. 制作依頼をしてから納品まで時間がかかりすぎる
  2. 細かい金額で請求されて、都度経理申請が面倒
  3. 少し変えたいだけなのに、細かな修正や改善ができない
  4. 静止画だけでなくGIFなど動作のあるバナー制作の依頼先が不明

などなど、「いっそのこと自分で制作できればと、、、」と考えられた方が多いと感じました。

とはいえ、制作すると言ってもと中々腰が重い、そんな読者のために、Canvaを紹介します。

デザイナーがいなくても簡単無料でバナー作成_Canvaとは

Canvaは、多くの国や地域で活用されているグラフィックデザイン制作ツールです。
主な機能として、ドラッグアンドドロップ機能や多くのテンプレートやアイテムを使用して、SNSや動画、名刺、ロゴ、プレゼンテーションなど様々なデザインの共有やダウンロード、印刷、サイト内埋め込みなど活用できます。

バナー制作以外に動画など様々なデザインを制作できるCanvaの機能に関しては以下記事にまとめているのでぜひご覧ください。

=========
Canva(キャンバ)とは!?誰でも簡単に無料でデザイン制作ができる!最新使い方レポート!
=========

バナーの作り方(静止画編)

ではさっそくCanvaを活用したバナー制作についてお話します。

まず、Canvaアカウントを作る必要がございます。
SNSやメールアドレス、Googleアカウントなどから簡単に無料で作成できますので、まずは個人アカウントを開設ください。

アカウントを制作しましたら、以下3ステップで制作します

  1. TOPページで検索
  2. 目的や用途、サイズに合わせてテンプレートを選択
  3. デザイン制作画面で、テキストや画像素材を編集

<1.TOPページで検索>
ページ上部に【広告】や【バナー】と入力するだけ。
広告と検索するだけで、2,738点(有料含む)ものテンプレートが存在します。
また検索時に様々なメディアに応じた候補もでてくるのがありがたいです。

<2.目的や用途、サイズに合わせてテンプレートを選択>
検索結果が表示されましたら、目的に応じて候補テンプレートを選びます。
候補テンプレートの右上「・・・」から、プレビューを見ると、さらにそれに類似したテンプレートが表示されます。
お気に入りのテンプレートバナーが見つかったら、クリックして制作画面に移動します。
以下動画を御覧ください。

※右上、紫色の「デザインを作成」をクリックしカスタムサイズをクリックすると任意のサイズで制作を開始することが無料でできます。
似たサイズのテンプレートをコピーすれば、テンプレートを任意のサイズで無料で利用可能です!

<3.デザイン制作画面で、テキストや画像素材を編集>
ここの画面でテキストを編集したり、画面左側の素材からバナー素材を選択しドラッグアンドドロップしながら制作していきます。

画面中央のテンプレートのテキストをクリックすると編集ができます。以下の画像のように、画面上部のフォントを選択すると好きなフォントを利用できます。(一部有料)

左側のアップロードをクリックいただくと、手持ちの画像や動画をCanva内で利用できます。文字や素材の大きさを変更して以下のようなバナーの制作ができました。

バナーの作り方(アニメーション編)

では、この静止画バナーをアニメーション化してみたいと思います。
制作画面の左側、素材をクリックし、「矢印 アニメーション」と検索すると非常に多くのアニメーション素材がでてきます。
また、検索枠の右隣に「アニメート」とあり、こちらは画像全体に動きをつけることができます。

実際のアニメーションバナーが以下です。制作画面右上の「ダウンロード」をクリックするとMP4やGIFファイルでのダウンロードが可能です。

以上が静止画とアニメーションバナーを簡単に作る方法でした。
いかがだったでしょうか。私は今までデザインの勉強をしたことがなかったのですが、初心者でもこのクオリティでのデザイン制作ができるCanvaは便利ですね!
ぜひ、皆様も一度お試しください。

アニメーションバナーをポップアップさせる方法

先程、サイト内でのバナー活用方法に「ポップアップ」があるとお話しました。
一般的なポップアップバナーは静止画です。

静止画以上にクリック率を向上させアクションにつなげるためには、アニメーションバナーが有効です。

そのアニメーションバナーをポップアップさせたり、サイトの中に埋め込みことができるのがOPTIO(オプティオ)というサービスです。
OPTIOではCanvaで制作したアニメーションバナーもポップアップできるウィジェットを提供しています。

エンジニアや制作会社がいなくても来訪ユーザーの導線を簡単に設計できるようになります。またCanvaなどiframeタグで生成されたデザインを自由に配信できるのはOPTIOだけです。
ポップアップイメージ動画を以下に記載しました。
上記のようにOPTIO(オプティオ)ではCanvaで制作した様々なデザインを顧客誘導のために活用できます。

アニメーションバナーだけでなくCanvaで制作した動画もポップアップができます。Canvaを活用した動画編集方法に関しては以下を御覧ください。

=========
動画編集もできるCanva!無料で簡単に動画編集する方法
=========

OPTIOのサービスサイトは以下より御覧ください!
戦略PRやWebマーケティング・コンサルティング、サイト解析経験のある担当者が貴社のマーケティング課題に沿ったご提案も無料で可能ですので、OPTIOサービスサイトよりお気軽にお問い合わせください!

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

著者紹介
井上翔太
井上翔太
ログリー100%子会社クロストレックスの取締役、兼OPTIO(オプティオ)のプロダクトマネージャーの井上です。OPTIOの開発企画、マーケ、営業、CSをすべて担当し、お客様を成功に導くために日々奮闘中!