HTMLメールにリンクを埋め込む方法をご存じでしょうか。挿入したリンクをクリックしてもらえれば、メーラーを立ち上げたり、誘導したいページに遷移させたりすることができます。

今回の記事では、どなたでもリンクを埋め込むことができるように、
・リンクとは
・リンクを埋め込む4つの方法
・クリック率を上げる施策
・メーラーを開くリンクのコーディング方法
について解説します。

HTMLメールの中にリンクを埋め込むために必要なことを、丁寧に分かりやすく説明しますので、ぜひ参考にしてみてください。

リンクとは？

リンクとは正式名称「ハイパーリンク」の略称で、文章や画像などをクリックするだけで、別のページやサイトに飛ぶ仕組みのことを指します。

似た言葉に「URL」がありますが、URLはページやサイトが存在する場所の住所を指しているもので、リンクはその場所に誘導する入口であると覚えておくと良いでしょう。

まとめるとリンクとURLは以下のような違いがあります。

	説明	例
リンク	他のページへ誘導するもの	配配メール
URL	ページの住所	https://www.hai2mail.jp/

HTMLメール文中にリンクを埋め込む4つの方法

次はメール内にリンクを埋め込む4つの方法について紹介します。

1. URLをそのまま設置する

テキストメールやHTMLメールに限らず基本的にどんな形式でも、正常なURLの表記であれば、URLを貼り付けるだけでリンク化することが可能です。しかし、リンクを貼り付けるだけでは、他のテキストに埋もれてしまいますし、読者がクリックしたくなるような訴求も難しいので、クリック効果は薄くなってしまいます。最も簡単に実装できる方法ですが、クリック率は低くなる可能性が高いです。

2. 文字リンクで設置する（HTMLメールのみ）

文字リンクはテキストメールでは設置できず、HTMLメールでのみ設置できます。任意の文字を指定できるので、長いURLの場合でも短縮して表示できるだけでなく、読者がクリックしたくなるような文言にしてクリック率を高めることも可能です。

HTMLではコードを記述する必要があり、

• href以下の""（ダブルクオーテーション）で囲まれた部分に、遷移先のURLを記載する
• ＜a＞＜/a＞の間に設定したい文言（アンカーテキスト）を記載する

といった対応が必要になります。

弊社で調査したところ、URLをそのままリンクにする方法よりも、クリック率が約3倍ほど高くなることが分かっています。

  
    <a href="https://www.hai2mail.jp/about/feature.php">簡単操作／HTMLメールの作成方法</a>
  

3. ボタンで設置する（HTMLメールのみ）

Webサイトのように、リンクをボタン形式で設置することもできます。その場合、「aタグ」「buttonタグ」「inputタグ」を使う3つの方法がありますが、今回は「aタグ」を使って設置する方法をご紹介します。

ボタンを設置する場合、CSSを使って色やサイズを装飾していく必要があります。

CSS（Cascading Style Sheets）とは、文字・画像のデザインや配置の指定を行うことができる言語です。文字リンクで紹介したaタグとhref属性に加えて、styleタグを使ってボタンをコーディングすることができます。これまでご紹介してきたリンクよりも、設置する難易度は上がりますが、下記を参考に設置してみましょう。

  
    <style>.example{
    display: block;
    width: 300px;
    padding: 15px 0;
    margin: auto;
    background: #569f3c;
    color: #FFF;
    text-decoration: none;
    text-align: center;
}
.example:hover{
    background: #225f0d;</style>

    <a href="https://www.hai2mail.jp/about/feature.php"> もっと見る</a>
  

HTMLやCSSを使うのが難しいという方は、メール配信サービスの活用がおすすめです。メール配信サービスには、タグを使わずともHTMLメールが簡単に作成できる「HTMLエディタ」という機能を提供しているものもあります。サービスにもよりますが、こうした機能を活用することで、きれいなボタンリンクを直感的に作ることもできます。

関連記事はこちら配配メールのHTMLエディタを紹介

4. 画像で設置する（HTMLメールのみ）

画像にリンクを設定するためには、アンカーテキストの部分に画像を表示するタグを記載すれば、画像リンクを作成することができます。文字リンクの設定方法と大きく変わりはありませんが、アンカーテキストを記載するか画像の表示するタグを記載するかという点で異なります。

  
    <a href="https://www.hai2mail.jp/about/feature.php">img src=”hai2mail_sample.jpg</a>
  

画像リンクの設置も大して時間は必要としませんが、1つずつ作成するとなると多少時間がかかってしまうことやコードのエラーなどが発生しやすくなります。メール配信サービスを利用することで、画像リンクも直感的に作成することが可能です。

メール配信サービスを活用したボタンリンク・画像リンクの作り方

リンクの種類とタグを使った作成方法をご紹介してきましたが、普段タグを利用しない方にとってはボタンリンクや画像リンクの作成はハードルが高いと思います。

作成に不安を感じる方は、メール配信サービスのご利用をおすすめします。どれくらい簡単に作成できるかを配配メールのHTMLエディタを例にご紹介いたします。

ボタンリンクの作成方法

HTMLエディタを使えば、ドラッグ＆ドロップといった直観的な操作でボタンの作成ができます。

配配メールの場合は、ボタンのコンテンツブロックを選択し、右側のアクション項目に遷移先のURLと入れるだけでボタンリンクが作成できます。

ボタンの色やサイズ変更や、影をつけて立体的なデザインにすることもできます。

右側にボタン設定項目があるので、そこで任意の色やサイズに変更できます。

画像リンクの作成方法

画像リンクの場合は、画像のコンテンツブロックを選択し、「参照」をクリックすると、配配メール上にこれまでアップロードされた画像が表示されます。あらかじめアップロードしておいた画像を選択、もしくはアップロードボタンから画像を選び、「挿入」をクリックすればメール本文内に画像が差し込めます。

そのあとは、ボタンリンク同様に右側のアクション項目に指定のURLを入れれば、画像リンクが作成できます。

配配メールのHTMLエディタについて、詳細を知りたい方はこちら。

HTMLメールのリンククリック率を上げる施策

HTMLメールのリンククリック率を上げる施策について解説します。具体的な内容は下記の通りです。

• 設置するリンクを1つに絞る
• ボタンを活用する
• メール内に画像を入れる

1つずつ解説していきます。

設置するリンクを1つに絞る

「会員登録をする」「資料ダウンロードをする」のように読者にとってほしいアクションが明確に１つ決まっている場合は、そのアクションを起こしてもらうためのリンクのみを設置しましょう。

メルマガでは、伝えたいことが多すぎてつい様々な情報を盛り込みすぎてしまうこともあると思いますが、シンプルにすることが重要です。よっぽど興味関心の高い内容ではない限り、情報量の多いメールをじっくり見てくれることはありません。シンプルで読みやすいメールを心掛けることで、読者はどういった内容のメルマガか分かりやすくなりますし、クリック率を上げることにも繋がります。

ボタンを活用する

クリック率を上げたい場合は、リンクの形式をボタンにすることをおすすめします。弊社で調査したところ、リンクをボタン形式にすると、URLをそのまま設定した時や文字リンクに比べておおよそ8倍ほどクリック率が高まることが分かっています。

先ほど紹介したCSSやメール配信サービスを用いて、様々な形や色にカスタマイズすることが可能です。スマホ画面やPC画面などでの表示サイズも設定できるので、クリック率を高めるために適切なデザインにすることができるでしょう。

メール内に画像を入れる

画像を入れたメールを送ることも、クリック率が上がる施策の1つと言えます。とある企業の調査では、画像のあるメールと無いメールでは、画像がある方が42%ほどクリック率が高い結果となりました。業種やメールの内容にもよりけりですが、文字だけで訴求するよりもやはり画像コンテンツを用いて表現した方が分かりやすいことは明らかです。読者が求めるものを発信するために、画像で表現できるような内容であれば、画像コンテンツを作成してクリック率を比較するなどしてみることをおすすめします。
しかし、注意点としてメールのデフォルトの設定のままでは、画像が表示されない恐れがあります。対策としてALTテキストと呼ばれる、画像が表示されなかった時の代替テキストを設定しておくと良いでしょう。

メーラーを開くリンクを埋め込むHTMLコーディングの方法

メーラーを開くリンクを埋め込むための、HTMLコーディングの方法をご紹介します。

aタグのhref属性に「mailto:メールアドレス」を入れる

リンクの導入方法でもお伝えした、aタグのhref属性を用います。具体的には、「mailto:」に続けて送信先のメールアドレスを入力するだけで設定できます。

必要なことは以下の2つです。

• href以下の””（ダブルクオーテーション）で囲まれた部分に、「mailto:」に続けて送信先のメールアドレスを入力する
• ＜a＞＜/a＞の間に設定したい文言（アンカーテキスト）を記載する

こうして設置したリンクをクリックすると、標準のメールソフトが立ち上がり、新規メールを作成することができます。

  
    <a href="mailto:test@rakus.co.jp">メールを送信する</a>
  

カンマ区切りで複数の宛先を指定する

送り先を2人以上にしたい場合、カンマで区切ることで複数のメールアドレス宛に送信することが可能です。スペースなどを入れてしまうと上手く起動しないので注意しましょう。

  
    <a href="mailto:test@rakus.co.jp,test2@rakus.co.jp">メールを送信する</a>
  

「subject=件名」で件名を指定する

件名を指定したいときは「subject」を用いて、メールアドレスの後の「?」以降に入力していきましょう。

  
    <a href="mailto:test@rakus.co.jp?subject=title">メールを送信する</a>
  

「body=本文」で本文を指定する

本文は「body」を用いて指定できます。先ほどの件名「subject」の後に続いて「&」で繋げましょう。

注意点として文字化けをすることがあります。対策としては、改行する場合は「%0D%0A」を指定したり、半角スペースを空けるには「％20」を指定したりすることで文字化けを避けられるので認識しておきましょう。

文字化けを防ぐためには、テキストのエンコードができるサイトを活用することをおすすめします。

  
    <a href="mailto:test@rakus.co.jp?subject=title&body=contents">メールを送信する</a>
  

「cc=アドレス」「bcc=アドレス」でCc・Bccを指定する

CcやBccを指定することもできます。メールアドレスの最後に「?」を繋げて書くことでCcとBccを設定します。

  
    <a href="mailto:test@rakus.co.jp?cc=test2@rakus.co.jp&bcc=test3@test2@rakus.co.jp&subject=title&body=contents&">メールを送信する</a>
  

まとめ

HTMLメール内のリンクを設置する方法について紹介してきました。読者がメルマガを見た後に特定のサイトに誘導したい場合、リンクの設置の仕方によって効果が大きく変わってきます。これまで文字リンクやURLをベタ打ちで貼り付けていた方は、今回を機にボタンでのリンクを設定してみてはいかがでしょうか。

また、HTMLメールでボタンを実装する際、デザインやコードに関する知識が必要です。しかし、弊社が提供している配配メールでは簡単にHTMLメールを作成することができます。文字リンクはもちろん、ボタン、画像リンクでもコードを書く必要は無く、視覚的にドラッグアンドドロップなどでボタンを配置できるので、どなたでもクリック率が高まるリンクやメールを配信できます。

無料のトライアルも提供しているので、気になった方はこちらからお申込みください。