React Emailを活用した自動メール配信で、アプリの休眠ユーザーを再訪させる

こんにちは、Prism Japanでエンジニアを担当している宇田川です。
React Emailを活用したメールの自動配信を行うマーケティング施策について紹介したいと思います。

マーケティング施策において、直面していた課題

Prism Japanは、2022年8月にローンチされ、サービス開始当初から、様々なマーケティング施策を通じてユーザーを獲得してきました。しかし、一度獲得したユーザーが継続的にサービスを利用し続けてもらえるわけではありません。サービス開始から約2年半が経過しましたが、依然として休眠ユーザーが増加傾向にあります。

この問題に対処するため、プッシュ通知による再訪施策を実施していましたが、いくつか課題に直面しました。

• 通知設定をオフにしているユーザーには、プッシュ通知は届かない。
• 再訪を促すプッシュ通知を配信しても、アプリをアンインストールしているユーザーには届かないため、狙った効果を得られない。

実際、プッシュ通知の許諾率は約48%にとどまっており、この許諾率と、アンインストール済みユーザーを考慮すると、通知が届くユーザー数は、かなり絞られてきます。さらに、他のアプリからの通知もあるため、他の通知に埋もれがちです。このようにプッシュ通知で行える再訪施策の効果には限界がありました。

一方で、会員登録時にメールの登録をお願いしているのですが、こちらで登録されたメールの許諾率は、約90%と非常に高い水準を維持しています。アプリを削除していても、退会していないユーザーにはメールを届けられるため、再訪施策に適したマーケティングチャネルです。

しかし、運用面を考えるといくつか課題がありました。

まず、マーケティング担当のリソースが限られており、施策立案からSNS運用まで幅広い業務を、一人で担当している状況でした。メールのコンテンツ制作においては、ランキングの手動集計や適切な画像選定、レイアウト設計などに、工数が多く必要となります。このように、マーケティング担当のリソースを考えると、頻繁な配信が困難です。そのため、効果的なマーケティング手段と認識しつつも、頻度高くメール配信を行うことは、運用負荷を考えると現実的ではありませんでした。

メールの作成を自動化するために、React Emailを使うことに

そこで「メールの作成から配信までを自動化できないか」という発想が生まれました。

コンテンツに表示する情報を自動的に収集し、メールコンテンツを自動で作成し、スケジュールされた日時に決められたレイアウトで自動的に配信できる仕組みを構築できれば、限られた人的リソースの中でも、ユーザーに合ったメールを送信できます。

しかし、HTMLメールを自動的に作成する処理を考える際に、エンジニアとして、実装方法に頭を悩ませました。

HTMLを直接操作するような処理を実装してしまうと、再利用性が低く、受信するメーラーによって表示が異なるといった問題も発生します。そして、将来的に、コンテンツの差し替えが発生することを見据えると、再利用性が高く、新しいコンテンツを柔軟に追加できるような実装が必要です。

このような悩みを抱える中で発見したのが「React Email」というライブラリです。

この「React Email」には、下記のような特徴があります。

• JSXでHTMLメールを作成できる
• リアルタイムのプレビュー機能
• コンポーネント化による高い再利用性

特に重要なのは、再利用可能なコンポーネント化によって、新しいコンテンツの作成が必要になった際に、容易に追加できる点です。また、Reactで記述されていることにより、掲載内容の動的な差し替えも容易になります。このような利点は、ユーザーの行動や興味に基づいて、コンテンツを差し替えることにより、パーソナライズされたコンテンツの提供を、低コストで行うことができます。全ユーザーに対して、同一のコンテンツを一斉配信するのではなく、各ユーザーの関心に合わせたコンテンツ配信を行うことで、高い再訪率やエンゲージメント向上が期待できます。

React Emailを利用することで、メール配信施策における課題を効果的に解決できる見通しが立ち、効率的なユーザー再訪施策の実現に向けて、施策を進めることができました。

React Emailを使ったHTML生成

ここからは、実装部分について触れていきたいと思います。
実装としては、メールのHTMLを生成する部分に、React Emailを利用しています。
React Emailのrender関数を使って、JSXからHTMLを生成する流れを採用しました。

まずは、以下のようなコンポーネントを作成します。

import React from "react";

const AppCheckSection = () => {
  return (
    <div style={{ padding: "20px 0", borderBottom: "1px dashed #cccccc" }}>
      <div>
        <p>
          詳しいスポットの情報やアクセス情報はアプリで確認してみましょう。
          <br />
          他にも、アプリではあなたにだけのおすすめスポットを掲載中！
        </p>
        <a
          style={{
            padding: "10px 70px",
            background: "rgb(17,17,17)",
            borderRadius: "5px",
            textAlign: "center",
            textDecoration: "none",
            color: "#fff",
            display: "inline-block",
            marginBottom: "10px",
          }}
        >
          <span>アプリをチェック</span>
        </a>
        <br />
        <a href="https://deeplink.sample.hogehoge/">
          うまく開かない方はこちら
        </a>
      </div>
    </div>
  );
};

export default AppCheckSection;

このように、メールを構成するための、コンポーネントを作成していきます。

その後、親コンポーネントで、作成したコンポーネントを組み合わせるだけで、メールのテンプレートが完成します

import React from 'react';
import AppCheckSection from '../shared/AppCheckSection';
import FooterSection from '../shared/FooterSection';
import RankingHeaderSection from './RrankingHeader';
import RankingItems from './RankingItem';

export type RankingContents = {
  imageURL: string;
  name: string;
  catchPhrase: string;
};

export type WeeklyRankingProps = {
  areaName: string;
  contents: RankingContents[];
};

const WeeklyRanking: React.FC<WeeklyRankingProps> = ({ areaName, contents }) => {
  return (
    <div style={{ backgroundColor: '#f4f4f4', padding: '20px 0' }}>
      <div>
        <RankingHeaderSection />
        <RankingItems areaName={areaName} contents={contents} />
        <AppCheckSection />
        <FooterSection />
      </div>
    </div>
  );
};

export default WeeklyRanking;

そして、メールHTMLの生成には、React Emailのrender関数を使用します。

fetchRegionalRankingDataを用いて、住んでいる地域ごとに、異なるコンテンツ情報を取得して、メールを作成することができます。

import { render } from '@react-email/render';
import { WeeklyRankingEmail } from '../emails/weekly-ranking';
import { fetchRegionalRankingData } from './ranking-service';

export async function generateWeeklyRankingEmail(areaName: string): Promise<string> {
  const contents = await fetchRegionalRankingData(region);
  
  const htmlContent = await render(await WeeklyRanking({ areaName, contents }));  
  return emailHtml;
}

render 関数で生成された HTML は、SaaS サービスの API を介して送信されるメールの本文として使用されます。

バッチ処理では、EventBridge によってスケジュールされたタイミングで ECS が起動し、メールの作成および送信処理が実行されます。

実際に送信されるメールは、以下のような内容になります。

画像では、関東地域に絞られた内容が表示されていますが、ユーザーが設定した地域に応じて内容を柔軟に変更できる仕組みを実装しています。なので、居住地域が、大阪であれば関西地方のランキングがメールとして配信されます。

そして、React Emailでは、プレビュー機能があり、普通にReactで開発するときと同じように、メールの実装を進めることができます。プレビューなしで実装することは、かなり難易度が高いので、この機能は非常に助かります。この機能を活用し、マーケティング担当の方とレイアウトについて、適宜確認しながら実装作業を進められました。

コンポーネント化により、ランキング以外にもフッターやアプリ起動促進セクションなど、様々な要素を再利用可能なパーツとして構成しました。これにより、新規コンテンツの作成においても既存コンポーネントを組み合わせることで、効率的かつ一貫性のあるメール配信が可能になっています。

スケジューリングされたメール配信では、同じようなコンテンツの繰り返しになってしまい、ユーザーの興味低下や、最悪の場合は迷惑メールに登録されてしまい受信を拒否されてしまう可能性があります。自動化されたシステムであっても、ユーザーの関心を継続的に引きつけるコンテンツ提供が求められるはずです。

このような状況を踏まえると、素早く提供するコンテンツの変更が出来るように、コンポーネント化による再利用性の高い設計が、重要だと考えています。

メールを自動配信した効果

React Emailとバッチ処理による自動メール配信を開始した結果、配信した日(2月22日)の付近は、インストール数が増加していました。これは、メールを見た休眠ユーザーが、アプリに興味を持ち、再インストールを促すことができたと考えています。また、メールを配信日付近のDAUが大きく上昇し、メール自動配信の施策開始以降のDAUは持続的に増加傾向を示していました。

このように、アプリをアンインストールしたユーザーも含む、休眠ユーザーの再訪を促すことに成功しました。

まとめ

React Emailを活用した自動メール配信により、人の手を介さずに休眠ユーザーの掘り起こしや、DAUを増加させることに成功しました。

アプリ開発で休眠ユーザーが多く、マーケティングリソースに限りがあるという課題は多くのマーケティング担当者が頭を抱えているのではないでしょうか。React Emailを利用したメール作成の自動化は、メールのコンテンツ内容を毎週考える負荷を軽減し、効率的で、効果的なマーケティング活動をすることができます。さらに、コンテンツの改善を継続的に行い、それを素早くリリースするためにも、「React Email」は非常に有用だと感じました。

また、コミュニケーション手段が多様化した現代であっても、ユーザーの興味に沿ったコンテンツを届ければ、マーケティングチャネルとして、メール配信は有効に機能することがわかりました。

再訪ユーザーが伸び悩んでいたり、休眠ユーザーの掘り起こしでお悩みの方は、ぜひこのアプローチを検討してみてはいかがでしょうか。