# プログレス ### PageFlyプログレス要素について 概要：[PageFlyプログレス要素](https://help.pagefly.io/manual/progress-element/)を使うと、ページに数値やデータを伴う情報を表示できます。実際の事実や統計を表示することで、明確で説得力のあるデータに人々は惹きつけられやすいため、ユーザーエンゲージメントを高め、コンバージョンの可能性を向上させることができます。 この要素についてさらに理解するために、以下のビデオチュートリアルをご確認ください。 {% embed url="" %} ### プログレス要素にアクセスする方法 * ステップ1：左側のツールバーにある要素をクリックします。 * ステップ2：PageFly要素が含まれているPageFlyタブで、**プログレス**要素をクリックします。 * ステップ3：必要なバリアントをページエディターにドラッグアンドドロップし、使用を開始します。 サイドバーで探す代わりに、検索機能を使ってこの要素を検索することも可能です。 ![](https://2271939490-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FT9kr2rEW4UEj3nmGvBuq%2Fuploads%2Fgit-blob-f43a6c22da5951c608819c5658bbe0f1741d0ccb%2FAD_4nXdrksnhlRL5i30J-u6ClZRvMRtSLWd6CkvWOnKljysEgCK7QaQdsEdS3kACfSqOf6PNFwWJ9RvyKbSeymjDPeVrC7UePeRIjBmc5XgqgfvUlY8EEmGxP115hq9hjDHgIu7UR87GZshUrpu5ANMMRQkeyqT0GL7UiVHbnukROH7zFew.gif?alt=media) **プログレス**要素には、ほとんどのニーズをカバーする複数のバリエーションがあります。しかし、時間を節約できるよう、今後もバリエーションを追加し続ける予定です。 ![](https://github.com/sellersmith/pagefly-help-center/blob/master/ja/images/AD_4fBK1z2jjkg1p7znNd0wRqDSej8rOkBZ1xpc3106HO5FCBnYzsWNKV98ZY8TrL8lvrtztsCYG8npZqutkKblFdfTVwOQmKEeD6fp6lR3dKjqSvVI3HCsn0u_yvKe4qOS02JC4AaSIlKedv_H4mBsAkeyqT0GL7UiVHbnukROH7zFew.png) バリエーションをレイアウトにドラッグすると、どのように設定できるかを確認できます。 ### プログレス要素を設定する方法 **プログレス**要素には、最高のコンバージョン率を得るためにコンテンツの外観を細かく調整できる多数のパラメータが用意されています。 レイアウトで**プログレス**要素を選択し、一般タブとスタイリングタブでそのパラメータを確認してください。 ![](https://github.com/sellersmith/pagefly-help-center/blob/master/ja/images/AD_4nXd_IciosA_YTeqO0eZjWPOknl7rlZ1CTgJnmaystMIL_IWBcBpCdWhyF1RWg2g2gNj1NiHKa-s-AFbID0mBjmB7_Dq1F9ZWAGrerlx3tnaWE1BkJ8A-SvL3jLNUoejvSrZfKXHSPtuoet47pXvF4keyqT0GL7UiVHbnukROH7zFew.png) #### 一般タブの設定 **プログレス**要素は、複数のプログレスアイテムを含むプログレスボックスで構成されています。これらを構成する方法は以下の通りです。 **プログレスボックスの設定** プログレスボックスを選択し、設定します。次のことができます。 * 新しいプログレスアイテムの追加：”Add new item”ボタンをクリックして、追加のプログレスアイテムを含めます。 ![](https://github.com/sellersmith/pagefly-help-center/blob/master/ja/images/AD_4fKvzjRyRtrKov_ut9FzxOVfyeUawrjLB8ACxFHEgR72LpUFFgEO05DxRZHSRsgByOOVnbR9oSDnL-9N0rHsWihOpiqyLByCEDqSwNWaca5b7Vn3SrWjLcGREOJnczaInd9xSQzC-_Fm7xHTHpUkeyqT0GL7UiVHbnukROH7zFew.png) * プログレスアイテムの順序の変更：各アイテム名の左にある3つの点アイコンを使用して、ドラッグアンドドロップで希望の順序に並べ替えます。 ![](https://2271939490-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FT9kr2rEW4UEj3nmGvBuq%2Fuploads%2Fgit-blob-89b98147b404bdc001ffae0f28260543d58d7dfb%2FAD_4nXcRMisd5aFOW2y3mTvSWA_JlGquvtegFyFZXmVvJVfSVkROVEvjH7V8sAtAROrgnNfDn1SkFCtmzOOaFAbMtSCXNmoC-jQ20nuQPWugVu22IzklITUyzmU1e73fZhg9N1gros0BuYeKnknweoyskeyqT0GL7UiVHbnukROH7zFew.gif?alt=media) * プログレスアイテムの複製/削除：複製アイコンをクリックしてアイテムをコピーするか、ゴミ箱アイコンをクリックして削除します。 ![](https://github.com/sellersmith/pagefly-help-center/blob/master/ja/images/AD_4dmyPubI1WPUxiovoChu4_LvImoBdbBSo6oNUS0QNcEu2-nHSMzlbxVuB_SJAanGrm5c4ZPMbpQ02Q458Y3uzIKPrfDMmH3syVeScnw7emEin27a4pwwO7wT4e8g_cBAIP9AOm6OvwFUetrznZAhwkeyqT0GL7UiVHbnukROH7zFew.png) **プログレスアイテムの設定** 各プログレスアイテムは個別に編集できます。これを行うには、目的のアイテムを選択し、一般タブに移動します。 ![](https://2271939490-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FT9kr2rEW4UEj3nmGvBuq%2Fuploads%2Fgit-blob-5c9a460f94be9d53b72c2c88434d215772ed22a9%2FAD_4nXet0FYdRS1CKSbh_KQo-H4TucI3ISNjlcl_D_5NAKlknzXPC7iqYZzmRptikBgOIZO0-WZNEav4qqx3D7xmoAEe0sl0eTsZFTPA8ovDxOdnrRtyD41cOsPdPID4sIXSNlLSDK0anzJKJt02I9xX3QkeyqT0GL7UiVHbnukROH7zFew.gif?alt=media) \| 設定 - **Progress Type** (プログレスタイプ)：プログレス表示形式をバーまたはサークルから選択します。 - **Style** (スタイル)：テキストの表示方法を選択します：Text Inside (内側)、Text Outside (外側)、または Text First (最初にテキスト)。 - **Percent** (パーセント)：プログレスのパーセント値を設定します。 - **Weight** (ウェイト)：プログレスバーの太さを調整します。 | | ![](https://github.com/sellersmith/pagefly-help-center/blob/master/ja/images/AD_4nXcXZFq55Tup_JkFpaje4q6kFydZb4UzWYDN7VDCPDSniB-bSNL-h_ZDeRbo7v9AbH9AVa48t-bkj1KmdU5hfQpgzGJzpAyqhDNswNBrkMitvFcbI_pCtbRPYejmj_KQMwrcZQAfCydgsm-MzNrUAkeyqT0GL7UiVHbnukROH7zFew.png) | | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | ヘッダー設定 - **Text** (テキスト)：プログレスバーのタイトルを入力します。 - **Color** (色)：テキストまたはバータイトルの色を選択します。 - **Font Size** (フォントサイズ)：テキストまたはバータイトルのフォントサイズを指定します。 - **Spacing** (間隔)：テキストの周囲四方の間隔(ボーダー)を設定します。 | | ![](https://2271939490-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FT9kr2rEW4UEj3nmGvBuq%2Fuploads%2Fgit-blob-1ddcc6bc040da2c6e8a9bdd4e61dcea05e56a1a9%2FAD_4nXd8kpPTfc83QapUc-29CEZuaN2zJhCE9npiqK9p7524F-zhNKcuqm3N5zXBMB-rwfskW_0ghfAABu5tHKJogDWZMk3hSO-LifJYrqTX6puJ9gBT-XX82AWjHyfsaVZ1i6p4xv1-KYL1DW9eoYoyYgkeyqT0GL7UiVHbnukROH7zFew.gif?alt=media) | | 色設定 - **Number** (数値)：表示されるプログレス値の色を選択します。 - **Active** (アクティブ)：プログレスのアクティブ部分の色を設定します。 - **Background** (背景)：プログレスの非アクティブ領域または背景の色を選択します。 | | ![](https://2271939490-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FT9kr2rEW4UEj3nmGvBuq%2Fuploads%2Fgit-blob-ff81c4e6a7335a8ae8df51c195c41e3ba141af9c%2FAD_4nXevx7TksJdRo0oD1Vzr4Sn3JbPDZ-7NYGW8dU84P0K1oFuX1dtjwTI_0A2D8l-Cu5rudUvdHIncmoCVpo9p3Yv5fc107nnHlgVUjSQunPuTlY-GpKXQK__VMUXa6LusCDyqQevJJJCpG4FLK0DzkeyqT0GL7UiVHbnukROH7zFew.png?alt=media) | ACTIONに関する詳細については[こちら](https://help.pagefly.io/documentation/direct-to-a-link-a-section-a-pop-up-an-email-address-or-a-phone-number-by-click-action/)をクリックしてください。ATTRIBUTES、VISIBILITY、およびANIMATIONパラメータについては[こちら](https://help.pagefly.io/manual/elements-general-settings/)をクリックしてください。 #### スタイリングタブの設定 {% hint style="info" %} **注**: スタイリングはプログレスボックス全体に対してのみ設定可能であり、各プログレスアイテムに対しては設定できません。 {% endhint %} **レガシーエディター - スタイリングタブ** PageFlyのレガシーエディターを使用している場合、スタイリングタブに表示される設定は以下の通りです。 \| **Spacing** (間隔)：余白とパディングを調整して、プログレスの周囲に希望の間隔を作成します。 | | ![](https://2271939490-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FT9kr2rEW4UEj3nmGvBuq%2Fuploads%2Fgit-blob-f4b60d5390ddcbcf072f7b86e42ce9c5520a2d29%2FAD_4nXdyf_lqAuMqK6bmQ5qOqjoBrG4zztcVQLDIPBC6rQCTTMEQratt5uA7Uu_rCqhwFXi7SPhyYLM6HoMFiN1wGBk71fmqYFBAKBDXfBXDEaPz7rSxCEHVhKBmd0xPTWHuOsrVXQhL2qoR9WeZwd1JkeyqT0GL7UiVHbnukROH7zFew.png?alt=media) | | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | **Typography** (タイポグラフィ)：フォントファミリー、フォントサイズ、テキストアラインメント、テキストスタイルを設定します。 | | ![](https://2271939490-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FT9kr2rEW4UEj3nmGvBuq%2Fuploads%2Fgit-blob-caf9013ffd5601112e0f08f1b5dbd27b9c0eb48e%2FAD_4nXdN3DILEW6Lxg5rdavbop_Alxwmc60J5GIBDIlD61LKIABG9GVNgMLFFmE1k1vvPce7vbWLya-d2guE5bVb88wtAxeS-U3M5gVVHTMDsanDDoAnXR3WnwaDLqUoU02Bp8rXePsECHw7-TXf5knYdgkeyqT0GL7UiVHbnukROH7zFew.png?alt=media) | | **Background** (背景)：プログレス要素の背景色または背景画像を選択します。 | | ![](https://github.com/sellersmith/pagefly-help-center/blob/master/ja/images/AD_4fkQR37wvM7-Gqixzp73z92a06UoMaQ45U_6kSLnBU7Fksw4GoHcnJWdWevBqIOMBgfU23vqoKVHcIl1S5S64f_mcMRjEDf4CjAcDYoHMRPb_QofsRf7gvRuW2orXC1ykx3ZswJdwoWNnbkTyJLkeyqT0GL7UiVHbnukROH7zFew.png) | | **Border** (ボーダー)：ボーダースタイルをカスタマイズし、角丸のボーダーラジウスを設定します。 | | ![](https://2271939490-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FT9kr2rEW4UEj3nmGvBuq%2Fuploads%2Fgit-blob-eb98dcfd9ad3ccdc629166f9ae4dcf4e90b7f112%2FAD_4nXc3IP7gpl2ZWuneein5nhgaWW0GYkFDyhvBsQnYztYjxs8ftbfGmei8xqxYTp8uxf5VC42e1AtT7dCoRPY7ZPeID3i5ll7gk4EkyDUMimasAQIvPq4HK92heXAMhlR7VUYuPG08ycZ1fGCS9y7S7AkeyqT0GL7UiVHbnukROH7zFew.png?alt=media) | スタイリングタブでは、**プログレス**要素の外観とレイアウトを完全に制御できます。色、間隔、タイポグラフィ、背景、ボーダーなど、主要なデザイン面を設定できます。詳細については、こちらの[スタイリングタブガイド](https://help.pagefly.io/manual/elements-style-settings/)をご確認ください。 **Gen 2エディター - スタイリングタブ** {% hint style="warning" %} **重要事項**: Gen 2レイアウトは、ペイ・アズ・ユー・ゴー料金モデル（[スロットプラン](https://help.pagefly.io/manual/pricing-plans/)）でのみ利用可能となります。 {% endhint %} PageFlyのGen 2エディターのスタイリングタブには、レガシーエディターと同じオプションに加え、サイズパラメータが追加されています。これらのパラメータを使用して、**プログレス**要素の幅と高さを制御できます。 **幅** * Fill container (コンテナを埋める)：要素は親コンテナの幅全体を埋めるように自動的に拡張されます。 * Hug content (コンテンツを抱きかかえる)：要素の幅はコンテンツのサイズに合わせて調整されます。 * Fixed width (固定幅)：要素に特定の幅を設定できます。 **高さ** * Fill container (コンテナを埋める)：要素は親コンテナ内で利用可能な垂直方向のスペースを埋めるように拡張されます。 * Hug content (コンテンツを抱きかかえる)：要素の高さは含まれるコンテンツに応じて調整されます。 * Fixed height (固定高さ)：要素に特定の高さを設定できます。 **その他の設定**：要素の最大幅と最小幅、最大高さと最小高さを設定します。 ![](https://2271939490-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FT9kr2rEW4UEj3nmGvBuq%2Fuploads%2Fgit-blob-6d8c294dd6871465fdcadee2e1487745331fc2d6%2FAD_4nXc_r06s7k8zUKnQ9klNmBYEPcVyJVabu7ZTVZZQGcXT_1PR-itLKMg966YCN_XOsILCXQTl-Jk_4s_3DjggzWN666uX8RLA5BAVsuGezHy7-37hZAbNZZdekgiqGlSBq3xxc28020Ue0HKqTNz93gkeyqT0GL7UiVHbnukROH7zFew.png?alt=media) Flexエディターのスタイリングタブのその他の設定に関する詳細は[こちら](https://help.pagefly.io/manual/elements-style-settings/)をご確認ください。 ### 使用例 * 商品ページでの商品機能の表示：商品ページでは、プログレスバーを使用して主要な機能や仕様を魅力的な視覚的方法で強調します。 * ユーザー進捗の追跡：コース、チャレンジ、またはゲーミフィケーションを含むサイトでは、プログレスバーを使用してユーザーの進捗を表示することでモチベーションを高めます。 * プロジェクト/タスク完了の表示：プログレスバーを使用して、プロジェクトまたはタスクの進捗状況を視覚的に表現します。これはサービスページやポートフォリオセクションに最適です。 ### ヒントとベストプラクティス * アクティブ/完了部分にコントラストの高い色を使用して注目を集めます。 * ページを過密にしないように、最も重要なプログレス指標のみを表示するように制限します。 * 実際のデータがない単なる装飾要素にプログレスバーを使用するのは避けます。 ### よくある質問 **PageFlyプログレス要素とは何ですか？** PageFlyプログレス要素は、退屈なデータや情報を視覚化するために設計されており、Shopifyページで使用すべき重要なコンテンツ要素の一つです。 **なぜPageFlyプログレス要素を使用すべきですか？** 通常、PageFlyプログレス要素は、タスク、プロジェクト、およびオペレーションシステムの完了状況を視覚的に表現するために使用されます。 ### 追加リソース * [Shopify プログレスバーとは何ですか？](https://polaris.shopify.com/components/feedback-indicators/progress-bar?_gl%3D1*e8lqt6*_ga*MTM0NDY2MTY4OC4xNzEwNjY4OTQ5*_ga_0BK6F6GXYF*MTcxMTQ2NzYxMS43LjEuMTcxMTQ2NzYyMC41MS4wLjA.)