# 既成セクションと保存済みセクションを使ってページを構築する方法 ### 概要 この記事では、[PageFlyで作成済みセクションと保存済みセクションを使用する方法](https://help.pagefly.io/manual/saved-section/)を学び、ページを構築します。まず、作成済みセクションと保存済みセクションとは何かを詳しく見ていきましょう。 #### PageFlyの保存済みセクションとは PageFlyの保存済みセクション機能は、既存のセクションを保存したり、新しいセクションを作成したりして、PageFlyまたはShopifyのすべてのページで再利用できるようにすることで、デザイン作業時間を大幅に節約します。公開されると、これらのセクションを複数のページに追加でき、元のセクションに加えた変更は、すべてのインスタンスに自動的に同期されます。 #### PageFlyの作成済みセクションとは 作成済みセクションは、PageFlyテンプレートの一部であり、時間を節約し、ページ作成にインスピレーションを与えるように設計されています。これらの既製のセクションはすぐに使用でき、コンバージョン率の向上に不可欠です。 ### 要件 このガイドを開始するには、以下があることを確認してください。 * PageFlyのインストール: PageFlyアプリがShopifyストアにインストールされていることを確認してください。[こちら](https://pagefly.link/mceUysfc)からPageFlyをインストールできます。 * PageFlyの基本的な理解: PageFlyエディターの基本的な使い方を理解しておいてください。 ### PageFlyページで作成済みセクションを使用する方法 * ステップ 1: ページエディターのセクションをクリックまたはホバーし、境界線の中央にある「**Add a section**」（セクションを追加）ボタンである+アイコンをクリックします。 * ステップ 2: 「**Template**」（テンプレート）を選択して、PageFlyの作成済みセクションのライブラリを開きます。 ![](https://2271939490-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FT9kr2rEW4UEj3nmGvBuq%2Fuploads%2Fgit-blob-bd1edd801cd47f3e94f110779a3a899f4e188a08%2FAD_4nXfJjUdCYvJ0eoROVyaiuSw5IiU2EVnL1oVQKMbNVY7jksnzWe-CRpGYP-d7X_tMUg1kLyBgZC9YYKYFKT9bMYQm8S0StypYnGKVPDqD3iULlBRqwRkPnxEPr1P37QxbaHtA_3DFBWrnc2rCYzEKMg?alt=media) * ステップ 3: 「**Category**」（カテゴリ）ボタンをクリックし、必要なセクションのカテゴリを選択します。PageFlyは、Sales Boost、Free Shipping、Gift Guideなど、さまざまな用途向けの15種類以上の作成済みセクションを提供しています。 ![](https://2271939490-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FT9kr2rEW4UEj3nmGvBuq%2Fuploads%2Fgit-blob-6272c53c88224c44c8bb60ab622249b14987f4e2%2FAD_4nXfjlCII6MX_eEpclrpPmBBekto3LguXN4I56CZEodrXCQ3C11u-soflBY4u4rwJkFA_GgqmIvQ_mivsnafzGI_Qi80EYmO4JA2ZKzk7sOTvtYviFAA15S_em9CGsQSEj6nEGX5nm1nsleuOkdNEpwkey_9ii2zFfwC8wYQkAbOk_2w.png?alt=media) * ステップ 4: 必要に最適なセクションの下にある「**Select**」（選択）ボタンをクリックして、ページに追加します。「**Save**」（保存）をクリックして変更を適用します。 ![](https://github.com/sellersmith/pagefly-help-center/blob/master/ja/images/AD_4nXdpAU9L_-zdGvxDMY7XENyUP4xX4YpS0mipgM-WDbhEt4LES4UQIHZBdYue2-pL5_-2CjwdihQK2gtMhLVLEQmEwKifnchx5izv5tXpE5kbk-pUqvkzVLpTaP-VODca2uwJqMe4MPtmajSv1QCGqg) ### PageFlyページで保存済みセクションを使用する方法 #### 保存済みセクションの作成 保存済みセクションを作成するには、セクションリストから作成するか、既存のページ上のセクションを保存することができます。 **新しい保存済みセクションの作成** * ステップ 1: PageFlyダッシュボードから、セクションリストを開きます。 * ステップ 2: 「**Create blank section**」（空のセクションを作成）ボタンをクリックして新しいセクションをゼロから構築を開始するか、「**Create from templates**」（テンプレートから作成）ボタンをクリックしてPageFlyの作成済みセクションテンプレートを使用します。 ![](https://github.com/sellersmith/pagefly-help-center/blob/master/ja/images/AD_4nXfzThl_vVVelU9KYG-vikzgyx23ArnsmkZqcuD6-wd86bAQ8TwnxredTcbdCS7955JB9tbK-Tgsonmj9lEFLZ-TkDPzl8YNJAKS6CGpBr20-yggf53tjOK2novQFI7wRZqXoB6pcG-jPZHbJ08yWgkey_9ii2zFfwC8wYQkAbOk_2w.png) * ステップ 3: 要素をドラッグアンドドロップしてセクションを構築するか、必要に応じて作成済みセクションを調整します。 * ステップ 4: 「**Save**」（保存）をクリックし、「**Publish**」（公開）して保存済みセクションにします。 ![](https://2271939490-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FT9kr2rEW4UEj3nmGvBuq%2Fuploads%2Fgit-blob-01405c940fb2cd127bc4548a61207a8bb4df574b%2FAD_4nXdcnCyl345dyrJ9fyYzAID4oL1MtdAWyAqSoIe13iuEuJX6O4SxTVGQL0lHY70SaTM5NfJk2awn73sjZ9h9CrILzbxyg5E6ci-EOJAwXDa5brJPujMMoVEYXx8VDGqkqgUcV2ruAJ9zp2pS1swO%20\(1\)?alt=media) **既存ページ上のセクションの保存** * ステップ 1: PageFlyエディターで、保存したいセクションをクリックします。 * ステップ 2: ここにある「**Save section**」（セクションを保存）アイコンをクリックします。 ![](https://2271939490-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FT9kr2rEW4UEj3nmGvBuq%2Fuploads%2Fgit-blob-74da428054cd0c50e9b6658d3a33c6c627b43757%2FAD_4nXePcLTqd6_Ltoe2qv7YkvgFQC82tEPMc92PO36AJwwwj0yKRrh2Gp-_wxdy7E00LHYYjDsTc8wEqZQIWSQlF32eM_jEI2xAbu0UHFaCZiVDwoOKAep6cgtbzdDPVHWyxRwn_cVOzXintjenymmTkey_9ii2zFfwC8wYQkAbOk_2w.png?alt=media) * ステップ 3: セクションの名前を入力し、「**Save**」（保存）をクリックします。 ![](https://2271939490-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FT9kr2rEW4UEj3nmGvBuq%2Fuploads%2Fgit-blob-771626e1c076396f173c3eef8800b1eaf655448d%2FAD_4nXe_CBB7SHdytqJjuIi0BlL1lB40V-KCM9q2mZVyjnBXPljZsGmQiKBPaArSO2oN8W8wwZTOSzZ_-i3_8uhflBncYbmtEGamQ9d0y9x3VFdUCp1Y5s4TgbDBfia4zfycBHzW75pI4zcXTujhrRxqYAkey_9ii2zFfwC8wYQkAbOk_2w.png?alt=media) * ステップ 4: セクションリストページに移動し、保存したセクションにアクセスします。 ![](https://github.com/sellersmith/pagefly-help-center/blob/master/ja/images/AD_4nXfzzlUd0F6irXeEDub6J9IqYlGYiXANcmAAqRAJTgF-8SGAe6SWgrCowA5eRkk88UyToaWKqxpqhKJv_QjPHvgwFvS7przABYAbzqPerFWBQP3nflhO0v5aAuGGrLi5BCjCst66V78aMA-9QpatBQkey_9iiy_9ii2zFfwC8wYQkAbOk_2w.png) * ステップ 5: 「**Publish**」（公開）をクリックして、保存済みセクションとして使用を開始します。 ![](https://2271939490-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FT9kr2rEW4UEj3nmGvBuq%2Fuploads%2Fgit-blob-01405c940fb2cd127bc4548a61207a8bb4df574b%2FAD_4nXfYveF2hRFcaAge6v1VcibwTU3jRNt7ldW5ids6_89LyIYvVoBtJJ8AfNcc_TkkjVCw1d7KjMvjwfP1nOmN5aXzjWRo-E5eOQgtAfVCuSa7PWV7ob1VIUU5TVXhsKvPJz-6WbNwx7_nseHzdcKEkey_9ii2zFfwC8wYQkAbOk_2w-1.png?alt=media) #### PageFlyページで保存済みセクションを使用する 保存済みセクションを作成または保存したら、PageFlyページで使用できるようになります。 重要: 公開された保存済みセクションのみをPageFlyページで使用できます。下書きの保存済みセクションは、どのページでも選択できません。 * ステップ 1: PageFlyページに保存済みセクションを追加する方法は2つあります。 ページエディターのセクションをクリックまたはホバーし、+アイコンをクリックします。「**Add a section**」（セクションを追加）ボタンが表示されるので、それをクリックし、「**Saved**」（保存済み）を選択して保存済みセクションのリストを開きます。 ![](https://2271939490-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FT9kr2rEW4UEj3nmGvBuq%2Fuploads%2Fgit-blob-64b78719b54f79cc3fd67fd691556ef9fa014931%2FAD_4nXfEjY1bps2aeeIiVxdXTdlCKhlHKUODu5s_MobEpKjUH-_4Jw3w455RKw4XTxq_JqDpwz0K3BeYSe1UvPwCD7ds19iq71Zc-7WeHWf3wpF3ud59VbE8Irf-rmbrJT6f7EKuG6scx9rkUIu8PPo5wkey_9ii2zFfwC8wYQkAbOk_2w.gif?alt=media) 左のメニューから「**Page Content**」（ページコンテンツ）を選択し、下にスクロールして「**Add section**」（セクションを追加）ボタンをクリックし、「**Saved sections**」（保存済みセクション）を選択します。 ![](https://github.com/sellersmith/pagefly-help-center/blob/master/ja/images/AD_4nXcIEToTRM5S9KSSv8UsPPZg_1yS4N_hOmn_D3eRgO2yE4rb6jPjRLpQ64MUJkybI2Si0XfsET9AyMECz_ZlYxt2HD9_ztduTxswNknneQ6KARUjPI_qPogkey_9ii2zFfwC8wYQkAbOk_2w.png) * ステップ 2: 使用したいセクションの下にある「**Select**」（選択）ボタンをクリックして、ページに追加します。「**Save**」（保存）をクリックして変更を適用します。 ![](https://2271939490-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FT9kr2rEW4UEj3nmGvBuq%2Fuploads%2Fgit-blob-3b7e2ae9f41a577c2724b27ca1473bdf45118e57%2FAD_4nXd-ekxsQNZISCpG50lZP7mZxf4Q3_UsLoLfDCsY4wRfwydN9OQubVNs4-U4o6OGw0WZI6t-z0d_UUHq-YHMnbqGai1km2bG_LhiVNjlSEB6vMj1Lg4U02Kez0z0XH_4COcvwyrkoViBT-AY77AJkey_9ii2zFfwC8wYQkAbOk_2w.png?alt=media)セクションを選択する前に、プレビューで確認することもできます。 ![](https://2271939490-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FT9kr2rEW4UEj3nmGvBuq%2Fuploads%2Fgit-blob-be2ddccf7b848f186edc372cbdbe027ca0fb075c%2FAD_4nXeuo9xF7LMoDdC16zA3Y71pRSJNiq4cJJf7lYDhOBsFNADex0Mc-OvzHKy7A8KWvl5QdbDeee8dS_O1MnCVhU4zA_garGhx0_XsVvwSPHAKn6gSNjkdZ3Agv_U5OrOX1Y1t9cNunSxNMfpMF5zuAQkey_9ii2zFfwC8wYQkAbOk_2w.png?alt=media) #### Shopifyページで保存済みセクションを使用する テーマOS 2.0では、Shopifyページに保存済みセクションを追加できます。 重要: * 公開された保存済みセクションのみをShopifyページで使用できます。下書きの保存済みセクションは、どのページでも選択できません。 * PageFlyセクションは、公開されているテーマでのみ機能します。 * ステップ 1: Shopifyダッシュボード > オンラインストア > テーマ > 現在のテーマで、「**Customize**」（カスタマイズ）ボタンをクリックします。 ![](https://2271939490-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FT9kr2rEW4UEj3nmGvBuq%2Fuploads%2Fgit-blob-7c8c4322f0de0cc635206b94682706cbee076e0c%2FAD_4nXc4Q0iYZpQwwBsaYa6Yka6v80WSXMcwiOktxSFuI8aKzo1dCQbxYi-FdHfkQoQ1gtDmDpKpPCfDVmWl8YHh1FVTN1WFiwRrYoKgQe1dOrdLGfO55wsRTjm0eDH0oPy7hJB6OXXs1I5iPLYpoGmOkey_9ii2zFfwC8wYQkAbOk_2w.png?alt=media) * ステップ 2: Shopifyエディターページで、「**Add section**」（セクションを追加）ボタンまで下にスクロールし、「**PageFly section**」を検索します。 ![](https://2271939490-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FT9kr2rEW4UEj3nmGvBuq%2Fuploads%2Fgit-blob-4597127b54b3b72dbb23e47b904a730014b55734%2FAD_4nXevYA2qjediP453DIAga8iBGsoV6j6U8-Uub9oQwpN_p314wX72hTv5FUoQJmj_EycyeI2uFJq_Q17-fuhW7pxFsLb3geTzljhuAG6ji7gus_9GrPaehjz01IuoC1fkLCS-4sGK4heNUuCNKs-XfAkey_9ii2zFfwC8wYQkAbOk_2w.png?alt=media) * ステップ 3: 「**PageFly section**」をクリックし、セクションドロップダウンリストから追加したい保存済みセクションを選択します。 ![](https://2271939490-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FT9kr2rEW4UEj3nmGvBuq%2Fuploads%2Fgit-blob-3bdc309ed5c7bb0016187aba26a8ed9f76f0b168%2FAD_4nXebhlZNhdNN8syaGdcXnG0NaN9W-2W1yHtN1US12QXCIi1BKAmYJhLV3f3yCOIve0J-JOmNHgClsUfrKvExuHAapuRLJWXxVE0gd2OJaE9rpQArUuW-CaVPiGsa_GjiFOlBtskKPFnvITNpwuXiVwkey_9ii2zFfwC8wYQkAbOk_2w.gif?alt=media) * ステップ 4: 「**Save**」（保存）をクリックして、Liveviewでセクションを確認します。 #### 保存済みセクションの設定 保存済みセクションをクリックし、「Edit section」（セクションを編集）をクリックすると、セクションエディターページが開いて編集を開始できます。 ![](https://github.com/sellersmith/pagefly-help-center/blob/master/ja/images/AD_4nXdeJTwY2jPOuprtvUxYmnucPquZwxF3QIo0hKBVb4_hBfJbv74NvUi73VdHuo7-Q1MH6Ufe_zKIkU7AQflWX5wQHuRMJl_-_Wn4PaNdmJBbkeuV23F6iYGQXBSLeEcBth_CyCf2zbAnQwiU12frcAkey_9ii2zFfwC8wYQkAbOk_2w.png) ![](https://github.com/sellersmith/pagefly-help-center/blob/master/ja/images/AD_4nXekb1NbzPgKnRNBBJYfzRwatDFrlRMxVNQ9ZVeiODS6Xml_ilC2Z7Frug1wTenTUzdeSo_XVFTYjV5Q5hCwMrowu6dDsH8MKU6x3fc7-bQKlvOYFpX2ppgv0EiS7YPY7w4s_urN1gsfxlSjo7mjDA) {% hint style="info" %} **注意**: 特定のページでのみ保存済みセクションを編集したい場合は、「Global section」（グローバルセクション）にある「Unsynced section」（セクションの同期を解除）ボタンをクリックして、元のセクションとの同期を解除する必要があります。同期を解除すると、元のセクションに加えた変更はこの特定のインスタンスには影響せず、元のセクションとの同期は行われなくなります。 {% endhint %} ![](https://github.com/sellersmith/pagefly-help-center/blob/master/ja/images/AD_4nXcQsTWlPAA9-o62e3Z5ZlkV7FftmyU9ukTH4CnKPoTwXhD9vMAi7bPzOAjWkFu95ttA8zo3rFF3NHK70039lM6GgH_bEnurWNgF4k65BR-UpGq2x7W6Qq7P7o1JQLkXbcmzfAgXmIedOuj581TFdyg) セクションを保存および公開すると、メディアファイルに\[Section\_name]-PF\_DO\_NOT\_DELETEという名前の画像としても保存されます。 ![](https://github.com/sellersmith/pagefly-help-center/blob/master/ja/images/AD_4nXdQcusAy7SK1XNJ90a8OBuD6laYrwtrmdKttroQR-kgjVgr9uaOzdQzX6yaI7IQrIBcY__e9Ca5ILjJuDSRJTR1YLPLG_T25xUoC04iJhGdyD6KNRjEnJd4de2sDGYpHjsJuK7AMXAdeKqCjkey_9ii2zFfwC8wYQkAbOk_2w.png) ### 使用例 * **プロモーションのための迅速なページ設定**: 作成済みセクションを使用して、ブラックフライデーなどのセールイベント向けプロモーションページを、事前にデザインされたバナーやカウントダウンタイマーを使って迅速に設定します。 * **ページ間での一貫したブランディング**: ヘッダーやフッターなどのブランド化されたセクションを作成して保存し、すべてのページで再利用して統一感のある外観を実現します。 * **季節限定コンテンツの効率的な更新**: 新しい季節のグラフィックやメッセージで保存済みセクションを更新し、関連するすべてのページにこれらの更新を自動的に同期します。 * **商品ページの強化**: 作成済みセクションを使用して、顧客レビューや関連商品などの機能をすべての商品ページに一貫して追加します。 ### ヒントとベストプラクティス * **適切なカテゴリを選択**: 作成済みセクションを使用する際は、ページの目的に合った適切なカテゴリを選択してください。これにより、最適なデザインを迅速に見つけることができます。 * **保存前のカスタマイズ**: 作成済みセクションを保存済みセクションとして保存する前に、必要なカスタマイズを行ってください。これにより、セクションがブランドに適合し、一貫して再利用できるようになります。 * **定期的なレビューと更新**: 定期的に保存済みセクションを確認し、デザイン戦略の変更に合わせて内容を最新の状態に保ってください。 ### よくある質問 **1. Shopifyテーマエディターに保存済みセクションが表示されないのはなぜですか？** 保存済みセクションがPageFlyで公開されていることを再確認してください。Shopifyエディターには、公開されたセクションのみが表示されます。 **2. 保存済みセクションを編集した場合、使用したすべての場所で更新されますか？** はい、元の保存済みセクションに加えられた変更は、そのセクションを追加したすべてのインスタンスに自動的に同期されます。 **3. 作成済みセクションと保存済みセクションの違いは何ですか？** 作成済みセクションはPageFlyが提供する既製のセクションデザインであり、保存済みセクションは複数のページで再利用するために自分で作成して保存するセクションです。 ### 追加リソース * [ページエディター - 一般タブ](https://help.pagefly.io/manual/elements-general-settings/) * [ページエディター - スタイルタブ](https://help.pagefly.io/manual/elements-style-settings/)