HTMLメールとは

まずはじめに、HTMLメールとはHTML形式で作られてるメールのことで、従来のテキストメールと比べるとデザイン性に優れ、画像やボタンといった要素を配置できることから、昨今のメールマーケティングには欠かせないものとなっています。
現在では様々なサービスでHTMLのテンプレートを配布しているところもありますが、自分で実際に作った場合とサービスを利用して作った場合のメリットとデメリットをお伝えします。

HTMLメールテンプレート作成サービスを利用して作る場合

無料サービス一覧

• ZURB
• Dyspatch
• Cerberus
• Antwort
• BeeFree
• SATORI
• 99designs
• Benchmark

＊SATORIから下のリストが日本語サイトでそれ以外は英語サイトです。

サービスを利用するメリット

メリットはなんといっても、大枠のレイアウトができているため、中のコンテンツを差し替えるだけでHTMLメールが出来上がるところです。
時間がない人や、HTMLの知識が少なく人もHTMLメールを組むことができます。

サービスを利用するデメリット

デメリットとしては自分が思い描くテンプレートが少ないということです。
「微妙にコンテンツが足りないんだよ」「レイアウトが欲しいものと違う」「もう少しリッチにしたい」など、既存テンプレートでは足りない部分がどうしても出てきてしまいます。
そのような場合はHTMLを読み解いて修正する必要がありますが、サービスが用意しているテンプレートではCSSやHTMLが複雑に書かれている場合があり、「どこを変えればいいのかわからない」「使えない」といった状態におちいります。
そうなると結局テキストメールに戻さざる得なかったり、希望通りではないHTMLメールを送るしかないというように、上手にHTMLメールを扱えないままになってしまう可能性が高くなります。

HTMLメールのテンプレートを自分で作る場合

HTMLメールを自分で作る場合は、それなりのHTMLとCSSの知識が必要になります。
また通常のWebページと違いメーラーごとで仕様の違いがあるためやや難易度としては高くなりますが、様々な利点があるため次に説明します。

テンプレートを自分で作るメリット

メリットはなんといっても、自由度の高さにあります。
HTMLメールを組むときに必ず必要になるのがレイアウトを考えることになりますが、自分が考えたものを再現できることが強みです。
またレイアウトを変更したい場合でも、自分で組んだHTMLになるため、変更が容易で新規テンプレートを読み解く必要がありません。
またHTMLやCSSができるようになると、ウェブページを作ることも容易になってくるため、可能性が広がるという意味でもメリットと言えるでしょう。

テンプレートを自分で作るデメリット

デメリットはHTMLやCSSなどの専門的な知識が必要ということ。
慣れないうちは時間もかかってしまうということもデメリットとして挙げられます。

HTMLメールの作り方

次にHTMLメールの作り方について説明します。
HTMLメールは基本的にはウェブページを作る要領で組んでいきます。
初めてHTMLを組む方でエディタをインストールしていない方は、はじめにインストールをしてください。
メモ帳でも作れますが、時間がかかってしまうためエディタをインストールして、そこで組んでいくほうが圧倒的に早くなります。

筆者が実際に使っているおすすめのエディタ
■SublimeText
SublimeTextのダウンロードはこちら
■VScode
VScodeのダウンロードはこちら

HTMLメールの基本

HTMLメールの基本についてですが、メーラーやデバイスによってさまざまな制約があります。
例えば、outlookアプリのメーラーでは画像に対してCSSが当たらない、WindowsのGmailではclassに対してCSSが当たらないときがあるなどなど。
そこでだいたいこれを守ればどんなメーラーでも崩れにくいHTMLメールができるというコツをご紹介します。

HTMLメールで利用できるHTMLタグ

HTMLタグでは下記表にあるものだけを使うことで、崩れにくくなります。
注意としてレイアウト（大枠）はすべてtableレイアウトという、旧来のHTMLの組み方である表組み形式で組むことで綺麗な見た目なります。
ただ画像の処理に関しては注意が必要で元画像のサイズが大きい場合、CSSを使って調整できないメーラーがあるため、画像はなるべく、表示時のサイズになるように元の画像を調整してください。

もっと詳しく作り方を知りたいという方は、本記事限定で弊社で実際に作成・運用しているHTMLテンプレートと、
上級ウェブ解析士がつくったメールマーケティングお役立ち資料（コーディング説明付き）をプレゼント！
ダウンロードはこちら

HTMLメールで利用できるCSS

CSSでの特徴としては基本的なCSSは使えるという点です。
しかしながら[position]や[flex]といったtable組とは相反するものに関してはほとんどのメーラーで正しく表示されません。
基本的なtableレイアウトに沿ってコーディングし、細かい見た目をCSSで整えていく形で進めるのがベストです。

HTMLメールのレイアウト種類

HTMLメールのレイアウトの種類は大きく分けて３つあります。
スマホ用に調整しやすいものから、パターン別のおすすめポイントを紹介します。

HTMLメールのレイアウト-1カラム

1カラムのレイアウトはスマホ用の設定がほぼいらない、シンプルな構造です。
コンテンツの横幅を画面幅に合わせるようにするだけでレスポンシブが可能で、何かの告知メールであったり、訴求する内容が一つだけという場合におすすめです。

HTMLメールのレイアウト-2カラム

2カラムのレイアウトはウェビナーや記事、売り出したい商品など紹介したいものが複数あり、かつ一つ一つの内容を詳しく説明したい場合におすすめのレイアウトです。
スマホ用に表示する場合は2つ選択肢があり、PCと同じ見た目のままにする（レスポンシブをせず、コンテンツは小さくはなるがレイアウトを保つ）パターンと
横並びになっているカラムを1カラムに戻してレスポンシブ化させるパターンです。

レスポンシブの場合は、メディアクエリなどCSSを使った画面幅指定といったより専門的な部分も含まれるため、ここでの説明は割愛しますが、レスポンシブ対応について実際に弊社で使っているCSSも入ったテンプレートをプレゼントしています！
テンプレートはこちら

HTMLメールのレイアウト-3カラム

3カラムのレイアウトは2カラムとほぼ同じですが、一つ一つの内容は要素が小さくなってしまうため、短い説明をするのに適しています。
紹介のほとんどを記事や動画のサムネイルとタイトルだけにしたり、途中まで1カラムで紹介した後、最後のコンテンツとしてサービス紹介を3カラムにしておくなど紹介したいものにあわせて、いろいろ変えていけるのも特徴です。
スマホ対応に関しては2カラムと同様のやり方です。

HTMLメールのレスポンシブ対応の必要性

まずレスポンシブというのは、マルチデバイス（PC/スマホ/タブレット）でそれぞれ閲覧した際にデバイスの画面幅にあった適切な見た目になることを指してます。
昨今ではスマホやタブレットの普及から、PCよりもスマホのほうが優先とされるモバイルファーストな状態になりつつあります。
BtoBのビジネスであればPC優先で問題ありませんが、BtoCやCtoCなどの企業対個人、個人対個人のような場合でメール送る場合はモバイルファーストを意識する必要があり、送り先を考えてレイアウトを組むことが重要。

メーラーについて

メーラーとはメールソフトのことですが、ビジネスとプライベートで使う場合とで使用しているメーラーのシェアが変わっていますが、一般的に使われているメーラーは以下の通りです。

• Outlook(Microsoft 365含む)
• Gmail
• Apple Mailsoft
• Thunderbird
• Yahoo!メール
• Becky!
• サイボウズ Office
• AOL Mail

このようにたくさんのメーラーがあるため、HTMLメールを送る際にはこれらのメーラーに合わせた組み方が必要となります。
ちなみにSalesforceのMarketing Cloud Account Engagement (旧 Pardot)では各メーラーのプレビューが一覧で見れる機能が備わっているため、HTMLメールを組む場合にとても使いやすいツールとなっています。

実際に多いメーラーの割合

ADX Consultingで実際に集計されたメーラーの割合は以下です。*Marketing Cloud Account Engagementで計測されたもの

図で分かる通り弊社では圧倒的にGmailが多くなっています。
日本ビジネスメール協会のまとめでは2022年度4月時点でのメーラーシェア1位はOutlookとなっていましたので、企業ごとにこのシェア率は異なってくることがわかります。
送信先がIT企業（SaaS系）の場合はGoogleが多い印象があります。それ以外の企業ではOfficeに合わせてOutlookを使っているイメージがあります。
また若手の多いベンチャーだとGmail、中堅以上が多い場合はOutlookが多い気がします。
*筆者の経験による偏見です笑

実際に作ったHTMLメールのテンプレートの一例

2カラムレイアウト

特徴としてはヘッダーと導入部分を1カラムにし、記事紹介を2カラムにし、遷移先の情報を簡潔にまとめることでクリック率向上を図っています。
コーディングはtableレイアウトとCSSをインライン（HTMLタグのstyle属性）に記述することで崩れを最小限にしています。
この他にも1カラムバージョンのデザインもありますので、テンプレートが欲しい方は以下のリンクよりダウンロードしてみてください！
ダウンロードはこちら

まとめ

ここまでHTMLメールについて説明してきましたが、結論として言えることは、HTMLメールを送ることが目的ではなく訴求したい内容に合わせて適切な配信物にすることが大事だということです。
マーケティング全般においてこれがすべて正しいみたいな正解はありませんが、効果の高かった事例をもとに実施することで最適化していくことが重要です。

ADX ConsultingではSalesforceをはじめマーケティングのプロが在籍しており、これまでの知見や事例を活かして企業のLTVを最大化するためにお手伝いしております。
もし現在、不安なことや困ったことがありましたらお気軽にご相談ください！
ご相談はこちらから

プラットフォームとは

プラットフォームとは「システムやサービス」の「土台や基盤となる環境」のことです。 主にIT業界を中心としたビジネス用語として使われる言葉ですが、全てのプラットフォームには「①サービスの提供者」と「②利用者」を繋ぐための「場を提供する」という大きな役割・特徴があります。

【参照元】http://www.toha-search.com/it/platform.htm

なぜExperience Cloudのサイトをプラットフォーム化したのか

Experience Cloudのサイトをポータルサイトとして利用していく中で、クライアント様と弊社を繋ぐ場所というよりは、ドキュメントの共有先としてのみ使える「ツール」のような形で利用している事を課題視していました。
そこでなんとか現状を打破できないかと考え、ただの「ツール」ではなく、相互のコミュニケーションや情報発信など包括的に使える場としてもっと良くしていきたいという思いから今回のプロジェクトを発足しました。

Experience Cloudのサイトをプラットフォーム化するにあたって

一般的なサイト感あるデザインからよりプラットフォーム化にフォーカスしたデザインです。
プラットフォーム化をするに当たり意識したことは下記です。

• 一般的なサイトよりもプラットフォームに近いデザイン
• どこからでもアクセスしやすい導線の確保
• 既存コンポーネントをメインで使用

一般的なサイトよりもプラットフォームに近いデザイン

Experience Cloudを使ったデザインをイメージすると、テンプレートを基調にしたテーマが真っ先に浮かびませんか？

・残り火
・ヒノキ
・ステラ
・ウェブスター
・ジェプソン
・市民
・カスタマー取引先ポータル

など、Salesforceにて用意されたテーマから好きなものを自由に設定することができますよね。どのテーマも魅力的でありながら、シンプルで見やすく扱いやすいというメリットもあります。
しかし、「他社様と似ているサイトにしたくない・・・」「斬新なデザインに変更したい・・・」と考えたときに、現状のままでは画像やコンポーネントの配置によって工夫は出来ても大きくデザインを変えることはできません。

そのような課題を解決するために弊社では独自の技術を用いることで大幅なレイアウトの変更が可能です！
よろしければ、下記をご覧ください！

PCレイアウトの場合

現状使用できるどのテーマを使用した際も、1カラムを軸にしたデザイン構成のものが多いですよね。
今回、弊社ではナビゲーションメニューを併せて横を軸として3カラムになるように変更しております。
メインコンテンツが長くなってしまった場合も考慮し、縦にスクロールされるように設計しました。
基本的に一画面にすべてコンテンツが表示されるように配置しており、
・見切れない
・どこからでもアクセス可能
・見やすいデザイン
の3つをテーマに掲げ、クライアント様に寄り添ったデザインです！

カラムが分からない方は下記にて説明しております！
【2023年】5分でわかるHTMLメールのテンプレートの作り方

スマートフォンレイアウトの場合

スマートフォンに関してもPCのデザインを軸に縦1カラムになるように構成しております。

TREND COLUMNS、CATEGORYコンテンツでは、縦に表示するのではなく横にスリックすることで残りのコンテンツを表示できるように工夫いたしました。これによりコンテンツが長くて見づらいといった課題を解決できました。

今回のデザイン以外にも様々なデザインに対応可能です。
お問い合わせ、お待ちしております！

お問い合わせはこちら

どこからでもアクセスしやすい導線の確保

例えば、「トップページから〇〇へ直接アクセスできたら良いな・・・」と感じることはございませんか？
痒い所に手が届くように、画像を使い分かりやすくどこにでもアクセスしやすいメニューを作成しました！

一例として、下層ページまでの遷移ツアーを行うので良ければお付き合いください。

➀トップページ

トップページからの遷移が一番多いため、導線を多く設置しております。
CMS連携も行っており、ブログやお知らせなども掲載可能。
また細かい部分になりますが、お知らせ部分のスライド機能も独自の技術にてデザインの変更を加えており、
アイコン画像・タイルメニューなどを使って直感的に操作できます！

次に赤枠内の「PROJECT」から遷移します。

➁トップページ⇒議事録ページ

議事録リストというページに遷移しましたね。
赤枠内のナビゲーションメニューはどのページに遷移しても必ず残る仕様です。
メニュー側の遷移だけではなく記事やナレッジなどにも瞬時にアクセス可能。
コンポーネントの設定においても大きな変更は不要で、各ページ共通の簡単な設定を加えるだけで完成します。

「議事録詳細ページ」へ遷移します。

➂トップページ⇒議事録ページ⇒議事録詳細ページ

議事録詳細ページへ遷移しましたね。
「詳細ページには遷移できたけど、一つ前のページに戻りたい・・・」
そんな時は赤枠内のパンくずをクリックしてください。1つ前の議事録リストへ戻ることも可能ですし、2つ前のトップページに戻ることも可能です。
基本的にURLが可変するページであれば設定可能できます。

いかがでしょうか。ほんの一例になりますが、雰囲気を感じ取っていただければ嬉しいです。

既存コンポーネントをメインで使用

これだけデザインを変えてしまうとページごとに一つ一つ開発しなければ実現できないのでは・・・？
と、疑問を持つ方もいらっしゃるのではないでしょうか。
今回のリニューアルでは、基本的に用意されているコンポーネントを使っているので、新たに開発する必要はございません！
弊社にはフロントエンド開発にも強みがあるので万が一があっても対応可能です！

終わりに・・・

カスタマーポータルサイトのプラットフォーム化にご興味がある方は、ぜひ弊社にご相談ください！今よりもっと、少しでも使いやすいプラットフォームを作るためにADXは全身全霊でサポートしてまいります。
WEB制作・マーケティングと、Salesforceのプロがお客様の「やりたい」を叶えます。
何かお困りごとがございましたら、下記ボタンからお気軽にご相談くださいませ。
お問い合わせはこちら