2-5｜バナー画像を作る上での基本知識

Lesson. 02｜Canva（キャンバ）編

バナーとは

バナーは本来「旗」「横断幕」という意味を持ちます。
Webの世界では「画像を使った広告や案内のこと」を指します。

例えば、

• ECサイトのトップページにある「SALE開催中！」と書かれた画像
• Yahoo!やGoogleなどのサイトに表示される四角い広告画像
• ブログ記事の途中に入るキャンペーン案内の画像　など

バナーの目的を理解する

バナーは「クリックしてもらう」「情報を伝える」など、明確な目的があります。

情報を伝える

キャンペーン、イベント、新商品のお知らせなど

誘導する

「詳しくはこちら」「今すぐ購入」などでリンク先へ導く

ブランドイメージを伝える

ロゴやデザインで企業の世界観を示す

バナーは「小さな広告塔」のような役割を果たしています。

• 認知型：ブランドやサービスを知ってもらう（例：キャンペーン告知）
• 誘導型：特定ページへクリックさせる（例：購入ページ、LPへの誘導）
• 成果型：その場で行動を促す（例：「今すぐ登録」「50%OFF」）

作る前に「誰に」「何を」「どうして欲しいか」を決めることが大切です。

バナーの種類

Web広告用バナー

• Googleディスプレイ広告、SNS広告などで表示される
• サイズ規格が決まっている（例：300×250px、728×90px など）

サイト内バナー

• ホームページやECサイト内に設置される
• 例：トップページのキャンペーン案内、カテゴリー誘導

メールバナー

メルマガの最下部などに入る案内画像

構成（レイアウト）の基本

バナーの要素は大きく分けて ３つ です。

キャッチコピー（文字）

• 一番伝えたいこと（例：「期間限定セール！」）
• 短く、大きく、目立たせる

ビジュアル（画像・イラスト）

• 商品やサービスを連想させる写真・アイコンを使う
• 人物写真は注目を集めやすい

CTA（行動喚起）

「詳しくはこちら」「今すぐ登録」など、クリックの動機を作る

ポスターのように「情報を全部入れる」必要はなく、1つの訴求に絞るのがコツ。

デザイン要素の基本知識

① 色（カラー）

• ブランドカラー + 目立つアクセントカラーを使う
• 3色以内にまとめると見やすい
• 赤やオレンジ：行動を促す／青：信頼・安心／緑：自然・安らぎ

② フォント（文字）

• 見出し（太く・大きく）
• 本文（細め・読みやすく）
• 2種類以内で統一するとプロっぽく見える

③ 画像 / 写真

• 高解像度のものを使う（ぼやけはNG）
• 主役（商品や人物）は中央や目立つ場所に配置
• 透過PNGや切り抜きで余計な背景を省くのも効果的

④ 余白

• 文字や写真を詰め込みすぎない
• 余白をとると「洗練されたデザイン」に見える

バナー作成のポイント

• 一瞬で内容が伝わる（1〜2秒で理解できる）
• テキストは短く大きく（「SALE」「無料体験」など）
• 色・写真で視線を引く（コントラストをつける）
• クリックを促す要素（CTA）を入れる（「詳しくはこちら」）