プログレスバー
Last updated
Was this helpful?
Japanese 🇯🇵
Last updated
Was this helpful?
概要：を使うと、ページに数値やデータを伴う情報を表示できます。実際の事実や統計を表示することで、明確で説得力のあるデータに人々は惹きつけられやすいため、ユーザーエンゲージメントを高め、コンバージョンの可能性を向上させることができます。
この要素についてさらに理解するために、以下のビデオチュートリアルをご確認ください。
ステップ1：左側のツールバーにある要素をクリックします。
ステップ2：PageFly要素が含まれているPageFlyタブで、プログレス要素をクリックします。
ステップ3：必要なバリアントをページエディターにドラッグアンドドロップし、使用を開始します。
サイドバーで探す代わりに、検索機能を使ってこの要素を検索することも可能です。
プログレス要素には、ほとんどのニーズをカバーする複数のバリエーションがあります。しかし、時間を節約できるよう、今後もバリエーションを追加し続ける予定です。
バリエーションをレイアウトにドラッグすると、どのように設定できるかを確認できます。
プログレス要素には、最高のコンバージョン率を得るためにコンテンツの外観を細かく調整できる多数のパラメータが用意されています。
レイアウトでプログレス要素を選択し、一般タブとスタイリングタブでそのパラメータを確認してください。
プログレス要素は、複数のプログレスアイテムを含むプログレスボックスで構成されています。これらを構成する方法は以下の通りです。
プログレスボックスの設定
プログレスボックスを選択し、設定します。次のことができます。
新しいプログレスアイテムの追加：”Add new item”ボタンをクリックして、追加のプログレスアイテムを含めます。
プログレスアイテムの順序の変更：各アイテム名の左にある3つの点アイコンを使用して、ドラッグアンドドロップで希望の順序に並べ替えます。
プログレスアイテムの複製/削除：複製アイコンをクリックしてアイテムをコピーするか、ゴミ箱アイコンをクリックして削除します。
プログレスアイテムの設定
各プログレスアイテムは個別に編集できます。これを行うには、目的のアイテムを選択し、一般タブに移動します。
| 設定 - Progress Type (プログレスタイプ)：プログレス表示形式をバーまたはサークルから選択します。 - Style (スタイル)：テキストの表示方法を選択します：Text Inside (内側)、Text Outside (外側)、または Text First (最初にテキスト)。 - Percent (パーセント)：プログレスのパーセント値を設定します。 - Weight (ウェイト)：プログレスバーの太さを調整します。 |
ヘッダー設定 - Text (テキスト)：プログレスバーのタイトルを入力します。 - Color (色)：テキストまたはバータイトルの色を選択します。 - Font Size (フォントサイズ)：テキストまたはバータイトルのフォントサイズを指定します。 - Spacing (間隔)：テキストの周囲四方の間隔(ボーダー)を設定します。
色設定 - Number (数値)：表示されるプログレス値の色を選択します。 - Active (アクティブ)：プログレスのアクティブ部分の色を設定します。 - Background (背景)：プログレスの非アクティブ領域または背景の色を選択します。
レガシーエディター - スタイリングタブ
PageFlyのレガシーエディターを使用している場合、スタイリングタブに表示される設定は以下の通りです。
| Spacing (間隔)：余白とパディングを調整して、プログレスの周囲に希望の間隔を作成します。 |
Typography (タイポグラフィ)：フォントファミリー、フォントサイズ、テキストアラインメント、テキストスタイルを設定します。
Background (背景)：プログレス要素の背景色または背景画像を選択します。
Border (ボーダー)：ボーダースタイルをカスタマイズし、角丸のボーダーラジウスを設定します。
Gen 2エディター - スタイリングタブ
PageFlyのGen 2エディターのスタイリングタブには、レガシーエディターと同じオプションに加え、サイズパラメータが追加されています。これらのパラメータを使用して、プログレス要素の幅と高さを制御できます。
幅
Fill container (コンテナを埋める)：要素は親コンテナの幅全体を埋めるように自動的に拡張されます。
Hug content (コンテンツを抱きかかえる)：要素の幅はコンテンツのサイズに合わせて調整されます。
Fixed width (固定幅)：要素に特定の幅を設定できます。
高さ
Fill container (コンテナを埋める)：要素は親コンテナ内で利用可能な垂直方向のスペースを埋めるように拡張されます。
Hug content (コンテンツを抱きかかえる)：要素の高さは含まれるコンテンツに応じて調整されます。
Fixed height (固定高さ)：要素に特定の高さを設定できます。
その他の設定：要素の最大幅と最小幅、最大高さと最小高さを設定します。
商品ページでの商品機能の表示：商品ページでは、プログレスバーを使用して主要な機能や仕様を魅力的な視覚的方法で強調します。
ユーザー進捗の追跡：コース、チャレンジ、またはゲーミフィケーションを含むサイトでは、プログレスバーを使用してユーザーの進捗を表示することでモチベーションを高めます。
プロジェクト/タスク完了の表示：プログレスバーを使用して、プロジェクトまたはタスクの進捗状況を視覚的に表現します。これはサービスページやポートフォリオセクションに最適です。
アクティブ/完了部分にコントラストの高い色を使用して注目を集めます。
ページを過密にしないように、最も重要なプログレス指標のみを表示するように制限します。
実際のデータがない単なる装飾要素にプログレスバーを使用するのは避けます。
PageFlyプログレス要素とは何ですか？
PageFlyプログレス要素は、退屈なデータや情報を視覚化するために設計されており、Shopifyページで使用すべき重要なコンテンツ要素の一つです。
なぜPageFlyプログレス要素を使用すべきですか？
通常、PageFlyプログレス要素は、タスク、プロジェクト、およびオペレーションシステムの完了状況を視覚的に表現するために使用されます。
ACTIONに関する詳細についてはをクリックしてください。ATTRIBUTES、VISIBILITY、およびANIMATIONパラメータについてはをクリックしてください。
スタイリングタブでは、プログレス要素の外観とレイアウトを完全に制御できます。色、間隔、タイポグラフィ、背景、ボーダーなど、主要なデザイン面を設定できます。詳細については、こちらのをご確認ください。
重要事項: Gen 2レイアウトは、ペイ・アズ・ユー・ゴー料金モデル（）でのみ利用可能となります。
Flexエディターのスタイリングタブのその他の設定に関する詳細はをご確認ください。
