WordPressサイトにAI試着を追加する方法

WordPressでアクセサリーを売っているサイトにAI試着を入れる方法は、サイトの作りで2つに分かれます。

サイトの作り	入れ方	所要時間の目安
WooCommerceで商品を管理している	プラグインをインストール	1商品目 10分
WooCommerceは使っていない（固定ページ・他のカート・LP など）	埋め込みコードを1行貼る	1商品目 15分

どちらも、商品画像（背景透過PNG）はWordPressのメディアライブラリに置いたままで構いません。画像を外部に預ける必要はなく、試着の処理はお客様のブラウザの中で完結します。

透過PNGがまだなら、先に「試着用の背景透過PNGの作り方」を読んでください。

WooCommerceを使っている場合：プラグイン

「プラグイン > 新規追加」で DokimiAI を検索してインストール・有効化します。有効化しただけでは何も変わらず、商品編集画面で「試着ON」にした商品にだけボタンが出ます。

商品編集画面に追加される DokimiAI 試着 ボックスで、次を登録します。

保存すると、商品ページのカートボタン付近に試着ボタンが出ます。手順の詳細とつまずきやすい点は「WooCommerceにAI試着を導入する方法」にまとめています。

WooCommerceを使っているなら、これが一番簡単です。埋め込み方式を選ぶ理由はありません。

固定ページに商品を並べている、WooCommerce以外のカートプラグインを使っている、LPだけで販売している——こういうサイトでは、プラグインは動きません（WooCommerceの商品データを前提にしているため）。代わりに、どのサイトでも動く埋め込み方式を使います。

手順は3つです。

console.dokimiai.io にメールアドレスで登録します。パスワードはなく、メールに届くリンクでログインします。

ログイン後、ドメインにサイトのドメイン（例：example.com）を登録します。登録したドメイン以外からは試着が動かない仕組みなので、これは必須です。www の有無は同じサイトとして扱われます。1アカウントで登録できるドメインは1つです。

商品で、試着を出したい商品を1つずつ登録します。

SKU（識別子。英小文字・数字・ハイフン・アンダースコアのみ。作成後は変えられません）
色ごとの画像URL。色名も 英小文字・数字・ハイフン・アンダースコアのみ（gold silver のように）。メディアライブラリの画像のURLをそのまま貼ります
サイズ名（展開があれば。無ければ空）

画像URLは https で、公開されているホストのもの、かつ PNG であることを登録時に確認します。確認できなかった色は「未確認」になり、確認できた色が1つも無い商品は試着に出ません。透過しているかどうかは確認しないので、透過PNGを用意するのは店側の責任です。

商品名や価格は登録しません。試着に要らないからです。

商品を保存すると、その商品の編集画面に設置コードが出ます。中身は2つです。

WordPressなら、1はテーマの「フッター」ウィジェットや、ヘッダー・フッターにコードを追加するプラグインに。テーマファイルを直接編集すると、テーマ更新で消えます。2は商品を表示している固定ページの「カスタムHTML」ブロックに貼ります。

これで、そのページに試着ボタンが出ます。

画像はサイト内に置いたまま。DokimiAIが画像を預かることはありません
カメラ映像はどこにも送られません。顔検出も合成もブラウザの中で終わります
大きさを確認する。透過PNGには大きさの情報がありません。プラグインでは実寸（mm）を登録して合わせます。埋め込み方式には現在実寸の登録欄が無く、既定の大きさで描かれるので、画像の余白の取り方で調整します
1商品で試してから広げる。耳に乗った状態を一度見てから、画像の撮り方や実寸を調整した方が早い

迷ったら、WordPress管理画面の左メニューに「WooCommerce」があるかどうかで決まります。あればプラグインです。