# 概要

**ページ構造と要素**セクションでは、PageFlyのページ構造がどのように機能するか、およびページエディター内のすべてのPageFly要素について説明します。

Section、Row、Elementsといった主要なコンテナを使用したページ構造について詳しくは、[こちらのガイド](https://academy.pagefly.io/guide/chapter-2-build-page-structure/?utm_source=manual\&utm_medium=article\&utm_campaign=guides)をご確認ください。

要素は、PageFlyストアを構築し、コンバージョン率を高める上で重要な役割を果たします。PageFlyは、ストアを構築するために4つの異なるタイプの要素を提供しています。これらは以下の通りです。

* **標準要素:** コンテナ、基本要素、メディア要素、ソーシャル要素、およびカウントダウンタイマー、Mailchimpフォーム、テーブルなどの高度な要素があります。これらはどのウェブページにも標準的なものです。
* **Shopify要素:** こちらには、商品リスト、商品詳細、コレクションリスト、フォーム、ブログなど、Shopifyからのデータが必要な要素があります。
* **サードパーティ要素:** こちらには、PageFlyと連携している他のアプリのすべての要素があります。サードパーティ要素は、レビューと評価、バッジとシール、アップセルとクロスセル、定期購入、アップロードフィールドに分類されています。
* **セクション:** ここには、保存されたセクション（以前作成して保存したセクション）と既成のセクションがあります。

ページのスペーシングを論理的かつ合理的に編集することは、より多くの顧客をストアに惹きつけるために不可欠です。マージンとパディング機能を使用してスペーシングを編集し、コンテンツをより目立たせる方法を学ぶことができます。

以下の記事では、これらの要素の使用方法についてより広い理解を得ることができます。

### このセクションの内容

#### 標準要素

* [タブ要素](https://help.pagefly.io/manual/tabs-element/)
* [レイアウト要素](https://help.pagefly.io/manual/layout-element/)
* [アコーディオン要素](https://help.pagefly.io/manual/accordion-element/)
* [スライドショー要素](https://help.pagefly.io/manual/slideshow-element/)
* [コンテンツリスト要素](https://help.pagefly.io/manual/content-list-element/)
* [見出し要素](https://help.pagefly.io/manual/heading-element/)
* [段落要素](https://help.pagefly.io/manual/paragraph-element/)
* [ボタン要素の追加](https://help.pagefly.io/manual/button-element/)
* [HTML/Liquid要素](https://help.pagefly.io/manual/html-liquid-element/)
* [画像要素](https://help.pagefly.io/manual/image-element/)
* [アイコン要素](https://help.pagefly.io/manual/icon-element/)
* [YouTube要素](https://help.pagefly.io/manual/youtube-element/)
* [Vimeo要素](https://help.pagefly.io/manual/vimeo-element/)
* [HTML動画要素](https://help.pagefly.io/manual/html-video-element/)
* [SoundCloud要素](https://help.pagefly.io/manual/soundcloud-element/)
* [QRコード要素](https://help.pagefly.io/manual/qr-code-element/)
* [区切り線要素](https://help.pagefly.io/manual/divider-element/)
* [Facebookいいね！要素](https://help.pagefly.io/manual/facebook-like-element/)
* [Instagram要素](https://help.pagefly.io/manual/instagram-element/)
* [Facebookページ要素](https://help.pagefly.io/manual/facebook-page-element/)
* [Twitter要素](https://help.pagefly.io/manual/twitter-element/)
* [テーブル要素](https://help.pagefly.io/manual/table-element/)
* [カウントダウンタイマー要素](https://help.pagefly.io/manual/countdown-timer-element/)
* [MailChimpフォーム要素](https://help.pagefly.io/manual/integrate-mailchimp-form/)
* [Googleマップ要素](https://help.pagefly.io/manual/google-map-element/)
* [プログレス要素](https://help.pagefly.io/manual/progress-element/)
* [リスト要素](https://help.pagefly.io/manual/list-element/)

#### Shopify要素

* [Shopify要素 - 商品リスト](https://help.pagefly.io/manual/shopify-elements-product-list/)
* [Shopify要素 - 商品詳細](https://help.pagefly.io/manual/shopify-elements-product-details/)
* [Shopify要素 – 商品メディア](https://help.pagefly.io/manual/shopify-elements-product-media/)
* [Shopify要素 - 商品タイトル](https://help.pagefly.io/manual/shopify-elements-product-title/)
* [Shopify要素 - 商品ベンダー](https://help.pagefly.io/manual/shopify-elements-product-vendor/)
* [Shopify要素 - 商品価格](https://help.pagefly.io/manual/shopify-elements-product-price/)
* [Shopify要素 - 商品説明](https://help.pagefly.io/manual/shopify-elements-product-description/)
* [Shopify要素 - 商品バリアント](https://help.pagefly.io/manual/shopify-elements-product-variant/)
* [Shopify要素 - 商品数量](https://help.pagefly.io/manual/shopify-elements-product-quantity/)
* [Shopify要素 - 商品をカートに追加](https://help.pagefly.io/manual/shopify-elements-product-add-to-cart/)
* [Shopify要素 - 商品詳細を見る](https://help.pagefly.io/manual/shopify-elements-product-view-details/)
* [Shopify要素 - 商品メタフィールド](https://help.pagefly.io/manual/shopify-product-metafield/)
* [Shopify要素 - コレクションリスト](https://help.pagefly.io/manual/shopify-elements-collection-list/)
* [Shopify要素 - コレクション詳細](https://help.pagefly.io/manual/shopify-elements-collection-details/)
* [Shopify要素 - コレクション画像](https://help.pagefly.io/manual/shopify-elements-collection-image/)
* [Shopify要素 - コレクションタイトル](https://help.pagefly.io/manual/shopify-elements-collection-title/)
* [Shopify要素 - コレクション説明](https://help.pagefly.io/manual/shopify-elements-collection-description/)
* [Shopify要素 - コレクション詳細を見る](https://help.pagefly.io/manual/shopify-elements-collection-view-details/)
* [Shopify要素 - 顧客フォーム](https://help.pagefly.io/manual/shopify-elements-customer-form/)
* [Shopify要素 - 顧客フォームフィールド](https://help.pagefly.io/manual/shopify-elements-customer-form-field/)
* [Shopify要素 - 顧客フォームボタン](https://help.pagefly.io/manual/shopify-elements-customer-form-button/)
* [Shopify要素 - 問い合わせフォーム](https://help.pagefly.io/manual/shopify-elements-contact-form/)
* [Shopify要素 - 問い合わせフォームフィールド](https://help.pagefly.io/manual/shopify-elements-contact-form-field/)
* [Shopify要素 - 問い合わせフォームボタン](https://help.pagefly.io/manual/shopify-elements-contact-form-button/)
* [Shopify要素 - 検索フォーム](https://help.pagefly.io/manual/shopify-elements-search-form/)
* [Shopify要素 - ブログ投稿リスト](https://help.pagefly.io/manual/shopify-elements-blog-posts/)
* [Shopify要素 - ブログ投稿詳細](https://help.pagefly.io/manual/shopify-elements-blog-post-details/)
* [Shopify要素 - ブログ投稿画像](https://help.pagefly.io/manual/shopify-elements-blog-post-image/)
* [Shopify要素 - ブログ投稿タイトル](https://help.pagefly.io/manual/shopify-element-blog-post-title/)
* [Shopify要素 - ブログ投稿コンテンツ](https://help.pagefly.io/manual/shopify-elements-blog-post-content/)
* [Shopify要素 - ブログ投稿メタデータ](https://help.pagefly.io/manual/shopify-elements-blog-post-meta/)

#### サードパーティ要素

* [統合されたサードパーティShopifyアプリをページで使用する方法](https://help.pagefly.io/manual/integrations/)
* [PageFlyが統合しているアプリは何ですか？](https://help.pagefly.io/manual/what-apps-does-pagefly-integrate-with/)
* [レビューと評価](https://help.pagefly.io/manual/what-review-and-rating-apps-does-pagefly-integrate-with/)
* [アップセルとクロスセル](https://help.pagefly.io/manual/upsell-cross-sell-apps-pagefly/)
* [バッジとシール](https://help.pagefly.io/manual/what-badge-seal-apps-does-pagefly-integrate-with/)
* [予約](https://help.pagefly.io/manual/what-appointment-booking-apps-does-pagefly-integrate-with/)
* [配送と受け取り](https://help.pagefly.io/manual/delivery-pickup-apps-pagefly/)
* [定期購入](https://help.pagefly.io/manual/subscriptions-apps/)
* [注文追跡](https://help.pagefly.io/manual/what-order-tracking-apps-does-pagefly-integrate-with/)
* [アップロードフィールド](https://help.pagefly.io/manual/what-upload-fields-apps-does-pagefly-integrate-with/)
* [Eメールマーケティング](https://help.pagefly.io/manual/email-marketing-apps/)
* [商品情報](https://help.pagefly.io/manual/product-information-apps-pagefly/)
* [プッシュ通知](https://help.pagefly.io/manual/what-push-notifications-apps-does-pagefly-integrate-with/)
* [紹介とアフィリエイトマーケティング](https://help.pagefly.io/manual/referral-affiliate-marketing-apps-pagefly/)
* [画像とメディア](https://help.pagefly.io/manual/what-image-and-media-apps-does-pagefly-integrate-with/)
* [ロイヤリティとリワード](https://help.pagefly.io/manual/what-loyalty-and-rewards-apps-does-pagefly-integrate-with/)
* [サステナビリティ](https://help.pagefly.io/manual/what-sustainability-apps-does-pagefly-integrate-with/)
* [ギフト](https://help.pagefly.io/manual/what-gifts-apps-does-pagefly-integrate-with/)
* [国際化](https://help.pagefly.io/manual/what-internationalization-apps-does-pagefly-integrate-with/)
* [広告](https://help.pagefly.io/manual/what-advertising-apps-does-pagefly-integrate-with/)
* [サポート](https://help.pagefly.io/manual/what-support-apps-does-pagefly-integrate-with/)
* [SMSマーケティング](https://help.pagefly.io/manual/what-sms-marketing-apps-does-pagefly-integrate-with/)

### ビデオチュートリアル

#### レガシーエディター

このビデオは、PageFlyのレガシーエディターにおけるページ構造について、より明確に理解するためのデモンストレーションを提供します。

{% embed url="<https://youtu.be/6lIeIgxzERU>" %}

#### Gen 2 エディター

ページ構築スキルをさらに高めるために、新しいGen 2エディターでセクション、ブロック、レスポンシブレイアウトを構築してShopifyページを最適化する方法に関する最新のチュートリアルをご覧ください。

{% embed url="<https://youtu.be/ACoThfVSBu4>" %}

{% hint style="warning" %}
**重要な注意**: Gen 2エディターベータ版は現在終了しています。Gen 2エディターで作成されたページおよびセクションは引き続き完全に機能します。拡張版は近日公開予定です。
{% endhint %}


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://help.pagefly.io/pagefly-help-center-japanese/pjito/page-structure-and-elements.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.