撮影距離に縛られない「比率」の魔術。
おでこ測定AIの数理モデル

1. 相対座標による「距離フリー」な比率計算アルゴリズム

Webツールで画像を扱う際、最大の課題は「カメラとの距離（解像度）」が毎回異なることです。昨日と今日で10pxの差があっても、それが髪の後退なのか、単にカメラに近づいたからなのかを判断できません。

この問題を解決するため、本ツールでは**顔全体の縦幅を分母とした比率算出**を採用しています。AI（MediaPipe）が検知した特定のランドマーク座標から、顔全体の長さとおでこの長さを同時に抽出。これらを相対的に除算することで、スマホを近づけても遠ざけても、常に一定の結果が得られる不変的なデータを導き出しています。

// 顔の構造を定義するインデックスから垂直座標を取得
const ptTop = landmarks[TARGET_TOP_INDEX];    // 生え際付近
const ptMid = landmarks[TARGET_MID_INDEX];    // 眉間
const ptBot = landmarks[TARGET_BOTTOM_INDEX]; // 顎先

// ユーザー入力による補正オフセットを加味した座標計算
const topY = (ptTop.y * canvasH) + topOffset;
const midY = (ptMid.y * canvasH) + midOffset;
const botY = ptBot.y * canvasH;

// 絶対ピクセルではなく、比率（%）として正規化
// ここに顔全体とおでこの相対距離を算出するロジックが入ります
const foreheadRatio = (foreheadDist / faceTotalDist) * 100;

2. requestAnimationFrameによるリアルタイム・キャンバス合成

AIは非常に優秀ですが、前髪の重なりや照明条件によって、生え際の認識が1～2%ズレることがあります。本ツールでは「AIにおまかせ」で終わらせず、ユーザーがスライダーで**ミリ単位の微調整**を行えるようにしました。

この際、スライダーを動かすたびに再描画を行うと、特にモバイル端末でUIが重くなります。そこで、ブラウザの描画更新タイミングに同期する requestAnimationFrame (RAF) を活用。入力イベントと描画処理を分離し、座標計算とテキストの焼き込みを毎秒60フレームで滑らかにプレビューさせることで、ストレスのない操作感を実現しています。

function requestRender() {
    if (renderRAF) cancelAnimationFrame(renderRAF);
    // ブラウザの描画周期に合わせてキャンバスを更新
    renderRAF = requestAnimationFrame(renderCanvas);
}

function renderCanvas() {
    // 1. 元画像の描画
    ctx.drawImage(originalImg, 0, 0, w, h);

    // 2. 測定ラインの合成（独自のシャドウエフェクト適用）
    ctx.strokeStyle = brandColor;
    ctx.shadowBlur = // 独自のチューニング値;
    // ここに動的なガイドライン描画処理が入ります

    // 3. リアルタイムでの比率テキスト焼き込み
    ctx.fillText(`${currentRatio}%`, textX, textY);
}

Developer's Note

「おでこの広さ」を測るという行為は、多くのユーザーにとって非常にセンシティブな瞬間です。だからこそ、このツールは徹底的に「安心」と「客観性」にこだわりました。

技術的には、WebAssemblyを用いたAIエンジンの採用により、画像データを1ピクセルも外部サーバーに送信せず、すべて手元のブラウザ内で解析を完結させています。また、単に「おでこが広い」と断じるのではなく、美容外科や骨格分析で用いられる「顔の黄金比（1:1:1）」という客観的な指標と照らし合わせることで、ユーザーが自分の状態を冷静に、かつポジティブに把握できるインターフェースを目指しました。

数式が導き出すのは冷たい数字かもしれませんが、それがユーザーの不安を解消し、次の一歩（ヘアケアやスタイルチェンジ）への自信に繋がれば、エンジニアとしてこれ以上の喜びはありません。