HTMLメルマガノウハウ（4）5つのデザインテクニック
HTMLメルマガのデザインに関して、さらに掘り下げて5つのテクニックを紹介します。とくに、ボタン・フォント・テキストについては、ぜひすぐに実践していただきたいと思います。
デザインテクニック（1）ボタン
商品画像の80％、角は丸く
ボタンは大きければ大きいほど、クリックされます。具体的には、商品画像の70～80％にするべきです。ボタンの面積が狭いと“見出し”と勘違いされ、クリック率が低下します。また、角がとがった四角形のボタンよりも、角が丸いボタンのほうがクリック率は高いです。
矢印をしっかりデザインする
矢印は▲のようなシンプルデザインでなく→でデザインしましょう。ただし、ロングテール用商品を紹介する場合は、あえて▲にして目立たなくしてメリハリをつけます。
デザインテクニック（2）アニメーションGIFで動きをつける
メイン商品・サブ商品のメリハリをボタンでもアピールするために、アニメーションGIFにして動きをつけましょう。
デザインテクニック（3）動画を入れる
動画アイコン風の画像はクリックされやすいです。また、なるべくライブ感を出すために、人を入れた画像を商品画像の横に配置してください。
その際に、商品のコンパクトさを押し出したいのであれば「手のひら」、大きさをアピールしたい場合は「新聞紙を広げて」など、利用シーンを想像しやすい工夫をすると、さらに効果的です。
デザインテクニック（4） 商品画像の下にテキストを入れる
補足説明を2行ほど入れることで、クリック率が上がります。実はこれは、ECサイトでの成功例で、画像だけの場合と比較すると、「画像＋補足説明文」のほうがクリック率が上がり、売上が2倍になったのです。この成功例をHTMLメルマガにも応用したことで、クリック率、売上アップに貢献しました。
デザインテクニック（5） 販売数は小まめにメンテ／画像更新を
テクニック（5）は、とくに重要です。実は、HTMLメールは各ユーザーサイドで読み込む仕様なのですが、ひとつだけ、配信側で更新できる要素があります。それは、“画像”です。画像に関してはサーバから呼んでいるので、同じファイル名であれば変更可能なのです
・残りわずか！
・完売しました！
・人気のため、限定数を増やしました！
など、実在庫のステータスに応じて商品画像をこまめに張り替えることで、「早く買わないと売り切れてしまう！」という限定訴求が可能になります。
完売商品は、とくにわかりやすくアピールしましょう。たとえば商品Aが売り切れても、類似商品Bが売れることで、間接売上も見込めます。売り切れの残念感から別を探してもらうべく、売り切れ画像に差し替えましょう。
最後に
HTMLメルマガで売上を圧倒的に上げるノウハウをお届けしてきましたが、いかがでしたでしょうか。大枠のレイアウトからかなり細かなデザインテクニックまで、余すことなくお伝えしました。すぐに実践できるテクニックもありますので、ぜひ参考になさってください。
HTMLメルマガ1本で、配信初日に売上1,000万円を達成するには、こうして細部まで気を遣い、最適化し、こだわり続ける必要があります。惰性で決められたフォーマットで作成し続け、行き詰まりを感じているなら、これまでご紹介してきたようなテクニックを参考に、A/Bテストを試してみてください。まだ何も改善した経験がないのであれば、件名を変えてみるだけでも、効果はかなり変わるはずですから。
