「自分のサイトの入り口に、ちょっとした仕掛けがあったら面白いかも」
そう思ったことはありませんか？私はありました。
でも、いざ実装しようとすると「サーバー立てなきゃダメ？」「画像データを送るのはプライバシー的にどうなの？」「有料のAPIはちょっと……」と、意外と考えることが多いんですよね。
「AIに聞けばなんとかなりそうだし、わざわざ重厚な仕組みを組むほどでもない。いっそブラウザだけで完結するやつを自分で作っちゃおう」
というわけで、外部通信なし・HTMLに貼るだけで動く「顔認証埋め込みキット」を自作してみたので、その知見を共有します。
▼ツールとキットはこちらで公開しています。
1. なぜ「サーバー不要」にこだわったのか
一番の理由は 「気楽さ」 です。
- サーバーサイドの知識がなくてもHTMLに貼るだけで動く
- 画像をどこにも送信しないので、利用者のプライバシーを汚さない
- 静的サイト（GitHub Pagesとか）でもそのまま動く
これらを満たすために、中身は face-api.js (TensorFlow.js) を採用しました。ブラウザのパワーだけでリアルタイムに顔の特徴点を抽出しています。
2. 仕組みはシンプル
仕組みは至って単純。
- Webカメラの映像から顔の「特徴（顔記述子）」を抽出して数値化
- あらかじめ登録しておいた自分の「顔ID（数値データ）」と、今映っている顔を照合
- 誤差が一定以下なら「本人」と判定！
これだけです。数値データとして管理するので、写真そのものを保存する必要もありません。
3. 導入は「3ステップ」でサクッと
自分のサイトに導入する手順はこんな感じです。
ステップ1：キットの用意
ツールページで配布しているフォルダを自分のサーバー（またはローカル環境）にアップロードします。
ステップ2：自分の「顔ID」を登録
ツールページで発行した自分専用の顔ID（文字列）を、config.json にペタッと貼り付けるだけ。
ステップ3：HTMLに記述
あとは認証を表示したい場所にタグを置くだけです。
<script src="tf-face-auth-kit/face-auth-kit.js"></script>
<div id="tf-face-auth"></div>
これだけで、ポートフォリオやブログの入り口に「ちょっとした特別感」を添えることができます。
【こだわり】実装時に気をつけたこと
サクッと作ると言いつつ、実際に触ってみると「これだと使いにくいな」という点がいくつか出てきました。
ブラウザの負荷をどこまで許容するか
TensorFlow.js は強力ですが、モデルが重すぎると読み込みに時間がかかり、逆に頼りない印象を与えてしまいます。今回は精度と速度のバランスを考え、軽量な「TinyFaceDetector」モデルを採用して、低スペックなノートPCでも「ちょっと待てば動く」くらいの軽快さを目指しました。
「プライバシー」をどう信じてもらうか
「サーバーに送っていません」と口で言うのは簡単ですが、カメラを起動する以上、心理的な壁はあります。
そのため、通信が発生していないことをコードレベルで分かりやすくしつつ、UI上でも「ローカルで解析中」といったステータスを出すことで、ユーザーの納得感を高められるよう配慮しました。
UIの「親切さ」
派手な演出はあえて避け、「顔をどこに合わせればいいか」が直感的にわかるガイド枠や、認証成功時の控えめなフィードバックなど、日常的に使っていてストレスのない「ちょうど良さ」を意識しています。
4. おわりに
「顔認証」という一見難しそうな技術も、今のブラウザの進化を借りれば、個人でサクッと形にできる面白い時代だなと実感しました。
今回のキットを含め、**「少しでもほしいと思ったらとりあえず作ってみよう」**をテーマに開発している自作ツール群（現在140種類以上）を以下のサイトで公開しています。
「自力でもやれるし、AIに聞けばいいやという程度の課題」に、最短距離で答えを出す。そんなツール開発の裏側や、たまに出てくるニッチな製作物の知見を、これからも共有していこうと思います。