非デザイナーでもできる。スマホでも崩れない、HTMLメールの作り方

スマホ文化が普及した現在、メールを閲覧する環境はPCだけでなくスマホを想定する必要性が出てきました。そのため、PCから確認したメールは綺麗だったとしても、受信者からするとデザインが崩れているかもしれません。

メールの表示崩れは、HTMLメールで頻発する事象です。一見仕組みが難しいHTMLメールですが、作り方を知れば誰でもかんたんにPCでもスマホでも綺麗に表示させられます。

この記事では、非デザイナーが実際に試して、かんたんにできたスマホ対応のHTMLメールの作り方をご紹介します。

HTMLメールを活用すれば、メールへの画像の挿入や、開封率クリック率の取得が可能です。HTMLメールについて詳しく知りたいご担当者さまは「HTMLメールとは?テキストメールとの違いを含め徹底解説」をごらんください。

スマホ対応のメールをかんたんに作成する方法

スマホ対応のHTMLメールを作成するためには、みなさんはHTMLの知識が必要と思うかもしれません。しかし実は、HTMLメールの作成には専門的な知識は必要ありません。なぜなら、無料のテンプレートやメール配信ツールを活用すればよいからです。

非デザイナーでも最低限知っておきたい、HTMLの基礎知識は、「HTML初心者のための使えるHTML基礎知識」をごらんください。

HTMLコーディングの経験がない場合
HTMLについてなんとなく知っていたとしても、自分でコードを編集するのは危険です。修正を重ねると表示崩れを起こしているコードがどれかわからなくなります。私たちも、HTMLの知識があまりないまま、自分たちでコードを編集したことがあります。その結果解決策がわからなくなり、自社のデザイナーに助けてもらった経験があります。HTMLメールのテンプレートは無料で使いやすいものが配布されているので、活用しましょう。

方法1:テンプレートサイトを利用して4ステップでメールをデザインする

メール作成機能を持つツールや自社のメールテンプレートがない場合は、HTMLメールのテンプレート配布サイトを活用しましょう。ほとんどのサイトは、PCだけでなくスマホにも対応しているテンプレートを配布しています。

メルマガのデザインはこれで完璧!メルマガテンプレート活用術とデザインギャラリーまとめ」に、HTMLメルマガのテンプレートサイトをまとめました。あわせてごらんください。

実際にテンプレートを使ってみましょう。手順はたったの4ステップです。

今回はcerberusというサイトを使って実際の手順をご説明します。

まず、HTMLメールのテンプレートサイトにアクセスします。cerberusは英語サイトですが、ボタンをクリックするだけですぐにテンプレートをダウンロードできます。次にテンプレートを選びます。使いたいデザインの「 View Raw」と書かれているボタンをクリックしましょう。今回は「レスポンシブデザイン」を選びました。レスポンシブデザインとは、スマホ対応のHTMLメール形式の1つです。cerberusでの表記は「Responsive Template」です。

「 View Raw」ボタンをクリックすると、HTMLコードが書かれたウィンドウが立ち上がりますので、コードをすべてコピーしましょう。

次に、お使いのメール配信ツールや、メール配信機能を備えたマーケティングオートメーション(MA)を起動します。先ほどコピーしたHTMLコードを、ツール内でメールのHTMLコードを編集できる箇所にペーストすれば、メールのテンプレート移植は完了です。ツール内にテンプレートを移植した後は、自由に文章や画像を編集できます。画像を入れたくなければ枠ごと削除しましょう。画像にリンクを添付してリンクを貼れば、CTAボタンも作成できます。

無料テンプレートサイトを使えば、WEBデザイン経験のない私でもかんたんにスマホ対応のHTMLメールを作成できました。

cerberusのテンプレートをもとに作成したメールのファーストビューはこのように表示されます。画像表示も、スマホで見やすい大きさに変化します。

応用:メールの背景色を変えたい場合

cerberusのテンプレートは、背景色が黒に設定されています。これでは少しみづらいため、できれば背景色を白に変更しておきましょう。

背景色を変更する場合は、「カラーコード」と呼ばれる、色を規定するHTMLコードを書き換える必要があります。少し手間はかかりますが、この手順にそって実施すれば、それほど難しくありません。

今回はテンプレートサイトcerberusと、オンラインHTMLエディタLive Weaveを使いました。エディタサイトLive Weaveは、アプリをインストールせずブラウザで利用できます。

先程の「レスポンシブデザイン」のテンプレートコードをダウンロードし、224行目、225行目の「background-color」の後のカラーコード、「#222222」を「#ffffff」に書き換えます。

今回は背景を白に変えるため、白のカラーコードである「#ffffff」に変更しましたが、別の色にも変更できます。カラーコードがわからない場合、Live Weaveのサイドバーにある「Color Explorer」から調べられます。

背景色を書き換えたら、コードをマーケティングオートメーションやメール配信ツールにコピペすれば設定が反映されます。

コーディングに慣れていない方は、好きな配色のテンプレートがあるサイトからテンプレートをダウンロードしましょう。おすすめのテンプレートサイトは「メルマガのデザインはこれで完璧!メルマガテンプレート活用術とデザインギャラリーまとめ」で紹介しています。

方法2:メール配信システムやマーケティングオートメーションを利用する

メール配信システムや、マーケティングオートメーション(MA)を使えば、スマホ対応のメールを配信できます。ツールを使うと、テンプレートをダウンロードして編集するより、圧倒的に楽にスマホ対応のメールを作れます。

ほとんどのメール配信システムやマーケティングオートメーションは、HTMLメールをかんたんに編集できます。

また、マーケティングオートメーションには無料のテンプレートが付いていることもあります。私たちのマーケティングオートメーション「Kairos3」にはデザインと文例が入っています。実際の操作画面でご紹介します。

Kairos3の「キャンペーン」の「アウトバウンド」をクリックし、「コンテンツの新規作成」をクリックします。

「テンプレート」をクリックし、文例を選択します。テンプレート一覧には、年末年始の挨拶やセミナーの案内の文例、お礼の文例など様々な文例が用意されています。あらかじめデザインが3つ登録されているので、好みのデザインを選びます。今回は「デザイン2」にしました。テンプレートには、最初は「KAIROS」のロゴが入っていますが、好きなロゴに変更できます。

あとは通常のメールを書くときと同様に、任意の文面を入れていきます。これだけでかんたんにスマホ対応のHTMLメールを作成できます。

マーケティングオートメーションとメール配信システムの違い
この記事では、メール配信ツールとマーケティングオートメーションの相違点には触れずにお話をしました。しかし両者には機能面でさまざまな違いがあります。マーケティングオートメーションとメール配信システムについて知りたいご担当者さまは、別記事「「マーケティングオートメーション」と「メール配信ツール」の違いがわかる完全ガイド」をごらんください。

スマホ対応のHTMLメール作成時の注意点

PCとスマホの両方で見やすいメールにするために、メールの横幅や文字サイズを適切に設定しましょう。

メールの横幅や画像サイズを調整する

メールの横幅は、600pxがおすすめです。このサイズは、PCとスマホの両方で見やすい、メールのスタンダードなサイズです。

また、読者は300~400pxのスマホでメールを閲覧すると意識しておきましょう。メールの横幅が大きいと、横スクロールが必要となり、読者にストレスを与える恐れがあります。

ただし、600pxで作成した場合、PCだと少しインパクトに欠けてしまいます。背景色をつけることでバランスを補いましょう。ほとんどのHTMLメールテンプレートには、最初から背景色がついています。

文字サイズや文字数を調整する

画面の横幅が600pxの場合、日本語のおすすめの文字サイズは15pt以上です。この場合、1行あたりの文字数は最大45文字程度になります。見出しなどの目立たせたいコンテンツがあるなら24pt以上にしましょう。

あまりに長いメールは、スクロール回数が増え、読者のストレスになります。適切な文字数のメールを心がけましょう。

参考までに、マケフリ編集部のメルマガの文字数は1000文字程度です。

HTMLメールで自分の好きなフォントを使用する
HTMLメールは使用フォントを指定できますが、受信者の環境に左右されるなど注意点もあります。詳しくは「HTMLメールでフォントを指定する2つの方法とその注意点を解説」をごらんください。

すべてのデバイスで、完璧に表示させようとしない

HTMLメールのデザインは、ある程度で諦めも必要です。細かくデザインしても、受信者のデバイス、またはメールクライアントによって自分が意図した通りにメールが表示されるとは限らないからです。

メールのデザインは、ひとまずGmailやoutlookなどの主要なメールクライアントで崩れていなければ問題ありません。

すべてのメールクライアントで意図したデザインを表示させることよりも、全員にメールが表示されることの方が大切です。

マルチパートメールを活用し、受信環境によってHTMLメールが表示できない人にはテキストメールが届くようにしておきましょう。

詳しくは「マルチパートメールとは?メルマガ担当者がわかりやすく解説します」をごらんください。

参考:スマホ対応のHTMLメールの代表的なデザイン

この章では、スマホ対応のHTMLメールに使われる代表的なデザインをご紹介します。今後、スマホ対応のHTMLデザインをもっと改善していこうとすると、「レスポンシブデザイン」「フレキシブルレイアウト」といった専門用語を目にするはずです。

非デザイナーであっても、用語の意味を知っておくと今後の業務に役立ちます。かんたんに短く説明しますが、これだけ知っていれば問題ありません。

レスポンシブデザイン

レスポンシブデザインでは、閲覧するデバイスの画面サイズに合わせて画面レイアウトを変更します。

ウィンドウ幅の値を変更するのではなく、PC、タブレット、スマホなどある程度決まった機器のサイズに合わせて崩れがないようデザイン、コーディングします。

フレキシブルレイアウト(ハイブリッドレイアウト)

フレキシブルレイアウトは、ウインドウ幅の最大値と最小値を固定させたレイアウトです。ハイブリッドレイアウトとも言います。

どのウィンドウサイズにしてもコンテンツレイアウトが崩れないことが特徴です。

フレキシブルレイアウトは、現在のメールの主流です。多くのメールクライアントできれいに表示できます。

しかしデザインによって1pxから10pxごとのコーディング調整が必要になるため、コーディングの難易度が高くなります。