【初心者必見】Canvaを使ったバナーの作り方をノンデザイナーの広告運用者が解説

広告運用をする中で、「自分でバナーを作れるようになりたい」と考えたことがある方もいらっしゃると思います。

自分でバナーを制作できれば、その分PDCAが早く回せたりコストが抑えられたり、さまざまなメリットがあります。ただ、いきなりPhotoshopやIllustratorなどの本格的なソフトを使って制作するのは、初心者にとってはハードルが高いですよね。

そんな時におすすめのデザインツールが「Canva（キャンバ）」です。操作が簡単で、デザイナーでなくとも広告配信に必要なバナーを手軽に作れます。

とはいえ、こういったデザインツールを全く使ったことがない場合、いきなりCanvaを開いても操作に戸惑ってしまうかもしれません。

そこで今回は、Canvaの特徴や使い方を紹介した上で、実際にデザイン初心者の私がバナーを制作する過程を詳しく解説していきます。

Canva（キャンバ）とは

Canvaは2013年オーストラリア発のグラフィックデザインツールです。

PCとスマホアプリでの利用が可能で、豊富なテンプレートが用意されており、直感的な操作でデザインすることができます。

月間アクティブユーザー数は1億人以上で、これまでにCanvaで制作されたデザイン数は130億以上、使用されている国の数は190ヵ国、対応言語数は100以上と世界中で利用されているツールです。

Canvaの特徴

Canvaの特徴を以下5つの項目に分けて、説明していきます。

無料から利用できる

Canvaの無料プランでは、25万点以上のテンプレートや100万点以上の写真および画像素材を使用できます。他の人を招待してデザインの編集や共有も可能なので、基本的な操作は無料プランで十分です。

有料プランは「Canva Pro」と「Canva for Teams」の2つが用意されています。

有料プランでは無料プランの素材に加えて、1億点以上のプレミアムストック写真や動画、グラフィック素材が利用可能となります。その他、画像や背景をワンクリックで削除出来る機能や1TBのクラウドストレージなど、有料プランのみで利用可能な機能も多数あります。

プレミアムコンテンツを使いたい方で、1人で作業することが多い場合は「Canva Pro」がおススメです。「Canva for Teams」はCanva Proの機能に加えて、タスクの割り当てやデザイン承認ワークフローなど、チームで使用する際に便利な機能が揃っています。

有料プランには30日間の無料トライアル期間があるので、まずは無料で使ってみて、より本格的なデザインをしたいと思ったらアップグレードを検討してみると良いでしょう。

商用利用が可能

Canvaで作成したデザインは、商用利用が可能です。クレジット表記も不要で、広告クリエイティブや販促物として利用することができるので、ビジネスシーンでも使いやすいですね。

ただし、以下のようなケースは商用利用が許可されていないので注意が必要です。

詳しくは下記のCanva公式サイトに記載されているので、利用前に一度チェックしておきましょう。

参考：Canvaは商用利用可能！Canvaで許可されている商用利用と禁止事項について分かりやすく解説します

テンプレートが豊富

SNS用のクリエイティブはもちろん、チラシやロゴ、プレゼン資料、動画までさまざまな目的に応じた多種多様なテンプレートがあります。テンプレートは自由にカスタマイズ可能です。

ドラッグ＆ドロップで操作が簡単

Canvaの操作は直感的で、誰でも簡単に使えます。

ドラッグ＆ドロップ機能を利用して、テキストボックスを動かしたり、画像を追加することが可能です。デザインツール初心者の方でもすぐに操作に慣れて作業を始められます。

チームでの同時編集機能

Canvaには同時編集機能があります。異なる場所にいるチームメンバーとリアルタイムで共同作業を行うことが可能です。

またコメント機能を使えば、具体的なフィードバックをもらえます。別の方に確認してもらう時も、効率的に作業が進められます。

Canvaの利用方法

ここまで読んで「Canvaを使ってみたい！」と思った方向けに、利用開始の手順を説明していきます。今回はPCのブラウザ版を使って解説しますね。

Canvaの登録方法

まずはCanvaの登録方法をご紹介します。

①Canvaにアクセスして、右上、もしくは真ん中にある「登録」ボタンをクリックします。

②登録はメールアドレス、Googleアカウント、Facebookアカウントから登録ができます。

③利用目的の画面が表示されるので、該当する項目を選択してください。後から変更も可能です。

④Canva Proのトライアルの案内が表示されます。無料プランで利用したい方は「後で」を選択してください。プランはあとで変更可能です。

⑤Canvaからのお知らせ情報の案内が表示されます。「受け取る」「今はしない」のどちらかを選択します。こちらも後から変更も可能です。

⑥上記画面が表示されれば登録完了です。

バナー制作のフロー

Canvaには多数のテンプレートがありますが、広告バナーはサイズ展開も多くテンプレートだけでは対応できないケースも多々あるため、今回はテンプレートを使わずに白紙の状態から作ってみましょう。

こちらの架空の制作依頼を元に、バナーを作る手順を解説していきます。

STEP1：新規作成画面を開く

トップページ右上の「デザインを作成」をクリックします。

作成したい内容を選択します。今回は正方形サイズのバナーを制作するので、「Instagramの投稿（正方形）」を選択します。制作したいバナーサイズがデフォルトの選択肢にない場合は、「カスタムサイズ」から作りたいサイズを入力してください。

選択した内容の編集画面が表示されます。これで準備完了です。

STEP2：すべての要素を仮置きする

まず最初に、画像素材やテキストなどバナーに盛り込む要素をすべて画面上に追加していきます。

画像を挿入する

画像やイラスト、動画などの素材を挿入するには、左側のメニューで「素材」を選択します。今回は女性のためのWebデザインスクールなので、検索窓に「パソコン　女性」と入力してみました。

写真素材を使いたい場合は、上のメニューから「写真」を選択し、検索結果を写真に絞ります。グラフィックや動画でも同様に検索結果を絞ることが可能です。

デザインイメージとマッチする画像を選択すると、画像が挿入されます。

テキストを挿入する

テキストを入れるときは、左側メニューの「テキスト」を選択します。「タイトル」「サブタイトル」「見出し」「本文」などがありますが、フォントやサイズはあとで調整できるので、どれを選んで追加しても問題ありません。

バナーに盛り込むテキストを入力しましょう。

1つ要素を追加するごとにサイズや色を調整したくなるかもしれませんが、まずは全部の要素を並べて全体像を把握すると、あとで優先順位に沿ってレイアウトを考えやすいです。

ファイルを追加する

Canva内にある素材ではなく、別途使用したい素材がある場合はファイルをアップロードしましょう。今回はロゴデータを追加します。

左メニューの「アップロード」を選択します。「ファイルをアップロード」を押すとファイル選択画面が表示されるので、挿入するファイルを選択しましょう。

これで、バナー制作に使用するすべての要素の追加が完了しました。

STEP3：レイアウトを決めて、要素の配置を調整する

すべての要素を並べたら、特にどの要素を目立たせたいのか優先順位を考えます。

今回は女性向けのWebスクールなので、パッと見てターゲットがわかるように写真を大きめに配置しつつ、「未経験からWebデザイナーへ」というメインコピーが1番目立つように配置したいと思います。

サイズを変更する

サイズを変更したい素材をクリックします。選択状態になると上の画像のように紫色の枠が現れるので、四隅のいずれかの白丸をドラッグすればサイズ変更が可能です。

位置を変更する

位置を変えたいときは、紫の枠が出ている選択状態のままドラッグ＆ドロップをすれば好きな位置に動かすことができます。

優先順位に沿って、テキストやロゴも同じようにサイズ変更や位置の調整をしました。

人の視線は基本的に「上から下」へ移動し、横書きのテキストは「左から右」に読んでいきます。重要な情報は左上→中央→右下の順で配置するのが効果的ですが、自分に関係ある情報かどうか一瞬で判断されるオンライン広告では、流し見でも伝わるように始点と終点が特に重要です。

今回は始点である上部に女性の顔＋メインコピー、終点である下部に行動を促すCTA（コールトゥーアクション）を配置しました。

バナーのレイアウトに関しては以下の記事で詳しく解説していますので、こちらも参考にしてみてくださいね。

【事例付き】バナー広告のデザインがイケてないときに見直したい4つの基本

STEP4：フォント・色・字間などディティールを詰める

レイアウトが決まったら、細部を整えていきましょう。目立たせたい部分の色を変更したり図形で囲ったり、可読性と視認性を上げることが大切です。

図形を挿入する

クリックへの影響が大きいCTA部分を目立たせるために、テキストの背景に図形を挿入して色をつけたいと思います。

左メニューの「素材」をクリックし、「図形」と表示された中から「正方形」を選択します。図形の横にある「すべて表示」をクリックすると、フキダシや矢印など他にもさまざまな図形が用意されているので必要に応じて選びましょう。

色を変更する

図形やテキストの色を変える時は、色を変更したい要素を選択すると上図のように「①カラー」が表示されるのでクリックします。

左側にカラーパレットが出てくるので、「文書で使用中のカラー」の中から選ぶか、または「②新しいカラーを追加」から細かく色の調整をすることもできます。

配色に迷ったら、写真やイラスト、ロゴなど既存の要素に近い色を選んで統一感を出しましょう。

要素から色を抽出する際は、上の画像の「③デザインからカラーを選択」のスポイトをクリックして、色を抽出したい部分にマウスを合わせます。今回はロゴのピンクを抽出したいので、スポイトアイコンをクリックしたあとにロゴのピンク部分をクリックしました。

ピンクの四角い図形を移動＆サイズ調整してCTA部分に配置してみます。統一感は出ましたが、なんだかバナー全体が淡くてボヤけた印象です。

より目立たせるために、図形を濃いピンクにしてテキストを白字にしてみました。この方がCTAとその他の部分のコントラスト（明暗の差）がつき、目に留まりやすいですね。

同じように、メインコピーの中でも特にキーワードとなる「Webデザイナー」にも、CTAと同じ濃いピンクの図形を追加しました。このように文字の下に色のついた帯を入れることを、デザイン用語で「座布団を敷く」と言います。

背景に写真や他の色がある場合、単に文字色を変えるだけだと読みづらくなってしまうこともありますが、座布団なら可読性を担保しつつ目立たせることができ、どんなデザインにも応用しやすいので覚えておくと便利です。

座布団以外にも文字を強調する方法は色々あるので、下記記事も参考にしてくださいね。

伝わるデザインにするために「文字」を強調する6つの方法

さて、メインコピーとCTAはある程度調整できましたが、サブコピーの「未経験の受講率95％」「受講者の就職率92％」が単調で目に入りづらいですね。

こういった並列的な情報は、同じ色や図形を使ってまとめると関係性があることが一目でわかり、情報をすばやく受け取れるようになります。

これまで目立たせたい部分には四角を使ってきたので、サブコピーには円形を使うことで周りとの差が生まれ、「受講率」「就職率」の2つが関係性のある要素であることがわかりやすくなりました。

STEP5：全体のバランスを調整する

全体を見ながら色やサイズを調整して、完成したバナーがこちらです。

デザイン初心者でここまで細部に気を配るのはなかなか難しいことですが、「こうすると見やすくなるんだ」と知ることで、だんだんクオリティの高いバナーを作れるようになります。

もし社内にデザイナーがいる場合は、「このバナーどうすればもっとよくなると思いますか？」とフィードバックを求めるのも良いでしょう。

今回制作したこちらのサンプルバナーも、社内のデザイナーからフィードバックを受けて修正したところ、グっとクオリティが上がりました。

STEP6：画像をダウンロードする

最後に、制作したバナーをダウンロードします。

右上の「共有」を押すとメニューが表示されるので、「ダウンロード」を選択します。

ファイル形式を選択後、「ダウンロード」をクリックして完了です！お疲れさまでした。

まとめ

今回は、デザイン初心者の私がCanvaでバナー制作する様子を詳しく紹介してみました。操作が簡単で、このまま配信しても問題ないクオリティのバナーが手軽に作れるということが伝わっていればとても嬉しいです。

広告運用者が自分でバナーを制作できるようになると、クリエイティブの改善やテストを

スピーディーに行えるというメリットがあります。

この記事を読んで、バナー制作に興味をもっていただけた方は、ぜひチャレンジしてみてくださいね。

※今回のバナー制作にあたって下記記事を参考にしました。Webデザイナーはどんなことを意識してバナーを作っているのか、ゼロから学ぶことができます。

【デザイン初心者向け】ゼロから学べるやさしいバナーの作り方