メールテンプレートにカスタムフォントを追加する方法

read
Last updated at:

学習内容

Klaviyo Email のテンプレートエディターに新しいフォントを追加して、ブランドのスタイルに合わせてメールをカスタマイズする方法を説明します。また、カスタムフォントを使用するメリットとデメリット、受信箱プロバイダーによって幅広くサポートされているフォントについても案内します。

メールには、Google Fonts、Adobe Typekit、またはインポートした（セルフホストの）フォントを使用できます。ただし、カスタムフォントに対応している受信箱プロバイダーは限られ、一般的なクライアント（Gmail や Yahoo など）の多くは対応していない点に注意してください。

この記事では、メールテンプレートでカスタムフォントを使う方法に焦点を当てて説明します。 サインアップフォームにカスタムフォントを追加する方法については、サインアップフォームにカスタムフォントを使う方法をご覧ください。

主な用語

  • カスタムフォント
    Klaviyo エディターのデフォルト設定にないフォント
  • ウェブフォント
    外部から読み込む必要があるカスタムフォント
  • ウェブセーフフォント
    多くのデバイスでローカル保存されているため、外部から読み込まなくても表示できるフォント 
  • フォールバックフォント
    カスタムフォントに対応していない受信トレイで使用されるウェブセーフフォント

カスタムフォントへの対応と制限

カスタムフォントを使用することで、メールコンテンツとサイトの整合性を保ち、一貫性のあるマーケティングを行えるようになります。 ただし、ウェブフォント（外部ソースから読み込む必要のあるフォント）は、すべてのデバイスやメールクライアントで想定どおりに表示されるとは限りません。一方、Klaviyo のデフォルトフォントは、多くのコンピューターやデバイスにプリインストールされているため、どの購読者にも同じ顧客体験を提供できます。

ウェブフォントに対応しているメールクライアントには以下のものがあります。

  • Apple Mail
  • iOS Mail（iOS のデフォルトメールブラウザ）
  • Google Android（Android 2.3 は Google Fonts と Adobe Fonts が使用する @import メソッドに非対応）
  • Samsung Mail（Android 8.0）
  • Outlook for Mac

Gmail などの未対応プロバイダーによるカスタムフォントの扱い

Gmail（およびカスタムフォントに未対応の受信箱プロバイダー）の利用者には、カスタムフォントの代わりにフォールバックフォントが表示される可能性があります（フォールバックフォントはメールテンプレートで設定可能）。これを避けるには、ウェブセーフなカスタムフォントの使用を検討してください。これは、ウェブフォントへの対応とは関係なく、ほとんどのデバイスで利用可能です。 

ウェブセーフなフォントとデバイスごとの対応についてはこちら。

メールテンプレートエディターでカスタムフォントを追加する

メールテンプレートにカスタムフォントを追加する手順は以下のとおりです。

  1. テンプレート内のテキストブロックをダブルクリックするか、ブロックを選択せずにテンプレートのスタイルタブを開きます。
  2. [テキストと見出し] の項目にあるフォントのドロップダウンを開き、メニューの一番下にある「フォントを追加」をクリックします。
  3. 表示されるモーダルで、フォントのソースに応じて、Google Font、Adobe Font、またはフォントをインポートを選択します。
  4. ご希望のフォントタイプ（Google、Adobe、またはインポートしたフォント）に応じて、この記事の該当セクションの指示に従ってください。

メールテンプレートにフォントを追加すると、他のテンプレートやサインアップフォームでも利用できるようになります。

既存のカスタムフォントにフォントのバリエーションを追加する

カスタムフォントのバリエーションは、選択後に [メディア & ブランド] > [フォント] でいつでも編集、削除、更新できます。

既存フォントの更新

追加済みの Google カスタムフォント、またはインポート済みのフォントにバリエーションを追加する方法は以下のとおりです。

  1. Klaviyo で [コンテンツ] > [メディア & ブランド] を開きます。
  2. [フォント] をクリックします。
  3. フォントのなかから、編集したいフォントを見つけます。
  4. フォントの右側にある 3 点リーダーをクリックします。
  5. 表示されたメニューから [フォントを編集] をクリックします。
  6. 「選択中のフォントバリエーション：# 種類」をクリックすると、フォントバリエーションの一覧が表示されます。
  7. 追加したいバリエーションを選択してください。
  8. [保存] をクリックします。

アップロード後に Adobe のフォントにバリエーションを追加することはできません。これは、バリエーションが Typekit のリンクに組み込まれているためです。 

「この名前のフォントはすでに存在します」とエラーメッセージが表示された場合は、バリエーションの再追加を試みるのではなく、上記の [フォント] タブを開き、リストから既存バリエーションを探し編集してください。

フォントを削除する

  1. Klaviyo で [コンテンツ] > [メディア & ブランド] を開きます。
  2. [フォント] をクリックします。
  3. フォントのなかから、編集したいフォントを見つけます。
  4. フォントの右側にある 3 点リーダーをクリックします。
  5. [削除] をクリックします。

現在カスタムフォントを使用している Klaviyo のメッセージは、直ちにフォールバックフォントに変わります。フォントを再度追加すると、メールには再びカスタムフォントが使用されます。

Google のフォントを追加する

Google のフォントを追加する手順は以下のとおりです。

  1. 使用したい Google フォント名を入力します。
  2. フォールバックフォントを選択します。
  3. [フォントを追加] をクリックします。

Adobe のフォントを追加する

Adobe のフォントは、Adobe Fonts に契約しているユーザーのみが使用できます。 Adobe のフォントを追加するには以下の手順に従ってください。

  1. Adobe Fonts をクリックします。
  2. CSS アドレスを貼り付けます。アドレスは次の形式に従ってください：https://use.typekit.com/123ABC
  3. フォールバックフォントを選択します。
  4. [フォントを追加] をクリックします。

フォントをインポートする

フォントのインポート（セルフホストフォント）は、開発者のサポートを得られる場合にだけ利用することをお勧めします。フォントのファイルを直接 Klaviyo にアップロードすることはできません。開発チームのサポートがない場合は、希望のフォントに近いものを Google や Adobe のフォントの中から見つけることをお勧めします。

インポートしたフォントを使用する手順は以下のとおりです。

  1. フォントをお客様のサーバーでホストするか、フォントホスティングサービスをご利用ください。Access-Control-Allow-Origin ヘッダーを * に設定して、Cross-Origin Resource Sharing（CORS）を有効にし、受信者の受信トレイがフォントにアクセスできるようにしてください。CORS について詳細はこちら
  2. フォントのホストに成功したら、フォント追加のモーダル で [フォントをインポート] をクリックし、ホスティング URL をソースアドレスの項目に貼り付けます。
  3. フォントの名前、太さ、スタイルを適切なフィールドに追加します。
  4. フォールバックフォントを選択します。
  5. [フォントを追加] をクリックします。

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

どのタイプのカスタムフォントを選んでも、フォールバックフォントの設定が必要です。フォールバックフォントは、カスタムフォントに未対応のクライアントを利用している受信者に表示されます。利用可能なオプションから、カスタムフォントに似たスタイルのフォントを選択してください。 

フォールバックフォントのオプション

例えば、カスタムフォントに Poppins（Google フォント）を選び、フォールバックフォントとして Arial を設定した場合、受信者には次のように表示されます。

  • ウェブフォント対応ブラウザ（Apple Mail や iOS Mail）でメールを開いた受信者には、Poppins が表示されます。
  • ウェブフォント未対応ブラウザ（Gmail など）でメールを開いた受信者には、Arial が表示されます。

カスタムフォントを適用する

設定したカスタムフォントはあらゆるテキストに適用できます。例えば、テンプレート内の以下の場所から適用可能です。

  • テンプレート全体のスタイル 
  • ブロックのスタイル 
  • テキストブロック内の特定テキスト 
  • ボタンブロック、商品ブロック、テキストのあるその他のブロック

カスタムフォントをテキストブロックに適用する手順は以下のとおりです。

  1. フォントを適用したいテキストのブロックを選択します。
  2. フォントを適用したいテキストをハイライトします。
  3. ページ上部のドロップダウンからカスタムフォントを選択します。

カスタムフォントを適用する

その他のブロックタイプ、またはブロックやテンプレートのスタイルでは、該当するドロップダウンからフォントを選択してください。

スタイルタブでカスタムフォントを適用する

テーブルブロックと分岐ブロックでは、カスタムフォントはキャンバス（編集プレビューなど）には表示されますが、左側のパネルには表示されません。 左側のパネルには、カスタムフォントの代わりにフォールバックフォントが表示されます。

カスタムフォントをプレビューで確認する

テンプレートの準備ができたら、自分宛にメールを送信し、問題がないか確認してください。プレビューを送信するには、[プレビューとテスト] を開き、[テストを送信] をクリックしてください。複数の異なるデバイスでメッセージを開いてみて、受信者にどのように表示されるかを確認してください。または、Email on Acid のようなツールを使うと、より多くのデバイスでプレビューを確認できます。

その他のリソース

 

x
この記事は役に立ちましたか？
267人中113人がこの記事が役に立ったと言っています