HTMLメールのクリック率が大幅アップするボタン活用術

  • このエントリーをはてなブックマークに追加

読めばスッキリ!リピーターを作り出すメール・マーケティング

HTMLメールテンプレートでメルマガ制作はカンタン?

いまやHTMLメールは専門知識がなくても作れる時代。
HTMLメールテンプレートを使って、社内でHTMLメールを内製する方も増えてきました。

テンプレートのおかげで誰でもカッコいいHTMLメールが作れるようになったのは素晴らしいことですが、それだけで「めでたし、めでたし」とならないのがHTMLメールの奥深さ。

「せっかくキレイにできたのに、期待したほどクリック率がよくないなぁ…」というときは、読者目線で考えられていないことが原因なのかもしれませんよ?

本日は、そんなときの特効薬をご紹介しましょう!
それは「ボタン」の使い方です。

「ボタン」は、HTMLメールでメルマガを作成する強みであり、「ボタン」が使えるからHTMLメールを作る意義がある!といっても過言ではありません(いえ、ちょっと言い過ぎ…)

ところが、クリック率が伸び悩むケースでは、読者にボタンの存在をスルーされていることが非常に多い。デザイン的にキレイにまとまったHTMLメールほどその傾向が強いのです。
どこにも目が引っかからず、ザザーッとスクロールしてそのままゴミ箱行きっていう…(悲しい)

HTMLメール内のボタンは、どんな色、どんな形、そしてどんな文言を使えばいいのか?
ボタンをどこに配置すると、ついつい押してしまうのか?

読者の目に留まるためには、ボタンについての正しい知識がないといけません。
これさえ押さえておけば、確実にクリック率アップを狙えますよ!

これが「クリックされるボタン」だ!デザインのコツを伝授

最近のHTMLメールテンプレートは、無料でもいろいろ便利な機能を搭載しています。デザインもたくさん種類があって、背景やフォントも盛りだくさん。配置もサイジングも思いのまま…と自由度が高いですね。

しかし、WEBデザインの心得がないと、自由度が高いがゆえに、迷ってしまうということもあるハズ。そんな方は、ぜひコチラを参考にしていただきたいと思います。

クリックされるボタンデザイン

ボタンの大きさは基本的に「コンテンツに合わせたサイズ」か「メルマガの横幅に合わせたサイズ」の2種類です。

形は長方形と考えて間違いないでしょう。近年はフラットな長方形ボタンが多いですが、そんなデザインが多いからこそ、あえて立体形状を使うのも狙い目。ただし、重くなってしまうと表示に時間がかかるので(スマホだと特に)、できるだけシンプルに軽く作るのがポイント。クオリティにこだわりすぎる必要はありませんよ。

オススメはコーポレートカラーもしくは暖色系のカラー

とある実験では、コーポレートカラーのボタンは、関連性のない色のボタンより、押されやすいという結果が出ました。メールを受信している方も、自身に会員である自覚があるので、コーポレートカラーが有効に作用するのでしょう。
ただし、メール内にコーポレートカラーをすでに使用している時は、ボタンも同色では目立ちません。そんなときは、コーポレートカラーと一緒に使われているアクセントカラーを使うと効果的。自社のホームページでどんな色が使われているか確かめてみてください。

そして暖色系のカラー色が与える心理効果は科学的にも実証されています。赤や黄など、暖かみを感じさせる有彩色を暖色と呼び、青や紫など、冷たさを感じさせる有彩色を寒色と呼びます。
「CXL」という米国のLPO(Landing Page Optimization)のコンサルティング企業が出しているブログ記事では、同様にサイトトップのCTAボタンの色を赤と緑の2種類用意してABテストが行われました。

結果は赤色のほうが37%もCVR(Conversion Rate)が増加しました

(引用元:https://conversionxl.com/blog/which-color-converts-the-best/

今まで寒色系のカラーなら、暖色系のカラーに変えれば劇的にクリック率やCVRがあがるかも!?しれないですね!

テキスト

よくあるボタンの文言は、「詳しくはこちら」「詳細を見る」「今すぐチェック」といったもの。読者も視覚的にこれらの文字の塊を見慣れており、瞬時にボタンだと認識してもらえるので、悪くありません。コンテンツとボタンに一体感を持たせたいときは「続きを読む」でもいいでしょう。
「クーポン獲得はコチラ」「10%オフ対象【全10点】はこちら」など、クリックするメリットを明確にすると、さらにクリックされやすくなります。
そしてボタンの色に映えるようなテキスト色を入れることをオススメします。例えば背景が赤色のボタンに白色のテキストを使えば、文字が映えるボタンができるのでクリックされやすくなります。加えて、文章全体の色に合わせて一番目立つような色をボタンのテキスト色に使用することで、メールを見たときに視覚情報として1番にボタンが目に入ってきやすくなります。
ボタンデザインの形・色・テキストのABテストを続けながら最適なデザインを確立してみてください!

ボタンは「配置」がキモ!基本的な位置と押されやすいコンテンツデザイン

ボタンを置く位置には基本的なルールがあります。
コンテンツの邪魔にならない位置、かつアクションが起こしやすい位置。
これを考慮すると、だいたいボタンの配置は以下の2パターンになります。

20150630_1

左のボタン配置の場合、1コンテンツの範囲内に置かれており、画像のスグ横のアクションしやすい位置をキープ。1ビュー内にコンテンツ画像もボタンもすべて収まるよう、コンパクトにまとめるのがポイントです。もし、メール本文が長くても1ビュー内にボタンを表示させるようにしてください!
右のボタン配置は、スマホでよく使われるパターン。コンテンツ画像からボタンまでが近いほど、クリックされやすくなります。スマホ受信者が多いメールでは、なるべくボタンを大きめに確保できる方法を検討しましょう。指先操作がモノをいうスマホでは、ボタンが押しにくければ押しにくいほど、クリック率は下がりますので、ご注意あれ!

20150630_2

最後にもうひとつご紹介しましょう。

「スマホで見られることを想定したコンテンツ、ボタンの配置を考える」ということです。

総務省が出したデータでは20代~50代のスマートフォン個人保有率は70%を超えており、なんと20代~30代に至っては90%を超えているのです!このようにメールをいつでも見ることができる環境が整ったため、メールの形式も以前のPCに向けに作られていた「横に複数のコンテンツを表示させる」メール形式よりも「縦にコンテンツを表示させる」メールの形式に変わってきています。
以上のことからボタンのデザインや配置に配慮しながらもPC・スマートフォン両方に見やすい全体の構造を考える必要があります。

また、PC・スマートフォン両方に対応したデザインをレスポンシブデザインと呼びます。

関連コラム:スマホでも読みやすいレスポンシブデザインを活用したHTMLメールでメール配信!

ウケるメールの構成は時代と共に変容しているので、日々テストを繰り返しながらその時代に合ったメールを作り続けなければ読者には読んでもらえないという悲しい事態が発生しております。そのためにも反応を知ることができる効果測定は必須機能と言えるでしょう!令和という時代に変わったのを機に皆さまもメルマガの作成方法を一度変えられてみてはいかがでしょうか!

その際にこの記事を少しでも参考にしていただければ幸いです!!

最後まで読んでいただきありがとうございました!!

The following two tabs change content below.

米澤 信弘

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

関連するおすすめ記事

お役立ち資料