# PageFlyのページとセクションの使用方法 ### PageFlyのページとセクションについて PageFlyのページとセクションは、Shopify向けの多機能ページビルダーアプリであるPageFlyの不可欠なコンポーネントです。これらを使用すると、コーディングスキルを必要とせずに、オンラインストアのカスタムレイアウトとデザインを作成できます。PageFlyを使えば、ページ全体をゼロから構築したり、既存のページを強化するためのセクションを作成したりすることができ、ストアの外観と機能を特定のニーズに合わせて柔軟に調整できます。 #### PageFlyのページの種類 PageFlyは6種類のページを提供しており、それぞれShopifyストアでの特定の目的に合わせて設計されています。 * **通常のページ (Regular Pages)**: 会社概要、お問い合わせ、FAQページなどの独立したコンテンツを作成するのに最適です。 * **ホームぺージ (Home Page)**: ストアのメインランディングページをカスタマイズして、魅力的な第一印象を与えます。 * **商品ページ (Product Pages)**: 商品を効果的に紹介するためのユニークなレイアウトをデザインします。 * **コレクションページ (Collection Pages)**: 商品コレクションの視覚的に魅力的な表示を作成します。 * **ブログ投稿ページ (Blog Post Pages)**: カスタマイズされたブログレイアウトでコンテンツマーケティングを強化します。 * **パスワードページ (Password Pages)**: ストア用のカスタムパスワード保護ページをデザインします。 #### PageFlyのセクションの種類 PageFlyは、ストアをさらにカスタマイズするための2種類のセクションを提供しています。 * 標準セクション (Standard Sections): 既存のページに簡単に​​追加できる、事前に設計されたコンポーネントです。 * フレックスセクション (Flex Sections): より優れたデザインの柔軟性を提供し、要素の複雑な配置を可能にします。 #### PageFlyのページとセクションの使用時期 * ページ (Pages): 新しいページを完全に作成したい場合や、既存のページを完全に再設計したい場合に使用します。ページでは、レイアウトとコンテンツを完全に制御できます。 * セクション (Sections): 既存のページをゼロから再構築することなく、カスタム要素を追加するのに最適です。セクションは、現在のテーマとシームレスに統合されます。 このガイドでは、PageFlyのページとセクションを効果的に使用する方法を示します。このガイドを進める前に、ShopifyストアにPageFlyをインストールしていることを確認してください。PageFlyを無料でインストールするには、[こちら](https://apps.shopify.com/pagefly?show_store_picker%3D1%26utm_campaign%3Dapp-listing%26utm_medium%3Darticle%26utm_source%3Dmanual)をクリックしてください。 ### PageFlyのページとセクションにアクセスする方法 Shopifyの管理ダッシュボードからPageFlyのページとセクションにアクセスするには、以下の手順に従ってください。 * ステップ1: Shopifyの管理ダッシュボードから、PageFly Page Builderアプリを見つけてクリックします。 * ステップ2: 左側のメニューバーで、PagesまたはSectionsをクリックして、PageFlyのページまたはセクションにアクセスします。 ![](https://2271939490-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FT9kr2rEW4UEj3nmGvBuq%2Fuploads%2Fgit-blob-76bd49f4d6070d2d6f2f7cc6b87dafef28d71a7c%2FAD_4nXfXwbIiJBdCcySF5C355OoiMySHEUu5pOiIJDrXusWYtxQ7wXNdUzJ-O6udbTgVAJfg_SE61OyPlWjLnCunYdQd7GetTNOPKLLtLh4-jLjASNhtiNFqAVGqbEEtCnt4oVZYVoV6_1RXvd1NvBbIuQkey92x7FCm7O_gCQzl-de4JFg.gif?alt=media) ### PageFlyのページとセクションを設定する方法 このセクションでは、PageFlyのページとPageFlyのセクションを設定する手順を案内します。 #### 新しいページ/セクションを作成する **PageFlyのページでページを作成する** PageFlyのページを作成する方法は2つあります。**ゼロからページを作成する (Create the page from scratch)** または **テンプレートからページを作成する (Create the page from templates)** です。 ステップ1: PageFlyダッシュボードで、Pagesタブに移動します。 ステップ2: 2つのボタンのいずれかをクリックします: Create the page from scratch または Create the page from templates ステップ3: ドロップダウンメニューから希望のページタイプを選択します。 ステップ4: 使用するエディターの種類を決定します。 * Gen 2 Editor: 入れ子になったコンテナを備えたフレックスシステムを利用した高度なエディターです。 * Legacy Editor: 従来のレイアウトオプションに焦点を当てた、分かりやすいエディターです。 ステップ5: (Create from a templateオプションの場合のみ): PageFlyページに適した[PageFlyテンプレート](https://pagefly.link/sZKZHnFY)を選択します > Selectボタンをクリックして、エディターで選択して表示します。 {% hint style="warning" %} **重要事項**: Gen 2 Layoutは、ペイアズユーゴー料金モデル（スロットプラン）でのみ利用できます。詳細については、[こちら](https://help.pagefly.io/manual/pricing-plans/)で確認できます。 {% endhint %} ![](https://2271939490-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FT9kr2rEW4UEj3nmGvBuq%2Fuploads%2Fgit-blob-45c841cd55539220b2e5248bec85bbc5b3472044%2FAD_4nXd-RA5RJcqmWTRWwOS5IOCx4zd9JY4MC_oqjAMeP3r1RqDLf9SfDMY_IHOcKcr4bd6ybshcCEH1fT_BkAywfuT7PK8Bv6lNZHFX2Ow8PHGBEsOZsXkngBBcl8EYxbPCb7-pyiXSvNytei5XSipTPQ?alt=media) さらに、別のShopifyストアからPageFlyのページまたはセクションを既に持っており、それを使用したい場合は、Import機能を使用できます。この機能の詳細については、[このビデオチュートリアル](https://www.youtube.com/watch?v%3Dy9Vw1PTWSuA)を確認してください。 ![](https://2271939490-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FT9kr2rEW4UEj3nmGvBuq%2Fuploads%2Fgit-blob-4dcf5f4f7ca092399b802770177b351575b78d3c%2FAD_4nXdH38qroA5yoiJ1Yj3mBKOuodh4YoVz9k0Zaz_x0pikaHiAHdkHDqQCVG0mL56ytV7ztwmcyjiU7q5viMyvQeM8ZACUjvxffZc6pUPbr2RcaBwtTHmpDfAWW-Qw3LEOpZ6N9XR7Fv9VVsGUdRVPkey92x7FCm7O_gCQzl-de4JFg.png?alt=media) **PageFlyのセクションでセクションを作成する** PageFlyのページを作成するのと同様に、新しいセクションを作成するには、Blank sectionを作成する (Create blank section) または テンプレートから作成する (Create from a template) の2つのオプションがあります。ただし、PageFly Sectionsには1種類のセクションしかないため、セクションタイプを選択する必要はありません。 ![](https://2271939490-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FT9kr2rEW4UEj3nmGvBuq%2Fuploads%2Fgit-blob-0b2cc51d1122011a1e2372398afc941f5b9a467d%2FAD_4nXfmePpxbyU7IgwNvhGZz3Vg-zz-TAboN5ZOA7LJAIreY3zhOZhIRitKyguiD4ZCfWjzM-_r2jQxMUTh-ATgpmb0uAxL-XO_RdHxheGQTDSsehlwOBJz_O7DsRMFPVtdLFOtqn7-uGb55OA1mY1cYwkey92x7FCm7O_gCQzl-de4JFg.png?alt=media) **PageFlyページでフレックスセクションを作成する** **重要事項**: フレックスセクションは、Gen 2 Editorを使用してPageFlyページを作成することを選択した場合にのみ利用できます。Legacy EditorでPageFlyページを作成することを選択した場合、またはページが既にLegacy Editorで構築されている場合は、この要素は表示されません。 * ステップ1: Pagesタブで、PageFlyページを作成するために、Create the page from scratch または Create the page from templates のいずれか2つのオプションを選択します。 * ステップ2: Gen 2 Editorを選択します。 * ステップ3: Elementsアイコンをクリックします > PageFlyタブでLayoutを選択します。 * ステップ4: Blank sectionを選択し、キャンバスにドラッグアンドドロップします。 * ステップ5: フレックスセクションに必要な要素をドラッグアンドドロップします。 ![](https://github.com/sellersmith/pagefly-help-center/blob/master/ja/images/AD_4nXfzHAIC_xB6luynt5o_fZizlZ0HT4Lg-hTpWoz25JArFX40UoBObYMotj5WAI4FlwbNDocu7qrEQFPx1o7aWqFIg4cjFd-F_GzaAyWl1SxLmBO_NZWQu3JGd5eW9Z1BQEunUg42dYFMssASlZM9Ww) #### ページリストとセクションリストを理解する **ページ設定** PageFlyのページでは、PageFlyで作成したすべてのページを一覧表示するテーブルが表示されます。テーブルには、ページタイトル、ページのステータス（公開済みまたは未公開）、ページタイプ、最終更新日時、分析インジケーター、およびプレビューモードでページを表示できる目のアイコンの6つのパラメーターが含まれています。 ![](https://2271939490-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FT9kr2rEW4UEj3nmGvBuq%2Fuploads%2Fgit-blob-a10a5e3231e009dcec1736bfb9bd7060778bd5cf%2FAD_4nXdAi2NuQYLuRSLvFJ4zRQLoSJMgci_ZPX2EY1XXUnBZRBzo-n9RaFoG4ID-LMlu4a_c4UMPU9vjR8khofHQZDt3keQwW-briks6yLqzXLjzRoekw8oF-gTMKr-siHDND_b3tPZrFYHK9bE2w8sTjAkey92x7FCm7O_gCQzl-de4JFg.png?alt=media) ページタイトル前のボックスをチェックしてページをハイライトし、ページリストの右側にある3つのドットをクリックしてページ機能を開き、その他の機能を表示することもできます。 * View Analytics: ページのパフォーマンスメトリクスを確認します。 * Preview: ページの見た目を確認します。 * Duplicate: ページのコピーを作成します。 * Export: ページを.pagefly形式でエクスポートします。 * Delete: ページを削除します。 ![](https://2271939490-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FT9kr2rEW4UEj3nmGvBuq%2Fuploads%2Fgit-blob-509506f3be41970e5d01b6d5b3509d046ce66f31%2FAD_4nXcsmHHzRwTKtwZ5QQiW4QcMUUTnwdo2qNUZ8P0eOGh-kEUj58kEBrSPlI5iYZzYSqyCRnkLgEcEHNsXBXLztBPPKv0RJoAsZQ5CGqMPOCX4KWcm1KS7Zb_l8DvRNHfyg71hd4XvhDYgahPSu9mWkey92x7FCm7O_gCQzl-de4JFg.gif?alt=media) **セクション設定** PageFlyのセクションにも、PageFlyで作成したすべてのセクションを一覧表示するテーブルがあります。このテーブルでは、セクションタイトル、公開済みまたは未公開のステータス、そのセクションが使用されているページ数、最終更新日時、およびプレビューモードでページを開く目のアイコンを表示できます。 ![](https://github.com/sellersmith/pagefly-help-center/blob/master/ja/images/AD_4nXeAKWddJVgNblxbPKgsagTqggOpsMSDgzJwk8A-zOSdjreJFE0iguMPnPNHH9H67PWbGSHLodPfHIemCqNRDTX10pczv4sqjtFZJKI7MMrqjhqDzZgqagQQIixYl3PPr0JngfW9moeseDWxIetOtgkey92x7FCm7O_gCQzl-de4JFg.png) PageFlyのページと同様に、セクションをハイライトし、3つのドットをクリックしてセクション機能を開くこともできます。 * Preview: ページの見た目を確認します。 * View page: そのセクションが使用されているページを確認します。 * Duplicate: セクションのコピーを作成します。 * Export: セクションを.pagefly形式でエクスポートします。 * Delete: セクションを削除します。 ![](https://2271939490-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FT9kr2rEW4UEj3nmGvBuq%2Fuploads%2Fgit-blob-34619aaf819bf42cf0a6b1589afaef7bf2730512%2FAD_4nXdV7JyeHCkB_lDZvDvQd2b_ATya4d9zbza6F2PL1BQHTRMWVAXwcvl7qmO7kSWQn5iNw3wYOw4aAK4TkNwcny4EmNx9XBw75fo-ZQrRJ9d2SOIBBnkogJ2JnwG18sGvhcKuivpeYs3els8pwQgGkey92x7FCm7O_gCQzl-de4JFg.gif?alt=media) #### ステップ3: 検索、フィルター、並べ替えを理解する **検索** 検索機能を使用すると、ページまたはセクションリスト内で特定のページまたはセクションをすばやく見つけることができます。ページまたはセクションリストの右上隅にあるSearchボタンをクリックします > 探しているページまたはセクションに関連するタイトルまたはキーワードを入力します。リストは自動的にフィルターされ、検索キーワードに一致するページまたはセクションのみが表示されます。 ![](https://2271939490-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FT9kr2rEW4UEj3nmGvBuq%2Fuploads%2Fgit-blob-362801c41098219d982352e7f0aeab3e1fbb172d%2Fsearch.gif?alt=media) **フィルター** フィルター機能を使用すると、提供されるオプションに基づいてページまたはセクションを見つけることができます。現在、ページフィルターにはTypeとStatusの2つのオプションがあり、セクションフィルターにはStatusの1つのオプションしかありません。ページまたはセクションフィルターにアクセスするには、以下の手順に従ってください。 * ステップ1: PagesまたはSectionsリストで > Add filterボタンをクリックします。 * ステップ2: 使用するフィルターの種類を決定します。TypeまたはStatusのいずれか、または両方の種類を使用してフィルターできます。TypeにはRegular, Home, Product, Collection, Blog post, Passwordの7つの値があり、StatusにはPublishedまたはUnpublishedの2つの値があります。 希望するフィルター条件を選択すると、ページリストまたはセクションリストは自動的に更新され、選択したフィルターに一致するアイテムのみが表示されます。 ![](https://2271939490-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FT9kr2rEW4UEj3nmGvBuq%2Fuploads%2Fgit-blob-4aa84bbfbfcb70e87ef212bdeb272f224cde5220%2FAD_4nXdNIETjZ3TBmgyVkIuWfc_hWKFJzlXtdeac6D_rplRIw_I32FqFcAs3Zfa4pP4-XQDUswK7IUj_Ef5v4qnhijg8sHYyMZaQn2KE_lz8OCrN69o5tYTrIuw4UsvuC1wmixbiaGpYOlZG4cblDG5tKwkey92x7FCm7O_gCQzl-de4JFg.gif?alt=media) フィルターを保存して将来使用することもできます。希望するフィルター設定を選択し > Save asボタンをクリックしてフィルター名を入力するだけです。 ![](https://2271939490-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FT9kr2rEW4UEj3nmGvBuq%2Fuploads%2Fgit-blob-682f537cf10a9cfa3b247d7ac59536c054d3ac2d%2FAD_4nXc4KzUj3Nb1u4AZH7IaruqhWQpJTenxmD7TLrMOTmG98jn4So6qcF6Ooo0twu9tLercahVQYtYAtoso-fI4OfCwuyrJ0msYUctR3Yl5j5B6B2MpcLP-v3T8JmgWduSMjlK7umkUvnor1VQdelSXkey92x7FCm7O_gCQzl-de4JFg.gif?alt=media) **並べ替え (Sort)** もう一つの便利な機能として、更新時間またはアルファベット順に基づいてページとセクションを並べ替える機能があります。これにより、ページをより適切に管理できます。 ![](https://2271939490-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FT9kr2rEW4UEj3nmGvBuq%2Fuploads%2Fgit-blob-901425cfe37e4e7cf83ecff813e2d51bd78e88f1%2FAD_4nXcpGNEOAamuzKsF_qcUXe2GJPmb0NlALG7_G6rdsM2tMqwRg7WSSR5EzQ943IY9k7XAQDz8uVc2VNtEiAegnBlirBy88cCUzZUhsYFMDy-6T5WoCz1rzX_AHL_BxESJMZUme5PR2BOGUh8CVgPdkey92x7FCm7O_gCQzl-de4JFg.png?alt=media) ### 使用例 (Use Cases) * Shopifyストアの変更: インポートおよびエクスポート機能は、プロセスを効率的にサポートします。 * ページの管理: 好みに合わせてページの設定を調整します。 * 既存のセクションで新しいページを作成: [Saved Section](https://help.pagefly.io/manual/saved-section/)を使用して、新しいセクションを構築する代わりに、既存のセクションをページに追加します。これは時間を節約し、プロセスを促進するのに役立ちます。 * 各ページタイプの最適な使用方法: * Regular Page: セール/プロモーションページ、会社概要、お問い合わせ、FAQなどの一般的なコンテンツ。 * Home Page: ストアのメインランディングページで、おすすめ商品やプロモーションを表示。 * Product Page: 詳細な説明と画像を含む個々の商品リスト。 * Collection Page: 季節ごとのセールなど、関連商品のグループ。 * Blog Post Page: オーディエンスを引き付けるための記事、ニュース、アップデート。 * Password Page: 公開前またはメンテナンス中のストアを保護。 * PageFlyとShopifyテーマの連携: PageFlyのページがShopifyテーマとどのように統合されるかを包括的に理解するには、[詳細記事](https://help.pagefly.io/manual/switch-theme-process-in-pagefly/)を参照してください。 ### よくある質問 (Frequently Asked Questions) **1. PageFlyを使用して既存のShopifyストアページを再設計できますか、それとも新しいページを作成するためだけですか？** PageFlyは、新しいページを生成するためにも、既に存在するページを再設計するためにも使用できます。PageFlyを使用すると、コードを知らなくても、ホームページ、商品ページ、ランディングページなどを迅速かつ簡単にカスタマイズできます。 **2. PageFlyのSaved Sectionとは何ですか？どのように使用できますか？** PageFlyのSaved Sectionは、複数のページに追加できる再利用可能なコンテンツブロックです。PageFly SectionsでSaved sectionを作成し、PageFlyページまたはShopifyページに追加できます。この機能は、ストア全体でコンテンツを再利用することで、一貫性を維持し、時間を節約するのに役立ちます。 **3. 現在のページのページタイプを変更できますか？** はい、可能です。PageFlyページエディターで、Page settingsに移動します > Page typeドロップダウンメニューで現在のページタイプを変更できます。 **4. SectionとFlex sectionの違いは何ですか？** Sectionは、ユーザーがレイアウトをrow、columnでデザインすることを可能にし、PageFly SectionsとPageFlyページの両方に追加できます。一方、Flex sectionにはrow-column構造がなく、PageFlyページに直接追加することしかできません。 ### その他のリソース (Additional Resources) * [PageFlyのページを公開または非公開にする方法](https://help.pagefly.io/manual/how-to-publish-or-unpublish-pagefly-pages/) * [PageFly Saved Sectionの使い方](https://help.pagefly.io/manual/saved-section/) * [PageFlyページの3つのエクスポートとインポート手順](https://help.pagefly.io/manual/export-import-pages/) * [PageFlyでページ設定を編集する方法](https://help.pagefly.io/manual/page-settings/)