「CanvaでWebサイト用のバナーを作りたいけれど、サイズやレイアウトの正解がわからない…」
「ごちゃごちゃしたバナーになってしまい、クリックされている気がしない…」
そんなお悩みを解決するために、この記事ではCanva（キャンバ）を使ったWebサイト用バナーの作り方を、
- Webサイト用バナーの基本サイズ・種類
- Canvaでの具体的な作成手順（PC・スマホ）
- シンプルでも成果が出るデザインの考え方
- 配置・余白・色・フォントの実践テクニック
- Web表示を前提にした書き出し・軽量化のポイント
といった観点から整理して解説します。
「Canva バナー ウェブサイト」で検索している方は、この1記事をベースに“伝わるバナー”の型を作ってみてください。
1. Webサイト用バナーの基本サイズと種類
1-1. よく使われるWebバナーの代表的なサイズ
Webサイトや広告でよく使われる横幅・縦幅の一例は次の通りです。
| 種類 | サイズ（px） | 用途の例 |
|---|---|---|
| レクタングル（中） | 300 × 250 / 336 × 280 | 記事下・サイドバーのバナー／広告 |
| ビッグバナー | 728 × 90 | ページ上部の横長バナー |
| スカイスクレイパー | 160 × 600 / 300 × 600 | サイドカラムの縦長バナー |
| スクエア | 250 × 250 / 300 × 300 | サイド・フッター・ウィジェット用 |
| サービス／リンクバナー | 180 × 130 など | トップページのメニュー的バナー |
自分のサイトで「どこに置くバナーなのか」を決めたうえで、
横長・正方形・縦長のどれが最適かを選び、ピクセル数を決めましょう。
1-2. ヘッダー・ファーストビュー用バナーの考え方
LPやサービスサイトのファーストビュー（ヒーローヘッダー）として使う場合は、
- 横幅：PC表示で1200〜1366px程度
- 高さ：400〜600px程度
を基準にすると、PC・タブレットで見ても破綻しにくいバナーになります。
「ヘッダーバナー」用途であれば、CanvaのWebバナー／ヘッダーテンプレートを選ぶとスムーズです。
2. CanvaでWebサイト用バナーを作る基本ステップ
2-1. PC版 Canva を使った作成手順
- ブラウザで Canva にアクセスし、アカウントにログインする。
- ホーム画面上部の検索バーに
「バナー」「Webバナー」「ヘッダーバナー」などと入力。 - 目的に近いテンプレート（横長／正方形／縦長）を選択。
- 編集画面で、以下の要素を自分用に置き換える。
- キャッチコピー（伝えたいメインの一言）
- サブコピー（補足説明）
- メイン画像（商品／サービスイメージ）
- ロゴ・サイト名
- ボタン風のパーツ（CTA：詳しく見る／資料請求など）
- デザインができたら、右上の「共有」→「ダウンロード」から書き出す。
テンプレートを使えば、配置・余白・フォントサイズの“型”がすでに出来ている状態からスタートできるので、
最初は「中身の差し替え」から慣れていくのがおすすめです。
2-2. カスタムサイズで作る手順
「このスペースきっちりに収めたい」という場合は、ピクセル数を指定して作成します。
- Canvaホーム画面右上の「デザインを作成」をクリック。
- 「カスタムサイズ」を選択。
- 例：728 × 90（ページ上部用）、300 × 250（サイドバナー用）などを入力。
- 「新しいデザインを作成」をクリックし、空キャンバスに対して背景・テキスト・素材を追加する。
サイト運営でよく使うサイズは、テンプレート風に1つ作っておき、複製して使い回すと、制作効率が大幅に上がります。
2-3. スマホアプリ版 Canva から作る場合
- Canvaアプリを開き、ホーム画面の検索バーに「バナー」と入力。
- Webバナー／ヘッダーバナー系のテンプレートを選択。
- 写真・テキスト・色を編集。
- 右上の「共有」→「ダウンロード」で端末に保存。
テキスト入力や細かい配置調整はPCの方がやりやすいですが、
「ちょっとしたキャンペーンバナーをすぐ差し替えたい」ときはスマホだけでも十分対応できます。
3. シンプルでも伝わる Webバナーデザインの考え方
3-1. バナーは「1メッセージに絞る」が鉄則
バナーに詰め込みがちな情報：
- キャッチコピー
- セール情報
- メリット箇条書き
- 画像・アイコン・ロゴ・ボタン
しかし、ユーザーがバナーを見る時間は一瞬です。
「このバナーで一番伝えたいことは何か？」を1つに絞り、それ以外は削ることがクリック率アップにつながります。
例：
- ×「高機能・低価格・導入実績No.1・無料相談受付中…」全部載せる
- ○「まずは無料相談」＋「◯◯の悩みを解決」の2要素に絞る
3-2. 要素の「優先順位」をデザインで表現する
バナー内の情報には、必ず重要度の違いがあります。
- 重要度高：メインコピー・オファー（◯◯%OFF、無料相談など）
- 重要度中：ターゲット（◯◯な人向け）・補足説明
- 重要度低：ロゴ・URL・注意書き
この優先度を、
- サイズ（大きさ）
- 色（目立つ色・地味な色）
- 配置（中央／端）
で表現してあげることで、「一瞬で意味が伝わるバナー」になります。
3-3. 使う色は「3色まで」を目安にする
多くのバナーデザイン解説でも、
- ベースカラー（背景）
- メインカラー（ブランドイメージ）
- アクセントカラー（ボタン・強調部分）
の3色構成が推奨されています。
Canvaのブランドキットに色を登録しておくと、毎回迷わず同じ配色を適用できます。
3-4. フォントは2〜3種類に抑え、読みやすさを優先
- メインコピー：太めのゴシック体（視認性重視）
- サブコピー：少し細めのゴシック or 明朝
- ロゴ／英字：アクセントで1種類
フォントを増やしすぎると途端に素人感が出ます。
「見出し用」「本文用」「ロゴ用」の最大3種類までに固定しておきましょう。
3-5. 余白（ホワイトスペース）がプロっぽさをつくる
「スカスカだと情報が足りない気がする」と思って詰め込みがちですが、
実際は余白があるバナーの方が高級感・信頼感が出やすいです。
- テキストとバナー端との間に十分なマージンを取る
- 画像と文字をくっつけすぎず、適度な間隔を空ける
- 行間を詰めすぎない（特に日本語はゆとりを持たせる）
Canvaのガイド線・配置機能を使いながら、「ちょっと余白を広めに」を意識すると、全体が整って見えます。
4. Canvaで実践する配置・レイアウトのコツ
4-1. 「Zの法則」「Fの法則」を意識した配置
Webページを閲覧する際、視線は一般的に、
- Z型（左上 → 右上 → 左下 → 右下）
- F型（上部を横に → やや下に → 左縦方向）
のどちらかで動くと言われています。バナーでも同様に、
- 左上〜中央：ロゴ・カテゴリ・キャッチコピー
- 右下または中央下：ボタン風のCTA（詳しく見る／申し込む）
といった配置にすると、視線の流れに沿って自然とクリックを促せます。
4-2. 写真とテキストのバランス
- 商品や人物写真は片側に寄せて大きく配置
- 反対側にテキストをまとめる（左右どちらかに情報を寄せる）
- 写真の上に文字を載せる場合は半透明の四角形を敷いて可読性を確保
「写真50％・テキスト50％」くらいに分けるレイアウトを基準にすると、バランスが取りやすくなります。
4-3. サイト全体との一貫性を持たせる
単体で良いバナーを作るだけでなく、
- サイトのテーマカラーと合わせる
- ボタンの色・形をサイト内の他ボタンと揃える
- フォントをサイトの見出し・本文と揃える
ことで、Webサイト全体としての統一感とブランド感が出ます。
特にLPやサービスサイトでは、「ヘッダー／アイキャッチ／CTAバナー」の世界観が揃っているかが重要です。
5. Webサイト用に書き出すときの注意点
5-1. ファイル形式は JPG または PNG
- 写真主体・グラデーション多め → JPG（容量を抑えやすい）
- ロゴ・図形中心・文字くっきり → PNG（シャープに見えやすい）
背景透過が必要な場合（サイト側の背景と馴染ませたい場合）は、PNG（透過）を選びましょう。
5-2. ファイルサイズは軽く（表示速度に直結）
バナー画像が重すぎると、ページ表示速度が落ち、SEO・ユーザー体験ともにマイナスです。
- 1枚あたりの目安：〜200KB程度を目標
- Canvaのダウンロード時に「画質」スライダーを少し下げる
- 必要に応じて外部の画像圧縮ツール（TinyPNGなど）で再圧縮
5-3. PCとスマホの両方で表示チェックを行う
Canvaで作ったバナーは、公開前に必ず、
- PCブラウザでの見え方
- スマホ実機での見え方
を確認しましょう。
- 文字が小さすぎないか
- 端が切れていないか
- 色が暗すぎないか
などをチェックして調整しておくと、実運用での取りこぼしを防げます。
6. まとめ｜Canvaで「シンプルで伝わる」Webバナーの型を作ろう
今回は、CanvaでWebサイト用バナーを作る方法を、
- Webバナーの基本サイズと種類
- PC・スマホでの具体的な作成手順
- 1メッセージに絞るデザイン戦略
- 配置・配色・フォント・余白の実践テクニック
- Web表示を意識した書き出し・軽量化のポイント
という流れで整理しました。
最後に、今日から実践できるチェックリストをまとめると：
- バナーの用途（どこに表示するか）を決めてからサイズを選ぶ
- メッセージは1つだけに絞り、重要度に応じてサイズ・色・配置で差をつける
- 色は3色まで、フォントは2〜3種類までに抑える
- 余白をしっかり取り、読みやすさ・見やすさを優先する
- PC・スマホ両方で表示チェックをしてから本番反映する
まずはCanvaを開いて「バナー」「Webバナー」と検索し、
自分のサイトの雰囲気に近いテンプレートを1つ選んで、中身を差し替えてみるところから始めてみてください。
そのテンプレートを「自分用のバナーの型」として育てていけば、キャンペーンや新記事のたびに、
シンプルで伝わるWebサイト用バナーを、短時間で量産できるようになります。
コメント