ECサイトにピアス・アクセサリーのAIバーチャル試着を入れる方法

ピアスやアクセサリーのECで一番多い問い合わせは「つけたらどう見えるか」「どのくらいの大きさか」です。写真とサイズ表記だけでは答えきれないので、返品理由の上位に居座り続けます。

AIバーチャル試着は、この2つに商品ページ上で答える仕組みです。この記事は、試着とは何か・無料でどこまで確認できるか・自分のプラットフォームではどう入れるかを1ページにまとめたものです。自店（Adelina Style）で数百SKUを運用してきた実際の画面で説明します。

AIバーチャル試着とは

AIバーチャル試着は、お客様のカメラ映像から耳や顔の位置を検出して、商品の画像をその場に重ねて表示する機能です。DokimiAIの場合、次の3点が特徴です。

ブラウザの中で完結します。 顔の検出も描画もお客様の端末で行われ、カメラ映像がサーバーへ送られることはありません。アプリのインストールも不要で、商品ページのボタンを押すとその場でカメラが起動します。

映るのは実物の商品です。 生成AIが「それらしい画像」を作るのではなく、店が登録した商品の透過PNGをそのまま重ねます。色・形・質感は商品写真と同じものが出ます。

大きさは実寸（mm）で決まります。 カメラ映像から検出した耳の大きさと、店が登録した商品の高さ（mm）から、画面上で何ピクセルに描くかを毎フレーム計算します。近づいても遠ざかっても、耳との比率は変わりません。

仕組みの詳細は「ピアス試着で「実寸」が重要な理由」に書いています。カメラ映像が外に出ない理由は「AI試着とプライバシー｜カメラ映像がサーバーに送られない仕組み」で、実際の通信を開発者ツールで見ながら確認しています。

無料で試すには

導入を決める前に、順番に確認できます。どれも費用はかかりません。

1. 自分の商品画像で試す。 dokimiai.io/try/ に透過PNGを1枚アップロードすると、その場でカメラ試着が動きます。アカウント登録も要りません。手持ちの商品画像が試着に耐えるかは、ここで数分で分かります。

2. Freeプランでストアに設置する。 アカウントを作れば、ピアス試着はFreeプランのまま商品ページに設置できます。商品数にも試着回数にも上限はありません。 カタログ全部にピアス試着を出しても月額0円です。

3. 効果を見てから有料を検討する。 有料プランで増えるのは帽子・背景・アバターといった演出と、「Powered by DokimiAI」表記の非表示です。ピアス試着が売上に効いているかどうかは、無料のまま判断できます。 効いていないなら有料にしても効きません。

費用と手間の内訳は「小規模アクセサリーECがAI試着を導入するコストの現実」にまとめています。結論だけ先に言うと、かかるのはお金より時間で、時間の大半は画像の準備です。

Shopify／WooCommerce／PrestaShop／その他の入れ方

入れ方はプラットフォームによって違いますが、やることは共通で3つです。①試着の仕組みをサイトに入れる ②商品ごとに透過PNGと実寸を登録する ③商品ページで確認する。違うのは①のやり方だけです。

Shopify

Shopify App Store から DokimiAI をインストールし、アプリ内の Try-On Images で商品ごとに画像と実寸を登録します。最後にテーマエディタで商品テンプレートに App Block を置けば、試着ボタンが出ます。

画像は Shopify管理画面の「コンテンツ > ファイル」にアップロードしたURLを使ってください。試着は画像をブラウザのキャンバスに描くため、画像の置き場所が他サイトからの読み込みを許可している必要があります（CORS）。Shopifyのファイルはこの条件を満たします。

手順の全体は「ShopifyにAI試着を導入する方法」、商品登録の実務は「Shopifyで試着対象の商品を設定する」にあります。

WooCommerce / WordPress

一番簡単なのがこれです。WordPress管理画面の「プラグイン > 新規追加」で DokimiAI を検索してインストール・有効化するだけで、商品編集画面に試着のボックスが増えます。APIキーもサーバー設定も要りません。

画像はメディアライブラリのままで構いません。同一サイト内なので、外部ホストで起きる読み込み制限を気にせずに済みます。有効化しても「試着ON」にした商品にだけボタンが出るので、本番サイトにそのまま入れて大丈夫です。

詳細は「WooCommerceにAI試着を導入する方法」と「WooCommerceで試着対象の商品を設定する」へ。

PrestaShop

PrestaShop は専用モジュール（ZIP）を配布しています。バックオフィスの「モジュール > モジュールをアップロード」でZIPを入れ、APIキーを設定して Verify を押すと有効になります。あとは商品ごとに試着をONにするだけです。PrestaShop 8 / 9 に対応しています。

モジュールの入手と手順は PrestaShop 向けページ（英語） にあります。日本語版のページは準備中で、日本語での導入サポートはお問い合わせから受け付けています。

その他のECサイト（BASE・STORES・カラーミー・EC-CUBE・自作）

専用アプリやプラグインが無いプラットフォームでも、HTMLに1行足せるサイトなら入ります。

1. console.dokimiai.io にメールアドレスで登録（パスワード不要・無料）
2. お店のドメインを登録する（登録したドメイン以外からは動きません）
3. 商品をSKU・色・画像URLで登録する
4. 出てきた設置コードを貼る——scriptタグはサイト全体で1回だけ（フッター推奨）、ボタンは商品ページに1つずつ

画像はお店のサーバーやCDNに置いたまま、URLだけを登録します。DokimiAIが画像を預かることはありません。SKUと色名は英小文字・数字・ハイフン・アンダースコアのみです。

詳しくは「Shopify・WooCommerce以外のECサイトにAI試着を導入する方法」へ。

準備するもの：透過PNGと実寸（mm）

プラットフォームが何であれ、店側が用意するのはこの2つだけです。ここが試着の出来をほぼ決めます。

透過PNG（色ごとに1枚）

背景を透過したPNGを、色のバリエーションごとに1枚用意します。白背景のPNGはエラーにならずにそのまま通り、耳に白い板が乗ります。登録前に必ず透過を確認してください。

商品の上下に余白が残っていると、その余白込みで大きさが解釈されて商品が小さく描かれます。余白は切り詰めてください。撮影条件から作り方までは「試着用の背景透過PNGの作り方」にまとめています。

実寸＝高さ（mm）

登録するのは商品の**高さ（mm）**1つだけです。装着したときに縦になる方向の長さで、幅は画像の縦横比から自動で決まります。

入れないと既定の21mmで描かれます。 スタッドには大きすぎ、大ぶりのフープには小さすぎる値なので、1商品ずつ入れてください。サイズ展開がある商品はサイズごとに登録でき、お客様がサイズを切り替えると耳の上の大きさも追従します。

料金

プランは機能で分かれていて、商品数と試着回数はどのプランも無制限です。

※ Shopify版は Shopify App Store 経由で米ドル建て請求です（Free $0 ／ Pro $85/月 ／ Business $198/月、年払い割引あり）。機能の中身は共通です。

最新の内容と契約は料金セクションを、Enterpriseはお問い合わせをご覧ください。

よくある質問

カメラの映像はどこかに送られますか

送られません。顔の検出も商品の描画もお客様のブラウザの中で行われ、映像がDokimiAIのサーバーに届くことはありません。実際の通信を開発者ツールで確認した記事が「AI試着とプライバシー｜カメラ映像がサーバーに送られない仕組み」です。

商品画像はDokimiAIに預けることになりますか

いいえ。Shopifyならストアのファイル、WooCommerceならメディアライブラリ、その他なら自社サーバーやCDN——画像は店側に置いたまま、URLだけを登録します。

何商品まで登録できますか

上限はありません。Freeプランでも商品数・試着回数とも無制限です。

1商品目が動くまでどのくらいかかりますか

画像が用意できていれば15分程度です。時間がかかるのは画像の準備の方で、透過PNGは商品ごとに5〜30分見ておいてください。まず1商品だけで耳に乗るところまで到達してから、残りの画像を作るのが結果的に早いです。

ピアス以外も試着できますか

帽子の重ね試着はPro以上、アバター（モデル）試着はBusiness以上で使えます。ピアス・イヤーカフの試着はFreeプランに含まれます。

ボタンを置いたのに何も乗りません

よくある原因は3つです。色名の綴りがバリエーション側と一致していない（「Gold」と「ゴールド」は別物として扱われます）、実寸が未登録で21mmのまま描かれている、PNGが透過していない。いずれもエラーが出ないので、この順に確認してください。

既存の商品ページに影響はありますか

ありません。試着をONにした商品にだけボタンが出ます。1商品で試してから増やしていけるので、本番サイトにそのまま入れて構いません。