バナーの「読みやすさ」は構図ではなく 余白の規律 で決まります。
4pxグリッドを土台に、1080×1080 の標準ベースで「どこに余白を取り、どこに主役を置くか」を可視化します。
VB は 4px をベース単位とし、4の倍数のみを使用します。各サイズの典型的な用途。
主要要素（コピー・CTA・主役の顔/手）は中央60%に配置。外周20%は装飾・写真の引きスペースとして使う。
バナーは平均1.7秒で判断されます。視線誘導順に要素を配置することで、CTR が改善します。下記の順番を「読み順」として設計してください。
1行目に必ず置く要素。8〜15文字。サイズは画面高の8-12%（1080なら80-130px）。ここを見て続きを読むか決まる。
ヘッドラインの直後（または並列）。「具体」を示す要素。読み手が「自分のことだ」と認識する根拠。
ヘッドラインの補足。「だから何ができるか」を一行で。20文字以内、サイズは画面高の4-5%（1080なら40-50px）。
誰の広告か明示。右上 or 左下の常駐ポジション。サイズは画面幅の8-10%（1080なら80-100px幅）。
vb-assets CDN のSVG固定使用。
具体的なアクション語。下20%以内に配置。塗りボタン or 大文字テキスト。「かんたん査定をはじめる」など動詞→名詞→動詞構造。
※対象条件・キャンペーン期限など。サイズは画面高の1.5-2%（1080なら15-20px）。景表法対応で必須要素は省略しない。
複数要素が重なる場合の標準レイヤー順。下が背面、上が前面。
| 用途 | 外周マージン | 主要要素配置範囲 | 備考 |
|---|---|---|---|
| コピー主役（タイポのみ） | 80px | 中央 920×920px | 呼吸感を最大化、ブランド広告向き |
| 写真主役（フォト全面） | 写真は0px / コピーは48px | 下20%のテキスト域内 | 写真は端まで使い、コピーは下帯に集約 |
| 数字インパクト | 64px | 中央 950×950px | 数字の周囲に十分な余白を残す |
| 引用・体験談 | 80px | 中央 920×920px | クオート記号で囲む、署名は右下 |
| 商品グリッド（書影） | 48px | 中央 980×980px | 書影自体が情報密度高いため余白少なめ |
Design System / Ad