Qikify Custom Product Optionsで、お客様のカスタマイズ内容をそのまま商品画像に描画できるようになりました。その両側に、まだ試されていないかもしれない機能が2つあります。カタログに合うオプションセットのテンプレートを選び出すAIスキャンと、Shopifyの管理画面で設定について答えてくれるSidekick拡張機能です。
AIストアスキャン、Live Previewモックアップ、Sidekickの全体像
これまでは、刻印入りブレスレットにお名前を入力したり、プリントトートに写真をアップロードするお客様は、仕上がりを想像するしかありませんでした。説明文を添えたり、見本画像を置いたり、項目名に寸法を書いたりはできても、実際に見えるのとは別のことです。Live Previewは、ECサイトのオーダーメイド対応におけるその隔たりを埋めます。レイアウトはストア側で決められるので、お客様が見たものがそのまま注文内容になります。
では、3つの機能がそれぞれ何をするのか、どうオンにするのかを見ていきましょう。
この記事の要点
- Live Previewは、お客様が入力したテキストやアップロードした写真を、オプションセットのエディターで決めたレイアウトのまま商品画像に描画します。UnlimitedプランとShopify Plusプランでご利用いただけます。
- AIストアスキャンはShopifyのカタログを1回読み取り、テンプレートページにオプションセットのテンプレートを提案します。
- Sidekick拡張機能は、Shopifyの管理画面でオプションセットについての質問に答えます。設定を変更することはありません。
1. Live Previewモックアップでできること
Qikify Custom Product OptionsのLive Previewモックアップは、お客様のカスタマイズ内容をShopifyの商品画像上にリアルタイムで表示します。お名前を入力したり写真をアップロードすると商品画像が描き直されるので、カートに入れる前に仕上がりを確認いただけます。
名前を入力するとペンダントに表示され、素材を選ぶとペンダントもそれに合わせて変わります
レイアウトはオプションセットのエディターで一度決めるだけです。プレビュー上で各オプションをドラッグ・リサイズ・回転し、テキストの見た目を整えれば、ストアフロントでもそのまま同じように描画されます。お客様は入力とアップロードはできますが、移動・リサイズ・回転はできないため、バッグからお名前がはみ出した商品ページになることはありません。
お客様が「Lily」と入力して写真をアップロードすると、トートバッグの画像がその場で更新されます
すべてのオプションタイプが画像に表示できるわけではありません。テキスト系のオプションはテキストとして描画され、画像系のオプションは画像として描画され、一部はフォーム内の表示のみとなります。
テキスト系と単一選択のオプションはテキストとして、写真アップロードと画像スウォッチは画像として描画されます
Live PreviewモックアップはUnlimitedプランとShopify Plusプランでご利用いただけます。
2. Live Previewモックアップの設定手順
ここでの例は、Shopifyストアのオーダーメイドトートバッグです。お客様がお名前を入力して写真をアップロードすると、その両方がバッグにプリントされます。設定はQikify Custom Product Optionsのオプションセットのエディターで行います。
オプションごとにモックアップをオンにする。Qikify Custom Product OptionsでOption setsを開き、セットを開く（または新規作成する）。画像に表示したいオプションをクリックし、Show mockup settingsを開いてShow on mockupにチェックを入れます。描画したいオプションごとに同じ操作を行ってください。この例では、名前の入力欄と写真アップロードの2つです。
左に設定、右にライブプレビューとサンプルのフォーム
Show on mockupにチェックを入れて形を選ぶと、画像スウォッチのオプションがプレビューに表示されます
背景を選ぶ。モックアップのプレビューの下にあるChange backgroundをクリックし、次のいずれかを選びます。
- 商品画像。そのセットに割り当て済みの商品から1つ選びます。その写真はエディター上で位置を合わせるためだけに使われ、ストアフロントでは各商品が自分の写真の上にモックアップを表示します。Apply toでは、すべての商品画像、最初の商品画像のみ、最後の商品画像のみ、または位置を指定した特定の商品画像から選べます。
- カスタム画像。ご自身の画像をアップロードします。ストアフロントでは、この1枚がセット内のすべての商品のモックアップ用写真になります。
- 背景なし。各商品のすべての写真にモックアップが描画されます。
商品画像を使えるのは、オプションセットが特定の商品またはバリエーションに割り当てられている場合のみで、全商品や自動ルールへの割り当てでは使えません。先にAssign productsタブで割り当ててください。
背景に商品画像を使い、モックアップを最初の商品写真だけに表示した場合
各オプションの位置と見た目を整える。プレビュー上でオプションをクリックし、ドラッグで移動、角のハンドルをドラッグでリサイズ、上部のハンドルをドラッグで回転できます。プレビューの横にあるフォームにサンプルの値を入力すれば、実際の注文がどう見えるか確認できます。写真のオプションが空のときはエディターにプレースホルダーが表示されるので、そのままでも配置できます。
テキストをドラッグして配置し、Curveでペンダントの曲線に沿わせます
ドラッグでは細かすぎて合わせにくいときのために、各オプションにはプレビュー横のパネルで数値指定もできます。
- 位置：HorizontalとVerticalは、背景に対する割合でオプションの中心を指定します。50／50でちょうど中央です。回転の角度は度数で指定します。
- テキストのオプション：フォントの取得元（テーマの標準、Google Font、アップロードしたフォントファイル）を選び、サイズ、文字間隔、太字、斜体、下線、取り消し線、色、不透明度、縁取りや影の効果を設定できます。
- 項目タイプ別のテキスト設定：-100から100までのカーブと、最大幅への自動調整は1行テキストのみで使えます。左・中央・右の揃えは複数行テキスト用で、長いテキストは固定の枠内で折り返し、収まらない行は非表示になります。
- 画像のオプション：塗りのモード、切り抜きの形（正方形、角丸正方形、円、ハート、星、または透過PNGのアップロード）、不透明度を選べます。
ドラッグではなく数値で指定するときに役立つ数字が3つあります。HorizontalとVerticalを50／50にするとオプションはちょうど中央に来ます。カーブは-100から100までです。フォントサイズは幅1,000pxの背景を基準に計算されるため、大きな写真でも崩れずに画像に合わせて拡大縮小されます。
左はGoogle FontのPacificoを使った名前のオプション。右は円形に切り抜いた写真のオプション
保存してストアを開く。商品ページでは通常のギャラリーがモックアップのギャラリーに置き換わり、お客様がオプションを入力するたびに更新されます。
知っておくと安心なこと。空のオプションは描画されないため、お客様が項目を入力するまで何も表示されません。モックアップはあくまでプレビューで、それ以上のものではありません。カートや注文にプロパティや画像が追加されることはありません。Google Fontやカスタムフォントは、初回の読み込みに少し時間がかかることがあります。また、ある商品の写真を背景に使っている状態でその商品をオプションセットから外した場合は、背景が失われるので新しい背景を選び直してください。
商品ページにモックアップが表示されない場合は、UnlimitedプランまたはShopify Plusプランかどうか、少なくとも1つのオプションでShow on mockupにチェックが入っているか、オプションセットが公開されてその商品に適用されているかをご確認ください。特定の商品画像を選んだ場合は、その枚数以上の写真が商品に登録されている必要があります。一部のカスタムテーマは標準とは異なる商品ギャラリーを使っています。お使いのテーマがそれに該当する場合は、ライブチャットでご連絡いただければ、当社チームがテーマに合わせて設定いたします。
3. AIストアスキャンでできること
Qikify Custom Product OptionsのAIストアスキャンは以前からアプリに搭載されていて見落とされやすい機能ですが、モックアップによってオプションセットを作る理由が増えた今こそ、改めて見ていただく価値があります。
アプリがShopifyのカタログを読み取り、白紙の状態から25種類以上のオプションタイプを順に検討するのではなく、実際に販売している商品に合うオプションセットのテンプレートを提案します。
スキャンカードは設定ガイドの上にあり、処理中は進捗バーが表示されます
4. AIストアスキャンの使い方
スキャンカードは、アプリのダッシュボードで設定ガイドの上にあります。「Scan my products」をクリックすると、カードが進捗バーに切り替わり、商品の解析とテンプレートの照合が始まります。完了すると、いくつのテンプレートが一致したかが表示され、「View my templates」ボタンからテンプレートページへ進めます。そこでは提案がそれぞれカードになっていて、開いて確認できます。
推奨テンプレート。それぞれが設定するオプションタイプが一覧表示されます
スキャンは1回だけで、提案内容はその後もテンプレートページに残ります。うまくいかない原因は2つあります。商品が1点も登録されていないストアと、パスワード保護がかかったストアです。どちらの場合もカードにその旨が表示され、何を直せばよいか案内されます。
5. Shopify Sidekick拡張機能でできること
Sidekickは、Shopifyの管理画面に組み込まれたAIアシスタントです。Qikify Custom Product Optionsの拡張機能を入れておけば、商品オプションについて普段の言葉で尋ねると、実際の設定にもとづいて答えが返ってきます。割引について同じことをするVolume DiscountsのSidekick拡張機能と同じ仕組みです。
オプションセットを調べる、ある商品やコレクションにどのセットが適用されているかを確認する、セット内のオプションと条件分岐を見直す、といったことを頼めます。設定や各項目についての「どうすればいいか」という質問にも答え、現在のプランに含まれる機能を伝え、該当するヘルプ記事を案内し、設定ガイドを順に進めてくれます。
読み取り専用です。Sidekickは調べて案内することはできますが、オプションセットを変更することはありません。
6. Shopify Sidekick拡張機能の使い方
Shopifyの管理画面でSidekickを開き、質問を入力します。Sidekickはパネル内で答え、質問の内容に応じてQikify Custom Product Options内の該当ページまで直接案内することもあります。尋ねていたセットを探してメニューをたどる必要はありません。
当社チームが拡張機能のテスト中に使った質問を2つ、出発点としてご紹介します。
- 「review my option sets」（オプションセットを確認して）
- 「how do I show engraving option only when option customize is selected」（customizeが選ばれたときだけ刻印オプションを表示するには？）
2つ目の質問では、Sidekickはまずストアのプランを確認し、条件分岐が含まれていることを確かめたうえで、そのルールを設定する手順を示しました。
Sidekickはまずプランを確認し、それから条件分岐の手順を順に案内します
よくあるご質問
Live Previewモックアップはどのプランに含まれますか？
Qikify Custom Product OptionsのLive Previewモックアップは、UnlimitedプランとShopify Plusプランでご利用いただけます。商品ページに表示されない場合は、まずプランをご確認いただき、次に少なくとも1つのオプションでShow on mockupにチェックが入っているかをご確認ください。
モックアップの画像はShopifyの注文に保存されますか？
いいえ。カートと注文に残るのは、これまでと同じく、お客様が入力・アップロードした内容だけです。モックアップは商品ページでのプレビューであり、プロパティや画像が追加されることはありません。
Shopify Sidekickがオプションセットを変更することはありますか？
いいえ。Sidekick用のQikify Custom Product Options拡張機能は読み取り専用です。オプションセットを調べ、条件分岐を説明し、該当ページへ案内しますが、変更はすべてアプリ内でお客様自身が行います。
お客様に「買うもの」を見せてみませんか
Qikify Custom Product OptionsはShopify App Storeで公開中です。インストールしてストアスキャンを実行すれば最初のオプションセットが手に入ります。そのうえでモックアップをオンにして、ご自身の商品写真にお名前が乗る様子をご覧ください。
Qikify Custom Product Optionsをインストール
あわせて読む： 商品の追加オプションとしてのギフト包装
