メールで使うフォントを理解する

このページで学べること

オンラインでフォントを使用する際の機会と制限、およびブランドに合ったメールを送信する方法について説明します。

フォントの仕組み

フォントはテキストの表現形式で、印刷物やオンライン メディアで使用できます。Arial や Times New Roman などのより一般的なフォントをすでにご存知かもしれませんが、ブランドを伝え、表現するために使用できるフォントはほかにも何千種類もあります。

オンライン メディア（ウェブサイトやメールなど）では、フォントの選択肢はほぼ無限です。しかし、作成したものを他の人と共有すると、すべてのデバイスが同じフォントにアクセスできるわけではないため、まったく同じようには表示されない場合があります。

デバイスがフォントにアクセスして使用する主な方法は 2 つあります。システム フォント（使用中のデバイスに保存されているフォントなど）と、ウェブ フォント（外部サーバーから読み込まれるフォントなど）です

システムフォントについて

コンピューターやスマートフォンには、さまざまなフォントがあらかじめインストールされています。一般的にインストールされているフォント（ほとんどのデバイスには、たとえば Georgia と Verdana が含まれています）もありますが、デフォルトで含まれるフォントはデバイスによって大きく異なる場合があります。ほとんどのデバイスで使用されるフォントは「ウェブセーフ」フォントと呼ばれます。

ウェブフォントについて

ウェブセーフフォントとは異なり、ウェブフォントは表示しているコンテンツと同時に外部サーバーから読み込まれます。カスタム フォントは一般的にウェブフォントです。ウェブフォントを使用する場合は、特定のデバイスがウェブフォントを読み込めない場合に備えて、ウェブセーフのフォールバックフォントも設定することをおすすめします。

フォールバックフォントを選択する

ウェブページでもメールでも、オンラインで何かを表示する際には、舞台裏で CSS（オンラインのコンテンツにスタイルを適用するためのコード）が、デバイスにどのフォントを表示するかを指示しています。デバイスがそのフォントにアクセスできない場合、CSS で “fallback font”（優先フォントが利用できない場合に備えて、ウェブサイトまたはメールメッセージの作成者が選択したフォント）を確認します。フォールバックフォントには、多くのデバイスで使用できるウェブセーフフォントを指定する必要があります。カスタム/ウェブフォントをサポートしていないデバイスで表示された場合でも、メッセージの見え方をより細かくコントロールできます。

利用可能なフォールバック フォントがない場合、または使用中のデバイスでフォールバック フォントがサポートされていない場合、デバイスは Arial や Times New Roman などの既定のフォントを使用します。既定のフォントは、デバイスやアプリによって大きく異なります。

メールのフォントの仕組み

一部のメールクライアントはウェブフォントに対応していますが、対応していないものもあります。ウェブフォントに対応していない受信トレイまたはデバイスでメールが開かれた場合、代わりにデフォルトのフォントが表示されます。フォールバック フォントを設定することで、バックアップとして使用されるシステム フォントを制御できます。

ウェブフォントに対応したデバイスでメールが開かれた場合、メールの CSS で指定された URL からフォントが読み込まれます。デバイスがそのフォントにアクセスできる場合は表示され、アクセスできない場合はフォールバック フォントに移ります。

次のメールクライアントはウェブ（カスタム）フォントをサポートしています：

• Apple Mail
• iOS Mail（iOS のデフォルトメールブラウザ）
• Google Android（Android 2.3 を除く。Android 2.3 は Google および Adobe フォントで使用される @import メソッドに対応していません）
• Samsung Mail（Android 8.0）
• Outlook for Mac

最大級のメール クライアントの 1 つである Gmail は、通常、ウェブフォントをサポートしていない点にご注意ください。ただし、例外が 1 つあります。Gmail は Roboto をサポートしています。

メールのフォントを最適化する

メールの見た目をデバイス間で一貫させる最善の方法は、ウェブセーフ フォントを使用することです。Klaviyo のデフォルトフォントは、一般的にウェブセーフです。Klaviyo が提供するフォントは、次で確認できます：

• コンテンツ > 画像 & ブランド > ブランドアセット
• メールの スタイル タブ
• テキストを含む任意のメールブロックの スタイル セクション
• サインアップフォームエディターの Styles タブ

カスタム フォントを使用するためのヒント

カスタムフォントを使用する場合は、以下のヒントを活用して、デバイス間でメールが適切にデザインされて見えるようにしてください。

フォールバックフォントを使用する

カスタムフォントにできるだけ近いウェブセーフな フォールバックフォント を選択してください。カスタムフォントの設定時に、Klaviyo のデフォルトフォントからフォールバックフォントを選択できます。

画像内のテキストを使用する

すべて画像のメールはデリバビリティを損なう可能性がありますが、画像内のテキストとテキスト ブロック内のテキストを戦略的に組み合わせることで、ブランドに合ったメールを作成できます。見出しと行動喚起（CTA）にはカスタムのブランドフォントを選択し、本文にはウェブセーフフォントを組み合わせて使用します。

選択したテキストにはブランド フォントを含む画像を使用し、メールに画像を追加する際には必ず 代替テキストを追加 してください。次に、ウェブセーフフォントをメール内の残りのテキストに適用します。その結果、サイトに合ったブランド化されたメールになり、購読者の受信トレイでもアクセスしやすくなります。

十分にテストしてください

どの方法を選択する場合でも、特に新しいデザインを使用する際は、メールを徹底的にテストしてください。複数のデバイスでメールを自分宛てに送信し、それぞれでの表示に満足できるか確認してください。Litmus や Email on Acid などのメールテストプログラムを活用して、より幅広いデバイスでテストすることもできます。

その他のリソース