WEBデザインを学び始めたばかりの方にとって、
「バナーってそもそも何？」
「どんなサイズで作ればいいの？」
と悩む場面はとても多いのではないでしょうか。
WEBデザインの学習では、
PhotoshopやCanvaの操作方法、配色、レイアウトなど
“作り方” に意識が向きがちですが、
実際のホームページ制作や案件の現場では、
- なぜこのサイズなのか
- どこに配置されるのか
- どんな役割を持つのか
といった 設計の考え方 がとても重要になります。
この記事では、
WEBデザイン初学者〜学習中の方 を対象に、
- バナーとは何か
- なぜバナーサイズが重要なのか
- ホームページ制作でよく使われるバナーサイズ一覧
- サイズごとの役割と考え方
を、できるだけわかりやすく解説していきます。
そもそもバナーとは？
バナーとは、
ホームページ上で情報を目立たせたり、別ページへ誘導するための画像
のことを指します。
具体的には、次のような場面で使われます。
- キャンペーンやお知らせの告知
- サービスページへの誘導
- お問い合わせ・資料請求への導線
- サイト内回遊を促すためのリンク
つまりバナーは、
「ただの装飾画像」ではなく、ユーザーを動かすためのパーツ です。
この役割を理解しておくことが、
バナーサイズを考えるうえでの大前提になります。
なぜバナーサイズが重要なのか？
WEBデザイン初学者の方がよくやってしまいがちなのが、
「とりあえず見やすそうなサイズで作る」
「テンプレートのサイズをそのまま使う」
という作り方です。
しかし実際には、
バナーサイズ ＝ 設置場所 ＝ 役割
がセットで考えられています。
サイズが変われば、
- 表示される場所
- ユーザーの視線の入り方
- 伝えられる情報量
が大きく変わります。
そのため、
「このバナーはどこに置かれ、何を伝えるためのものなのか」
を理解せずにサイズを決めてしまうと、
見た目は整っていても、効果の出ないバナーになってしまいます。
国際標準規格（IAB）が定めるバナーのサイズとは？
実は、バナーには世界的な標準規格が存在します。
これは、米国の業界団体「IAB（Interactive Advertising Bureau）」が定めた国際的な広告バナーサイズ規格で、主に広告配信・ディスプレイ広告の世界で使われています。
IAB の規格は2年ごとに見直されており、現代の WEBサイトでも使われる主要なバナーサイズの基準として広く採用されています。
これを理解しておくと、クライアントワークでも「世界的に認知されているサイズ」を提案できるため、案件対応力がぐっと上がります。
IAB の規格サイズの種類
国際標準規格では、主に以下の 3 つのカテゴリに分類されます。
■ Rectangles and Pop-Ups（長方形とポップアップ）
| バナーサイズ | 名称 |
|---|---|
| 300×250 | ミディアムレクタングル |
| 250×250 | スクエアポップアップ |
| 240×400 | バーティカルポップアップ |
| 336×280 | ラージレクタングル |
| 180×150 | レクタングル |
| 300×100 | 3:1 レクタングル |
| 720×300 | ポップアンダー |
このカテゴリは コンテンツ内に馴染みやすく、情報を伝えやすいサイズ です。広告でもよく使われ、ホームページ制作でも汎用性が高い形状です。
■ Banners and Buttons（バナーとボタン）
| バナーサイズ | 名称 |
|---|---|
| 728×90 | リーダーボード |
| 468×60 | フルバナー |
| 234×60 | ハーフバナー |
| 120×90 | ボタン 1 |
| 120×60 | ボタン 2 |
| 125×125 | スクエアボタン |
| 88×31 | ミクロバナー |
| 120×240 | バーティカルバナー |
バナーとボタンとして認識されるサイズ群。サイト内リンク誘導・CTA（行動喚起）用に使われることが多い形です。
■ Skyscrapers（縦細長）
| バナーサイズ | 名称 |
|---|---|
| 160×600 | ワイドスカイスクレーパー |
| 120×600 | スカイスクレーパー |
| 300×600 | ハーフページ AD |
縦に長いサイズで、サイドバーや目立たせたいエリア向けに使われることが多い規格です。スクロールしても視界に入りやすいのが特徴です。
代表的な IAB バナーサイズの現場での意味
国際規格としてよく知られているサイズは、WEB制作でも活用されることが多く、以下のような役割があります。
- 300×250（ミディアムレクタングル）
コンテンツ内配置に強く、視認性が高い定番サイズ。 - 728×90（リーダーボード）
ページ上部でユーザーの視線に最初に触れやすい。 - 468×60（フルバナー）
一般的な横長サイズで、サイト全体のバナーとして汎用性あり。 - 160×600（ワイドスカイスクレーパー）
縦のスペースを使い、サイドコンテンツに適した表示。
こうした 国際標準のサイズを理解しておくことで、広告運用者・他デザイナー・クライアントと共通言語で話せるようになる ため、実務に強いデザイン力につながります。
ホームページ制作でよく使われるバナーサイズ一覧
ここからは、
ホームページ制作の現場でよく使われる代表的なバナーサイズ を紹介します。
※用途やサイト構成によって多少前後することはありますが、
まずは「よくあるサイズ」として覚えておくと安心です。
■ 728×90px（ビッグバナー）
主な用途
- ページ上部
- メインビジュアル下
- 重要なお知らせやキャンペーン告知
特徴
- 横長で目立ちやすい
- サイト訪問直後に目に入りやすい
- 情報はできるだけシンプルに
初学者の方は、
「情報を詰め込みすぎない」ことを意識すると失敗しにくいサイズです。
■ 300×250px（ミディアムレクタングル）
主な用途
- 記事途中
- サイドバー
- コンテンツの区切り部分
特徴
- 視認性が高く、非常によく使われるサイズ
- テキストと画像のバランスが取りやすい
- 初心者の練習に最適
「まずどのサイズから練習すればいいか分からない」という方は、
このサイズから始めるのがおすすめです。
■ 468×60px（フルバナー）
主な用途
- 記事下
- ページ下部
- 補足的な導線
特徴
- 横長で高さが低い
- 短いメッセージ向き
- コピー（文章）の整理力が求められる
文字量が多くなると一気に読みにくくなるため、
「何を一番伝えたいか」を明確にすることが重要です。
■ 336×280px（ラージレクタングル）
主な用途
- コンテンツ内の目立たせたい位置
- サービス紹介の補足導線
特徴
- 300×250pxよりやや大きく、存在感がある
- 情報量を少し増やせる
- 視線を止めたい場面に向いている
■ 120×60px（ボタン型バナー）
主な用途
- 「詳しくはこちら」
- 「お問い合わせ」
- 「資料請求」
特徴
- 情報は最小限
- 行動を促すことが目的
- 文字の可読性が最重要
装飾よりも「押しやすさ」「分かりやすさ」が優先されるサイズです。
初心者がサイズを覚えるコツ
サイズを丸暗記する必要はありません。
まずは次の視点で覚えると実務でも役立ちます：
■ 横長バナー
➡ 見出しやページ上部での訴求に使う
■ 長方形・正方形系
➡ コンテンツの途中やリンク誘導用の中核バナー
■ 縦長（スカイスクレーパー）
➡ サイドバーで目立たせたいときに最適
このように、形の種類と用途感覚で覚えると、サイズの意味が理解しやすくなります。
サイズごとに意識したい考え方
バナーサイズを選ぶときは、
次の3つをセットで考えるクセをつけましょう。
- どこに配置されるのか
- 誰に向けたものなのか
- 最終的に何をしてほしいのか
たとえば、
- ページ上部 → 興味を引く・存在を知らせる
- 記事途中 → 内容理解を深める・関連ページへ誘導
- ボタン型 → 行動を起こしてもらう
同じデザインでも、
サイズと配置が変われば役割はまったく変わります。
WEBデザイン初学者が最初に意識すべきポイント
学習初期の段階では、
「すべて完璧に理解しよう」とする必要はありません。
まずは、
- バナーには役割がある
- サイズには意味がある
- 見た目だけで決めてはいけない
この3点を理解するだけで、
デザインを見る視点が大きく変わります。
その視点を持った状態で制作を続けることが、
後々の 案件対応力・設計力 につながっていきます。
まとめ｜バナーサイズは「デザインの基礎設計」
バナーサイズは、
単なる数字の違いではありません。
- 配置場所
- 役割
- 情報量
を決める、ホームページ制作における重要な設計要素です。
WEBデザインを学び始めた今の段階で、
「なぜこのサイズなのか？」
を少しずつ考えられるようになると、
デザインの理解度は確実に一段階上がります。
まずは代表的なバナーサイズを覚え、
それぞれの役割を意識しながら制作してみてください。
