概要
DecorViz Storefrontは、商品ページに「自分の部屋で見る」ボタンを自動で追加します。サイト全体に一度設置するだけで、商品ページを自動で検出し、ページから商品写真を取得して、カートに追加ボタンの近くにボタンを配置します。
このガイドでは、WooCommerce、Wix、Squarespace、独自に構築したサイトでの設定方法を説明します。DecorVizのWebダッシュボードでストアフロントを設定し、サイト共通のテンプレートにscriptタグを1つ貼り付けるだけです。商品ごとのダッシュボード作業はありません。コードが公開されれば、ストアのすべての商品ページが対象になります。
WordPressに絞った手順は、WooCommerce ストアフロント設定ガイドをご覧ください。
Shopifyのストアではコードを使いません。Shopify App StoreからDecorViz: Furniture Visualizerアプリをインストールし、Shopifyアプリ設定ガイドに沿って設定してください。
ストアフロントはストアフロントプランに含まれています。ストアフロントを開いて始めましょう。
事前の準備
始める前に、次のものを用意してください。
- ストアフロントのご契約：ストアフロントは、有効なストアフロントプランでのみ利用できます。プランを確認し、必要に応じてアップグレードしてください。
- オンラインストア：商品ページのあるECプラットフォームまたはWebサイト。
- テーマやサイトのコードを編集できる権限：1つのページではなく、サイト共通のテンプレート（テーマファイル、フッター、コード挿入の設定など）にscriptタグを1つ貼り付けます。
ストアフロントは、お客様が見ているページから直接商品画像を読み取ります。商品ページに商品の鮮明な写真があれば、追加でアップロードするものはありません。
パート1：DecorViz ストアフロントの設定
DecorViz ストアフロントのダッシュボードを開きます。アプリでは、右上のアカウントメニューからも開けます。左のメニューには概要、商品、外観、設定の4つのページがあります。
ステップ1：ストアフロントを作成する
DecorVizのアカウントごとに、1つのWebサイトのドメインに紐づいたストアフロントを1つ運用できます。初めて開いたときに作成を求められます。
ドメインを入力する
yourstore.comのように、「https://」や末尾のスラッシュを付けずにストアのドメインを入力します。
プラットフォームを選ぶ
自動検出、Shopify、WooCommerce、汎用／カスタムから選びます。多くのストアでは自動検出がうまく動作するため、最初はこれがおすすめです。検出の調整が必要になったら、あとから設定で変更できます。
ドメインの照合を設定する
そのドメインだけでボタンを表示する場合は完全一致のドメインを、サブドメイン（例：別のshop.yourstore.com）にも商品ページがある場合はサブドメインを含むを選びます。
DecorVizのアカウントごとに、ストアフロントとドメインは1つずつです。別のWebサイトでも使いたい場合は、別のアカウントが必要です。
ステップ2：検出とボタンを設定する
商品の検出は設定ページ、ボタンの見た目と位置は外観ページで設定します。多くのストアでは初期設定のままでうまく動きますが、公開前に一度確認しておきましょう。
検出の設定
設定ページで、プラットフォームモードがストアに合っているか確認します（自動検出のままでも構いません）。必要に応じて最小信頼度を調整します。値を下げると多くの商品ページを検出できますが、商品以外のページにボタンが出る可能性があります。値を上げると判定が厳しくなります。推奨値は0.50です。
ボタンの見た目と位置
外観ページでは、変更に合わせてプレビューにボタンが表示されます。
- ボタンのテキスト：お客様がボタン上で見る文言
- スタイル：塗りつぶしまたは枠線
- 角の形：丸角または四角
- 色と、影のオン・オフ
- 位置：カート追加ボタンの上（推奨）、カート追加ボタンの下、商品画像の下、画像の上（中央、左下、右下）、画面に固定（右下、左下）、またはカスタム位置（上級）
- カスタム位置ではCSSセレクターを入力し、ボタンを配置で、その要素の前、後ろ、内側のいずれかを選びます
設定が終わったら変更を保存をクリックします。
ステップ3：インストールコードをコピーする
検出とボタンを設定して保存すると、DecorVizはアカウントのインストールキーと現在の設定に紐づいたインストールコードを1つ発行します。ストアに追加するコードはこれだけです。
コードをコピーする
設定ページで変更を保存の下までスクロールし、インストールコードのカードでコピーをクリックします。これでパート2に進めます。
インストールコードのカードには、セキュリティのためのキーを更新ボタンもあります。更新するとすぐに以前のキーが無効になり、新しいキーでコードを更新するまでストアにボタンが表示されなくなります。すぐに設置し直せるときだけ更新してください。
パート2：ストアのWebサイト側の設定
ステップ3のコードを、すべてのページで読み込まれる場所（サイト共通のテーマファイル、フッター、コード挿入の設定など）に一度だけ貼り付けます。1つの商品ページだけに置かないでください。すべての商品を検出するには、サイト全体で動作する必要があります。
Shopifyのストアでは、スクリプトを貼り付ける代わりにShopify App StoreからDecorViz: Furniture Visualizerアプリをインストールし、Webダッシュボードではなく Shopify の管理画面ですべて設定します。Shopifyアプリ設定ガイドをご覧ください。
WooCommerce
WooCommerceはWordPress上で動くため、コードは1つの商品ではなく、テーマ共通のフッターに入れます。
ヘッダー・フッター用プラグインを使う（推奨）
「Insert Headers and Footers」や「WPCode」などの軽量なプラグインをインストールします。DecorVizのコードをFooterのスクリプト欄に貼り付けて保存します。この方法なら、テーマを更新してもコードは消えません。
またはfooter.phpを直接編集する
テーマファイルを編集したい場合は、外観 → テーマファイルエディターでfooter.phpを開き、終了タグ</body>の直前にコードを貼り付けます。テーマの更新後も変更を残したい場合は、子テーマを使ってください。
Code added here will be loaded just before the closing </body> tag, on every page of your site.
これで、WooCommerceのすべての商品ページにボタンが表示されます。商品ギャラリーの画像とカートに追加ボタンをもとに、自動で検出されます。
Wix、Squarespaceなどのプラットフォーム
コードは標準的なHTMLです。すべてのページで読み込まれるカスタムコードを追加できる場所なら、どこでも動作します。
| プラットフォーム | コードの追加方法 |
|---|---|
| Wix | Wixエディターで設定 → カスタムコードを開いて新しいコードを追加し、すべてのページのBody - endの位置で読み込むように設定して、コードを貼り付けます。 |
| Squarespace | 設定 → 高度な設定 → コードの挿入を開き、フッター欄にコードを貼り付けて保存します。 |
| Webflow | Project Settings → Custom Code → Footer Codeを開き、サイト全体に適用されるようにコードを貼り付けて公開します。 |
| 独自のHTMLサイト | すべてのページで共通して使われるレイアウトやテンプレートの、終了タグ</body>の直前にコードを追加します。 |
| そのほかのプラットフォーム | サイト全体に適用される「カスタムコード」「トラッキングスクリプト」「フッターコード」などの設定を探し、そこにコードを貼り付けます。 |
特定のランディングページだけに入れるトラッキングピクセルとは違い、このコードはすべての商品ページで読み込まれる必要があります。1ページだけの埋め込みではなく、共通テンプレート、フッター、または「すべてのページ」に適用されるコード挿入の設定を使ってください。
パート3：商品を管理する
コードを公開したら、商品ページを開きます。ボタンが表示されたすべての商品ページがカテゴリー別に並び、表示回数、最後に確認された日、商品写真、ボタンのスイッチが表示されます。変更は次にページが読み込まれたときに反映されます。
ページやカテゴリーのボタンをオフにする
- 1つのページ：販売終了や在庫切れの商品などは、そのボタンをオフにします。
- カテゴリー全体：カテゴリーをオフにすると、あとから追加される商品も含め、そのカテゴリーのすべての商品でボタンが表示されなくなります。ギフトカード、アクセサリー、交換部品などに便利です。
商品ページを自分で追加する
お客様がまだ訪れていないページや、DecorVizが商品として認識しないページを管理したいときは、ページ上部の商品URLを追加にURLを貼り付けてURLを追加をクリックします。更新をクリックすると、ダッシュボードを再読み込みせずに最新の検出結果を取得できます。
商品写真を直す
ボタンには商品ページのメイン写真が使われます。DecorVizが違う写真を選んだ場合や写真が見つからない場合は、商品写真の下の置き換え（または画像を設定）をクリックし、正しい写真をアップロードします。ページの画像を使用を選ぶと、商品ページの写真に戻ります。
商品オプション：木の色、カラー、生地
木の色、カラー、生地などが複数ある商品は、それぞれをオプションとして追加すると、お客様が自分の部屋でそれぞれを確認できます。商品写真の下にあるオプションを追加をクリックします。
- ページの写真は常に最初に表示されます。オプションごとに、さらに最大10枚の写真（JPG、PNG、WebP）を追加できます。
- ウォルナットやエメラルドベルベットのように、それぞれの写真に名前を付けます。名前は任意で、名前のない写真には何も表示されません。
- 矢印で順番を決めて、保存をクリックします。
プレビュー画面では、お客様が矢印で写真を切り替え、各オプションの名前を確認し、選んだものでプレビューを生成します。オプションがある商品では、オプション（2）のようにリンクに数が表示されます。
商品の一覧には、実際にボタンが表示されたページだけが表示されます。期待した商品が見当たらない場合は、そのページを自分で開いて検出させるか、URLを手動で追加してください。
動作確認
コードを保存したら、お客様に案内する前にすべて正しく動作しているか確認します。
- 公開中の商品ページをいくつか開く：シンプルな商品、バリエーションの多い商品、独自に作ったページなど、テンプレートの異なるページで確認します。
- ボタンが表示されることを確認：選んだテキスト、色、スタイルで、想定した場所に表示されているか確認します。
- 商品ページを確認：開いたページが検出され、記録されていることを確認します。
- 実際に生成してみる：ボタンをクリックし、部屋の写真をアップロードして、結果が正しく表示されることを確認します。
- 商品以外のページを開く：トップページやブログ記事で、ボタンが表示されないことを確認します。
- スマートフォンでも確認：多くのお客様はスマートフォンで閲覧しています。
ステージングサイトや下書きのプレビューではなく、公開中のストアのURLを見ているか確認してください。また、ストアフロントの設定のドメインがストアのドメインと完全に一致しているか（https://なし、末尾のスラッシュなし）、サブドメインの照合の設定も確認してください。
うまくいかないとき
どこにもボタンが表示されない
- コードが1つのページではなく、サイト共通のテンプレート（footer.php、サイト全体のコード挿入など）に入っているか確認します
- 設定ページでストアフロントを有効にするがオンになっているか確認します
- 設定ページのドメインが、公開中のストアのドメインと完全に一致しているか確認します
- 最近インストールキーを更新した場合は、公開中のコードが新しいキーを使っているか確認します
- ブラウザのキャッシュをクリアして、ページを再読み込みします
特定の商品ページにボタンが表示されない
- 最小信頼度を少し下げるか、自動検出ではなくプラットフォームモードを明示的に設定します
- 商品ページで、その商品のカテゴリーがオフになっていないか確認します
- 商品ページで、そのページがオフになっていないか確認します
- テーマを大きくカスタマイズしている場合は、外観ページでカスタム位置（上級）を選び、CSSセレクターを入力します
商品以外のページにボタンが表示される
- 最小信頼度を上げます
- 自動検出ではなく、プラットフォームモードを明示的に設定します
商品画像が違う、または表示されない
- スクリプトはページからメインの商品画像を直接取得します。その画像が、クリックするまで読み込まれない設定になっておらず、お客様に通常どおり表示されているか確認してください
- テーマの画像の構造が特殊な場合は、ギャラリーのマークアップを確認しますので、サポートまでご連絡ください
ボタンは表示されるが、生成できない
- ストアフロントのご契約が有効か確認します
- プレビューの残りがあるか確認します。上限に達してもボタンは表示されますが、お客様にはプレビューの代わりに、一時的に利用できない旨のメッセージが表示されます
サポートチーム（[email protected]）にご連絡いただくか、DecorVizのダッシュボードのチャットをご利用ください。
よくある質問
商品ごとにウィジェットを設定する必要がありますか？
いいえ。ストアフロントはサイト全体に1つのコードを使います。設置後に追加した新しい商品も含め、商品ページと商品画像を自動で検出します。
ストアフロントはいくつ作成できますか？
DecorVizのアカウントごとに1つで、1つのドメインに紐づきます。複数のストアを運営している場合は、ストアごとにアカウントが必要です。
特定の商品でボタンを非表示にできますか？
はい。商品ページでページごとにオフにするか、同じページでカテゴリー全体（ラグ、照明、ウォールアートなど）をオフにできます。
お客様は木の色、カラー、生地の違いを試せますか？
はい。商品ページで商品写真の下にある「オプションを追加」をクリックし、木の色、カラー、生地ごとに写真を追加します。お客様はプレビュー画面で切り替えて、選んだものを自分の部屋で確認できます。
インストールキーを更新するとどうなりますか？
以前のキーはすぐに使えなくなります。公開中のコードを新しいキーに更新するまでストアからボタンが消えるため、すぐに設置し直せるときだけ更新してください。
WooCommerce以外のプラットフォームでも使えますか？
はい。汎用の検出は、Wix、Squarespace、Webflow、独自に構築したサイトなど、ほとんどのECテーマに対応しています。テーマに合わせて位置を細かく指定したい場合は、外観ページでカスタムのCSSセレクターを設定できます。
Shopifyのストアです。このガイドを使えますか？
いいえ、このガイドは必要ありません。Shopifyのストアでは、コードを貼り付ける代わりにShopify App StoreからDecorVizアプリをインストールし、Shopifyの管理画面でボタンを設定します。Shopifyアプリ設定ガイドをご覧ください。
ストア側でお客様の部屋の写真を見られますか？
いいえ。お客様の部屋の写真はプレビューの生成だけに使われます。ストアフロントのダッシュボードで、ストア側がその写真を見たり、一覧表示したり、ダウンロードしたりすることはできません。
生成のクレジットを使いますか？
はい。お客様が生成を完了するごとに、ストアフロントプランのクレジットを使います。
ストアの表示が遅くなりませんか？
スクリプトは非同期で読み込まれるため、ページの表示を妨げません。
さっそく始めましょう
ストアフロントを一度設置すれば、ストア全体の商品検出はDecorVizにお任せいただけます。