絶対に失敗できないキャンペーンページの高速かつ安全な開発、WINTICKET × microCMS の開発事例

2025年8月22日に行われた microCMS Meetup 2025での 株式会社WinTicket加藤様の発表資料です。
https://microcms.connpass.com/event/358603/

イベントアーカイブ（YouTube）
https://www.youtube.com/live/H8KeF08G3Gw?si=Kj8M7N4cwmyfCRVz&t=1118

Transcript

1. 絶対に失敗できないキャンペーンページの 高速かつ安全な開発、 WINTICKET × microCMS の開発事例 株式会社WinTicket 加藤 零 2025/08/22 microCMS Meetup 2025
2. 加藤 零 - kato, rei a 2023年 株式会社サイバーエージェント新卒入8 a 株式会社 WinTicket、Web チームマネージャF a # Web Speed Hackathon 2024 作問者 @cut0_ @cut0
3. 01 WINTICKET について 02 キャンペーンについて 03 microCMS による運用 04 負荷対策 05 下書き入稿機能の活用 06 まとめ
4. WinTicket について C 公営競技ネット投票サービV C 競輪/オートレーV C 2019年4月リリーV C 市場シェア No.9 C Web App、Flutter App の展開 #React #Fastly #Go #Kubernetes #Flutter #Cloud Run #Google Cloud #TypeScript #TanStack Query
5. キャンペーンについて WINTICKET では定期的にキャンペーンが実施される ケイリンくH 6 ABEMA の競輪番組と連7 6 演者が予想を的中させると、ポイントを獲得できる「くじ」を引ける スピードくH 6 ユーザーが投票するたびにリッチな演出が発生する「くじ」を引ける
6. キャンペーンについて キャンペーン期間中に LP やモジュールの表示が切り替わる ※下図はキャンペーンの一例
7. キャンペーンについて ユーザーが引いたくじの結果によって演出が異なる 超ケイリンくじが的中！ このポイントはそのまま投票に利用できます さらに、当選結果をシェアすると 抽選で500pt当たる！ スーパー大当たり スーパー大当たり 200pt シェアする とじる 期間中にくじの座組切り替わる GW キャンペーン 当選ポイントによって動画演出が変化する 年末キャンペーン
8. これらのキャンペーンを実現するために 次のような条件を満たす必要がある 下書き入稿機能の活用
9. キャンペーンについて コンテンツ管理の集約 膨大な静的コンテンツを管理 → コンテンツ管理を集約できていることが理想 事業に直結するキャンペーン →各職域のメンバーが適切な権限によりコンテンツにアクセスできる状態が理想
10. キャンペーンについて 開発工数の確t v 失敗できないキャンペーンなので、不要なオペレーションを削減し充分な開発工数を 確保する必要あり 負荷対V T App ユーザーも WebView を経由して LP にアクセスするため、全ユーザーがアクセ スする前提での対策が必要 耐障害# v 表示に誤りがあった場合、瞬時に修正を反映可能な状態
11. キャンペーンに関連する全コンテンツを microCMS で管理する意思決定 これらの条件を加味したうえで キャンペーンについて
12. microCMS による運用 LP に関する全コンテンツを microCMS で管理 LP のコンテンツを管理 くじの演出動画を管理 LP 内に表示する規約を管理
13. microCMS による運用 下記のオペレーションを大幅削減 Q ビジネスサイド → エンジニアへの文言変更依7 Q デザイナー → エンジニアへの画像差し替え依頼 他職種の進行状態を加味せず、エンジニアの開発が進行可能に！
14. microCMS による運用 WinTicket Web では静的な画像をリポジトリ内で管理している → レスポンシブ画像を実現するため、画像を 1x, 1.5x, 2x に書き出していた microCMS 自体が入稿した画像を編集するための API を提供 → 各画像サイズに書き出す作業を解消 (参考s ‰ https://document.microcms.io/image-api/introduction
15. microCMS にかかる負荷に問題はないのか？ 負荷対策 ところで...
16. 負荷対策 microCMS も Cloud Front による CDN キャッシュを利用している y https://document.microcms.io/manual/data-amoun@ y https://help.microcms.io/ja/knowledge/how-to-use-content-api-caching
17. 負荷対策 ただし下記の制約がある d コンテンツの転送量毎に課金が発E d GET API のレートリミットが 60回 / 1秒 (※オリジンに到達した場合) 大抵の場合は問題ないが、 失敗できないキャンペーンという特性上対策しておきたい... → microCMS の前段にプロキシサーバを設置
18. 負荷対策 microCMS のエンドポイントを隠蔽 Fastly を前段に設B 4 プロキシサーバ側 でも CDN キャッシュを活用 VCL を活ƒ 4 プロダクト要件に合わせた柔軟な キャッシュ戦略を実現 WINTICKET 側で管理
19. 負荷対策 下図のようなフローにより、プロキシサーバとの通信に規約を提供 Proxy Repository Web Repository GitHub Packages install publish Fastify を利用したサーバーを構“ Ÿ @sinclair/typebox を利用することで各エンドポイン トのスキーマを定‡ Ÿ Fastify のバリデーションに各スキーマを適˜ Ÿ main ブランチへの push を契機に各スキーマを tsc でビルドしたものを GitHub Packages に publish
20. プロキシサーバーを構築することで 高負荷が予想されるキャンペーンを乗り切った 負荷対策
21. 日時に応じたコンテンツの切り替えがある以上、 ページの表示を事前に本番環境で確認したい... 下書き入稿機能の活用
22. 下書き入稿機能の活用 microCMS は下書き状態でコンテンツを入稿することが可能 API Key の単位で権限を制御できる 左図のように下書き入稿されている コンテンツ用の API Key が作成可能
23. 下書き入稿機能の活用 WINTICKET には「特定のリクエストヘッダ」を付与 することで、アクセス可能な DarkCanary が存在 Cloud Load Balancing の URL Mapping 機能を利用 することで、向き先の Cloud Run サービスを設定 平時の開発では本番に機能をリリースする直前に動作 検証を実施するために利用 (参考} Œ https://developers.cyberagent.co.jp/blog/archives/41382ˆ Œ https://developers.cyberagent.co.jp/blog/archives/41416/
24. 下書き入稿機能の活用 下記の構成を採用することで、事前に本番環境で LP を確認可能に 本番用 API キーを利用した実装 下書き用 API キーを利用した実装
25. 下書き入稿機能の活用 WINTICKET の Canary 環境と microCMS の下書き入稿を組み合わせることで 本番環境でのコンテンツ確認を実現
26. まとめ 負荷対G " microCMS の前段にプロキシサーバを構築することで、高負荷が予想されるキャン ペーンを乗り切った 運用™ " microCMS にコンテンツを集約することで、不要なオペレーションを削減し、適切な 権限に基づいたコンテンツアクセスを実現 障害対G " WINTICKET Web の Dark Canary と microCMS の下書き入稿を組み合わせること で、本番環境での事前確認を可能に
27. ご清聴ありがとうございました。