⑧【リサイズ編】ペット用オーガニックフードのバナーをデザインしよう

最後はリサイズ展開。実務では1つのバナーを複数サイズで求められます。300×250をベースに主要サイズへ展開しましょう。

サイズ違いは、縮小コピーすればいいんだよね?

トリペン先生

ただの縮小はNG!サイズごとに主役の大きさと文字の読みやすさを組み直すのが、リサイズの仕事です。

このステップでやること

① 主要サイズへ展開(例:728×90 / 160×600 / 1080×1080 など)。
② 比率が変わるサイズはレイアウトを組み直す(縮小コピペはNG)。
③ 要素の取捨選択をしつつ、シリーズとしての一貫性を保つ。

ポイント:横長は横の流れ・縦長は縦の流れで再設計/小さいサイズは要素を減らす勇気を。

記事の内容

主要サイズと使われる場所

代表的なバナーサイズ

300×250(レクタングル):記事の中やサイドバー。今回のベース
728×90(ビッグバナー):PCサイトのヘッダー下。横長で高さがない
160×600(ワイドスカイスクレイパー):サイドバーの縦長枠
1080×1080(正方形):SNSフィード。面積に余裕がある

サイズごとの組み直し方

比率が変わったら、レイアウトはゼロから組み直すつもりで臨みます。728×90は高さがないので、左に犬の顔・中央にキャッチ1行・右にCTAの横並びが定石。訴求3点は入りません。捨てます。160×600は縦の流れで、上から犬→キャッチ→訴求→CTAと積みます。1080×1080は面積に余裕があるので300×250の構成を活かしつつ、文字を大きめに調整します。サイズごとに「そのサイズで最低限伝えること」を決め直すのがリサイズの本質です。

シリーズとしての一貫性

レイアウトは変えても、色・フォント・キャッチコピー・わんちゃんの写真は全サイズ共通にします。どのサイズを見ても「同じキャンペーンのバナー」だと分かることが、広告としての信頼につながります。全サイズを1枚のアートボードに並べて、シリーズとして違和感がないか最後に確認してください。

このステップの完成チェック

①ベース含め3サイズ以上に展開した
②比率が変わるサイズはレイアウトを組み直した(縮小コピーしていない)
③小さいサイズでは要素を減らす判断をした
④並べて見たときにシリーズとして統一感がある

トリペン先生

リサイズまでできたら、実案件のバナー制作を一通り経験したことになる!おつかれさま〜!

記事の内容