訓練のトリセツ（Kunren+）が解説！HTML形式の訓練メールってどう作るの？ー初心者でも安心！覚えておきたい基本タグとサンプル解説

HTML形式の訓練メールってどう作るの？初心者でも安心！覚えておきたい基本タグとサンプル解説

見た目が本物っぽい訓練メールを送りたい

標的型攻撃メール訓練を実施する際、本物のフィッシング詐欺メールと同じような訓練メールを送りたいなど、巧妙な見た目の訓練メールを作成したいと思う方も多いのではないでしょうか？

しかし…

「HTML形式のメールって難しそう…」
「何をどう書けばメールとして表示されるのか全然わからない…」

そんな悩みを抱える訓練担当者の方も少なくないと思います。

この記事では、HTMLの知識が無くても読めば書けるようになる！と題して、
HTMLメールの【基本構造】と【よく使うタグ】を、実際のサンプル付きでわかりやすく解説します。

✅HTML形式の訓練メールって何？

通常のテキストメールと異なり、**HTML形式のメールは装飾（色・太字・画像など）**ができるため、より本物らしい見た目の訓練メールを作ることができます。

たとえば、次のような装飾が可能です：

ロゴ画像を入れる
ボタン風リンクを表示
フォントの色やサイズを調整
レイアウトを整える（表形式など）

このような本物のフィッシング詐欺メールと同じような訓練メールを作成したいと思ったら、HTML形式で訓練メールを作成することは必須になります。

✍HTMLメールの基本構造

HTMLメールも基本は「HTML文書」と同じ構造です。最もシンプルな構成は以下のとおりです：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>メールタイトル</title>
  </head>
  <body>
    メール本文
  </body>
</html>

メール配信では<title>は表示されず、実際に表示されるのは<body>内の内容だけです。

📌よく使うHTMLタグとその使い方

HTMLタグは沢山ありますが、メールでは最新のHTMLの仕様には対応しておらず、使えるタグが限定的であるため、標的型攻撃メール訓練で使うタグとしては、主に以下のタグを覚えておけば大体事足ります。

① 改行：` `

テキストの途中で行を変えるときに使います。 と文末に記載することで、次に続く文章が改行されて表示されるようになります。

【記載例】
ご担当者様<br>
いつもお世話になっております。

② 太字：`` または ``

文字を目立たせたいときに使います。太字にしたい文字列を<stromg>または、で囲むことで、囲まれた文字列が太字で表示されるようになります。

【記載例】
<strong>至急ご確認ください！</strong>

③ 段落：``

文章のまとまりを区切るときに使います。文書をで囲むことで、ひとまとまりの段落として表示されるようになります。

【記載例】
<p>以下の内容をご確認ください。</p>
<p>ご不明点がございましたらご連絡ください。</p>

④ リンク：`<a href="URL">表示する文字</a>`

クリックさせるリンクを作るときに使います。リンクを設定したい文字列を<a href=”リンク先のURL”></a>で囲み、「リンク先のURL」に実際のリンク先のURLを設定することで、任意の文字列にリンクを設定することができます。

標的型攻撃メール訓練において、見た目のURLと実施のリンク先URLを異なるものにしたい場合はこのリンクタグ（aタグ）を使うことになります。

【記載例】
<a href="https://example.com">ご確認はこちら</a>

⑤ 画像：`<img src="画像URL" alt="代替テキスト">`

ロゴやバナーなどの画像を表示する場合に使います。

設定する画像URLをメール送信先ごとに一意のURLとし、そのURLへのアクセスがアクセスログに記録されているかどうかを見ることで、訓練メールを見たかどうかを確認することができます。一般に「Webビーコン」と呼ばれるものがこれになります。

【記載例】
<img src="https://example.com/logo.png" alt="会社ロゴ" width="200">

⑥ ボタン風リンク（擬似ボタン）

ボタンのような見た目でリンクを装飾できます。style=””の部分はCSS（カスケーディングスタイルシート）の記述で、CSSの記載を行うことで、見た目を自由にコントロールすることができます。

【記載例】
<a href="https://example.com" 
   style="display:inline-block; padding:10px 20px; background-color:#007bff; color:#ffffff; text-decoration:none; border-radius:5px;">
   今すぐ確認
</a>

⑦ フォント指定（色、サイズの指定）

一部の文字について色やサイズを指定したいという場合は、指定したい文字をで囲むことで、色やサイズをコントロールすることができます。

なお、fontタグは使わずにstyle属性（CSS）を指定することでもコントロールは可能です。

また、色指定はハッシュ（#）を先頭に置いた6桁のカラーコードで行います。
カラーコードは「CSS カラーコード」でGoogle検索を行えば一覧表がたくさん見つかりますので、そこから取得すればよいでしょう。

【記載例】
<font color="#FF0000" size="+1">大至急確認してください！</font>

🧪サンプル：HTML形式の訓練メール

以下に、請求書を装ったHTML形式の訓練メールのサンプルを示します。

<html>タグはここからHTMLコードであることを示し、<body>タグあｑあｑｑはここから本文であることを示すタグになりますので、1行目の<!DOCTYPE html>から6行目の<body>タグまでと、最後の</body></html>は常にセットで訓練メール内に記載することになります。

必ず使うタグになりますので、テンプレートとして保存しておけばよいでしょう。

<body></body>で囲まれる間のコードが、訓練メール本文としてメールソフトの画面上に表示される部分となります。

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
</head>
<body style="font-family:sans-serif; line-height:1.5; color:#333333;">
  <p>〇〇株式会社 経理部 ご担当者様</p>

  <p>いつもお世話になっております。<br>
  以下の通り、今月分の請求書をお送りします。</p>

  <p><strong>ご確認のほど、よろしくお願いいたします。</strong></p>

  <p>
    <a href="https://example.com/invoice" 
       style="display:inline-block; padding:10px 20px; background-color:#28a745; color:#fff; text-decoration:none; border-radius:5px;">
      請求書を確認する
    </a>
  </p>

  <p>---------------------------------<br>
  株式会社○○ 営業部<br>
  TEL: 03-1234-5678<br>
  Email: sales@example.com</p>
</body>
</html>

💡このままコピペして、リンク先や会社名を差し替えるだけでも使えます！

🛑注意点：HTMLメール作成時のポイント

CSSはインラインで書く（style属性）
メールソフトではCSSファイルを読み込むことができないため、style指定はHTMLメール内で行う必要があります。また、属性の中には指定してもメールソフトが表示に対応していないことで無視されるものもあります。
　
JavaScriptは使用不可
セキュリティ上、動作しませんので、JavaScriptを指定しても無視されます。
　
背景画像や複雑なレイアウトは非推奨
メールソフトによっては表示が崩れることがありますので、HTMLメール作成時は訓練実施対象者が使っているメールソフトを意識する必要があります。
　
実機（OutlookやGmail）での表示確認を必ず行う
作成中のHTMLメールの表示確認はWebブラウザで行うのが効率的ですが、Webブラウザ上での表示とメールソフト上での表示は異なる場合があり、また、スマートフォンとPCでもそれぞれ表示が異なるということもありますので、実際にどのような見た目となるかは、必ず実機で確認するようにしてください。

✍️画像を挿入しておくと訓練メールを閲覧したかどうかを把握できる

多くのメールソフトではデフォルトで画像を読み込まない設定になっているため、確実な方法では無いのですが、訓練メール内に画像を挿入しておくと、画像へのアクセスがあったかどうかによって、訓練メールを閲覧したかどうかを確認することができます。

但し、メールソフトに先読み機能や、メールの内容が不審なものでないかどうかを事前にチェックするような機能がある場合は、実際には本人がメールを見ていないのに画像へのアクセスだけは発生しているといった状況が起きうるので、送信した訓練メールを実機で受信した際にはサーバ側にどのような記録が発生するのかを確認することも事前確認作業として必ず行うようにしてください。