ShopifyにAI試着を導入する方法（アプリ追加からApp Block配置まで）
Shopifyストアの商品ページにAI試着を入れる作業は、大きく4つです。
- アプリをインストールする
- 商品ごとに試着画像（透過PNG）と実寸を登録する
- テーマエディタで商品テンプレートにApp Blockを置く
- ストアフロントで実際に試す
所要時間は、画像さえ用意できていれば1商品目で15分程度。時間がかかるのは2の画像準備で、ここは別記事「試着用の背景透過PNGの作り方」にまとめています。この記事では、画像は用意できている前提で進めます。
1. アプリをインストールする
Shopify App Storeから DokimiAI をストアに追加します。要求する権限は商品情報の読み書きだけです。顧客情報や注文には触りません。
インストール後、管理画面の「アプリ」から DokimiAI を開くと、アプリのホームが出ます。ここでプランを選びますが、まずは無料のまま進めて構いません。試着ボタンの設置と動作確認は無料プランで全部できます。
2. 商品ごとに試着画像を登録する
アプリ内の Try-On Images を開くと、ストアの商品一覧が出ます。試着を出したい商品を選んで、登録画面に進みます。
登録するのは3つです。
色ごとの画像URL
商品のカラーバリエーションごとに、透過PNGのURLを1行ずつ入れます。
色名は、商品のバリエーションのオプション値と完全に同じ綴りにしてください。 「Gold」で登録したのに、バリエーション側が「ゴールド」だと一致せず、その色は表示されません。エラーは出ないので、ここは最初に確認しておくと後で悩まずに済みます。
画像URLは https で始まるものだけ受け付けます。
画像はどこに置くか
Shopify管理画面の「コンテンツ > ファイル」にアップロードして、そのURLを使ってください。 これが一番確実です。
理由は技術的なもので、試着は画像をブラウザ上のキャンバスに描くため、画像を置いているサーバーが「他のサイトから読んでよい」という応答（CORSヘッダー）を返す必要があります。Shopifyのファイルはこの条件を満たします。自社サイトや外部ストレージに置いた画像は、URLを開けば表示されるのに試着では読めない、ということが起きます。自前サーバーの画像を登録すると、登録画面が黄色の警告を出すので、その場合はShopifyのファイルに置き直してください。
実寸（mm）
商品の高さをmmで入れます。試着は画像を「実寸」で耳に乗せるので、この値がずれると小さなスタッドが耳たぶより大きく出たりします。
フープなら「内径 ＋ 線の太さ × 2」が目安です。内径12mm・線径2mmなら16mm。
何も入れないと既定値の21mmで描かれます。登録しただけでは見え方が変わらないので、必ず商品に合わせて入れてください。
サイズ展開がある商品
商品にサイズのバリエーション（8mm / 10mm / 12mm など）が2つ以上あると、登録画面に「サイズ別の高さ」の欄が自動で出ます。サイズごとにmmを入れると、お客様がサイズを切り替えたときに耳の上の大きさも変わります。空欄のサイズは上の実寸が使われます。
mmは色に依存しないので、色×サイズの組み合わせを入力する必要はありません。
保存すると、商品一覧に「2色・3サイズ 登録済み」のようなバッジが付きます。
3. テーマエディタでApp Blockを置く
登録しただけでは商品ページには何も出ません。テーマにブロックを置きます。
- 「オンラインストア > テーマ」から、使用中のテーマの カスタマイズ を開く
- 上部のテンプレート選択で 商品 > デフォルトの商品 を選ぶ
- 左のセクション一覧で、商品情報のセクション（価格やカートボタンがある場所）に ブロックを追加
- アプリのブロックから DokimiAI 試着 を選ぶ
- ドラッグで位置を決める。カートボタンの直上か直下がおすすめ
- 保存
商品テンプレートを複数使っている場合は、試着を出したいテンプレートそれぞれに置きます。逆に言えば、ブロックを置いたテンプレートの商品にだけ試着が出るので、「このカテゴリだけ」という制御はテンプレートの使い分けでできます。
4. ストアフロントで確認する
登録した商品のページをスマホで開いて、試着ボタンを押します。
確認する点は3つ。
- カメラが起動し、耳に商品が乗るか。乗らなければ、色名の綴りが一致しているかを最初に疑ってください
- 大きさが実物と合っているか。合わなければ実寸の値を調整
- 色やサイズを切り替えると追従するか
画像が読めない場合は、ブラウザのデベロッパーツールのコンソールに CORS のエラーが出ます。その場合は画像の置き場所をShopifyのファイルに変えてください。
登録していない商品は、ブロックが置いてあっても従来どおりの表示のままなので、1商品ずつ追加して広げていけます。
よくあるつまずき
| 症状 | 原因 | 対処 |
|---|---|---|
| ボタンが出ない | App Blockを置いていない／別テンプレート | テーマエディタで該当テンプレートにブロックを置く |
| ボタンは出るが商品が乗らない | 色名の綴り不一致／画像が読めない | オプション値と色名を揃える／画像をShopifyのファイルへ |
| 大きさがおかしい | 実寸が既定の21mmのまま | 商品の実寸を入れる |
| サイズを変えても大きさが変わらない | サイズ別の高さが空欄 | サイズごとにmmを入れる |
まとめ
- インストール → Try-On Images で画像と実寸を登録 → テーマエディタでApp Block → スマホで確認
- 色名はバリエーションのオプション値と完全一致
- 画像はShopifyの「ファイル」に置く
- 実寸は必ず入れる。サイズ展開はサイズ別に
最初の1商品が動けば、あとは登録の繰り返しです。画像の準備が終わっている商品から順に足していってください。
