AIバーチャルメイク：Canvasとブレンディングによる自然な質感の再現

このツールの入力から出力まで

現行コードの確認日：2026-10-12

入力

人物写真、リップ色、濃さとグロスの強さを入力します。

処理

唇のランドマークでマスクを作り、multiply・soft-lightなどで色を重ね、ハイライトを加えます。

出力

最大10人を検出する設定で、入力は長辺1500px以下に縮小し、JPEG品質0.95で保存します。

まず確認する点：グロスは写真へ加える表現です。唇の端や歯の境界を確認し、実際の化粧品の発色や光源条件の予測とは分けて考えます。

仕上がりの例

人物の唇に、赤いリップの色とつやを加えた例です。

画像を拡大

サンプルにはAIで生成した架空の人物画像を使用しています。

加工前・加工後

閉じる

掲載画像はサイトにある既存の公開作例です。保存済みの資料ではAIで作成した架空の人物・手の画像を使用しています。今回の確認日が、この作例を実行した日を表すわけではありません。

保存済み検証記録の条件を見る

資料の種類は「ツールの出力画像を保存した記録」です。公開作例と保存済み記録で素材や色などが異なる場合があるため、下の数値は保存済み検証記録の条件として読んでください。

記録の入力画像

1788×2400px (JPEG)

記録の出力画像

1117×1500px (JPEG)

保存済み記録の主な操作・出力条件

画面の項目	記録の値	現行コードの初期値・範囲
色	#e50914	初期値 #e50914
発色（不透明度）	60	初期値 60 ／ 範囲 0〜100
質感（マット 〜 グロス）	30	初期値 30 ／ 範囲 0〜100

記録では「この画像で保存へ進む」から完成表示へ進んでいます。初期値と記録値を比べてから、効果を1項目ずつ変えると作用を確認しやすくなります。

資料ファイルの作成日は実行日として扱っていません。個別端末の処理速度や、ほかの写真に対する検出・加工の精度を測定した資料でもありません。

実装の確認箇所：src/pages/ai/face-lan/lip-tester/index.astro。以下のコード抜粋と出力条件は、この本番実装に基づいて説明します。

仕組みを読み進めるときは、MediaPipeの顔ランドマーク（顔の点を使う描画と変形）、Canvas APIと画像処理（画像寸法、drawImage、画素と透明度の扱い）が参考になります。

1. 歯を汚さない「デュアル・パス」マスキング

単に唇の領域を塗りつぶすだけでは、口が開いている際に「歯や口内」にまで色が乗ってしまい、非常に不自然な仕上がりになります。この問題を解決するため、本ツールでは外側の輪郭（Outer Lip）と内側の輪郭（Inner Lip）の2つのパスを個別に取得し、Canvasのdestination-out（くり抜き）処理を適用しています。

さらに、マスクの境界線にわずかなblur（ぼかし）を加えることで、デジタル的な硬さを取り除き、肌とリップカラーを自然に馴染ませています。

唇の外側を塗り、内側を抜くマスク処理の例です。outerとinnerはCanvas座標で作成済みのPath2Dを渡します。

function drawLipMask(ctx, outer, inner) {
  ctx.save();
  ctx.fillStyle = '#ffffff';
  ctx.filter = 'blur(2px)';
  ctx.fill(outer);
  ctx.globalCompositeOperation = 'destination-out';
  ctx.filter = 'blur(1.5px)';
  ctx.fill(inner);
  ctx.restore();
}

2. 楕円形のグロス・ハイライトとテクスチャ合成

ベタ塗りの色は唇の「しわ」や「ツヤ」といった立体的な情報を消し去ってしまいます。本ツールでは、グロス（濡れ感）を再現するために、唇の幅に連動した「動的な扁平楕円ハイライト」を計算・生成しています。

最も重要な工夫は、リップカラーを乗せた後に、元の画像のテクスチャ（唇のしわ）をoverlay（オーバーレイ）およびhard-light（ハードライト）モードで再合成している点です。これにより、色を変えながらも唇本来のリアルな質感を維持することができます。

3. WASMによる完全ローカルAI処理

顔写真は極めてセンシティブな個人情報です。本ツールは、MediaPipeのAIモデルをWebAssembly (WASM) 技術を用いてブラウザ上で直接実行する構成をとっています。画像データをサーバーに一切送信することなく、クライアントサイドのGPUを活用して高速な推論を行うことで、写真をアップロードせずに解析する構成です。モデルの読込と推論にかかる時間は端末や通信環境によって変わります。

出力の仕様と確認する点

色の濃さはmultiplyとsoft-lightによる色合成の透明度を変えます。グロスはハイライトの幅・明るさと元写真の重ね方を変える設定で、光源方向や唇の法線を物理計算するものではありません。

内側の輪郭を抜いていても、推定がずれると歯や肌へ色が乗る場合があります。口を大きく開いた写真、横顔、小さく写った顔は特に完成画像を拡大して確認してください。

最大10人を検出する設定で、入力は長辺1500px以下に縮小し、JPEG品質0.95で保存します。顔ごとの別色指定や、化粧品の商品色との一致判定はありません。