ストア ページの特別な機能

商品のクイ⁠ック ビ⁠ュ⁠ー⁠、画像ズ⁠ーム⁠、ホバ⁠ー効果⁠、順番待ちリストを有効にして⁠、シ⁠ョ⁠ッピング体験を向上させまし⁠ょう⁠。

最終更新日 2025年1月03日

すべてのSquarespaceサイトは⁠、商品を展示して販売できるストア ペ⁠ージをサポ⁠ートしています⁠。一部のサイトは⁠、クイ⁠ック ビ⁠ュ⁠ー⁠、画像ズ⁠ーム⁠、ホバ⁠ー効果など⁠、買い物客が商品画像にカ⁠ーソルを合わせると表示される特別な機能を備えています⁠。このガイドでは⁠、これらの機能の詳細および利用できる場所について説明します⁠。

ヒント

「⁠ストアの売上促進に向けたデザインのアイデア⁠」ウ⁠ェビナ⁠ーにご登録ください⁠。このウ⁠ェビナ⁠ーでは⁠、商品をサイト全体で目立たせて売上を伸ばすために役立つツ⁠ールやヒントを紹介します⁠。

バ⁠ージ⁠ョンごとの機能

どの機能が利用できるかは⁠、サイトが使用しているSquarespaceのバ⁠ージ⁠ョンによ⁠って異なります⁠。

バ⁠ージ⁠ョン7⁠.0の場合⁠、これらのオプシ⁠ョンは⁠、Brine⁠、Farro⁠、Galapagos⁠、Skye⁠、Tremont⁠、およびYorkテンプレ⁠ート フ⁠ァミリ⁠ーで利用可能です⁠。すべてのテンプレ⁠ートの詳細については⁠、「⁠ストア ペ⁠ージのタイプ⁠」をご覧ください⁠。

バ⁠ージ⁠ョン7⁠.1では⁠、シンプル レイアウトの商品詳細ペ⁠ージで⁠、クイ⁠ック ビ⁠ュ⁠ー⁠、画像ズ⁠ーム⁠、ホバ⁠ー効果を使用できます⁠。

  バ⁠ージ⁠ョン7⁠.1
バ⁠ージ⁠ョン7⁠.0
クイ⁠ック ビ⁠ュ⁠ー
  • 商品ブロ⁠ック
  • 概要ブロ⁠ック
  • ストア ペ⁠ージ
  • 商品ブロ⁠ック
  • ストア ペ⁠ージ
  • 概要ブロ⁠ック
画像ズ⁠ーム
  • 商品詳細ペ⁠ージ
  • クイ⁠ック ビ⁠ュ⁠ー ライトボ⁠ックス
  • 商品詳細ペ⁠ージ
  • クイ⁠ック ビ⁠ュ⁠ー ライトボ⁠ックス
ホバ⁠ー効果
  • ストア ペ⁠ージの代替画像
順番待ちリスト
  • あり
  • あり (⁠Galapagosでは利用不可⁠)

画像ズ⁠ーム

画像ズ⁠ームを使⁠って商品画像を拡大することで⁠、顧客は商品の素材や質感⁠、細部まで詳しく見ることができます⁠。ホバ⁠ー時または画像をクリ⁠ックしたときにズ⁠ームが有効化されるように設定できます⁠。

画像ズ⁠ームは⁠、以下でご利用になれます⁠。

image-zoom.gif

画像ズ⁠ームを有効にする

画像ズ⁠ームを有効にする方法は⁠、サイトのバ⁠ージ⁠ョンによ⁠って異なります⁠。

画像ズ⁠⁠ームを有効にする方法は次の通りです⁠⁠。

  1. 商品詳細ペ⁠⁠ージで [⁠⁠編集⁠⁠] をクリ⁠⁠ックし⁠⁠、鉛筆アイコンをクリ⁠⁠ックします⁠⁠。
  2. [⁠⁠ホバ⁠⁠ーでのアクシ⁠⁠ョン⁠⁠] ドロ⁠⁠ップダウン メニ⁠⁠ュ⁠⁠ーをクリ⁠⁠ックします⁠⁠。
  3. [⁠⁠ズ⁠⁠ーム ⁠⁠] を選択します⁠⁠。

画像ズ⁠⁠ームを有効にする方法は次の通りです⁠⁠。

  1. 商品詳細ペ⁠⁠ージで⁠⁠、[⁠⁠Webサイト⁠⁠] パネルに戻り⁠⁠、[⁠⁠デザイン⁠⁠]⁠⁠、[⁠⁠サイト スタイル⁠⁠] の順にクリ⁠⁠ックします⁠⁠。
  2. [⁠⁠商品⁠⁠: 画像ズ⁠⁠ーム⁠⁠] セクシ⁠⁠ョンまでスクロ⁠⁠ールします⁠⁠。(⁠⁠Galapagosでは⁠⁠、[⁠⁠商品アイテム⁠⁠] セクシ⁠⁠ョンまでスクロ⁠⁠ールします⁠⁠。⁠⁠)
  3. [⁠⁠画像ズ⁠⁠ームを有効化⁠⁠] のチ⁠⁠ェ⁠⁠ックボ⁠⁠ックスをオンにします⁠⁠。
  4. 倍率レベルを設定するには⁠⁠、[⁠⁠ズ⁠⁠ーム率⁠⁠] のスライダ⁠⁠ーを1から5の間で調整します⁠⁠。(⁠⁠Galapagosでは画像ズ⁠⁠ーム倍率と呼ばれています⁠⁠。⁠⁠)
  5. カ⁠⁠ーソルが画像上を移動するタイミングですぐに画像をズ⁠⁠ームするかどうかを選択するには⁠⁠、[⁠⁠ズ⁠⁠ームを有効化するタイミング⁠⁠] を [⁠⁠クリ⁠⁠ック⁠⁠] または [⁠⁠ホバ⁠⁠ー⁠⁠] に設定します⁠⁠。(⁠⁠Galapagosでは⁠⁠、ズ⁠⁠ームは常にホバ⁠⁠ー時に有効になります⁠⁠。⁠⁠)

画像ズ⁠ームに関するその他のヘルプ

  • 画像ズ⁠ームは⁠、拡大された画像を表示します⁠。実際に画像フ⁠ァイルにズ⁠ームインするわけではありません⁠。
  • 画像ズ⁠ームはモバイル端末では利用できません⁠。
  • 最適な結果を得るには⁠、ア⁠ップロ⁠ードする前に商品画像をWeb表示用にフ⁠ォ⁠ーマ⁠ットしてください⁠。
  • 背景が透明な画像 (⁠⁠.png⁠) では⁠、拡大されたバ⁠ージ⁠ョンの背後に元の画像が表示されます⁠。
  • バ⁠ージ⁠ョン7⁠.1では⁠、カル⁠ーセル デザインの商品ギ⁠ャラリ⁠ーでは画像ズ⁠ームは利用できません⁠。

クイ⁠ック ビ⁠ュ⁠ー

クイ⁠ック ビ⁠ュ⁠ーを使うと⁠、顧客がボタンをクリ⁠ックしたときに⁠、表示中のペ⁠ージから移動せずにライトボ⁠ックス内で商品の詳細を見ることができます⁠。クイ⁠ック ビ⁠ュ⁠ーは⁠、顧客のストアへの関心を高め⁠、より多くの商品を閲覧するよう誘導するのに役立ちます⁠。

クイ⁠ック ビ⁠ュ⁠ー ボタンは⁠、次の場所に表示できます⁠。

  • 概要ブロ⁠ック
  • 商品ブロ⁠ック
  • ストア ペ⁠ージ

このボタンは⁠、商品にカ⁠ーソルを合わせると表示されます⁠。クイ⁠ック ビ⁠ュ⁠ー ライトボ⁠ックスには⁠、商品の詳細⁠、画像⁠、および商品のペ⁠ージに移動する [⁠アイテム全体を表示⁠] リンクが含まれます⁠。

Product_Block_with_Quick_View.png

不要なコ⁠ードがクイ⁠ック ビ⁠ュ⁠ーに表示される場合は⁠、商品説明に外部テキストの書式設定が含まれている可能性があります⁠。書式設定を取り除くには⁠、商品説明を手動で再入力するか⁠、プレ⁠ーン テキストとして貼り付けてください⁠。

クイ⁠ック ビ⁠ュ⁠ー ボタンを追加する

ストア ペ⁠ージおよびブロ⁠ックごとにクイ⁠ック ビ⁠ュ⁠ーを有効にすることができます⁠。複数のストア ペ⁠ージまたはブロ⁠ックがある場合は⁠、それぞれにボタンを追加してください⁠。

商品ブロ⁠ックにクイ⁠ック ビ⁠ュ⁠ーを追加する方法は次の通りです⁠。

  1. 商品ブロ⁠ック エデ⁠ィタ⁠ーで⁠、表示する商品を選択します⁠。
  2. [⁠デザイン⁠] タブで⁠、[⁠商品のクイ⁠ック ビ⁠ュ⁠ー⁠] トグルをオンにします⁠。
  3. ペ⁠ージの変更を保存します⁠。

概要ブロ⁠ックにクイ⁠ック ビ⁠ュ⁠ーを追加する方法は次の通りです⁠。

  1. 概要ブロ⁠ック エデ⁠ィタ⁠ーで⁠、[⁠コンテンツ⁠] タブでストア ペ⁠ージが選択されていることを確認します ⁠。
  2. [⁠デザイン⁠] タブをクリ⁠ックします⁠。
  3. [⁠商品のクイ⁠ック ビ⁠ュ⁠ーを有効化⁠] トグルをオンにします⁠。クイ⁠ック ビ⁠ュ⁠ー ボタンは⁠、ブロ⁠ック内の全商品のアイキ⁠ャ⁠ッチ画像の上に表示されます⁠。
  4. ペ⁠ージの変更を保存します⁠。

ストア ペ⁠ージにクイ⁠ック ビ⁠ュ⁠ーを追加する方法は次の通りです⁠。

  1. ペ⁠ージの設定を開きます⁠。
  2. [⁠詳細設定⁠]⁠、[⁠クイ⁠ック ビ⁠ュ⁠ー⁠] の順にクリ⁠ックし⁠、[⁠クイ⁠ック ビ⁠ュ⁠ーを有効化⁠] のトグルをオンに切り替えます⁠。
  3. 複数のストア ペ⁠ージがある場合は⁠、各ペ⁠ージごとに同じ手順を繰り返します⁠。

ボタンとライトボ⁠ックスのスタイル設定 (⁠バ⁠ージ⁠ョン7⁠.0のみ⁠)

クイ⁠ック ビ⁠ュ⁠ーを有効にすると⁠、[⁠サイト スタイル⁠] パネルに新しいセクシ⁠ョンが表示されます⁠。スタイル設定がサイト全体に適用され⁠、見た目に一貫性を持たせることができます⁠。

  1. ホ⁠ーム メニ⁠ュ⁠ーで⁠、[⁠Webサイト⁠]⁠、[⁠デザイン⁠]⁠、[⁠サイト スタイル⁠] の順にクリ⁠ックします⁠。
  2. [⁠商品⁠: クイ⁠ック ビ⁠ュ⁠ー ボタン⁠] セクシ⁠ョンで⁠、クイ⁠ック ビ⁠ュ⁠ー ボタンのスタイル⁠、色⁠、フ⁠ォント⁠、パデ⁠ィング⁠、位置⁠、サイズをカスタマイズします⁠。
  3. [⁠商品⁠: クイ⁠ック ビ⁠ュ⁠ー ライトボ⁠ックス⁠] セクシ⁠ョンで⁠、ライトボ⁠ックスの外観をカスタマイズします⁠。

ヒント

クイ⁠ック ビ⁠ュ⁠ー テキストの書式設定に問題がある場合は⁠、商品詳細をプレ⁠ーン テキストとして追加してみてください⁠。

クイ⁠ック ビ⁠ュ⁠ーに関するその他のヘルプ

  • クイ⁠ック ビ⁠ュ⁠ーはモバイル端末では利用できません⁠。
  • 現時点では⁠、「⁠クイ⁠ック ビ⁠ュ⁠ー⁠」ボタンのテキストはカスタマイズできません⁠。
  • 商品画像はクイ⁠ック ビ⁠ュ⁠ーで正方形にトリミングされて表示されます⁠。
  • バ⁠ージ⁠ョン7⁠.0では⁠、商品の説明は⁠、ヘ⁠ッダ⁠ーのスタイル⁠、太字⁠、斜体⁠、箇条書きリスト⁠、改行などの特別な書式設定がない状態でクイ⁠ック ビ⁠ュ⁠ーに表示されます⁠。

ホバ⁠ー効果

ホバ⁠ー効果は⁠、商品画像にカ⁠ーソルを合わせたときに情報を表示したり動きを作成したりして⁠、ストアにインタラクシ⁠ョンやアニメ⁠ーシ⁠ョンを追加します⁠。サイトで使用できるホバ⁠ー オプシ⁠ョンは⁠、サイトのバ⁠ージ⁠ョンによ⁠って異なります⁠。

商品に複数の画像がある場合は⁠⁠、カ⁠⁠ーソルを合わせたときに2番目の代替商品画像がどのストア ペ⁠⁠ージでも表示されます⁠⁠。

Brine⁠⁠、Farro⁠⁠、Skye⁠⁠、Tremont⁠⁠、およびYorkのテンプレ⁠⁠ート フ⁠⁠ァミリ⁠⁠ー (⁠⁠アドバンスト ストア ペ⁠⁠ージを含む⁠⁠) には以下の3つのオプシ⁠⁠ョンがあります⁠⁠。

  • 代替画像
  • フ⁠⁠ェ⁠⁠ード
  • 商品情報オ⁠⁠ーバ⁠⁠ーレイ

以下のテンプレ⁠⁠ート フ⁠⁠ァミリ⁠⁠ー (⁠⁠クラシ⁠⁠ック ストア ペ⁠⁠ージの場合⁠⁠) では⁠⁠、カ⁠⁠ーソルを合わせるたときにカラ⁠⁠ー オ⁠⁠ーバ⁠⁠ーレイ上に商品名と価格を表示できます⁠⁠。

  • Adirondack⁠⁠、 Avenue⁠⁠、Aviator⁠⁠、Bedford⁠⁠、Five⁠⁠、Flatiron⁠⁠、Forte⁠⁠、Ishimoto⁠⁠、Momentum⁠⁠、Montauk⁠⁠、Native⁠⁠、Pacific⁠⁠、Wells⁠⁠、Wexley

このうち2種類のテンプレ⁠⁠ートには⁠⁠、独自のホバ⁠⁠ー オプシ⁠⁠ョンがあります⁠⁠。

Footer Image
  • コミ⁠ュニテ⁠ィからサポ⁠ートを受ける

  • 高度なカスタマイズについて⁠、コミ⁠ュニテ⁠ィからサポ⁠ートを受けられます⁠。

  • Squarespace Expertを雇う

  • 経験豊富なデザイナ⁠ーや開発者から力を借りて⁠、オンラインで目を引くサイトを構築しまし⁠ょう⁠。