メルマガ制作情報局

メルマガ罫線 スマホ時代の取り扱い

メルマガ制作ノウハウ
テキストメルマガと切っても切り離せないメルマガの装飾に「罫線」があげられます。
プレーンテキストからなるメルマガは、HTMLメールと異なり、装飾の自由度が低く、読者への訴求力が劣るのが欠点です。

テキストメルマガでは、そうした欠点を補うため罫線を有効に活用したり、AA(アスキーアート)を取り入れたりと工夫が求められます。
このとき、注意したいのが等幅フォントで記述すること。

プロポーショナルフォントでは、一文字の大きさがことなるため、装飾の崩れにつながります。
等幅フォントか、プロポーショナルかはユーザの閲覧環境に依存するところが大きいのですが、スマホ時代ではその傾向がより顕著にあらわれているようです。

スマホ時代のテキストメルマガは、罫線を活用した見やすさの追求と、ユーザの閲覧環境に柔軟に対応することを両立することが求められてきます。

もっとも考慮すべきは、スマホの画面サイズ。
従来のPCで読むメルマガは、およそ35文字くらいを一行と見なしてライティングされてきました。
35文字を超えると自動改行されてしまうため、見た目が揃わず、崩れて見えます。

スマホでも同様に、一行の長さを意識したライティングが必要です。
スマホでは、おおむね20文字が目安。

一行の長さを20文字以内にすること、ユーザの閲覧環境が「等幅フォント」でも「プロポーショナルフォント」でも影響しないような罫線をシンプルな装飾にすることが大切です。
一行の長さについては、適宜20文字以下で改行を入れれば解決します。
しかし、罫線については工夫が必要です。

たとえば……

━━━━━━━━━━(「━」罫線を10文字続けました)等幅なら10文字分として閲覧できているはずですが、プロポーショナルでは短く見えているはずです。
スマホ時代のメルマガ罫線の基本は、連続した罫線の長さが閲覧環境によって異なるため、囲みの罫線や、2行に渡る罫線は避けたほうが無難。

┌ ─ ┐└ ─ ┘ このような箱型罫線や、
__________
 ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ このような二重罫線(下線と上線の組み合わせ)は避けましょう。


【スマホ時代のメルマガ罫線 おすすめ5選】
1)・・・・・・・・・・・・・・・(「・」を15文字続けました。文章の区切りとして利用できます。シンプルです)
2)===============(「=」を15文字続けました。文章の上下ではさんで強調することもできます)

【活用例】
===============
メルマガ罫線 おすすめ5選
===============

3)***************(「*」を15文字続けました。見た目にインパクトがあり目立たせたい一文に効果的)
4)◆◇◆◇◆◇◆◇◆◇◆◇◆◇◆(「◆」と「◇」を交互に配して目立たせます。プロポーショナルの影響をうけても目立つ効果は薄れません)
5)_/_/_/_/_/_/_/_/_/_/_/_/_/_/(「半角/」と「半角_」の組み合わせです。立体に見える効果があります)


スマホ時代のメルマガ罫線のポイントは、ユーザの閲覧環境が等幅でも、プロポーショナルでも、スマホでも、PCでも影響を最小限に留められるように工夫すること。
また一行の長さはスマホにあわせておけば、意図しない自動改行の影響を回避できます。

「一行20文字くらい、罫線はシンプルな装飾に」を合言葉にライティングを心がけると見やすいテキストメルマガが完成するはずです。

・・・・・・・・・・・・・・・

余談ですが、かつてテキストメルマガを賑わせたAA(アスキーアート)。
閲覧環境に大きく依存するスマホ時代では、崩れやすいため避けられる傾向にあるようです。

  /\
 /  \     ▲
/    \    ▲▲
 ̄│田田│ ̄   ▲▲▲▲
 └──┘     ||
 ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄
↑このAAがきれいに見えていますか?
等幅フォントで描きましたが、閲覧環境によってはきれいに見えないはずです。