AIでShopifyにサイズ比較機能を実装した記録｜任せたこと、人が決めたこと、公開後に直したこと

AIにコードを書かせて、ECサイトに機能を足す。やってみると、コードを書く部分は確かに速く終わります。時間を使ったのは、何を作るかを決めるところと、できたものが本当に動くかを確かめるところでした。

この記事は、ULTROが自社で運営しているECサイト「the MA walls」での実装記録です。the MA walls は、アートポスターを主に米国へ販売しているShopifyのストアです。商品ページに、作品のサイズをベッドと並べて比べる機能を足しました。コードを書いたのは、OpenAIのコーディング用AIのCodexです。

作業の経緯は、テーマの変更履歴と、公開前の確認記録から拾っています。購入率への効果は、まだ測っていません。

作ったもの

商品ページのサイズ選択の下に「Compare size & style」という入口を置きました。押すと比較画面が開きます。

できることは次の4つです。

画面の縮尺は、商品の公称サイズと、ベッドの規格上の幅をもとにしています。フレームを含めた外側の寸法は、製造の委託先への確認が済んでいないので、画面には出していません。

なぜ作ったか

アートを買うときに迷うのは、絵柄よりもサイズです。「18×24インチ」と書かれていても、部屋に飾ったときの大きさは思い浮かびません。部屋に飾った写真を用意しても、サイズごとに撮影の距離や家具が違えば、比べる材料にはなりません。

もう1つ、運営する側の事情がありました。作品は増えていきます。作品ごとに比較用の画像を作る方法では、登録のたびに作業が増えて、続きません。

そこで、要件を2つにしました。買う人がサイズの差を目で比べられること。新しい作品を登録したら、何もしなくても同じ比較が出ること。

AIに任せたこと、人が決めたこと

分担を先に図で示します。

コードはすべてCodexが書きました。比較画面のコードは、JavaScriptが約200行、Liquid（Shopifyのテーマの言語）が約120行、CSSが約70行です。

人が決めたのは次の点です。

どれも、コードの書き方ではなく、買う人が何に迷うかの話です。ここはAIに聞いても、自分のストアの答えは返ってきません。ソファの案も、一般的な答えとしては間違っていませんでした。自分で画面を見て、これでは分からないと感じたから、変えられました。

ベッドの規格は国によって違います。販売する国が増えたら、国ごとの規格に切り替える予定です。

作業の流れ

作業時間はおよそ4時間でした。テーマの変更履歴に残っている記録は次のとおりです。

一部の作品から、全商品へ

最初の版は、対象の作品を決め打ちにしていました。まず動くものを見て、物差しや見せ方が合っているかを確かめるためです。

合っていると分かった時点で、商品データから読み込む形に直しました。表示している商品のバリエーション（サイズとフレームの色）と、それぞれの画像を読みます。ポスター、フレーム付き、キャンバスといった素材の違いは別の商品として登録していて、メタフィールドで互いに関連付けています。比較画面はこの関連をたどって、素材を切り替えられるようにしています。

この方法が使えたのは、商品データがそろっていたからです。公開中の90商品すべてに素材の関連付けが入っていることを、作業の中で確かめています。データがばらばらなストアでは、同じ作りにはできません。

非公開のテーマで確かめてから公開する

変更は、公開していないテーマに入れて、プレビューで確かめてから公開しました。確かめる項目は、表にしてテーマの説明書きに残してあります。

• 複数の作品で開いて、別の作品の画像が混ざらないか
• サイズ、色、素材を何度も切り替えて、入口のボタンが残るか
• 戻る、進むを押しても、選択と価格が合っているか
• 「Use this selection」で、正しい商品とバリエーションに移るか
• 画面の幅が320、390、1170ピクセルで、はみ出しがないか
• 売り切れや、画像がない場合に、間違った商品へ誘導しないか

カートに入れるところまでは実際に操作し、入った商品とバリエーションが合っていることを見てから、カートを空に戻しています。決済はしていません。

実物のiPhoneとSafariでの確認は、この時点ではしていません。確認に使ったのは、パソコンのブラウザをスマートフォンの画面幅にしたものです。

公開後に見つかった不具合

不具合は3つ見つかりました。

サイズを変えると、入口のボタンが消える

商品ページでサイズを選び直すと、0.7秒ほどあとに「Compare size & style」のボタンが消えました。Shopifyのテーマは、バリエーションを切り替えると、価格や在庫の表示を作り直します。そのときに、あとから足したボタンも一緒に消されていました。作り直しのあとにボタンを置き直す処理を足して、直しました。

入口の小さな画像が壊れる

サイズを続けて切り替えると、入口のボタンにある作品の小さな画像が表示されなくなりました。画像の場所の指定が省略した書き方になっていて、切り替えのあとに違う場所を指していたのが原因です。省略しない書き方に直しました。画像が読めないときは、別の作品の画像で埋めるのではなく、枠だけを表示するようにしています。

スマートフォンでは、動きが見えない

入口のボタンには、作品が小さいサイズから大きいサイズへ変わっていく動きを付けています。この動きが、ページを開いた瞬間に1回だけ再生される作りになっていました。スマートフォンでは、ボタンが最初の画面より下にあります。スクロールして見えたときには、もう終わっていました。

ボタンが画面に入ってから再生し、見えているあいだは繰り返すように直しました。あわせて、一時停止のボタンを付け、動きを減らす設定にしている端末では動かさないようにしています。

3つとも、項目を順に確かめるだけでは出なかったものです。サイズを続けて切り替える、スマートフォンでスクロールしてから見る、といった実際の使い方をして見つかりました。直したあとは、同じ不具合が戻っていないかを確かめる小さなテストを3本、Codexに書かせて残しています。

分かったこと

速くなるのは、書く部分

コードを書く作業は、AIが引き受けます。人の側に残ったのは、画面を見て判断することと、不具合を再現して伝えることでした。AIを使っても、作るものを決める時間と、確かめる時間はなくなりません。

最初の案は、たたき台として使う

ソファの案は、そのまま公開していたら役に立たない機能になっていました。AIの最初の案は、一般的には正しくても、自分のストアの買い手に合っているとは限りません。早く形にして、自分の目で見て直す。この往復が短い時間でできることが、AIを使う利点でした。

確認の項目を残す

今回、確認の項目を表にして残したのは、次に同じ場所を直すときのためです。商品ページの購入までの流れは、壊れると売上に直接響きます。AIに変更を頼むたびに、同じ項目を確かめさせます。項目が決まっていれば、人が見る場所も決まります。

商品データが先

全商品に広げられたのは、バリエーションの画像と、素材の関連付けがそろっていたからです。AIで機能を足す前に、商品データがそろっているかを確かめておくと、作り直しが減ります。商品データの点検は、Claude用Shopifyコネクターを使うと、管理画面を1件ずつ開かずにできます。

ULTRO NOTES｜サイト構築・改善Claude用Shopifyコネクターの使い方｜接続の手順と、分析・構築・保守でできることClaude用のShopifyコネクターを使うと、Claudeのチャットからストアの商品・注文・分析データを読み、商品の作成や在庫の変更まで頼めます。自社ストアに接続して試した結果をもとに、接続の手順、使えるツール、分析・構築・保守で頼めることの例、新商品の登録で任せられる範囲、GA4と突き合わせた例、変更を頼むときの注意をまとめます。

同じことを自社のストアでやるなら

商品のサイズや色で買い手が迷う商品なら、同じ考え方が使えます。家具、照明、ラグ、鏡などです。始める前に、次の4つを決めておきます。

1. 何と比べれば、買う人に大きさが伝わるか。規格が決まっていて、誰の家にもあるものが向いている
2. 比べた結果を、どうやって購入につなげるか。選び直しをさせない
3. 新しい商品を登録したときに、何もしなくても動くか。動かないなら、商品データの持ち方から見直す
4. 公開の前に確かめる項目と、確かめる画面の幅

効果の測り方も、先に決めておくことをおすすめします。見る数字の候補は、比較画面を開いた回数と、そこからカートに入った回数です。注文の件数が少ないストアでは、公開の前後で購入率を比べても、差があるとは言い切れません。見る数字の選び方はECサイトのCVRの記事で、前後の比較が難しい理由はA/Bテストの記事で説明しています。

ULTRO NOTES｜サイト構築・改善ECサイトのCVRとは？平均値の見方と改善の優先順位ECサイトのCVR（コンバージョン率）の計算式と、業界平均をそのまま使えない理由、自社の目標値の決め方をまとめました。GA4で購入までを5段階に分けて落ちている箇所を特定し、Clarityで原因を見て、どの施策から着手するかを決めるところまで解説します。

ULTRO NOTES｜サイト構築・改善A/Bテストとは？必要なアクセス数と、ECでやってはいけないケースA/Bテスト（ABテスト）は、2つのパターンを同時に出し分けて成果を比べる方法です。必要なサンプル数の出し方、自社のアクセス数で検出できる改善幅の早見表、途中で止めてはいけない理由、Shopifyの標準機能での始め方をまとめます。

まだやっていないこと

• 購入率、カート追加率への効果の測定
• 実物のiPhoneとSafariでの確認
• フレームを含めた外側の寸法の表示（製造の委託先に確認中）
• 米国以外の国の、ベッドの規格への対応

進んだら、この記事に追記します。