WooCommerceにAI試着を導入する方法（プラグイン版）

WooCommerceは、AI試着を入れるのが一番簡単なプラットフォームです。プラグインを入れて、商品編集画面で画像と実寸を登録すれば、商品ページに試着ボタンが出ます。外部サービスの登録もAPIキーも要りません。

手順は3つ。

1. プラグインをインストールして有効化
2. 商品ごとに試着画像（透過PNG）と実寸を登録
3. 商品ページで確認

透過PNGの用意がまだなら、先に「試着用の背景透過PNGの作り方」を読んでください。この記事は画像がある前提です。

1. プラグインをインストールする

WordPress管理画面の「プラグイン > 新規追加」で DokimiAI を検索してインストール、有効化します。WordPress.orgのプラグインディレクトリから入るので、審査を通った状態のものが入ります。

有効化しても、この時点では何も変わりません。試着ボタンは「試着ON」にした商品にだけ出ます。既存の商品ページには一切影響しないので、本番サイトに入れて大丈夫です。

設定画面は1つだけで、「Powered by DokimiAI」の表示をするかどうか（既定はOFF）を決めるだけです。

2. 商品ごとに試着画像を登録する

「商品 > 商品編集」を開くと、編集画面に DokimiAI 試着 のボックスが追加されています。ここで登録するのは4つです。

試着ON

チェックを入れた商品にだけ、ページに試着ボタンが出ます。

カテゴリ

フープピアス／スタッドピアス／イヤーカフから選びます。耳のどの位置に、どう乗せるかがカテゴリで変わります。フープは耳たぶの下端にぶら下がる位置、スタッドは耳たぶの中央、イヤーカフは耳の縁です。

色ごとの画像

色名と画像を1行ずつ登録します。画像はメディアライブラリから選べます。

色名は、バリエーション商品の属性値と完全に同じ綴りにしてください。 「ゴールド」で登録して属性が「Gold」だと一致せず、その色は出ません。エラーは出ないので、うまく乗らないときは最初にここを確認します。

単一商品（バリエーションなし）なら1行で構いません。

画像の置き場所はメディアライブラリで問題ありません。同じサイト内なので、外部ホストで起きる読み込み制限（CORS）の心配がなく、これがWooCommerceが楽な理由の一つです。

実寸（mm）

商品の高さをmmで入れます。試着は画像を実寸で耳に乗せるので、ここがずれると小さなスタッドが耳たぶより大きく出たりします。

フープの目安は「内径 ＋ 線の太さ × 2」。内径12mm・線径2mmなら16mm。

空欄だと既定の21mmで描かれます。登録しただけでは見え方が変わらないので、必ず入れてください。

サイズ展開があるバリエーション商品では、サイズごとの実寸も登録できます。バリエーションごとにSKUが一意になっていることが条件で、SKUが重複している商品ではサイズ切替は効きません。

「更新」で保存します。

3. 商品ページで確認する

登録した商品のページをスマホで開きます。カートボタンの近くに試着ボタンが出ているはずです。

確認する点は3つ。

• カメラが起動して、耳に商品が乗るか。乗らなければ色名の綴りを確認
• 大きさが実物と合っているか。合わなければ実寸を調整
• 色を切り替えると画像が追従するか

画像が真っ白な四角で出るなら、PNGに透明部分がありません。透過PNGの記事に戻って画像を作り直してください。

テーマとの相性

試着ボタンはWooCommerceの商品ページのフック（カートボタンの前後）に差し込まれるので、標準的なテーマならそのまま出ます。ページビルダーで商品ページを完全に組み替えているテーマでは、フックの位置によっては出ないことがあります。その場合はテーマ側で該当フックが呼ばれているかを確認してください。

ページ速度への影響は小さく抑えてあります。試着に必要な顔検出のライブラリは、ボタンを押したときに初めて読み込まれます。ページを開いただけでは読み込まれないので、試着を使わないお客様には何も追加されません。

よくあるつまずき

まとめ

• インストール → 商品編集画面で試着ON・カテゴリ・色｜画像・実寸 → スマホで確認
• 画像はメディアライブラリでOK。外部ホスト不要
• 色名は属性値と完全一致
• 実寸は必ず入れる

1商品目が動けば、あとは商品編集画面での登録の繰り返しです。画像の準備ができた商品から順に足してください。