10. バナーサイズの基礎知識と使い分け
バナーを作ってって頼まれたんだけど、どのサイズで作ればいいのかな？
バナーは掲載場所や目的によってサイズが違うんだよ！よく使われるサイズと、用途ごとの特徴を覚えておこう！
✴️ よく使われるバナーサイズ一覧
バナーには、Web広告用・SNS用・Webサイト内用など、用途ごとに定番サイズがある。
📌 代表的なサイズ（px単位）：
| 用途 | サイズ | 説明 |
|---|---|---|
| レクタングル小 | 300×250 | ブログ記事内・サイドバー広告によく使われる |
| レクタングル大 | 336×280 | レクタングル小より少し大きめ、目立たせたいときに |
| リーダーボード | 728×90 | ページ上部や下部に使われる横長バナー |
| モバイルバナー | 320×100 | スマホ対応、下部に固定して使われることが多い |
| スクエア | 250×250 | 汎用性が高く、埋め込みやサイド表示に向いている |
| スカイスクレイパー | 160×600 | 縦長バナー、サイドに固定表示される |
✴️ SNSバナーサイズ
各SNSに適した画像サイズを使うと、見切れや劣化を防げる！
📌 主要SNSの推奨サイズ：
| プラットフォーム | バナー用途 | 推奨サイズ（px） |
|---|---|---|
| 投稿（正方形） | 1080×1080 | |
| ストーリー | 1080×1920（縦長） | |
| X（旧Twitter） | タイムライン画像 | 1200×675（横長） |
| 広告 | 1200×628 | |
| YouTube | サムネイル | 1280×720（16:9） |
✴️ デザイン時の注意点
- 文字やロゴは端に寄せすぎない！ → トリミングの危険あり
- 解像度は72dpiがWeb用の基本
- 重要情報は中央に配置して、どの表示でも伝わるようにする
- 背景と文字のコントラストを強くして視認性UP
✴️ ファイル形式と容量
- PNG：高画質・透過対応。ロゴや文字に向いている
- JPEG：軽量で写真向き。画質を保ちつつ容量を圧縮
- WebP：軽量で高品質。モダンブラウザ対応が進んでいる
- GIF：アニメバナーに使えるが容量が重くなりがち
📌 Web広告では100〜200KB以下が理想的
✴️ レスポンシブ対応の考え方
- スマホ・PCなど異なる画面サイズに対応するには、バナーの複数サイズ作成が理想
- HTML内で
srcsetや CSSの@mediaを使うことで切り替え可能
🌟 まとめ：目的に応じたバナーサイズを選ぼう！
| バナーの種類 | サイズの例 | 適した用途 |
|---|---|---|
| 小型バナー | 300×250 | ブログ、記事内、サイドバー |
| 大型バナー | 728×90 | ページ上部・フッターの目立つ位置 |
| SNSバナー（正方形） | 1080×1080 | Instagram、Facebook投稿 |
| SNSバナー（横長） | 1200×628〜720 | XやFacebookの広告・投稿 |
| モバイル対応 | 320×100 | スマホ専用フッターやヘッダー広告 |
サイズってこんなに種類があるんだ〜！ちゃんと選ばないとズレたり見えなかったりしちゃうんだね。
うん！「どこに使うか」から逆算してサイズを決めるのがプロのデザインだよ♪