プログレスバーブロックを使用すると、SeedProdの任意のページにアニメーション付きの視覚的な進捗バーを追加できます。資金調達目標の強調表示、スキルレベルの表示、キャンペーンの完了状況の表示、またはパーセンテージベースの指標の伝達など、あらゆる情報を整理された魅力的な方法で簡単に提示できます。
各プログレスバーは完全にカスタマイズ可能です。コンテンツタブでラベルテキスト、進行率、バーの色を設定し、4種類の既製スタイルテンプレートから選択した後、詳細設定タブでタイポグラフィ、背景色、境界線の丸み、影効果を微調整できます。このブロックにはデバイスごとの間隔調整と表示制御機能も備わっており、あらゆる画面サイズでプログレスバーを美しく表示できます。
ページへのプログレスバーブロックの追加
SeedProdページにプログレスバーブロックを追加するには、以下の手順に従ってください：
ステップ1: ブロックを追加する
デザイン > ブロックで、プログレスバーブロックをページの目的のセクションにドラッグ＆ドロップします。
ステップ2: コンテンツ設定の構成
追加後、プログレスバーブロックをクリックして設定を開きます。コンテンツタブのプログレスバーセクションでは、バーのラベル、パーセンテージ、塗りつぶし色を設定できます。
- バーテキスト：進捗バーの塗りつぶされた部分に表示されるラベルを入力してください（例：「75% 完了」、「資金調達目標」、またはスキル名）。このテキストはバーの塗りつぶし部分に重ねて表示され、訪問者が進捗が何を表しているかをすぐに把握できるようにします。
- パーセント:スライダーを使用してバーの塗りつぶしレベルを設定します（0～100）。この値はバーの視覚的な塗りつぶし量を制御し、訪問者に表示される進捗率（パーセント）を表します。
- 色：バーの塗りつぶし色を設定します。この色はバーの塗りつぶされた（進行状況）部分に適用され、塗りつぶされていない背景色は詳細タブで別途設定されます。
ステップ2a: テンプレートスタイルを選択する
テンプレートタブでは、あらかじめデザインされたプログレスバーのスタイルから選択することで、バーの全体的な外観を素早く変更できます。
- スタイルテンプレート：4種類の異なるテンプレートデザインから選択できます。それぞれが独自のビジュアルスタイルとカラー処理を備えています。テンプレートをクリックするだけで即座に適用されます。スタイルを選択した後でも、いつでも「コンテンツ」タブや「詳細設定」タブに戻って追加調整が可能です。
ステップ3：デザインのカスタマイズ
[詳細設定]タブでは、タイポグラフィ、色、影効果などを用いてプログレスバーの外観を微調整できます。
スタイル:
- タイポグラフィ:バーラベルテキストのフォントファミリー、サイズ、ウェイト、行間、文字間隔、テキスト変換を設定します。
- 背景色： プログレスバーの塗りつぶされていない（トラック）部分の色を設定します。塗りつぶされた部分の背後に見える背景色です。デフォルトは薄い灰色です。
#F7F7F7). - 角丸半径:バートラックと塗りつぶしの両方の角丸設定（0～25px）。この値を大きくすると、丸みを帯びたバーや完全に丸みを帯びたバーを作成できます。
- テキストシャドウ：バーラベルテキストに影効果を追加します。プリセットサイズ（なし、ヘアライン、小、中、大、特大、2倍特大）から選択し、奥行きを加えたり、バーの色に対してラベルの視認性を高めたりできます。
- シャドウ：進行状況バー全体にボックスシャドウを追加し、奥行き感とページ背景からの分離感を付与します。
スペース:
- マージン:プログレスバーブロックの周囲の外側スペース（上、右、下、左）を制御します。これにより、バーとページ上の周囲の要素との間に表示されるスペースが決まります。
- パディング：プログレスバーブロック内の内側の間隔（上、右、下、左）を調整します。これにより、バーとブロックの端の間に余裕が生まれます。
属性：
- CSS ID:プログレスバーブロックの自動生成された一意の識別子を表示します。このIDは、カスタムスタイリングやJavaScriptのターゲット指定のためにSeedProdによって自動的に作成されます。
- カスタムクラス：テーマやカスタムCSSから特定のスタイルを適用するためのカスタムCSSクラスを追加します。
- カスタム属性:ブロックラッパー要素に任意のHTML属性を追加します。各属性は改行で区切り、以下の形式で入力してください: 属性名|値 (例: data-progress|75)。
デバイスの可視性:
- デスクトップで非表示:デスクトップ画面で進捗バーブロックを非表示にします。
- タブレットで非表示:タブレット端末でプログレスバーブロックを非表示にします。
- モバイルで非表示:モバイル端末でプログレスバーブロックを非表示にします。
アニメーション効果：
- エントランスアニメーション：プログレスバーブロックが表示される際に再生される様々なアニメーション効果から選択できます。バウンス、フェードイン、ズームイン、回転インなど多数のオプションが用意されており、訪問者がページを下にスクロールする際に重要な指標に注目を集めるのに最適です。
ステップ4: 変更を保存する
プログレスバーブロックの設定と外観のカスタマイズが完了したら、必ず作業内容を保存してください。
ページにプログレスバーブロックを追加できました！プログレスバーは、進捗状況やスキルレベル、資金調達目標など、あらゆるパーセンテージベースの指標を一目で伝える強力な手段です。さまざまなテンプレートスタイル、塗りつぶし色、角丸値、登場アニメーションを試して、注目を集め、ページのメッセージを強化するプログレスバーを作成しましょう。