Shopify・WooCommerce以外のECサイトにAI試着を導入する方法（スクリプト1行）
ShopifyとWooCommerceには専用のアプリ・プラグインがありますが、それ以外のプラットフォームにも試着は入れられます。BASE、STORES、カラーミーショップ、EC-CUBE、futureshop、自作のECサイト——HTMLに1行足せるサイトなら対象です。
仕組みは単純で、DokimiAI側に商品を登録し、サイトに設置コードを貼るだけです。サーバーの設定変更も、画像のアップロードもありません。
AIバーチャル試着そのものの仕組み・無料で試せる範囲・料金は、導入ガイドに1ページでまとめています。
前提：HTMLを編集できるか
このやり方で必要なのは、次の2か所を触れることです。
- 全ページ共通の場所（フッターなど）にscriptタグを1行足せる
- 商品ページの中に、SKUを指定する短いHTMLを置ける
プラットフォームによって呼び方は違いますが、「共通HTML」「フッターHTML」「フリーHTML」「カスタムコード」といった設定項目があれば1は満たせます。2は商品説明欄にHTMLが書けるかどうかです。多くのASPカートは、上位プランで商品説明のHTML編集が開放されています。
自作サイトなら両方自由です。
手順
1. 登録する
console.dokimiai.io にメールアドレスで登録します。パスワードは無く、メールのリンクでログインします。登録は無料で、試着ボタンの設置と動作確認までは無料のまま進められます。
2. ドメインを登録する
ドメインにお店のドメインを登録します。登録したドメイン以外から呼ばれた場合は動かないので、他所のサイトが勝手に使うことはできません。www の有無は同じサイトとして扱います。
登録できるドメインは1アカウントにつき1つです。複数店舗を運営している場合は店舗ごとにアカウントを分けます。
3. 商品を登録する
商品で1商品ずつ登録します。
| 項目 | 内容 |
|---|---|
| SKU | 商品の識別子。英小文字・数字・ハイフン・アンダースコアのみ。作成後は変更不可 |
| 色 | 色名（同じく英小文字・数字・ハイフン・アンダースコアのみ。gold silver など）と、その色の透過PNGのURL。色の数だけ行を追加（最大20色） |
| サイズ | サイズ名（8mm / 10mm など、最大20件）。展開が無ければ空でOK |
画像はお店のサーバーやCDNに置いたまま、URLだけを登録します。 DokimiAIが画像を保存することはありません。
URLは登録時に確認されます。https であること、公開されているホストであること、PNGとして配信されていること。確認できなかった色は「未確認」になり、確認できた色が1つも無い商品は試着に出ません。透過しているかどうかは確認しません。白背景のPNGはそのまま通ってしまい、耳に白い板が乗るので、透過PNGの作り方に沿って店側で確認してください。
商品名・価格は登録しません。試着に不要です。実寸（mm）の登録欄も現在はなく、既定の大きさで描かれます。
4. 設置コードを貼る
商品を保存すると、その商品の編集画面に設置コードが出ます。中身は2つです。
- scriptタグ（サイトキー入り）——サイト全体で1回だけ。共通HTML（フッター推奨）に貼る
- ボタン（
data-dokimiai-sku="<SKU>"付き）——その商品を表示しているページの、ボタンを出したい場所に貼る
scriptタグはどの商品の編集画面でも同じものが出るので、最初の1回だけ貼れば以後は不要です。2商品目からはボタンだけです。
コードはログイン後の画面からそのままコピーしてください。LP上の見本はサイトキーが入っていない見本です。
動作確認
スマホで商品ページを開き、試着ボタンを押します。
- カメラが起動して耳に商品が乗る → OK
- ボタンが出ない → ページのソースにscriptタグとボタンがあるか、SKUの綴りが登録と一致しているか
- ボタンは出るが何も乗らない → console の商品一覧でその商品が有効になっているか（色が全部「未確認」だと無効）、ドメイン登録がそのサイトと一致しているか（
www以外のサブドメインは別サイト扱い） - 白い板が乗る → PNGが透過していない
登録した商品にだけ出るので、1商品で試してから増やしていけます。
プラットフォーム別の補足
- BASE / STORES：共通HTMLの編集はプラン・Appsに依存します。商品説明欄のHTML可否も確認してください
- カラーミーショップ：共通フッターに貼れます。商品説明はHTML可
- EC-CUBE：テンプレートのフッターとproduct detail テンプレートを編集
- 自作サイト：制約なし
各プラットフォームの「HTMLをどこに書けるか」は変わることがあるので、最新の仕様は各サービスのヘルプで確認してください。
まとめ
- 登録 → ドメイン → 商品（SKU・色｜画像URL・サイズ）→ scriptタグを共通HTMLに1回 → 商品ページにボタン
- 画像はお店のサーバーに置いたまま。DokimiAIは預からない
- HTMLに1行足せるサイトなら対象
- 1商品で試してから広げる
専用アプリが無いプラットフォームでも、やることはShopifyやWooCommerceと同じ「画像の登録」です。違うのは登録場所が管理画面ではなく console になることと、SKU名・色名の文字種に制約があることだけです。
