Edge WASMによるパーソナライズドヒーロー画像 2025 — ミリ秒でローカル適応

国内外の EC・メディアサイトでは、エッジロケーションでヒーロー画像をユーザー属性に合わせて差し替えるケースが増えています。ただし、サーバー側のテンプレートレンダリングやクライアントでの遅延ロードだけでは、LCP を悪化させずにパーソナライズを成立させることは困難です。本稿では、エッジ個別最適配信 2025 — CDN 最適化の落とし穴 を踏まえ、WebAssembly (WASM) を活用したミリ秒単位の差し替え手法を解説します。

TL;DR

• WASM ワーカーでテンプレートを事前コンパイルし、差分適用部分のみ JSON で受け渡す。
• 属性は 80〜120ms 以内に確定できるよう、ブラウザヒントと Edge KV を組み合わせてフェッチ回数を最小化。
• キャッシュキーを 3 層構造に分解し、スパイク時にも過剰バリアントを増やさない。
• 差し替え素材は ICC と SAFE AREA を統制し、ブランドカラーパレット健全性ダッシュボード 2025 と連携して逸脱を検知。
• AB テストは視覚差分と KPI でダブルチェックし、Edge KV 内の rollout ratio を段階的に更新。

アーキテクチャ概要

| レイヤー | 役割 | 主な技術 | 運用ポイント | | --- | --- | --- | --- | | Client Hint | Sec-CH-Prefers-Color-Scheme、Sec-CH-Lang | HTTP/3 Early Hint | 先行送信でペーストホルダを決定 | | Edge Fetcher | KV + GeoIP | Cloudflare Workers / Fastly Compute@Edge | 100ms 以内に属性を取得 | | WASM Renderer | テンプレート差分適用 | Rust + wasm-bindgen | ICC の焼き込みと余白確保 | | Delivery Cache | Tiered caching | Cache key: locale:segment:variant | バリアントの爆発を抑制 | | Telemetry | Rollout 記録 | Logpush / OpenTelemetry | SLO 逸脱と KPI 変動を可視化 |

Edge での WASM 実行は CPU 時間に制限があるため、<200ms で 4K 級画像を生成するには差分レンダリングが肝要です。ベースとなる PSD/AVIF を 高度変換 (AVIF/WebP) で 9:1 に圧縮し、テキストレイヤーやアクセントパーツのみを SVG/PNG で差し替えます。

use image::{DynamicImage, RgbaImage};
use wasm_bindgen::prelude::*;

#[wasm_bindgen]
pub fn render_hero(base: &[u8], layer: &[u8], tone: &str) -> Vec<u8> {
    let mut hero = image::load_from_memory(base).expect("base");
    let overlay = image::load_from_memory(layer).expect("overlay");
    let mut canvas: RgbaImage = hero.to_rgba8();

    // 色調補正 (例: "night" 用に露光を下げる)
    if tone == "night" {
        for pixel in canvas.pixels_mut() {
            pixel.0[0] = (pixel.0[0] as f32 * 0.92) as u8;
            pixel.0[1] = (pixel.0[1] as f32 * 0.92) as u8;
            pixel.0[2] = (pixel.0[2] as f32 * 0.95) as u8;
        }
    }

    image::imageops::overlay(&mut canvas, &overlay.to_rgba8(), 96, 120);
    let mut buf: Vec<u8> = Vec::new();
    hero.write_to(&mut buf, image::ImageOutputFormat::Avif).
        expect("encode");
    buf
}

WASM のバイナリサイズは 400KB 未満に抑え、コンテンツネゴシエーションで AVIF/WebP を返し分けます。差し替え対象レイヤーは プレースホルダー生成 で初期表示のぼかしを用意し、LCP 測定時にも安定させましょう。

属性確定のタイムライン

1. 0〜10ms: TLS ハンドシェイク完了、Early Hints でプレースホルダー CSS を配信。
2. 10〜40ms: cookie と Sec-CH-Prefers-Color-Scheme から推定セグメントを取得。Fallback で default。
3. 40〜70ms: KV から直近の閲覧カテゴリを取得。GeoIP が EU の場合は GDPR 準拠セグメントに限定。
4. 70〜120ms: AB テストのロールアウト比率を参照し、Edge KV に結果を書き戻し。
5. 120〜160ms: WASM レンダリング→AVIF 圧縮、Cache-Status でオリジン回避を確認。

キャッシュキー戦略

cache-key = `${locale}:${segment}:${hero_version}`

locale        -> ja, en, fr ...
segment       -> visitor, returning, vip ...
hero_version  -> 2025Q3a, 2025Q3b ...

• Locale: next-intl の判定を踏襲。
• Segment: 8 種類以内。特例が必要な場合は段階的ロールアウト。
• Version: Git タグと連動。差分を git diff で追跡し、ロールバックも容易に。

キャッシュポイズニングを避けるため、パーソナル識別子はキーに含めません。必要に応じて、Vary: Sec-CH-Prefers-Color-Scheme, UA-Model を追加します。

視覚品質とブランドガードレール

• ICC の保持: base アセットは P3/CMYK を保持し、エッジ側で sRGB へダウングレード。
• テキストレンダリング: Overlay 部分は SVG で管理し、フォントは WOFF2 のサブセットを Base64 埋め込み。
• 安全領域: 動的に差し替える CTA が Safe Area を超えないよう、サムネイル安全領域ガイド の閾値を WASM コードへ組み込み。

// 擬似コード: CTA が 48px 以上余白を確保しているかを判定
if overlay.bounds().right() > hero.width() - 48 {
  return Err("cta overflow");
}

KPI モニタリング

| 指標 | 目標値 | 取得方法 | | --- | --- | --- | | LCP (p75) | 2.4s 以下 | CrUX + RUM | | personalization coverage | > 85% | Edge KV ログ | | rollback MTTR | < 5 分 | Incident Runbook | | ΔE2000 (brand color) | < 2.5 | ブランドカラーパレット健全性ダッシュボード 2025 |

Edge KV に rollout_history を残し、feature-flags%2Fhero の値を変更すれば即座にロールバックできます。RUM (Real User Monitoring) で data-segment 別の LCP/CLS を送出し、セグメントごとの悪化を検知しましょう。

セキュリティと法令対応

• PII 非保持: セグメント情報は匿名化した bucket_id と紐付け、GDPR の「正当な利益」を明示。
• 監査ログ: 差し替え成功/失敗を S3 + Athena に保存し、30 日×7 年 保持することで金融・保険業界にも対応。
• 合意管理: Consent-Policy をヘッダーで渡し、同意ステータスが未取得の場合は default クリエイティブにフォールバック。

ロールアウト手順 (サンプル)

stages:
  - name: canary
    traffic: 5%
    metrics:
      lcp_p75: <= 2500
      error_rate: <= 0.2
  - name: ramp
    traffic: 30%
    metrics:
      personalization_delta: >= -2%
  - name: full
    traffic: 100%
    metrics:
      ab_uplift: >= +3%

ロールアウト時は 画像のA/Bテスト設計 2025 — 画質・速度・CTRを同時に最適化 のダッシュボードと連動し、視覚差分のスクリーンショットも Pull Request に添付します。

Edge WASM を用いたヒーロー画像のリアルタイム生成は、LCP や Core Web Vitals を維持しながらパーソナライズを実現する有効なアプローチです。テンプレートとデータのガバナンスを徹底し、階層化されたキャッシュ戦略とロールアウト基準を整えることで、ブランド一貫性と高速表示を両立できます。