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

突然ですが、みなさんは運用型広告に使うバナーを自ら制作したことはありますか？

「全く作ったことがないしいつもデザイナーに頼んでいる」という方もいれば、「依頼する余裕がなくて自分で作ったことがある」「バナー制作に興味があってチャレンジしてみた」という方もいるのではないでしょうか。

実際に手を動かしてバナーを作ってみると、素材の配置場所やサイズ感を調整したり、配色やフォント選びに試行錯誤したりと、想像よりも時間のかかる作業だと実感すると思います。「もうちょっと完成度を高めたいけど、どこをどう直せばいいのかわからない…」と頭を悩ませた経験がある方もいるかもしれません。

そんなデザイン初心者・未経験者でありながらバナーを作る機会のある方、作れるようになりたいと思っている方に向けて、実用的で簡単な制作フローやレイアウトをご紹介していきます。

最初からクオリティの高いバナーデザインを目指す必要はありません。まずは時間をかけすぎずに、ある程度見栄えの整ったバナーを作れるようになること。これを目標にしていきましょう。

※当記事は「運用型広告のバナー制作を円滑に進めるための情報整理術」の続編になります。バナー制作を進めるにあたり、テキストや素材の準備が整っていない方はこちらの記事からお読みください。

3STEPで完結！運用型広告のバナー制作を円滑に進めるための情報整理術

おすすめの制作ツール「Canva」

バナー制作の代表的なツールとしてAdobe Photoshopが挙げられますが、今回は導入のハードルが低く初心者でも使いやすい「Canva」の無料版を使っていきたいと思います。

CanvaはSNSやビジネスに使えるテンプレートや装飾素材をたくさん内蔵しており、複数人で同時に作業もできる利便性の高いツールです。有料版にアップグレードすると使えるフォントや機能が増えるので、気になる方は有料版も検討してみてください。

バナー制作のフロー

今回は架空のバナーの制作依頼を元に作っていきます。依頼内容は次の通りです。

それではさっそく制作を始めていきましょう。

STEP1：デザインの方向性を考える

すぐに作業に入りたいところですが、デザインに着手する前にやっておきたいことが2点あります。1つめは依頼内容や情報を見直すこと、2つめはデザインのリサーチ・トンマナを固めることです。

依頼内容や情報を見直す

制作の目的やターゲットへの理解が曖昧なまま手を動かし始めてしまうと、自分の趣味趣向に寄った独りよがりなデザインになってしまったり、狙いと表現がズレてしまう恐れがあります。例えばターゲットが60代以上の場合と20代の場合、テキストの大きさや好まれる配色にも違いがありますし、目的によって強調するべき要素やレイアウトの選び方も異なります。

制作に至るまでの経緯や目的、ターゲットをしっかりと頭に入れた上で、商材や企業に関する資料などがあれば改めて目を通しておきましょう。

デザインのリサーチ・トンマナを固める

事前に参考イメージを用意していると思いますが、それ以外にも今回制作する商材のLPや過去のバナー、競合他社のデザインなどを調べてみてください。コーポレートカラーが使われていることに気づいたり、医療系のサービスであれば青系で清潔さを感じるデザイン、エナジードリンクであれば力強いフォントと派手な配色のデザイン…といったように、各商材ごとに“らしさ”を感じるデザインの傾向や共通点が見えてきます。

「冬のキャンペーン」といった訴求であれば冬の季節感が伝わるバナー、初心者がターゲットの場合は初心者・未経験者向けのバナーを調べてみるなど、訴求やターゲットに沿ってリサーチしてみるのも良いでしょう。

バナー広告においては遷移先のページとの相性も考慮する必要があります。デザインの印象が大きく異なると違和感を持たれたり離脱の原因になりかねないため、遷移先のページには必ず目を通しておいてください。

これらのリサーチを行うことでフォントや色を決めやすくなり、デザインの方向性を大きく誤りにくくなります。調べたデザインはどこかに保存しておき、おおまかで良いので「配色はオレンジなどの暖色系」「フォントは丸い感じのゴシック」…といったようにトンマナを考えておきましょう。

ブランドイメージが確立している商材の場合、フォントや配色、ロゴの扱い方に関するガイドラインが定められているケースがありますので、このあたりも事前に確認しておけると安心です。

STEP2：テキストや素材を仮置きする

ここからは実際の作業に移っていきます。

今回はCanvaのテンプレートに頼らずに白紙から作ってみましょう。

まず最初にテキストや素材などの全ての要素を画面上に載せていきます。

最初に全ての要素を載せる理由としては、サイズや配置のバランスを整えていく上で、バナーを構成する要素の全体像を把握しておいた方が良いためです。この時点からフォントを選んだり配色を決めたくなるかもしれませんが、制作の順番としてはフォントや配色などのディティールに取りかかるのは１番最後だと覚えておいてください。まずはクリエイティブの狙いや優先順位を元にバナーの構成（レイアウト）を考えていく必要があります。

ただ慣れないうちは何もない状態からレイアウトを考えるのは難易度が高いのではないかと思います。そこで次の項目で簡単に作れて真似しやすいレイアウトをご紹介していきます。

STEP3：レイアウトを決める

運用型広告のバナー制作では、商材写真などの使用素材がそろった状態で作り始めることも多く、レイアウトから先に選択してしまうと素材がうまくハマらないケースがあります。そのため「今持っている素材でどんなレイアウトが作れるのか？」ということが理解できた方が活用しやすいと思い、レイアウトごとに相性の良い素材を記載し、初心者の方でも比較的作りやすいレイアウトを４点ピックアップしてみました。

①写真（コピースペースあり）＋余白にテキストを置いたレイアウト

＜レイアウトの概要＞

コピースペース上にテキストを載せたレイアウトです。テキストの配置を決めやすく、比較的少ない工数で見映えの良いバナーを作ることができるのがメリットです。商材イメージや人物写真をメインに見せつつ、テキストもしっかり見せたいときにおすすめです。

＜相性の良い素材＞

テキストを置くスペースが十分にあり、メインとなる被写体（写真の主役となる商材や人物）がある写真が最も適しています。画面全体を覆うように素材を使用するので、前提としてなるべく画質の良いものを選ぶようにしてください。メインとなる被写体がない場合でも、例えば俯瞰の風景写真であれば空の部分にコピーを載せることができます。

上の図の右側のように読みにくく感じるときは、テキストの背景に影や図形をつけたり、次に紹介する「画面分割レイアウト」に変えるなどして調整してみてください。

②写真＋画面分割レイアウト

＜レイアウトの概要＞

テキストの背景に図形などを敷き画面を分割したレイアウトです。テキストに素材が干渉しないため可読性が高いことがメリットです。分割の仕方はメインの被写体が見える位置や素材の縦横比を考慮して選択するとベターです。

分割数を増やせばたくさん写真を載せることができるので、商材の種類の豊富さをアピールしたいときにもおすすめのレイアウトです。

＜相性の良い素材＞

コピースペースが無い写真や、メインの被写体がない内観写真や風景写真にも適しています。そのためあらゆる素材に適応できますが、背景が無地の写真や切り抜き素材、透過イラスト（背景が透明のイラスト）を使うと画面の白さが気になるかもしれません。その場合は素材の背景に色をつけたり、背景の情報量が多い写真に変更すると画面全体の密度を上げることができるでしょう。

③背景向きの素材＋テキストメインのレイアウト

＜レイアウトの概要＞

素材よりもテキストに重きを置きたいときやメッセージを読ませたいときにおすすめのレイアウトです。背景素材の代わりにグラデーションやベタ塗り一色にしても応用が効くので、使える素材が全くないケースにも活用できます。

テキストのみのバナーは要素が少ないゆえに簡単なようで難しいです。テキスト量が少ないときはセンター揃えにして画面の中心に持ってくるとおさまりが良くなります。単調に感じたときはテキストのサイズや色にメリハリをつけると解消できます。

＜相性の良い素材＞

ここで言う背景向きの素材とは、メインの被写体がなく画面の四隅までまんべんなく情報が載っている写真や、パターン柄のイラストなどを指します。（パソコンのデスクトップ壁紙のようなイメージです）テキストの可読性を考えると切り抜き素材や透過イラストとはあまり相性が良くありません。

テキストが読みにくいときは、背景素材の色を暗めに調整したり、テキストの背面に図形を敷くなどすると効果的です。

④切り抜き素材や透過イラスト＋余白にテキストを置いたレイアウト

＜レイアウトの概要＞

背景色の上に切り抜き写真や透過イラストを配置し、空いたところにテキストを載せるレイアウトです。素材を目立たせたいときには素材を大きく、テキスト量が多いときには素材を少し小さめにするなど、臨機応変に配置の調整ができることがメリットです。

切り抜き素材を固めて配置すると1つの塊となってインパクトが出ますし、規則的に並べて配置すれば商材のバリエーションをアピールすることもできます。

＜相性の良い素材＞

背景が無い素材（切り抜き写真や透過イラスト）が適しています。白背景や無地の背景などを消したいときは不要な背景を除去できるサイト「remove.bg」が便利です。ちなみにCanvaの有料版「Canva Pro」では背景を除去する機能がデフォルトで付いています。

レイアウトに関する豆知識

デザインやレイアウトの知識の1つに「Zの法則」と「Fの法則」があります。横書きのテキストは左から右、上から下に読んでいくため、左上を起点として右下に向かっていくような配置にすると自然な流れで読ませることができます。この2つの法則を頭に入れておきましょう。

またテキストが四方八方にバラバラに配置されていると情報を瞬時に理解しにくいため、1〜2箇所に固めて置いた方が見やすいです。縦書きと横書き、左揃えと右揃えを混在させないようにすることもポイントです。

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

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

STEP4：レイアウトに沿って要素を配置する

レイアウトが決まったら、最初に仮置きした各要素の配置を整えていきます。

今回は透過イラストを使用するため、先ほどご紹介した「④切り抜き素材や透過イラスト＋余白にテキストを置いたレイアウト」に沿って進めていきます。

今回の素材は商材イメージではなく装飾的な役割なので、素材よりもテキストを大きく配置します。またテキストがすべて同じサイズ感だと単調になってしまうので、テキストの中でも優先順位を決めていきます。

今回のテキストを細かく見ていくと3つに分解することができます。

優先順位を元にテキスト配置し、サイズを調整していきます。

だいたいの配置が決まったら次は細部を整えていきましょう。

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

バナーのデザインは、伝えたい内容がパッと見て理解しやすいものである必要があります。

よって可読性と視認性がキーポイントです。

ターゲットにとって有益な情報や数字などの強調したい単語は、サイズを大きくしたり色を変えて目立たせると良いでしょう。クリックへの影響が大きいCTA（コールトゥーアクション）はメインコピーより目立つ必要はありませんが、なるべく目に留まるように図形で囲んだりフォントや色を工夫してみてください。

目立たせたい場所に仮で色をつけてみました。

フォントも色数も多ければ多いほど全体の統一感が出にくくなります。フォントは2、3種類、色数は多くても4色前後におさえるとまとまりやすくなります。また癖が強く可読性の悪いフォントはできる限り選ばないようにしましょう。

Canva無料版のフォントの中で、太さに種類があり癖の少ないものをいくつか選んでみました。「これが正解！」というわけではありませんが、フォント選びに迷ったときは参考にしてみてください。

配色に悩んだときは写真やイラストに近い色を使うのも1つの手です。Canvaのスポイト機能を使えば素材から色をコピーすることもできます。

また、配色の明度差が低いと可読性が悪くなります。モノクロにすると明度差が認識しやすくなるため、最初はモノクロの濃淡でデザインを作り、最後に色をつけていく方法もおすすめです。

だいぶ整ってはきたものの、まだテキストの行間や文字間が広く間延びした印象です。

全体的にテキストを詰めて、余白ができた分サイズを大きくしていきます。さらにテキストのサイズを調整してメリハリをつけます。

テキストを選択した状態で上部の「エフェクト」を選ぶと、装飾をつけることができます。

最後に装飾としてエフェクトや下線などを追加し、よりテキストを読みやすくしました。

これにて完成です！おつかれさまでした。

配色やフォントに関してもっと詳しく知りたい方は、以下の記事もあわせてお読みください。

「なんとなく」のフォント選びから卒業！ バナー広告やスライドに使えるフォントの基本を事例付きで紹介

【こんな配色はNG】いつもの業務からバナー広告まで使える配色の基本を事例付きで紹介

Canva公式からもバナー作成のコツが紹介されていますので、こちらも参考にしてみてください。

参考：バナーデザインの参考サイト6選とバナーの基礎知識や作成のコツ

STEP6：最終チェック

最後にテキストの誤字脱字やデザイン上のミスがないか全体をくまなくチェックします。広告の媒体や配信枠によってはデザイン上にアイコンやボタンが表示されることがあるので、メインコピーやロゴなどの大事な要素が隠れてしまわないかも確認しておきたいです。

画像として書き出すときは保存形式やファイル容量の上限にもご注意ください。

ある程度できあがったバナーがしっくりこないときは、一度時間を置いてから改めて見たときの第一印象を大事にしてみてください。あるいは第三者に校正してもらったりアドバイスをもらうのも良いでしょう。長時間画面に向かって制作していると客観的な視点が抜け落ちやすいです。きっと主観ではわからなかった新たな発見や気づきをもたらしてくれるはずです。

またパソコンとスマホでは見え方が異なるため、テキストサイズが心配なときはスマホの実機でも見え方を確認しておきましょう。

バナー制作のスキルを上げるためには？

バナー制作のデザインスキルを上げるためには、

この3点の繰り返しが大切だと思います。

フォントや配色に関してはなかなか一発で決められるものではなく（筆者も提出ギリギリまで悩んでしまうことがあります）、試行錯誤を重ねることで最終的なアウトプットのクオリティも高まっていくものだと実感しています。

またスキルUPの手法の1つにバナートレースがあります。参考にしたいバナーを模写することで、見やすい配色やテキストのサイズ感、レイアウトの整え方を実践的に学ぶことができます。もちろんトレースしたバナーをそのまま広告として使うことはモラルに反しますので、あくまでも練習の範囲内でチャレンジしてみてください。

まとめ

今回は白紙から制作しましたが、Canvaに内蔵されている素材やテンプレートを使えばもっと楽に作ることができます。難しそうと感じた方もぜひ一度お試しください。

広告運用者が自身でバナーを作れるようになれば、クリエイティブのテストや検証がしやすくなったり、外注の工数を減らせるなどの様々なメリットがあります。とはいえ制作にかける十分な時間が取れなかったり、案件によってはデザインのクオリティの高さを要求されるかもしません。そんなときにこそデザイナーに頼っていただければと思います。

当記事を読んで「バナー制作に挑戦してみたい」という方が少しでも増えてくれれば嬉しい限りです。一緒にバナー作りに励んでいきましょう。