オブジェクト：プログレスバー

概要 #

プログレスバーオブジェクトは、進捗状況や達成率を視覚的に表現するためのパーツです。
割合に応じてバーの長さやラベル表示が変化し、ユーザーに「どこまで進んでいるか」を直感的に伝えることができます。
デザインやラベルの表示位置、色やサイズなどもカスタマイズ可能で、アンケートやタスク管理、学習進捗の可視化など幅広く活用されます。

プログレスバーの説明 #

プログレスバーオブジェクトの追加方法 #

プログレスバーオブジェクトは、進捗状況や達成率などを視覚的に表示するためのパーツです。以下の手順で追加できます。

1. 画面左側の「オブジェクト」セクションから 「プログレスバー」（バーアイコン）を選択します。
2. 「プログレスバー」ボタンをクリック、またはドラッグ＆ドロップでキャンバス上の任意の位置に配置します。

プログレスバーは、キャンペーンの達成率、アンケート進捗、学習ステータスの表示などに効果的です。

  #

プログレスバー選択画面の説明 #

プログレスバー選択画面について #

プログレスバーオブジェクトをドラッグ＆ドロップで追加すると、「プログレスバー選択」画面が表示されます。ここでは、用途やデザインに応じてスタイルを選ぶことができます。

• 左側メニュー： プログレスバーカテゴリ（すべて／プログレスバー）が表示されます。
• 中央の一覧： 以下のような異なるスタイルのプログレスバーから選択できます。
  • プログレスバー（インナーラベル）：バー内に数値ラベルを表示
  • プログレスバー（吹き出し）：ラベルがバーの外に吹き出し形式で表示
  • プログレスバー（外付けラベル1・2）：バーの上下や右横にラベルを表示
  • プログレスバー（大／小／標準／特大サイズ）：バーの太さ・サイズ違い
  • プログレスバー（シンプルスタイル）：ラベル無しで最もシンプルな見た目
• 使い方： 任意のスタイルをクリックすると、選択されたデザインがキャンバス上に挿入されます。

この画面を活用することで、進捗率の表示に最適な見た目を簡単に選ぶことができ、目的に合った視覚的表現が実現できます。

プログレスバーの設定項目説明 #

プログレスバーの設定項目について #

プログレスバーオブジェクトを選択すると、右側の設定パネルで進捗の見た目や値を細かく調整できます。

1. メインカラー
   プログレスバーの進捗部分（塗り部分）の色を指定します。
   視認性の高い色を選ぶことで、達成率がより明確になります（例：#1C64F2）。
2. サブカラー
   バーの背景色（未達成部分）を指定します。
   メインカラーとのコントラストで進捗の可視性が決まります（例：#E5E7EB）。
3. 値
   進捗の割合をスライダーまたは数値で指定します（0〜100％）。
   値に応じてバーの長さと表示されるパーセンテージが変化します。

この設定を使うことで、目的やブランドカラーに合わせたビジュアルを簡単に調整できます。

操作説明 #

プログレスバーを挿入したい位置へドラッグ&ドロップで貼り付けることができます。

プログレスバー選択 #

プログレスバーを選択します。

プログレスバーを選択すると右上にサブメニューが表示されます。

1. クリックしながらドラッグ&ドロップで任意の場所へ移動できます。
2. プログレスバーを複製します。
3. プログレスバーを削除します。
4. ブロックに保存します。

プログレスバー #

1. プログレスバーのメインカラーを設定します。
2. プログレスバーのサブカラーを設定します。
3. プログレスバーの値を設定します。

テキスト #

1. サンプルテキストからスタイルを選択します。
2. フォント形式を変更します。
3. フォントの種類を変更します。
4. テキストカラーを変更します。
5. テキスト背景カラーを変更します。
6. フォントサイズを変更します。
7. 行間を変更します。
8. 文字間を変更します。
9. 配置を変更します。
10. 全ての書式を初期状態に戻します。

デザイン #

デザインの項目を変更することでプログレスバーのデザインを変更できます。

1. 背景を画像、単色、グラデーションの3つから選択できます。
2. 背景設定で選択した背景情報がレイヤーとして表示されます。
3. ボーダー設定はなし、実線、点線の3つから選択でき、線の太さを設定することができます。
4. ボーダーコーナーはボーダーの丸みを設定できます。
5. シャドウ設定ではインナー、ドロップ、テキストの3つから選択でき、それぞれシャドウの詳細な設定ができます。

レイアウト #

レイアウトの項目を変更することでプログレスバーのレイアウトを変更できます。

1. Margin & Paddingの設定をすることで余白の設定ができます。
2. 横幅を固定から、最小、最大とそれぞれ設定できます。
3. 高さを固定から、最小、最大とそれぞれ設定できます。
4. 水平方向の項目を変更することでプログレスバーの水平方向の配置を変更できます。
5. 垂直方向の項目を変更することでプログレスバーの垂直方向の配置を変更できます。
6. Z-indexを設定することでプログレスバーの重なり順を設定することができます。

表示設定 #

表示設定を変更することでプログレスバーを表示したり非表示にする条件を設定できます。

1. レスポンシブの項目を変更することでデスクトップのみやモバイルのみに表示することができます。
2. アンカーリンクを設定することができます。
3. ログインユーザーのみ表示したり、さらにタグで絞りこんで条件表示することができます。

その他 #

1. CSS IDを設定できます。
2. CSS Classを設定できます。
3. メモを書いておくことができます。