バーチャルメイクの裏側：肌質を殺さない「多層ブレンディング」とAIパーツ認識

1. 肌に馴染ませる「Soft-Light & Overlay」合成アルゴリズム

単にCanvasで色を塗るだけでは、肌のテクスチャが塗りつぶされ、不自然な「貼り付け感」が出てしまいます。本ツールでは、チークの描画において soft-light（ソフトライト）と overlay（オーバーレイ）を組み合わせる多層的なブレンディングを採用しています。

まず、放射状グラデーションを用いて中心から外側へ馴染む色面を作成し、soft-light モードで合成します。これにより、肌の明るさを維持したまま色が乗り、黒ずみを防ぎます。さらに、極めて低い透明度で overlay を重ねることで、ハイライト成分を補完し、内側から上気したような立体感を生み出しています。

// チークの多層合成ロジック
function drawCheek(ctx, x, y, radius, color, opacity) {
    const grad = ctx.createRadialGradient(x, y, 0, x, y, radius);
    grad.addColorStop(0, color);
    grad.addColorStop(1, 'transparent');

    ctx.save();
    // 1層目：ソフトライトで自然な発色を確保
    ctx.globalAlpha = opacity;
    ctx.globalCompositeOperation = 'soft-light';
    ctx.fillStyle = grad;
    // ここに円形描画の処理が入ります

    // 2層目：オーバーレイで鮮やかさと立体感を微調整
    ctx.globalAlpha = opacity * // 独自の微調整係数;
    ctx.globalCompositeOperation = 'overlay';
    // ここに再度円形描画の処理が入ります
    ctx.restore();
}

2. 解像度に依存しない「動的スケーリング」座標マッピング

スマホで撮った高画質な写真と、Webカメラの低解像度な画像では、唇や頬の「適切なサイズ」は全く異なります。本ツールでは、AIが検出した顔全体の幅やキャンバスサイズに基づき、エフェクトの半径やぼかし量を動的に算出しています。

例えば、チークの範囲は固定ピクセルではなく、キャンバスの横幅に対する radiusFactor（係数）として定義されています。これにより、どんな解像度の写真がアップロードされても、常に顔の大きさに適した「ふんわり感」が維持される設計になっています。

// 顔のスケールに合わせた動的計算
const cheekRadius = // 独自のチューニング値 * mainCanvas.width;

// リップの輪郭認識（MediaPipeのインデックスを利用）
const LIP_INDICES = [// 唇の輪郭を形成する特定の座標セット];

ctx.beginPath();
LIP_INDICES.forEach((idx, i) => {
    const point = landmarks[idx];
    if (i === 0) ctx.moveTo(point.x * w, point.y * h);
    else ctx.lineTo(point.x * w, point.y * h);
});
ctx.closePath();

3. WASMエンジンによる完全ローカル・プライバシー保護

自撮り写真は極めて機密性の高い個人情報です。本ツールでは MediaPipe の Face Landmarker モデルを WebAssembly (WASM) 経由でブラウザ内で直接実行しています。画像データをサーバーに1バイトも送信することなく、クライアントのGPU/CPUリソースのみで 5人分までの顔をリアルタイムに同時検知・加工する構成をとっています。

Developer's Note

一番こだわったのは「リップの輪郭の馴染ませ方」です。クッキリ描きすぎると不自然になるため、Canvasのパスを描いた後に filter = 'blur(1px)' を適用し、わずかに境界をぼかす処理を加えています。

また、iPhoneユーザーが「画像を保存できない」という問題を回避するため、CanvasのデータをDataURL化して隠し <img> に反映し、長押し保存を促すUI/UXの構築にも時間をかけました。ブラウザの制約の中で、ネイティブアプリに近い体験を提供することを目指したツールです。