成功
Testimonials
柔軟なグリッドまたはスライドショーで、お客様の声を商品リンクやメディアとともに表示します。
- セクションとブロックに関するShopifyドキュメント
- Testimonialブロックに関するCompany XYZドキュメント
- レイアウト設定に関するCompany XYZドキュメント
- スライドショーコントロール設定に関するCompany XYZドキュメント
- ヘッダー設定に関するCompany XYZドキュメント
- カード設定に関するCompany XYZドキュメント
- セクションの余白設定に関するCompany XYZドキュメント
- セクション背景設定に関するCompany XYZドキュメント
- 区切り線設定に関するCompany XYZドキュメント
- 表示設定に関するCompany XYZドキュメント
- レイアウト幅設定に関するCompany XYZドキュメント
お客様の声を使って顧客の引用を強調し、注目商品に結び付け、グリッドまたはスライドショーのいずれかで表示します。これは、シンプルなレビュー一覧よりもソーシャルプルーフに対してより細かなデザイン調整が必要なホームページ、ランディングページ、プロモーションページに適しています。エディターでセクションとブロックがどのように機能するかのより広い概要については、セクションとブロックに関するShopifyドキュメントを参照してください。
レイアウト設定
Section titled “レイアウト設定”レイアウト設定 は、表示されるお客様の声カードの数と、デスクトップ、タブレット、モバイルでの動作を制御します。デバイスごとにグリッドとスライドショーのレイアウトを組み合わせることができ、より大きな画面では充実したレイアウトに、小さな画面ではよりシンプルな閲覧にしたい場合に便利です。
グリッドレイアウトは、お客様の声が短く、見た目が揃っている場合に最適です。スライドショーレイアウトは、通常、長めの引用、混在メディア、または高さが大きく異なるカードにより適しています。
タブレットの列数が 0 のままの場合、タブレット画面ではデスクトップの列設定が使われます。これにより設定時間を節約できますが、カードに長い引用、商品画像、動画が含まれる場合は、タブレットの余白を確認する価値があります。
コンテンツの配置は、お客様の声の長さが異なる場合でも、カードを意図的に見せるのに役立ちます。縦方向の引き伸ばしにより、同じ行内のカード高さを揃えて、行をすっきり見せることができます。
お客様の声の長さに大きな差がある場合は、コンテンツの配置と縦方向の引き伸ばしを一緒にテストしてください。高さを揃えると通常はグリッドでよりすっきり見えますが、自然な高さのほうが編集的なレイアウトでは見やすい場合があります。
スライドショー設定
Section titled “スライドショー設定”スライドショー設定 は、いずれかのデバイスがスライドショーレイアウトに設定されている場合に適用されます。これらのコントロールは、アニメーション、自動再生、ループ、ナビゲーション、ページネーション、次のスライドの一部表示に影響します。
フェードアニメーションは、1件ずつお客様の声を目立たせたい場合に最適です。また、単一スライド表示を強制することでレイアウトの動作も変わり、複数の表示スライドに依存するスライドプレビューとページネーションのスタイルは無効になります。
自動再生は動きを加えられますが、お客様の声のコンテンツは通常、プロモーションバナーよりも遅いテンポが必要です。自動再生を有効にする場合は、遅めの遅延を設定し、顧客が自分のペースで一時停止して移動できるようにナビゲーションを表示したままにしてください。
これらのセクションレベルのカラー上書きにより、テーマの他の部分を変更せずに、アイコン、テキスト、サブ見出しの色を調整できます。これは、セクションがカスタム背景上にある場合や、グローバルスタイルより強いコントラストが必要な場合に特に役立ちます。
カードの色もカスタマイズする場合は、両方の設定をまとめて確認してください。セクションの導入部分とお客様の声カードはそれぞれ異なる色処理を使えるため、簡単なコントラスト確認がセクション全体の統一感を保つのに役立ちます。
対応ブロックタイプ
Section titled “対応ブロックタイプ”- Testimonial
テスティモニアル
Section titled “テスティモニアル”Testimonial ブロックは、個別の顧客の引用、出典行、評価、任意の商品連携を追加します。さらに、補助的な画像または動画コンテンツを含めて、お客様の声により高い視覚的な印象を与えることもできます。テスティモニアルに関するCompany XYZドキュメントを参照してください。
複数のカードを一度に見せたい場合は、短く要点を絞った引用を使用してください。お客様の声がより長いストーリーを伝える場合や、より豊かなメディアを含む場合は、スライドショーレイアウトのほうが見やすくなることがよくあります。
商品を割り当てると、カードでお客様の声を特定の商品に視覚的に結び付けることができます。商品画像のスタイリングは商品が選択されている場合にのみ適用されるため、引用だけで十分な場合は商品画像を非表示のままにしておいて問題ありません。
画像は任意ですが、カードの印象を大きく変えることがあります。シンプルな画像はお客様の声をより個人的に感じさせ、動画はより編集的、またはキャンペーン主導に感じさせることがあります。
上側の画像は、メディアの視覚的な優先度を高めます。下側の画像は、引用そのものを主役に保つため、信頼構築コンテンツではしばしばより適した選択です。
動画を使用する場合、ポスター画像があると再生開始前にカードを洗練された印象にできます。自動再生は通常、音声のない短いクリップに向いており、話し言葉のお客様の声にはあまり向きません。
ブロックレベルの共有設定
Section titled “ブロックレベルの共有設定”各お客様の声ブロックには、独自のカードカラー上書き、表示コントロール、エディタータイトルも含まれます。ブロックレベルの色変更は、特定の注目のお客様の声を強調するのに役立ちますが、選択的に使用する場合に最も効果的です。
標準セクション設定
Section titled “標準セクション設定”ヘッダー設定
Section titled “ヘッダー設定”ヘッダー設定 は、お客様の声の上に表示される導入コンテンツを制御します。これには、配置、見出し構造、任意のアイコン、補足テキスト、任意のボタンが含まれます。顧客からのフィードバック、ブランドの信頼、注目レビューについて明確なメッセージでセクションを組み立てるためにこの領域を使ってください。
ボタンを追加する場合は、その動作をお客様の声に密接に関連させてください。たとえば、コレクション、商品グループ、専用のレビュー ページへのリンクです。見出しレベルは、見た目のサイズだけでなくページ構造に基づいて選択してください。
カード設定 では、このセクションのお客様の声カードに対して、既定のカード背景、枠線、テキスト色を上書きできます。これらの設定は、カードをページ背景から持ち上がったように見せたい場合や、季節限定キャンペーンに合わせたい場合に役立ちます。
グラデーションや柔らかい背景色を使う場合は、読みやすさを優先してください。引用テキスト、出典名、評価アイコンにとって、強いコントラストが最も重要です。
余白設定 は、セクションの上下のスペースを制御します。特にこのセクションが画像の多い領域やテキストの多い領域の間に表示される場合は、十分な余白を確保するよう調整してください。
より余裕のある間隔にすると、お客様の声はより上質に感じられます。狭めの間隔はコンパクトなランディングページで有効ですが、モバイルではセクションが窮屈に見えないよう注意して確認してください。
セクション背景設定
Section titled “セクション背景設定”セクション背景設定 では、背景色、グラデーション、画像、動画、オーバーレイをセクションに追加できます。これは、お客様の声エリアを周囲のコンテンツと区別して見せたい場合に便利です。
背景メディアは雰囲気を加えられますが、読みやすさを下げることもあります。引用テキストを読みやすく保つために、オーバーレイとカラー上書きを組み合わせて使用してください。
区切り線設定
Section titled “区切り線設定”区切り線設定 は、セクションの上または下に線を追加して、ページ領域間の移行をよりすっきり見せます。全体的な背景処理を追加せずに区切りたい場合に適しています。
お客様の声カードですでに強い枠線や大胆な背景を使っている場合は、区切り線のスタイルはシンプルに保ってください。視覚的な区切りが多すぎると、ページが雑然として見えることがあります。
表示設定 は、セクションをデスクトップ、モバイル、またはその両方で表示するかを制御します。これは、大きな画面向けに1つの表示方法、小さな画面向けに別の表示方法を使いたい場合に役立ちます。
デバイス別の表示は慎重に使ってください。レイアウト上の利点が明確でない限り、同じコンテンツの複数バージョンを管理することになりかねません。
幅設定 は、セクションの幅とコンテンツの最大幅を制御します。Testimonials では、これらの設定が読みやすさとレイアウトの密度に大きく影響します。
コンテンツ幅を狭くすると、通常は長い引用が読みやすくなります。幅を広くすると、複数列グリッドに適していますが、エディターのプレビューでは幅の変化を正確に判断しにくいことがあるため、最終レイアウトはストアフロントで確認してください。
使用上の注意
Section titled “使用上の注意”- レイアウトをコンテンツに合わせる。 短くて揃ったお客様の声にはグリッドを、長い引用、混在メディア、または長さが揃っていないカードにはスライドショーを使ってください。
- 商品リンクは選択的に使う。 引用が特定の商品を明確に支えている場合にのみ、お客様の声を商品に結び付けてください。そうすることで、セクションが過度に宣伝的にならず、役立つまま保てます。
- 読みやすさを守る。 カスタム背景、グラデーション、オーバーレイ、カードカラー上書きを使うたびに、テキストのコントラストを丁寧に確認してください。
- 動きは控えめに使う。 自動再生、ループ、動画は活気を加えられますが、お客様の声コンテンツは通常、顧客が十分に読みやすいと感じる時間があるほうが効果的です。
- すべてのブレークポイントをプレビューする。 特に長い引用、画像、スライドショーの動作を組み合わせる場合は、デスクトップ、タブレット、モバイルのレイアウトをまとめて確認してください。
- ブロックでセクションのバランスを取る。 お客様の声ブロックを増やすと、セクションはシンプルなスポットライトからより充実したソーシャルプルーフのレイアウトに変わることがあります。そのため、導入コンテンツがまだ必要かどうかを確認してください。
- メディアとカラー上書きをまとめて確認する。 デスクトップとモバイルで別のメディアを使う場合や、より明示的なローカルカラーを選ぶ場合は、トリミング、表示、コントラストが変わるため、各ビューポートで簡単な最終確認が必要です。