メールの余白は、どの要素がひとまとまりか読者に伝えます。見出しと説明、その説明に続くボタンは、別々の商品紹介どうしより近く配置します。すべての間隔が同じだと、短いShopifyキャンペーンでも窮屈さやまとまりのなさを感じさせることがあります。少数の余白値に一貫性を持たせ、モバイルで縦に並んだ後も情報のつながりがわかるか確認しましょう。
意味のまとまりごとに配置する
商品名を画像と価格の近くに置きます。説明はそれが支えるボタンの近くに置きましょう。同じセクション内の関連する要素より、別のセクションの間隔を広くします。これにより、すべての文章を読む前から視覚的に内容をたどれます。
Sendvioで再利用できるテンプレートに間隔のパターンを設定します。すべてのブロックを目分量で調整せず、少数の余白値を決めて一貫して使ってください。商品名が折り返して2行になっても、文章に合わせて高さが伸びる必要があります。
ばらばらの間隔ではなく、小さなスケールを使う
いくつかの間隔を決め、それぞれの用途を明確にします。出発点の例では、狭い間隔で商品名と価格を結び、中くらいの間隔で説明と行動ボタンを分け、広めの間隔で次のセクションへ移ります。具体的な値はテンプレートに合わせます。特定の数値より、要素どうしの関係に一貫性を持たせることが大切です。
たとえば、送信後のメールを見て調整する前提で、それらの3段階を8、16、32ピクセルにして試せます。すべての段落の間に最大の余白を使わないでください。すべてが同じだけ離れると、関連する情報のつながりが弱まり、必要以上に長いメールになります。
行間は異なる役割を持ちます。段落内の行間は目が読み進めやすいように分け、段落のマージンは考えのまとまりを区切ります。大きなマージンを加えても詰まった行間は直らず、行の高さだけを広げても無関係なセクションどうしは区別できません。気になる問題に合った余白の階層を調整してください。
役割のない空白を作らない
大きな空白があると、特にスマートフォンでは短いメッセージの要素がばらばらに感じられる場合があります。高さの固定されたブロックや不要なスペーサーで、行動ボタンが説明から遠くなっていないか調べてください。フォントを縮めて不自然な形を埋めるのではなく、構造上の原因を取り除きましょう。
段落内には読みやすい行間を設け、本文の幅を広くしすぎないようにします。行を窮屈にせず、適切につなげると短い段落も追いやすくなります。余白を決める前に、長い商品名や各言語版でプレビューしてください。
文字サイズを変える前に空白の原因を調べる
短い見出しの下に大きな空白があるなら、高さの固定、スペーサーブロック、見出しと次の要素の両方に設定された余白を調べます。それぞれは妥当に見える設定でも、足し合わさると間隔が過剰になることがあります。フォントを縮めて空白を埋めるのではなく、重複した設定を取り除きましょう。
モバイルでカラムを縦に並べたとき、デスクトップで位置合わせに使ったスペーサーが、縦方向にも残っていないか確認します。カード間でボタンを揃えるためのスペーサーが、短い商品説明の下で不要な空白を生むかもしれません。文章量に合わせて伸びる要素と、各商品が一つのまとまりに保たれる並び順を使いましょう。
ざっと見た後に全文を読む
数秒間メールを見て、主な約束と行動を特定します。複数のブロックが同じように目立つなら、優先順位を簡潔にしましょう。その後、全文を読み、視覚上のまとまりが意味と合っているか確認します。
カラムが積み重なった狭い画面でのレイアウトを調べます。横並びの商品カードには適切だった間隔が、縦方向では大きすぎることがあります。手動改行や決まった文章量に頼らず、どの画面でも意図が伝わる余白にしましょう。
現実にあり得る最短と最長の内容でテストします。短い商品名ではボタンが離れて見えず、長い商品名でも価格とぶつからないようにします。翻訳、任意の一文が欠ける場合、画像がない商品も確認してください。キャンペーンごとに手作業で作り直さなくても、余白がそれらの違いに対応する必要があります。
最後に、素早く見て約束と行動を探す確認と、順序を確かめる全文読解の二段階を行います。落ち着いたレイアウトに見えても、説明と関係するボタンが何画面も離れているなら、まとまりを見直してください。よい余白は、読者がすべての文を読む前に要素どうしの関係を伝えます。