作る前に決める3つのこと
ツールを開く前に、3つの決めごとを紙に書きます。ここが曖昧なまま作り始めると、途中で何度でも作り直しになります。
- いちばん伝える特典はどれか。 「30%オフ」「500円引き」「送料無料」などから、対象者と実際の条件に合う1つを主役に選びます
- 押した(見た)あとに何をしてほしいか。 来店なのか、通販サイトなのか、フォロワー向けの告知なのか。行き先で載せる情報が変わります
- どこに出すバナーか。 SNSの正方形、サイトの横長など、置き場所で骨組みが決まります
ゴールは、短く見た人でも対象・特典・期限の骨格をつかめることです。固定の秒数ではなく、実寸で主役が先に見えるかを確認します。
3つの決めごとのうち、迷いやすいのは1つ目です。「30%オフ」と「500円引き」が両方あるとき、両方を同じ強さで載せると順番が伝わりにくくなります。対象者にとって理解しやすい方を主役にし、もう一方を読める脇役へ回します。併用条件が判断に必要なら、行き先へ追いやらずバナーにも近接して示します。
セールバナーを作る5つの手順
決めごとが済んだら、次の順番で作ります。各手順で「やること」と「終えてよい目安」を確かめながら進んでください。
- 情報を3役に分ける。 対象・特典・期限を残し、適用条件は特典の近くへ置きます。住所や詳しい説明は、行き先で確認できるかを見て分担します
- 骨組みを作る。 上下配置と左右配置など2案の白黒ラフを作り、対象・特典・期限の順を追いやすい方を選びます
- 特典を主役サイズで置く。 特典と周囲の大きさに差をつけ、スマホの実寸で最初に見える最小の差を探します。この大小の関係がジャンプ率です
- 脇役を読める大きさで置く。 期間・対象・条件の端をそろえ、主役より静かでも読み落とさない大きさとコントラストを保ちます
- 色と仕上げ。 背景と数字の明暗差を大きく取り、指を止めてほしい1カ所(ボタン風の帯など)に強調色を使います。文字が背景に沈んでいないかはコントラストの考え方で確かめます
手順の要は、飾りが最後に来ることです。数字が主役として立っていれば、飾りがなくてもセールバナーは成立します。逆に、どんな飾りも、埋もれた数字は救えません。
大きさの差は、作業画面だけで決めません。スマホ、PC、広告枠など実際の表示寸法で見て、特典が先に見え、対象・期限・条件も読める範囲を探します。主役を大きくした結果、条件が読めなくなるなら、骨組みか情報の分担へ戻ります。
つまずきやすいのは、文字の入れすぎ
5手順の途中でいちばん多いつまずきは、手順1で脇へ置いたはずの情報が、途中で戻ってくることです。「せっかくだから営業時間も」「地図も入れたい」。1つ戻すたびに、主役の数字は少しずつ痩せていきます。
バナーは、詳細をすべて説明するページではなく、行き先へ案内する入口です。たとえるなら店頭ののぼり旗で、詳しい地図は店頭や行き先が引き受けます。ただし、この例が示すのは短い接触では情報を絞る必要がある点だけです。法令上の表示や適用条件まで省かず、行き先と一貫して明示します。
それでも紙面が窮屈になってきたら、足した情報を疑う前に、要素同士の距離を確かめてください。詰まりの直し方はチラシが詰まって見える原因と直し方で説明した3手(グループを作る・外側を広くする・端をそろえる)がそのまま使えます。
- 戻したい情報が出てきたら「これは札の仕事か、行き先の仕事か」を1回問う
- 期間・対象・適用条件は、特典の近くへ読める大きさでまとめる
- ロゴは「入れる」より「じゃまさせない」を基準に置く
公開前の見直しチェック
仕上がったら、出す前に次の5点を確認します。1分で終わる点検ですが、公開後の「気づいたら直せない」を防ぎます。
- スマホの実寸で見て、対象・特典・期限の順が分かるか
- 白黒表示にしても、主役の数字が最初に目に入るか
- 「いつまで」が入っているか(期限のないセール告知は信頼を落とします)
- 実際の割引条件と文言が一致しているか(「〜円以上で」などの条件の書き落とし)
- 締切のあとに使い回せない情報(日付など)がどこに入っているか把握したか
白黒表示は、色以外の差があるかを見る補助になります。ただしコントラスト比の測定には置き換えられません。文字と背景は計測ツールで確認し、色だけで条件や状態を伝えていないかも見ます。
3つ目以降は、デザインというより信頼の点検です。日付や条件のまちがいは、見た目が整っていても誤解につながります。可能なら時間を置くか、条件を知らない別の人と原資料を照合します。
過去のバナーで、短時間テストを試す
今日のワーク：短時間の記憶テスト
自分のセールバナーを1枚選び、短時間だけ見て伏せます。そのあと、思い出せた情報を書き出してください。
- 「何%・いつまで・何が」のうち、いくつ思い出せましたか
- 思い出せなかった情報は、小さすぎたのか、そもそも多すぎたのか、どちらでしたか
このテストは固定秒数による合否ではなく、優先順位を見つける補助です。作った本人は内容を知っているため、条件を知らない人にも協力してもらい、見落とした情報を確認します。
自分の比較記録を続けると、どの案で対象・特典・期限を思い出せたかが分かります。数字の大きさだけでなく、言葉、位置、余白、色のどれが効いたかを1項目ずつ言葉にします。他社のバナーを見る場合は、実際の成果を知らないまま「伝わった」と断定せず、見つけやすい順番の参考として観察します。
公開後は、期限切れのバナーが残っていないか、リンク先の価格・対象商品・適用条件が変わっていないかを確認します。クリック数だけでなく、リンク先ですぐ戻られていないかも見ます。バナーの約束と行き先の説明が食い違えば、数字を大きくしても信頼は増えません。
終了日時と撤去担当も、公開時の記録へ残します。
値引きの数字は、大きさより順番
セールバナー作りの中心は、飾りの技ではなく順番でした。情報を3つに絞り、骨組みを決め、数字を主役に立てて、脇役と色は最後。つまずきの多くは「決めたことを守れず情報を戻すこと」で起きるので、迷ったら最初の決めごとに戻ってください。
主役の数字の隣に置く「詳しくはこちら」の帯を、押したくなる見た目にする方法は、ボタンが「押せそう」に見える仕組みで扱っています。バナーの次の一歩としてどうぞ。