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

このページで学べること

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

フォントの仕組み

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

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

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

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

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

ウェブフォントについて

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

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

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

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

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

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

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

ウェブフォントのサポート状況は、メールアプリ、そのバージョン、およびメールアカウントの種類によって異なります。ウェブフォントをサポートしているクライアントの例は以下のとおりです：

• Apple Mail
• iOS Mail（iOSのデフォルトのメールアプリ）
• 一部のAndroidメールアプリ（対応状況はアプリによって異なります。Android 2.3は、Google FontsとAdobe Fontsが使用する@importメソッドに非対応です）
• Outlook.comやHotmailなどのMicrosoftメールアドレスを使用する場合を除く、AndroidのSamsung Email
• Outlook for Mac 2011および2016；Outlook for Mac 16.80はウェブフォントに対応していません

AndroidのGmailアプリを含むGmailでは、一般的にウェブフォントがサポートされていません。GmailはRobotoとGoogle Sansを独自のスタイルに含めているため、Gmailのデスクトップ版ウェブメールではこれらを表示できます。ただし、Gmailがメールから他のカスタムフォントを読み込めるという意味ではありません。フォールバックフォントを設定し、受信者が使用しているGmailアプリでメールをテストしてください。

メールアプリとバージョン別の詳細については、Can I emailのウェブフォント対応表をご覧ください。

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

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

• コンテンツ>メディアとブランド>ブランド：フォントを選択します。代わりにスタイルが表示される場合は、それを選択してフォントセクションを見つけてください。
• メールテンプレートエディターのスタイルを編集パネル
• テキストブロックでテキストを編集する際のテキスト書式設定ツールバー、またはテキストを含む他のブロック内のフォントコントロール
• サインアップフォームエディターのスタイルを編集パネル

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

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

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

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

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

画像のみで構成されたメールはデリバビリティに悪影響を及ぼす可能性がありますが、画像内のテキストとテキストブロック内のテキストを戦略的に組み合わせることで、ブランドに沿ったメールを作成できます。見出しと行動喚起（CTAs）にはカスタムのブランドフォントを選択し、本文テキストにはウェブセーフフォントを組み合わせて使用します。画像が読み込まれない場合でも受信者が利用できるように、重要な情報とメインのCTAはテキストブロックやボタンブロックにも入れておきましょう。

選択したテキストにはブランドフォントを含む画像を使用し、メールに画像を追加する際は必ず代替テキストを追加してください。次に、メール内の残りのテキストにウェブセーフフォントを適用します。これにより、画像が読み込まれない場合でもメールの残りの部分の可読性を保ちながら、ブランドフォントを使用できます。

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

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

その他のリソース