価格表ブロックを使用すると、製品やサービスを魅力的に紹介するための視覚的に優れた高度な価格表を作成できます。サブスクリプションプラン、サービスレベル、製品パッケージのいずれを提示する場合でも、このブロックでは各プランの表示方法を完全に制御できます。
各価格表には、プラン名、通貨記号付きの価格、請求期間、説明、オプションの通常価格/元価格、機能リスト、最大2つのアクションボタンが含まれます。複数の価格表ブロックを並べて配置することで、訪問者がプランを比較し購入判断を下すのに役立つ完全な価格セクションを作成できます。
ページに価格表ブロックを追加する
SeedProdページに価格表ブロックを追加するには、以下の手順に従ってください：
ステップ1: ブロックを追加する
デザイン ＞ ブロック の下にある「価格表」ブロックを、ページの希望するセクションにドラッグ＆ドロップします。
ステップ2: コンテンツ設定の構成
追加後、価格表ブロックをクリックして設定を開きます。「コンテンツ」タブは、プランヘッダーとボタンのメイン設定領域と、プランの機能項目を管理する「機能リスト」セクションで構成されています。
プランヘッダー:
- プラン名：料金プランの名前を入力してください（例：ベーシック、プロ、エンタープライズ）。これは料金表の上部に目立つように表示されます。
- 価格:プランの価格を数値で入力してください（例: 29）。通貨記号と小数点は別途設定されます。
- 通貨記号：ドル（$）、ユーロ（€）、ポンド（£）、ルピー（₹）、円（¥）など、一般的な通貨のドロップダウンリストから表示する通貨記号を選択してください。「カスタム」を選択すると、カスタム記号欄に必要な記号を入力できます。
- 通貨記号の位置：通貨記号を価格の数字の前 か後に表示するかを設定します。
- 期間:価格の後に表示される課金期間の表記を入力してください（例: /月、/年、/ユーザー）。期間表記なしで価格を表示する場合は空白のままにしてください。
- 通常価格を表示：現在の価格の上に元の価格または通常価格を表示するにはオンにします。割引価格を表示するのに便利です。有効にした場合、通常価格の金額と、その前に表示する通常価格ラベル（例：「通常は」）を入力してください。
- 説明:プランの短いキャッチコピーまたは説明を入力してください（例: 「初心者向け」）。太字、斜体、下線、リンクを含む基本的なリッチテキスト形式に対応しています。
ボタン:
- トップボタンを表示：有効にすると機能リストの上にアクションボタンが表示されます。有効化後、トップ ボタンのテキストとリンクを入力し、必要に応じてリンクを「新しいウィンドウで開く」にチェックします。トップボタンの角丸半径（0～100px）を設定してボタンの角の丸みを調整します。
- 下部ボタンを表示：有効にすると、機能リストの下に2つ目のアクションボタンが表示されます。有効にした場合、下部ボタンテキストと 下部ボタンリンクを入力し、必要に応じて「新しいウィンドウで開く」にチェックを入れます。デザインに合わせて下部ボタンの角丸半径を設定してください。
機能一覧:
- 機能項目：各機能はドラッグ可能な行として表示されます。項目をドラッグして並べ替えが可能です。項目にカーソルを合わせると複製と削除ボタンが表示されます。項目のテキストをクリックすると個別の設定を展開できます。
- アイテムの説明文を入力してください。太字、斜体、下線、リンクを含む基本的なリッチテキスト書式設定をサポートしています。
- アイコン:アイコンピッカーを使用して、機能テキストの横に表示するアイコンを選択してください。デフォルトはチェックマークアイコンです。
- 新規アイテム追加:機能リストの下部にあるボタンをクリックして、新しい機能行を追加します。
ステップ3：デザインのカスタマイズ
詳細設定タブでは、価格表のタイポグラフィ、色、ボタン、および全体的な外観を微調整できます。詳細設定タブは5つのスタイルセクションで構成され、その後ろに標準的な間隔と表示制御が続きます。
ヘッダー:
- プラン名のタイポグラフィ:プラン名テキストのフォントファミリー、サイズ、太さ、スタイルを設定します。
- プラン名カラー：プラン名のテキストの色を設定します。
- 通常価格のタイポグラフィ:「通常価格を表示」オプションが有効な場合、通常（元の）価格テキストのタイポグラフィを設定します。
- 通常価格の色：通常価格のテキストの色を設定します。
- 説明のタイポグラフィ:プラン説明テキストのタイポグラフィを設定します。
- 説明文の色：説明文のテキストの色を設定します。
- 背景色：ヘッダー領域（プラン名、価格、説明）の背景色を設定します。
- パディング：ヘッダー領域内の内側の間隔を設定します（0～100px）。
ボタン:
- 上部ボタン色：上部アクションボタンの背景色を設定します。
- トップボタンのサイズ：トップボタンのサイズをお選びください — 小、中、大、特大、または2倍特大。
- テキストアイコンの前に表示されるボタン:アイコンピッカーを使用して、ボタンラベルテキストの前に表示されるアイコンを追加します。
- テキストアイコン後のトップボタン：ボタンラベルテキストの後に表示されるアイコンを、アイコンピッカーを使用して追加します。
- 下部ボタン色：下部コールトゥアクションボタンの背景色を設定します。
- ボトムボタンサイズ：ボトムボタンのサイズをお選びください — 小、中、大、特大、または2倍特大。
- 下部のボタン前のテキストアイコン：下部のボタンラベルテキストの前に表示されるアイコンを追加します。
- テキストアイコンの後の下部ボタン:下部ボタンのラベルテキストの後に表示されるアイコンを追加します。
価格だ：
- 価格の書体設定：メイン価格表示のフォントファミリー、サイズ、太さ、スタイルを設定します。
- 価格色：メイン価格数字の色を設定します。
- 価格上付き文字の書体設定：価格の横に上付き文字として表示される通貨記号の書体を設定します。
- 価格上付き文字位置：価格数値に対する通貨記号の上付き文字の垂直位置を調整します。
機能一覧:
- 機能リストのタイポグラフィ:全ての機能項目のテキストに対して、フォントファミリー、サイズ、太さ、スタイルを設定します。
- 機能一覧の色:機能項目のテキスト色を設定します。
- アイコンの色:各機能項目の横に表示されるアイコンの色を設定します。
- スペースの間隔：リスト内の各項目間の間隔（1～100px）を設定します。
- 配置:機能リストの水平方向の配置を設定します — 左、中央、または右。
- 背景色：機能リスト領域の背景色を設定します。
- パディング：機能リスト領域内の内側の間隔を設定します（0～100px）。
ブロック:
- 角丸半径：価格表ブロック全体の角丸設定（0～100px）。
- 境界線のスタイル:ブロックの境界線のスタイルを設定します — 実線、点線、または破線。
- 枠線の色:ブロックの枠線の色を設定します。
- 枠線の太さ：各辺（上、右、下、左）ごとの枠線の太さを設定します。同期アイコンを切り替えると、すべての辺に同じ値を一度に適用できます。
スペース:
- マージン：価格表ブロックの周囲の外側スペース（上、右、下、左）を制御します。これにより、テーブルとページ上の周囲の要素との間に表示されるスペースが決まります。
- パディング：価格表ブロック内の内側の余白（上、右、下、左）を調整します。これにより、表の内容とブロックの端の間に余裕が生まれます。
属性：
- CSS ID:価格表ブロックの自動生成された一意の識別子を表示します。このIDは、カスタムスタイリングやJavaScriptのターゲティングのためにSeedProdによって自動的に作成されます。
- カスタムクラス：テーマやカスタムCSSから特定のスタイルを適用するためのカスタムCSSクラスを追加します。
- カスタム属性:ブロックラッパー要素に任意のHTML属性を追加します。各属性は改行で区切り、以下の形式で入力してください: 属性名|値 (例: data-plan|pro)。
デバイスの可視性:
- デスクトップで非表示:デスクトップ画面で価格表ブロックを非表示にします。
- タブレットで非表示:タブレット端末では価格表ブロックを非表示にします。
- モバイルで非表示:モバイル端末では価格表ブロックを非表示にします。
アニメーション効果：
- 表示アニメーション：価格表が表示される際に再生される様々なアニメーション効果から選択できます。バウンス、フェードイン、ズームイン、回転インなど多数のオプションが用意されています。控えめなアニメーションを追加することで、適切なタイミングで価格プランへの注目を促すことができます。
ステップ4: 変更を保存する
価格表ブロックの設定と外観のカスタマイズが完了したら、必ず作業内容を保存してください。
ページに価格表ブロックを正常に追加しました！複数の価格表ブロックを縦に並べて配置し、訪問者がプランを一目で比較できる完全な価格セクションを作成しましょう。ヘッダーの背景色、ボタンの色、タイポグラフィを自由に試して、ブランドに合った価格セクションを構築し、コンバージョンを促進してください。