# ページアウトラインを使ってページレイアウトを整理する方法 ### ページコンテンツについて ページのセクションや要素全体を、全体像として把握したいと思ったことはありませんか？[ページコンテンツ](https://help.pagefly.io/manual/page-outline/)がその答えです。 アウトラインは、ページで使用されているセクション、行、列、および特定の要素を記録したものです。この機能のおかげで、レイアウト上で要素の名前をクリックするだけで、作業したい要素に簡単に移動できます。 {% hint style="warning" %} **重要**: Gen 2 レイアウトは、従量課金制 ([スロットプラン](https://help.pagefly.io/manual/pricing-plans/)) のみに提供されます。 {% endhint %} ### ページコンテンツへのアクセス方法 ページコンテンツにアクセスするには、PageFlyエディターから左側のメニューに移動し、ページコンテンツボタン（上から1番目のアイコン）をクリックします。 ![](https://2271939490-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FT9kr2rEW4UEj3nmGvBuq%2Fuploads%2Fgit-blob-a1e6c8a7004edb764d4e522df2fa6f157097cfac%2FUntitled-1.png?alt=media) 通常、ページはセクション（レガシーエディター）またはフレックスセクション（Gen 2エディター）に分割されています。各セクションに何が含まれているかをさらに探索するには、各セクションの隣にある矢印をクリックして開きます。 レガシーエディターの場合、これによりセクションが展開され、内部の行、列、およびその他の要素が表示されます。 ![](https://2271939490-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FT9kr2rEW4UEj3nmGvBuq%2Fuploads%2Fgit-blob-9fd426e7eebaa99b5b9ae499686aa6b99508bc3f%2FAD_4nXeTq4KWooXQIkAUQNAXcTyO1YscxaZklozLnIlVYLAM0X9w3kTo-ZnXf-0mEfz9SNlumfMFQEggb0Jm3R8KsPlcr97t79xUrwLieoqQavg9FGN2w-Z9NRq2PXvezikUnejleL_V1TOTE8EnV0OAcAkey6DMjWUWwDMpR_w6YijdMnw.gif?alt=media) Gen 2エディターでは、フレックスセクションを展開して、内部にネストされた複数のレイヤーの要素を表示できます。 ![](https://2271939490-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FT9kr2rEW4UEj3nmGvBuq%2Fuploads%2Fgit-blob-b1d22d62f52751f7388055768bbb5eb574898907%2F2024-10-24-16.12.52.gif?alt=media) ### Gen 2 レイアウト - ページ構成 {% hint style="warning" %} **重要**: Gen 2 レイアウトは、従量課金制 ([スロットプラン](https://help.pagefly.io/manual/pricing-plans/)) のみに提供されます。 {% endhint %} 以下の詳細なガイドラインに入る前に、この洞察に満ちたビデオを見て、新しいGen 2エディターを使用してレスポンシブなShopifyページのセクション、ブロック、およびフレックスレイアウトを構築する方法を学びましょう。 {% embed url="" %} #### 新しいフレックスセクションを追加 ページコンテンツに新しいセクションを追加したい場合は、要素メニューから新しい要素をドラッグアンドドロップできます。 ![](https://github.com/sellersmith/pagefly-help-center/blob/master/ja/images/AD_4nXf8FjklmqfCgYLRmItKVZK143YaZA4voiTxURfDG2gWSbW5c0bjDKDZIn-77YhjEry4IQhdCWL8u-zgyrOykSrOOfQjj3Qwksit_gn7FxaHa56yG9Rek49_RIpQW9YNieAXegqxLnVFK9Ch1YpMrQkey6DMjWUWwDMpR_w6YijdMnw.gif) PageFlyテンプレートまたは保存されたセクションから選択して、新しいページを作成することもできます。 **テンプレートを使用して新しいセクションを追加** テンプレートを使用すると、デザイン済みのセクションをページにすばやく追加できるため、時間を節約し、プロフェッショナルな外観を保証できます。 テンプレートを使用して新しいセクションを追加するには: セクションを追加ボタンをクリック > テンプレートを選択 > 目的のテンプレートを見つけて選択をクリックし、ページに追加します。 ![](https://2271939490-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FT9kr2rEW4UEj3nmGvBuq%2Fuploads%2Fgit-blob-b9a51bb44ced2b8a8496740712eabd29c329b787%2Fpage-outline.gif?alt=media) ![](https://github.com/sellersmith/pagefly-help-center/blob/master/ja/images/AD_4nXdNpfAzUHE9WhW_S3vrSsx4fCluBRvPNDlu4fWm436RFez7NRxSgVdPOHjyqPq6KxErZcdOK67XXuOPCGeYGOlyhFWhL0YJI7ko6DVjaAR-FCD2YcRC2PLTEdW56dji_hdIMFAjc-Yw403zlgpdaAkey6DMjWUWwDMpR_w6YijdMnw.gif) **保存されたセクションを使用して新しいフレックスセクションを追加** 保存されたセクションを使用すると、以前にカスタマイズして保存したフレックスセクションを再利用できるため、ページ全体で一貫性を維持できます。 保存されたセクションを使用して新しいフレックスセクションを追加するには: セクションを追加ボタンをクリック > 保存されたセクションを選択 > 目的の保存されたセクションを見つけて選択をクリックし、ページに追加します。 ![](https://2271939490-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FT9kr2rEW4UEj3nmGvBuq%2Fuploads%2Fgit-blob-13de06d13c4daeab65312d134a3c31009dbe3bab%2FAD_4nXe6BZLTjlguKTviYoXM8qlR65sL9wIv151WmR9p5dMGWKRRvABPucxmKlZs22mFYjEF3BONzWM5Zd-WfZ4niyFZoqlfNIDTc_tZ_N0BwtEmtR9aVkWBSwmAzBBLPk8BOb92lOXOH-BRJemMEI-qDwkey6DMjWUWwDMpR_w6YijdMnw.gif?alt=media) #### 要素の並べ替え フレックスセクションまたは要素の位置を再配置できます。ページコンテンツでは、これらの項目を同じレベルにある限り、目的の位置にドラッグできます。 ![](https://2271939490-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FT9kr2rEW4UEj3nmGvBuq%2Fuploads%2Fgit-blob-49cfcc61684d4aa8ed549cbee14a01e68968aebb%2FAD_4nXexutaTTbQn11nMgXSU-0NU6G_P_3JPGC7hVox0LrzWNcD4zkgdHI5jDuakOxllhVmmEX5PtTIzDslcddHi8MH1y-2Q3C2SF6EPuAKmbWeQN_nf9ZgDYdbOwJ-fqRwBMikypXGErQCqK6SFaFSCCAkey6DMjWUWwDMpR_w6YijdMnw.gif?alt=media) #### 表示と非表示 フレックスセクションまたは要素のすぐ右にある目のアイコンをワンクリックするだけで、フレックスセクションまたは要素を表示および非表示にできます。 ![](https://2271939490-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FT9kr2rEW4UEj3nmGvBuq%2Fuploads%2Fgit-blob-81f581c8052e1455243d8539ce9cc039ea25a24b%2FAD_4nXfGVLWYwLgH-ffO8qhWAEPZMDCUWCuZc3wn_NKv7Z8Pv4nHLJ_o_R_rtW6bRd1DV6aKrA-33uUApeO6S65Y6S84pmzDTKdJSkuaD5j5XJLhx9IkzgrGklwYVYDWND3JK9X4pWggt5tGJU-TB1NSkey6DMjWUWwDMpR_w6YijdMnw.gif?alt=media) 注: この操作は、現在使用しているデバイスに適用されます。たとえば、モバイルビューで作業している場合、「非表示」操作はモバイルビューにのみ適用されます。 非表示のセクションは、ページコンテンツ内でぼやけて表示され、特定のデバイスで非表示になっていることを示します。 #### 名前変更、複製、または削除 これらの操作を行うには、右側にある3つの点をクリックしてください。名前変更、複製、または削除のオプションが表示されます。 ![](https://2271939490-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FT9kr2rEW4UEj3nmGvBuq%2Fuploads%2Fgit-blob-1e21ae3d066318eb35089a1ca472863da5f0ac34%2FAD_4nXcE5A8npdP0oJ-EszuhgRwTz35r2hlk96IuReBQymae_9xxfk_xyJLo_8CA-QqTxm3RRniluOH3c4jfxAVmJ4K2qJ41PbRHJFrpM9xzP8_QzNHV9w7cUqmgWs1PNouoU8sv48j12xUG-0Ym2DSUbwkey6DMjWUWwDMpR_w6YijdMnw.gif?alt=media) ページコンテンツの幅が不足してすべての要素が表示されない場合は、横スクロール機能を使用してすべての要素を表示します。 ![](https://2271939490-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FT9kr2rEW4UEj3nmGvBuq%2Fuploads%2Fgit-blob-8f448bfa520e8b52104b5d3e24e2b6474fe91038%2FAD_4nXcYojv4-YTS8jqX0K0bgoQOeeL9eTyZd4pWbZLYUSs0XFHujVC1RV7wSDd7MMJUvDXZSCq9DV6ZRF4Iy8Uuk-uMiGeUGw197gZroLNy-ogwIIiXU_5QR_epqKS_VYULda0aNPWTGlt4v6Ngw21rMgkey6DMjWUWwDMpR_w6YijdMnw.gif?alt=media) ### レガシーレイアウト - ページコンテンツ構成 #### 新しいセクションを追加 ページコンテンツに新しいセクションを追加したい場合は、要素メニューから新しい要素をドラッグアンドドロップできます。 ![](https://2271939490-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FT9kr2rEW4UEj3nmGvBuq%2Fuploads%2Fgit-blob-9e021504788dd5eb24c0b01d7ce927f4832d76c6%2FAD_4nXelpPKT-XFEq8nePnzccBEEUhiDlowiKQJYR1wLMJd0bUU0zSfvJy0qAJ15yCYIHLtHt50-9FG2OsWk3Y3lrZS53PtyMpAngVCdBbciY9BYVUWTAB9oG16QpKcJi0bxtd5sQiOKqTX_jAsw0AObkey6DMjWUWwDMpR_w6YijdMnw.gif?alt=media) PageFlyテンプレートまたは保存されたセクションを選択して、新しいセクションを作成することもできます。 **テンプレートを使用して新しいセクションを追加** テンプレートを使用すると、デザイン済みのセクションをページにすばやく追加できるため、時間を節約し、プロフェッショナルな外観を保証できます。 テンプレートを使用して新しいセクションを追加するには: セクションを追加ボタンをクリック > テンプレートを選択 > 目的のテンプレートを見つけて選択をクリックし、ページに追加します。 ![](https://2271939490-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FT9kr2rEW4UEj3nmGvBuq%2Fuploads%2Fgit-blob-9fe1d26b037260a2cefeb9916c6a318f0392cf09%2FAD_4nXc5vg1c7PtwzwOkt-ghkJwl3zGfT6HZvrXPoymYd_v_oZXl3327hiVIO87OfI6BTYX96kKi8WoPyFt-KNKKjTneDOktszxlfgjS8fHdAJ1kQ_8pxD5FdnN4AFcQaLIl4jKH2l-HvHqlyXTJy8hnuAkey6DMjWUWwDMpR_w6YijdMnw.gif?alt=media) **保存されたセクションを使用して新しいセクションを追加** 保存されたセクションを使用すると、以前にカスタマイズして保存したセクションを再利用できるため、ページ全体で一貫性を維持できます。 保存されたセクションを使用して新しいセクションを追加するには: セクションを追加ボタンをクリック > 保存されたセクションを選択 > 目的の保存されたセクションを見つけて選択をクリックし、ページに追加します。 ![](https://2271939490-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FT9kr2rEW4UEj3nmGvBuq%2Fuploads%2Fgit-blob-4758e6de5ba0514040efcf8e8b0b0d96305e708c%2FAD_4nXfxtwnmL8U3E_wfhWBWT2k3vSWXAxnD4HjS_Guqgl5HYVwGytA6Ezf7ZX8lm4gTaxLDQQvF3s3hSx4DvcW8t0_FQM91WQhLD1GOEK3gs18gTTvpYzbL1poDR7m9g7iT8Rznr-ooPSHZTGrf94UVRQkey6DMjWUWwDMpR_w6YijdMnw.gif?alt=media) #### 要素の並べ替え セクション、列、行、または要素の位置を再配置できます。ページコンテンツでは、これらの項目を同じレベルにある限り、目的の位置にドラッグできます。 ![](https://github.com/sellersmith/pagefly-help-center/blob/master/ja/images/AD_4nXefrP1Dhd8X5i-bbBVaYWMK15DVNNgtbxdo5t6T0kFTSdF20Ku1rFLyERPLEE5RNlQug6_QFiJJ23JjcPDWrbskfqJeIqaidT5yon0dipW0Olfe34dSpe2BR3X-J6CKkmkT6twt7D53GMQkey6DMjWUWwDMpR_w6YijdMnw.gif) #### 表示と非表示 セクション、行、列、または要素のすぐ右にある目のアイコンをワンクリックするだけで、セクション、行、列、または要素を表示および非表示にできます。 ![](https://2271939490-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FT9kr2rEW4UEj3nmGvBuq%2Fuploads%2Fgit-blob-7e1fa8d99b6a1129b108fc542fb2e8f53c054409%2FAD_4nXcmqyGsisFQKuLuKM0pOKH3u0LWbU5qfkKnbLcc7xppK_Fy2s7N4WWAzwpBBSX4PbjXLB5-QLxXG7enV4pEkn54RMjp6Qil0T0-IUk1-D_FAgPQAFrjWWkJmLggLPwEEn5zC24MZqFBHj5R_r5yfgkey6DMjWUWwDMpR_w6YijdMnw.gif?alt=media) この操作は、現在使用しているデバイスに適用されることにご注意ください。たとえば、モバイルビューで作業している場合、「非表示」操作はモバイルビューにのみ適用されます。 非表示のセクションは、ページコンテンツ内でぼやけて表示され、特定のデバイスで非表示になっていることを示します。 #### 名前変更、複製、または削除 これらの操作を行うには、右側にある3つの点をクリックしてください。名前変更、複製、または削除のオプションが表示されます。 ![](https://2271939490-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FT9kr2rEW4UEj3nmGvBuq%2Fuploads%2Fgit-blob-6c816db691733c1f1ee00cffaa0f813dfed77839%2FAD_4nXfW_YP0l4aofDFoyZuozrGvD4qcjlK9PSFIOdtWJzwldPXfzYr9-CAF7YZlJr1X-jGzN8fslzl8ecU3yUDnAFiJwjgV6JXP2mwOAf7kF1sGuv-bQDMGoZ6mWBLTnfQub0Au6UMPdjvzeAKzoh4MJwkey6DMjWUWwDMpR_w6YijdMnw.png?alt=media) ページコンテンツの幅が不足してすべての要素が表示されない場合は、横スクロール機能を使用してすべての要素を表示します。 ![](https://2271939490-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FT9kr2rEW4UEj3nmGvBuq%2Fuploads%2Fgit-blob-144bfbe573530eb8fcc8457b07dfb8ccbd645697%2FAD_4nXc_6KVgg9yWTDqAGCWObdOppozJFI0lCZe1dC6ChW3rRo63D1LvBmDagz2IcXWpj_U5pdcJmNKooIMp4FlJdwyo7T0Ha-OONg8s0soyb89HyoI-agr3nz11RPh1BIOK4LOdhYmmBRLYRI1YAWEUkey6DMjWUWwDMpR_w6YijdMnw.gif?alt=media) ### よくあるケース #### ページコンテンツで特定の要素を見つけるのが難しい 特に多くのセクションや要素を含む複雑なページでは、ページコンテンツで特定の要素を見つけるのに苦労する場合があります。この場合、PageFlyエディター内の検索機能を利用して、名前または種類で要素をすばやく見つけることができます。さらに、ページコンテンツのセクションを折りたたんだり展開したりすることで、要素をより適切に整理し、ナビゲートするのに役立ちます。 ![](https://2271939490-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FT9kr2rEW4UEj3nmGvBuq%2Fuploads%2Fgit-blob-1e513ae5019b2800ddece24ab0dd563ddb094f51%2FAD_4nXdt6wRNqug9xWHWfoXuGrobs9d4eshXfj3VJRRmEZdbRwGg0vJBcW1FULAuc1wNSp4wQ-VtwCES1W__08OHvI_pgqqWhQB7JUSXRIFbfRJcjERyB8gFNaGoFcidOSFjCMvMFPIu2J2VHezs0YzYGgkey6DMjWUWwDMpR_w6YijdMnw.gif?alt=media) #### 要素が期待どおりに並べ替えられない 要素をドラッグアンドドロップして並べ替えようとすると、要素が目的の位置に移動しないことがあります。この場合、要素が階層内の同じレベル（例：セクションからセクション、列から列）内で移動されていることを確認してください。 ### よくある質問 **1. ページコンテンツパネルのセクションや要素の名前を変更して、より整理しやすくできますか？** はい、より整理しやすくするためにセクションや要素の名前を変更できます。名前を変更したいセクションまたは要素の右側にある3つの点をクリックし、「名前変更」を選択します。新しい名前を入力して保存します。これにより、ページコンテンツが整理され、レイアウトのさまざまな部分を簡単に特定できるようになります。 **2. PageFlyでページアウトラインをうまく整理するにはどうすればよいですか？** ページアウトラインをうまく整理するには、セクションや要素に明確で説明的な名前を使用してください。「名前変更」機能を一貫して使用して、ページの各部分に正確なラベルを付けてください。この習慣は、必要に応じて要素をすばやく見つけて編集するのに役立ちます。 **3. セクション（レガシーエディター）とフレックスセクション（Gen 2エディター）の違いは何ですか？** セクションでは、行と列のコンテナ構造でページレイアウトをデザインでき、PageFlyセクションとPageFlyページの両方に追加できます。一方、フレックスセクションには行と列の構造がありません。これにより、PageFlyページに要素を直接追加でき、Flexブロックによってより柔軟なカスタマイズされたレイアウトが可能になります。 ### 追加リソース * [PageFlyの使い方 | 5分で始めよう](https://help.pagefly.io/manual/get-started-in-5-mins/) * [ページエディター – ページキャンバス | ページの全要素が含まれています](https://help.pagefly.io/manual/page-editor-page-canvas/)