SeedProd ドキュメンテーション

SeedProdのドキュメント、参考資料、チュートリアル

星評価ブロック

スター評価ブロックは、SeedProdのあらゆるページに視覚的な星評価を表示できます。製品レビュー、サービス評価、またはお客様の声への信頼性付与など、あらゆる場面で活用可能です。このブロックは、オプションのテキストラベルと共に塗りつぶされた星アイコンの列を表示し、訪問者に一目で認識できる品質の指標を即座に提供します。

星評価ブロックでは、評価スケール(0~5または0~10)、具体的な評価値、星のサイズと間隔を完全に制御できます。タイポグラフィやカラーオプションと組み合わせることで、大胆なマーケティングページからミニマルなレビューレイアウトまで、あらゆるデザインシステムにシームレスに調和するスタイルを実現します。

SeedProdページ上に表示される、5つの塗りつぶされた金色の星とラベルを持つ星評価ブロック

要件 スター評価ブロックは、すべてのライセンスプランでご利用いただけます。


ページへの星評価ブロックの追加

SeedProdページに星評価ブロックを追加するには、以下の手順に従ってください:

ステップ1: ブロックを追加する

デザイン > ブロックで、星評価ブロックをページの目的のセクションにドラッグ&ドロップします。

スター評価ブロックをSeedProdページにドラッグする

ステップ2: コンテンツ設定の構成

追加後、星評価ブロックをクリックして設定を開きます。コンテンツタブで、星評価セクションを使用して評価表示を設定します:

  • 評価尺度:ドロップダウンメニューから0~5または0~10の評価尺度を選択してください。
  • 評価:スライダーを使用して正確な評価値を設定します。利用可能な範囲は選択した評価尺度に基づいて調整されます。最大5段階または最大10段階まで、0.5刻みで設定可能です。
  • ラベル:星の評価の横に表示する任意のテキストラベルを入力します。例えば、レビュー数や短い説明(例:「5点満点中4.5点」)などです。
  • 配置:星の行の水平方向の配置を設定します — 左、中央、または右 — デスクトップ、タブレット、モバイルごとに個別に制御できます。
  • サイズ:スライダー(0~100px)でアイコンサイズを調整し、星を大きくしたり小さくしたりできます。
  • スペースの間隔:各星アイコン間の間隔をスライダーで調整(1~100px)。
スター評価ブロックのコンテンツタブ設定(評価スケール、評価値、ラベル、サイズ、間隔の制御を表示)

ステップ3:デザインのカスタマイズ

[詳細設定]タブでは、星評価ブロックの外観をカスタマイズできます。[スタイル]セクションには以下のオプションが含まれます:

  • タイポグラフィ:ラベルテキストのフォントファミリー、サイズ、太さ、スタイル、行間、文字間隔、および文字の大文字小文字を設定します。
  • スターカラー:星アイコンの塗りつぶし色を選択(デフォルトは金色)。
  • テキストの色:星の横に表示されるラベルテキストの色を設定します。

[詳細設定]タブでは、間隔(余白とパディング)、カスタムCSS属性、デバイス表示設定、および登場アニメーションの制御も提供します。

星評価ブロックの詳細タブに表示されるスタイルセクション(書体、星の色、テキストの色オプションを含む)

ステップ4: 変更を保存する

スター評価ブロックの設定と外観のカスタマイズが完了したら、必ず作業内容を保存してください。


ページに星評価ブロックの追加に成功しました!お客様の声、製品レビュー、事例紹介など、品質と信頼性を一目で伝えたい場所でお使いください。サイズや色、ラベルテキストを自由に試して、ページデザインに自然に溶け込む星評価を作成しましょう。

関連記事