スマホで見やすいHTMLメルマガのサイズとは？各パーツ別に解説！

メール配信システムのサービス一覧

• デザイン性の高いHTMLメールをかんたん作成
• セグメントを絞って特定のターゲットのみに配信可能
• 毎時470万通配信できる業界トップクラスのスピード

メール配信システムの
サービスを一括ダウンロード(無料)

HTML形式のメールについて

HTML形式のメールとは、電子メールの一種で、メッセージの本文をHTML(HyperText Markup Language)で書式設定することができます。テキストの色やフォント、サイズやスタイルなどをカスタマイズすることが可能です。

HTML形式のメールは、文字のみのメールと比べると、画像やリンクを直接本文に挿入できるため、多彩で装飾的なデザインが実現できるでしょう。ただし、HTML形式のメールはプレーンテキスト形式のメールよりも容量が大きくなるため、携帯電話などのデバイスで閲覧する場合には注意が必要です。

なお、セキュリティ上のリスクがあり、信頼できる送信元からのみ受信することが推奨されていることも把握しておきましょう。

▷HTMLメールの作り方とは？基本の作成方法や配信効果・注意点を解説！

HTML形式のメールは訴求効果が高い

HTML形式のメールは訴求効果が高い傾向にあります。主な理由は以下の通りです。

• 視覚的に魅力的なデザインが作れる
• リンクやボタンを本文内に挿入することができる
• 画像や動画を本文内に挿入することができる
• ターゲット層に応じたデザインやメッセージを配信することができる。
• 自動化されたメール配信システムと組み合わせてタイミングや配信頻度を最適化できる

ただし、訴求効果が高い反面、慣れていないユーザーにとっては見にくく読みづらい場合があります。そのためテキスト形式の代替案も用意することが望ましいでしょう。

HTMLメルマガを作成する手段

HTMLメルマガを作成する手段は3つあります。

• 自作する
• テンプレートを活用する
• 配信システムを利用する

各手段について、詳しく見ていきましょう。

自作する

HTML形式のメールを自作するには、以下の手順を参考にしてください。

1. テキストエディタを開き、HTMLコードを書き込む。
2. HTMLコードの中に、画像やリンクを挿入するためのタグを追加する。
3. テキストエディタで作成したHTMLファイルを、メールソフトに貼り付ける。
4. メールソフト上で、件名や送信先などの必要事項を設定する。
5. HTMLメールとして送信する。

HTMLメールの作成には専門知識が必要であり、コーディングに誤りがあると正しく表示されない場合があります。そのため、専門知識がなかったり、慣れていなかったりすると難易度が高く感じられるでしょう。

また、作成したHTMLメールは、各メールクライアントによって表示が異なる場合があります。このことから、HTMLメールの作成時には、複数のプラットフォームで正しく表示できているか確認することが重要です。

テンプレートを活用する

HTMLメールを作成する際は、テンプレートを活用するのも一つの方法です。テンプレートを使用することで、プロフェッショナルなデザインや、必要なタグなどがあらかじめ設定されているので、HTMLメールの作成が容易になります。

テンプレートを活用する手順は以下の通りです。

1. ネット上にあるHTMLメール用のテンプレートを探し、選択する。
2. 選択したテンプレートをダウンロードし、編集用のHTMLエディタで開く。
3. テンプレートのデザインや内容を編集する。必要に応じて、画像やテキスト、リンクやボタンなどを追加する。
4. 編集が完了したら、メールソフトにHTMLファイルを貼り付け、件名や送信先を設定する。5.HTMLメールとして送信する。

このように、テンプレートを使用することで、プロフェッショナルなデザインが簡単に実現できます。また、テンプレートを編集する際には、基本的なHTMLコーディングの知識があると作業がスムーズに進みます。

しかし、テンプレートによっては古くなっていたり、受信者側で正しく表示されない場合があるため、配信前に確認するようにしましょう。

▷レスポンシブHTMLメールとは？作り方や配信メリット・注意点を解説！

配信システムを利用する

HTMLメールを作成する際には、配信システムを利用するのもよいでしょう。配信システムとは、メールの配信やリスト管理などを自動化するソフトウェアのことです。

配信システムを利用する手順は以下の通りです。

1. 配信システムを選択する。
2. 配信システムに登録し、メールリストを作成する。
3. 配信システム上で、メールの配信設定を行う。
4. 配信システム上で、HTMLメールを作成する。
5. 作成したHTMLメールを、配信システム上でプレビューして確認する。
6. メールの送信を実行する。

配信システムを利用すれば、手動でのメール配信やリスト管理が不要になり、作業効率の向上が望めます。また、配信結果の分析機能や配信先リストのセキュリティ管理機能などが備わっているため、安全かつ効果的なメール配信を実現することができるでしょう。

▷【最新】おすすめメール配信システム30選！料金・機能・特徴の比較表あり！

【パーツ別】スマホで見やすいHTMLメルマガのサイズ

スマホで見やすいHTMLメルマガのサイズはパーツごとに異なります。「フォント」「画像」「CTAボタン」の各パーツそれぞれに適したサイズを、詳しく見ていきましょう。

メルマガのフォントサイズ

スマートフォンのHTMLメルマガのフォントサイズは、一般的には15px以上が適しています。文字を強調したい場合には24px以上を使用してみましょう。ただし、フォントの種類や行間などの設定によっても読みやすさが異なるので、適切なフォントサイズを決定するためにも、実際にスマートフォンで確認してみることが大切です。

スマートフォンは画面が小さいため、フォントサイズが大きすぎるとテキストが画面に収まりきらず、読みにくくなります。逆に、フォントサイズが小さすぎても読みにくくなったり見落としが発生したりする可能性が高まるでしょう。

また、フォントサイズ以外にも、文字の色や背景色、行間や文字間隔などの設定もメルマガの作成では重要になります。これらの設定にも配慮しながら、スマートフォンで見やすく、効果的なHTMLメルマガを作成しましょう。

▷クラウド型のおすすめメール配信システム10選！料金や機能も詳しく解説

メルマガの画像サイズ

スマートフォンで見やすいHTMLメルマガの画像サイズは、一般的に横幅が600px程度が適しています。ただし、メルマガのレイアウトや目的によっては、異なる画像サイズが適している場合もあります。

スマートフォンの画面はパソコンの画面よりも小さいため、画像サイズが大きすぎると、画像が表示しきれずに見づらくなる場合があります。また、大きな画像を表示するために必要なロード時間が長くなると、読者が待ちきれずにメルマガを閉じてしまう可能性も否めません。

一方で小さすぎる画像も見えにくく、効果的なアピール効果を発揮しづらいため、適切な画像サイズを設定することが重要です。

くわえて、画像のフォーマットも重要なポイントです。スマートフォンでは、GIFやPNGフォーマットの方が読み込み速度が速く、効果的な表示が期待できます。JPEGフォーマットは圧縮がかかって画質が落ちるため、適切な場面においてのみ使うようにしましょう。

適切な画像サイズを設定し、適切なフォーマットで画像を表示することで、スマートフォンで見やすく、効果的なHTMLメルマガを作成できます。

メルマガのCTAボタンサイズ

メルマガのCTAボタンのサイズは、横幅が600px以内になるよう作成しましょう。その際、周りに50pxの余白を入れることを忘れてはいけません。

スマートフォンの画面サイズはパソコンと比較して小さいため、CTAボタンのサイズも小さくなります。そのため画面の大きさを考慮しつつ、読者にとって適切なサイズを設定することが重要です。

CTAボタンは、メルマガの中でも重要な役割を果たす要素であり、ボタンのサイズやデザインは、アクションを起こしてもらえるかどうかに大きな影響を与えます。

このため、ボタンが目立つように、背景色を明るくしたり、文字色を白や黒にするなど、視認性を高める工夫を凝らしましょう。また、ボタンには明確なテキストを設定することで、読者にアクションを促せるのでおすすめです。

▷無料で使えるメール配信システム9選！使い方や有料製品との違いも解説

メルマガを見やすくするレスポンシブデザインのレイアウト

メルマガを見やすくするレスポンシブデザインのレイアウトには、大きく分けて3つが挙げられます。

• レスポンシブレイアウト
• リキッドレイアウト
• フレキシブルレイアウト

各レイアウトについて、詳しく見ていきましょう。

レスポンシブレイアウト

レスポンシブレイアウトとは、画面サイズや端末の種類に合わせて、自動的にレイアウトを調整して表示できるデザインです。メルマガでもレスポンシブレイアウトを採用することで、読者がスマートフォンやタブレットなどのさまざまな端末で、快適に読めるようになります。

レスポンシブレイアウトでは、通常のパソコン画面向けのデザインと、スマートフォンなどの小さい画面向けのデザインを別々に用意し、画面サイズに応じて自動的に切り替えます。具体的には「画像のサイズを自動的に縮小する」「テキストのフォントサイズを自動的に調整する」「要素の配置を調整する」などの方法です。

また、テキストの行間や段落の間隔、余白、CTAボタンやリンクの配置にも配慮し、スマートフォンの画面サイズでもタップしやすいような大きさや間隔を設定することで読みやすいデザインを実現します。

このように、レスポンシブレイアウトを採用すれば、さまざまな端末で見やすく読みやすいメルマガを作成できます。ただし、レスポンシブレイアウトはデザインやコーディングの技術が必要となるため、専門的な知識を持つWebデザイナーやエンジニアに依頼する必要があるでしょう。

▷【簡単】メール配信システムとは？仕組みやできること・導入メリットを解説

リキッドレイアウト

リキッドレイアウトとは、ウィンドウサイズに合わせて自動的にレイアウトを調整するデザインのことです。リキッドとは液体のように自由自在に形を変えるという意味があります。

このレイアウトではブラウザウィンドウの幅に合わせて、コンテンツの配置やサイズを自動的に調整するため、パソコンやスマートフォンなどの異なるデバイスでもそれぞれで見やすく表示できます。

リキッドレイアウトの利点は、さまざまな面サイズや解像度に対応でき、デバイスの種類によって異なるメールクライアントでも一定のレイアウトを保てることです。

また、ユーザーがメールを受信するデバイスによって文字や画像の大きさが左右されることなく、快適に閲覧可能なこともメリットの一つでしょう。

一方で、リキッドレイアウトは、画面幅に合わせて自動的にレイアウトが変化するため、メールのデザインが崩れやすく、デザインの統一性を保つことが困難です。くわえて、ウィンドウサイズによっては、文字や画像が小さくなりすぎて読みにくくなる場合もあります。そのため、デザインにあわせて適切な最小サイズを設定しなければなりません。

フレキシブルレイアウト

フレキシブルレイアウトはレスポンシブデザインの一種で、画面サイズに合わせて柔軟にレイアウトが変化するデザインです。リキッドレイアウトと似た特徴を持ちますが、レイアウトの柔軟性がより高く、画面サイズに合わせてコンテンツが自動的に調整されます。

たとえば、スマートフォンやタブレットなどの小さな画面でメルマガを表示する場合、フレキシブルレイアウトではテキストや画像が縮小され、表示領域に合わせて自動的に並び替えられます。

また画面が大きい場合には、テキストや画像のサイズが大きくなり、余白が自動的に調整される仕様です。よってユーザーがメルマガを閲覧する際の利便性が向上し、見やすくなるでしょう。

近年では、フレキシブルレイアウトは、一般的なレスポンシブデザインの手法の一つとなっており、多くのウェブサイトやメルマガで使用されています。ただし、柔軟性が高いため、設計やコーディングには注意しなければならず、配信前のテストは不可欠です。

▷メール配信システムの選び方は？必要な機能やメリット・注意点を解説

見やすいHTMLメルマガを作成するコツ

見やすいHTMLメルマガを作成するコツは5つあります。

• 原稿に階層を設ける
• 階層ごとにフォントサイズを変える
• 画像やボタンを挿入する
• 適した色の調整を行う
• 容量をなるべく軽くする

それぞれのコツをしっかりと押さえておきましょう。

原稿に階層を設ける

原稿に階層を設けることで、文章の流れが明確になり、読みやすくなります。階層とは、見出しや本文など、テキストの段落ごとに異なる階層を設けることです。具体的には、見出しを設けると重要な内容を目立たせることができたり、箇条書きを使うことで、情報を整理しやすくなったりできるのです。

階層を設けるためにはHTMLでタグを使い、文章を構造化しなければなりません。例えば、h1タグを使って大見出しを、h2タグを使って小見出しを表現することができます。また、ulタグとliタグを使って箇条書きを表現することも可能です。

このように、原稿に階層を設けることで、メルマガの情報を整理しやすくなり、読みやすいレイアウトを作れるでしょう。

階層ごとにフォントサイズを変える

見やすいHTMLメルマガを作成するコツの一つとして、階層ごとにフォントサイズを変えることが挙げられます。

階層ごとにフォントサイズを変えることで、メルマガの文章の流れがスムーズになり、読みやすくなります。たとえば、大見出しのフォントサイズを大きくして、本文のフォントサイズは小さくすると、大見出しと本文の区別がはっきりとして見やすくなるでしょう。

また、フォントサイズだけでなくフォントの種類や太さ、色なども調整すると、階層感をより強く表現することができます。

ただし、フォントサイズを過剰に変えすぎると、視覚的なバランスが崩れ、逆に読みにくくなることがあります。そのため、適切なフォントサイズの変化を設定することが重要です。

画像やボタンを挿入する

見やすいHTMLメルマガを作成するためのコツの一つは、画像やボタンを適切に挿入することです。

そのためには、画像を適切なサイズに調整し、必要に応じて軽量化することが重要で、画像には代替テキストを設定して画像が表示できない場合でもメッセージが伝わるようにしましょう。

CTAボタンについては、目立つ色やデザインにすることで、クリック率のアップが期待できます。また、ボタンのテキストには、アクションを促す言葉を使うことで、読者のクリックを促す効果が望めるでしょう。

ただし、画像やCTAボタンを多用しすぎるとメールが重くなり、読み込みに時間がかかる可能性があります。そのため、画像やCTAボタンを使用する際は、必要以上の装飾を加えないようにするのが重要です。

▷HTMLメルマガに漫画を活用？狙える効果や具体的な制作方法を解説

適した色の調整を行う

「適した色の調整を行う」ことも、見やすいHTMLメルマガを作成する際の大事なポイントです。

まずは、文字色や背景色など、使用する色のコントラストが適しているか確認しましょう。文字色と背景色のコントラストが低いと、文字が読みにくくなり、逆に色を使いすぎると見た目が混雑し、印象が悪くなります。

ほかにも、使用する色がバラバラだと統一感がなくなり、印象が弱くなるため、使用する色の統一性にも注意するべきです。背景色や文字色、リンクの色などを統一することで、見やすく印象的なメルマガに仕上がるでしょう。

特定の色が目立ちすぎる場合は、代替案を探しましょう。たとえば、赤色は強い印象を与えますが、目立ちすぎるため使用を避けることが望ましい場合があります。その代わりに、赤色に近いピンク色を使用することで、やわらかい印象を与えられるでしょう。

このように色の調整を行うと、見やすく統一感のあるHTMLメルマガを作成できます。

容量をなるべく軽くする

見やすいHTMLメルマガを作成するコツの一つは「容量をなるべく軽くする」ことです。メルマガの容量が大きすぎると、読み込みに時間がかかってユーザーのストレスになり、最悪の場合は受信ができないといった問題につながりかねません。

メルマガの容量を軽くするためには以下のような方法があります。

画像の圧縮

画像を圧縮し、容量を軽くすることができます。Web用の画像は、JPEGやPNG形式が多く使用されますが、それぞれの形式に最適な圧縮方法があるので、適切に選択しましょう。

フォントの埋め込み

Webフォントを使用する場合、フォントをサーバーからダウンロードする必要があります。この場合、ダウンロードするフォントの容量が大きくなりがちですが、フォントを埋め込むことでダウンロード時間の短縮が可能です。

不要なコードの削除

HTMLやCSSのコードの中には、不要なスペースや改行などが含まれる場合があります。これらを削除することで、容量を軽くすることができます。

上記のように、いくつかの方法を組み合わせてメルマガの容量を軽くすることで、読み込み速度が改善します。

▷メール配信システムの導入メリット・デメリットは？必要な理由も解説

HTMLメルマガを作成する際の注意点

HTMLメルマガを作成する際の注意点は3つあります。

• 作成前に配信の目的を明確にする
• 具体的なターゲットを選別する
• 受信環境に配慮する

各注意点について、詳しく見ていきましょう。

作成前に配信の目的を明確にする

HTMLメルマガを作成する際の注意点の一つは、作成前に配信の目的を明確にすることです。メルマガの目的がはっきりしていないと、デザインやコンテンツの作成において方針が定まらず、読者にとっても見づらくなる場合があります。

配信するメルマガの目的を明確にすれば、どのような情報やコンテンツを盛り込むべきか、またそれに伴うデザインや配信タイミングの決定についても、具体的に決めることが可能です。

また、読者にとってもメルマガの価値を理解しやすくなり、定期的な配信にもつながります。このことから、より良いメルマガを作成するためには配信目的を明確にし、それに基づいてコンテンツやデザインの企画をおこなうことが重要です。

具体的なターゲットを選別する

HTMLメルマガを作成する際には、どのようなターゲットに配信するかきちんと選別しましょう。

たとえば、ビジネスマン向けの情報を配信する場合、そのビジネスマンの業種や職種、年齢層などに合わせたコンテンツを提供する必要があります。この結果、メルマガの受け取りやすさや情報の興味深さが向上し、結果的に開封率やクリック率の向上が期待できるでしょう。

さらに、ターゲットを選別する際には、メールアドレスのリストを精査するのも重要です。過去にメルマガを開封したことがない受信者など、返信や購読解除のアクションが少ない場合、そのメールアドレスからの配信を一時停止するのも一つの方法として挙げられます。

受信環境に配慮する

HTMLメルマガを作成する際には、受信環境に配慮することが重要です。

受信者が使用するメールクライアントやデバイスによって、メルマガの表示が異なる場合があります。そのため、レスポンシブデザインを採用したり、画像やテキストのサイズを適切に調整するなど、あらゆる環境で見やすいメルマガを作成しなければなりません。

また、スパムフィルターによるメール不達も考慮する必要があるでしょう。HTMLコードの中に特定のキーワードやURLが多く含まれる場合は、スパム判定される可能性があります。こういったトラブルを防ぐためにも、本文中に適切な内容を含めることや、適度な画像の使用などを心がけることが大切です。

さらに、画像を使用する場合は、ファイルサイズが大きすぎるとメルマガの読み込みに時間がかかってしまうため注意しましょう。

▷メール配信システムの平均費用は？料金の相場や機能について解説

HTMLメール作成におすすめのテンプレート配布サイト

HTMLメール作成におすすめのテンプレート配布サイトを紹介します。メルマガの作成を考えている方はぜひ参考にしてみてください。

Open Source Email Templates

「Open Source Email Templates」は、Techdrop Labs Inc.が提供しているサービスです。豊富な種類のテンプレートがあり、あらゆるメールに幅広く対応しています。

また、テンプレートの編集も簡単におこなえるため、初心者でも使いやすいでしょう。ほかにも、無料で利用できるテンプレートも用意されているので、HTMLメールの作成を手軽に始めたい人におすすめです。

Cakemail

「Cakemail」は、無料で使えるHTMLメールを提供しています。さまざまな業種や目的に合わせた豊富なテンプレートを用意しており、テキストや画像、CTAボタンなどのコンテンツを自由に編集することが可能です。

また、テンプレートの検索機能も備えており、自分にぴったりのテンプレートを簡単に見つけることができます。

99 designs

「99 designs」は、グラフィックデザインやウェブデザインのクラウドソーシングプラットフォームであり、HTMLメール作成においてもテンプレートを提供しています。

クライアントはニーズや予算に合わせたデザインを選ぶことができたり、コンペ形式のデザインコンテストを開催し、多数のデザイナーから最適なデザインを選んだりすることも可能です。

Cerberus

「Cerberus」は、シンプルかつモダンなデザインのHTMLメールテンプレートを無料で利用できるサイトです。テンプレートはすべてレスポンシブ対応しており、ブラウザやメールクライアントによって異なる表示に対応しています。

また、自分の好みに合わせたカスタマイズも簡単にでき、メールテンプレートの配信前におこなうべきテストの方法や、CSSの最適化など、配信までのプロセスをサポートする情報も提供されています。

ZURB

ZURBは、レスポンシブデザインに対応したHTMLメールテンプレートを無料で提供しています。テンプレートは5つの異なるレイアウトが用意されており、簡単に使用可能です。

また、OutlookやGmailなどの主要なメールクライアントに対応しており、デバイスに応じた最適な表示ができる点もポイントです。

見やすいメルマガの作成にはパーツごとに適したサイズが重要

HTMLメルマガを作成する際には、配信の目的を明確にし、ターゲット層を選別することが重要です。

受信環境に合わせたレスポンシブデザインの採用や、適切なフォントサイズや配色、画像・CTAボタンの配置などは、メルマガの見やすさに大きく影響するでしょう。さらに、配信するメールサービスや受信環境の制約にも配慮する必要があります。

このように、メルマガ作成のコツや注意点を押さえつつ、パーツごとに適したサイズや配置を決めていくことで、見やすく効果的なHTMLメルマガを作成できるでしょう。