初心者は、商品画像を減らして配信本数を増やすべし！

前回は、HTMLメルマガのデザインをかっこよくする３つのコツをご紹介しました。

「画像１枚で勝負する！」という禁断（？）テクニックの話で終始してしまったので、もう少し具体的に、使えるテクニックを補足していきたいと思います。

では前回の続き。

カッコイイけど実は簡単なHTMLメルマガのレシピ

1. 画像を大きくする
2. 掲載コンテンツを減らす
3. 使う色は３色以内にする

もしかすると「たくさんの画像を入れたい！」「いろんな商品を紹介したい！」という方もいるかもしれません。

たくさん画像を詰め込むHTMLメルマガもありますが、デザイナーが毎回きちんと作り込まないと、見た目としてはかなり厳しいことになります。プロが作った完成度の高いシロモノでも、情報過多に見えるHTMLメルマガは、疲れているときなど開封する気になれないものですよね。

ですから、デザインの心得がなく、クリック率の高い、簡単でかっこいいメルマガを目指すなら、１（画像を大きくする）と、２（掲載コンテンツを減らす）は必須。

たとえば10個の商品をHTMLメルマガで紹介するとします。

この場合、１通のHTMLメルマガ内で「トップに大画像を１つ、その下に小画像を横３×縦３に配置」と構成する方法もあります。
しかし、私はあえてお客様には、「１通で紹介する商品数を絞って、配信本数を増やしましょう」と提案します。

今の時代、配信本数を増やしてもコストは大差ありません。作る手間を考えても、商品が多いほうがチェックに時間がかかるし、デザイン崩れも起こしやすいです。ですから、HTMLメルマガはできるだけ要素を絞ったほうがラク。見た目もそうですが、労力の面でもメリットが大きいと思います。

HTMLメルマガのデザインテク！大手サイトの色使いを盗め！？

３（使う色は３色以内にする）は色の話。

HTMLメルマガに使用するカラーは、画像同様、メルマガのイメージを大きく左右します。HTMLメルマガ初心者が結構アタマを悩ませるところだったりしますが、これも実は簡単です。

メインカラーを１色、あとはアクセントカラーを最大２色。

この３色さえ決めてしまえばいいのですから。

「カラーセンスに自信がない！」という方もご心配なく。
ここでまたまた禁断のテクニック（笑）をこっそりご紹介しましょう。

自分のHTMLメルマガで使いたいメインカラーと同様の色を使っている、他社のサイトを参考にしてしまえばいいんです！（小さい声で）

大手企業のサイトは、画像の使い方も、色の使い方も非常に勉強になります。

画像がかっこいい某PCメーカーのサイトなどでは、ほとんど白がメインで、他に使っているのはグレーぐらい。ほんの少しの赤が非常に目立つので、「ここに注目して欲しいんだな」とすぐにわかります。色味は少なくても、非常に印象的で洗練されたページになっています。

「他社を参考にする」というのは、プロのデザイナーでもやっていることなので、多いに感性を学んで、自分のモノにしていきましょう！

HTMLメルマガでよくクリックされる写真を撮るコツ

「色味が少なくてもかっこよく見えるのは、画像がいいからじゃない？」
と気付いた方はお見事。たしかにそれもあります。

「画像が主役」で構成するならば、デザイン的には、画像を殺さない程度に差し色をほんの少し加えればいいだけです。画像クオリティが低いHTMLメルマガの場合、色をうまく使わないと素人くささがでてしまいます。

カラーセンスに自信がなく、画像にも自信がない…という方は、ひとまず「HTMLメルマガ的に良い写真」を撮ることに集中しましょう！デザイン上で色をアレコレいじるより手っ取り早いはずです（笑）

HTMLメルマガでクリックされる写真を撮るには？

1. 対象物に寄る
2. 対象物から離れる
3. 明るくコントラストを強めにする

１は、とにかくアップ！それも思いっきり対象物にクローズアップしたカットがオススメです。もちろんトリミングで加工してもOKですよ。
端が見切れるくらいの寄り画像は、「これ見て！」というメッセージであり、「商品に自信あります！」という無言のアピールになります。うまく使うと、思わずクリックしちゃうような迫力が出ますよ。

２は、空間を生かしてプロっぽく見せる手法。「三分割法」という写真のテクニックがありますね。対象物を真ん中に置かず、縦横３分割した線のクロスする場所に配置するやり方です。全体的な雰囲気がわかりやすいので、HTMLメルマガ読者にとっては親切。商品そのものより、その商品があるライフスタイル、みたいなものをイメージさせたいときには、特に有効ですよ。

３は、アーティスティックに見せる意図ではなく、ECサイトで商品をよく見せるためにやっておきたいこと。はっきり、くっきり見えることは、読者にとってはプラスの情報。この加工をやっているかいないかで、読者の判断材料が変わってくるんです。難しい画像加工ソフトは使いこなせなくても、トリミングと明度・コントラストの処理だけは、覚えておきたいですね。

いかがだったでしょうか。

「かっこよく、プロっぽく見せるには？」という見栄えの話から始まったHTMLメルマガ話ですが、最終的には、やはり読者視点でクリックしたくなるかどうかが大事だと思います。

そうそう、最後にもうひとつ。
HTMLメルマガで、ものすご～くクリックされやすいパートがあることをお伝えし忘れていました。

それは…
「このメールが正しく表示されない方はこちらをクリックしてください」
のこちらです！

そんなこと～？と言うなかれ。
いまのユーザは、いろいろな受信環境でHTMLメルマガを閲覧しています。メーラーによっても正しく表示されないことがありますし、スマホでは見えても携帯では見られないということも多いんです。

クリック率が高いのはそういうことの表れ。
別ページにテキスト環境が用意されていないと、かえって不親切になってしまいますよ！

では、次回もお楽しみに！

読めばスッキリ！リピーターを作り出すメール・マーケティングのバックナンバーはこちら

The following two tabs change content below.

• この記事を書いた人
• 最新の記事

米澤 信弘

株式会社ライトアップでメールマーケティング施策やコンテンツ制作のプロデュースを担当しています。愛読書は北方健三先生の大水滸シリーズです。

最新記事 by 米澤 信弘 (全て見る)

• メールマガジンの未来像とは？ - 2020年5月1日
• これがあるからやめられない！メールマーケティングの醍醐味 - 2020年4月22日
• メールマーケティング担当者の孤独 - 2020年3月26日