# PageFlyで商品ページを作成する方法

### 概要

このガイドでは、[PageFlyの商品ページを強化する方法](https://help.pagefly.io/manual/add-more-content-to-my-shopify-product-page/)について説明し、コンバージョン率を高める詳細な商品情報を提供します。PageFlyの要素を効率的に統合することで、商品ページのコンバージョン率最適化（CRO）と検索エンジン最適化（SEO）のパフォーマンスを向上させることができます。

### 必要条件

* PageFlyを無料でインストールする：Shopifyストア向けに[こちら](https://apps.shopify.com/pagefly)から入手できます。
* ShopifyとPageFlyの相乗効果を理解する：デフォルトのShopify商品ページは基本的な商品情報を提供します。PageFlyは、商品に関する包括的な詳細を追加できるようにすることで、訪問者を顧客に転換させる可能性を大幅に高めます。PageFlyの商品ページは、追加コンテンツで強化することにより、デフォルトのShopifyページを補完することに注意することが重要です。

### 新しい商品ページの作成方法

具体的な内容に入る前に、PageFlyで基本的なShopify商品ページを作成する方法に関するチュートリアルをご覧ください。

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

### はじめに

以下では、PageFlyの要素を使用してデフォルトのShopify商品ページを強化した方法をご紹介します。

#### ステップ1：新しい商品ページを作成する

新しい商品ページを作成するには、2つの方法があります。

* ゼロから作成する：

PageFlyダッシュボードに移動し、\*\*「Pages」**をクリックし、**「Create blank page」**を選択します。ドロップダウンメニューから**「Product」\*\*を選択して、ゼロから商品ページの作成を開始します。

![](https://github.com/sellersmith/pagefly-help-center/blob/master/ja/images/AD_4nXcdKIMXTN_nEB4Kt_9_gbuJ14vozAgiZ9NQy5g2o1Z9OlXkdrJ5IJopfdvS31rJprOtHfHQEqPI_xSuAoru-XBUuQ1R_4LXh2A6lIsX8aIOEEpdHadlUCjjBRtx2oeZCjP3ienpTAnRALX9n_kxkgkeyYg7Y7R36L48LYgX0clLJZQ.png)

* PageFlyのテンプレートから作成する：

\*\*「Create form template」**オプションをクリックし、**「Product」\*\*を選択します。

![](https://2271939490-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FT9kr2rEW4UEj3nmGvBuq%2Fuploads%2Fgit-blob-3373062a318db106dba13dd4bb48016e17cf016d%2F2-7.png?alt=media)

ストアのニッチに基づいて適切なテンプレートをフィルタリングして選択できます。その後、ホバーして\*\*「Select」\*\*ボタンを押します。

![](https://github.com/sellersmith/pagefly-help-center/blob/master/ja/images/AD_4nXdIwdZ1haHK3ioJJGZLJt9iG9ZAZVe5MRPAB3eR5M8eY9waTMsjjENoxQZDJHEoGF2MdR92Sz2uEJVYnSav_idzb9QHhZdT6sO7Jku0WksuiwKUiOUjn9B2EFO3U2XNj_nesE_ZPELiAIq_ltKl6wkeyYg7Y7R36L48LYgX0clLJZQ.png)

#### ステップ2：商品（S）を割り当てる

ページの設定が完了したら、商品をリンクさせます。

商品ページエディターで、\*\*「Page Assignments」\*\*をクリックしてページ割り当てモーダルにアクセスします。ここで、1つまたは複数の商品をページに割り当てることができます。

![](https://github.com/sellersmith/pagefly-help-center/blob/master/ja/images/AD_4nXcDc9IclasmM6D0fm-JgNeP5emSnYDsRda6pB9gzTMzlZZcCfDNhNv68V9SJ3pSZ8LLiQNHtVAnV4rePNYTDjcr4Nsgr3POuIaV8hnKExImWNAVibsMf3KOVwPMM0HUEpe97z3nc67N72a4hKz-wkeyYg7Y7R36L48LYgX0clLJZQ.gif)

* ストアのすべての商品ページにPageFly商品ページを割り当てたい場合は、\*\*「Page Assignment」**内のドロップダウンをクリックし、**「All products」**を選択し、**「Save」\*\*を押します。

![](https://2271939490-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FT9kr2rEW4UEj3nmGvBuq%2Fuploads%2Fgit-blob-a9f8ea3afea80d046bb8054f9f9d8858561e533e%2FAD_4nXfurs2PdKs75OS7ZXs_Eb6483sGxH8uamIdubb_qCPondGqGep8dPycc99XB2KzCQFB8pBhDyrh8iafuSzcUs5SNBM9kpB8S1qyEh8TMuQJXk-emi2PeWt8anEWTcxXYo8-ND8VM37s-y0apBlrgQkeyYg7Y7R36L48LYgX0clLJZQ.gif?alt=media)

* 特定の商品ページにPageFly商品ページを割り当てたい場合は、\*\*「Browse」**ボタンをクリックし、商品リストから商品を選択し、**「Select」**をクリックします。右上にある**「Save」\*\*ボタンを押すことを忘れないでください。

![](https://2271939490-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FT9kr2rEW4UEj3nmGvBuq%2Fuploads%2Fgit-blob-940e08044bbebd3416d79adea253d653ff2f72ed%2Funnamed-5.gif?alt=media)

割り当てられた商品数量は、PageFlyダッシュボードから直接管理できます。数量セクションのクイックリンクからページ割り当てに移動し、簡単に管理できます。

#### ステップ3：商品詳細要素を追加する

要素カタログで、**Element**アイコンをクリックします。**Shopify**タブで、[Product Details](https://help.pagefly.io/manual/shopify-elements-product-details/)要素をページのキャンバスにドラッグ＆ドロップします。

![](https://github.com/sellersmith/pagefly-help-center/blob/master/ja/images/AD_4nXeOYiZ9XLtmGA55cj51xZdRxQTteCCCmHo2E6E6qOD32IfYZyFId97gXqCpL82zbRGkuQE8qqPRoKrSyVC8qrRuFRKzeF0TDscAD5BXhgrKsqim3fvsoKHSwXy4KimkA-9JcGutB25O_ydV6rgkeyYg7Y7R36L48LYgX0clLJZQ.gif)

### ページを強化する

#### ステップ1：ブランドロゴセクションを追加する

1. 事前に作成されたセクションを使用して、ブランドロゴセクションを追加します。
2. 任意のセクションにホバーし、「+」アイコンをクリックし、\*\*「Template」**を選択した後、カテゴリセクション内の**「Client Logos」\*\*に移動して、お好みのセクションを選択します。

![](https://2271939490-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FT9kr2rEW4UEj3nmGvBuq%2Fuploads%2Fgit-blob-07f1290339c7007d1969c3b52e0d7ffc2459cf8d%2FAD_4nXfZ8-wC3CGMwRwufYgOs7HXuxWh3zjLL7Y8V_MHuq768teuNnputEuAAhNJMYNkmD06q0rJKOV4Mi-j86OHqrzk70DhGs80w-yFIad6mbLrOfvAMdsZo8kqhw52UH6O_qA00GPWYh_dtsM71hDakeyYg7Y7R36L48LYgX0clLJZQ.gif?alt=media)

3. 画像を変更する：各**Image element**をクリックし、**General**タブに移動し、\*\*「Select」\*\*ボタンをクリックして、ストアのニーズに合った別の画像を選択します。

![](https://2271939490-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FT9kr2rEW4UEj3nmGvBuq%2Fuploads%2Fgit-blob-da4dbb9aa9eddd1579414ad5f3170b75c0c2a16d%2FAD_4nXdKFlMaqyBguPsENn0m_qa0LOznIUzr0qMpnpi94p44fHM2kqqJfJO05gZJnIMcNQEmt4UH-fbXIdnnbkDYiGlUcHybgcUSU9HGtllYkTcwwVKVJ6lueiUO_VYt1VU7njDE10DBcPKuufPoB7gakeyYg7Y7R36L48LYgX0clLJZQ.png?alt=media)

#### ステップ2：商品のユニークなセールスポイントを追加する

製品の特徴と情報を含む製品ユニークセールスポイント（USP）セクションを追加することにより、このセクションは顧客が製品をより理解し信頼し、購入決定を容易にするのに役立ちます。

USPは、事前に作成されたテンプレートである「Product information」または「Product Specification」カテゴリを使用して追加できます。

![](https://2271939490-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FT9kr2rEW4UEj3nmGvBuq%2Fuploads%2Fgit-blob-bc3af16a92fdab35e829545bfbddbf3c226f454b%2FAD_4nXfq86j41glhWQlq2zEHlQGtmr1M_IBL6vtnSQA2Qz0QTftshr-g-yNNfMYZdYjsunTtcG9o5WUfULb0NJBL0i7gBK5_puyJMwiVA45AwN421M_8iF8hJyxad-f618x9m3jSPYybzOMINKcjHVby6QkeyYg7Y7R36L48LYgX0clLJZQ.gif?alt=media)

ページに事前に作成されたセクションを追加した後、各要素をクリックしてコンテンツと画像を製品に合わせて変更します。

#### ステップ3：お客様の声を追加する

ストアにとって顧客レビュー/お客様の声は非常に重要です。これはストアへの信頼を高めるのに役立ちます。Testimonialsの事前に作成されたセクションを使用できます。

* **ステップ1**：セクションの右下にある**プラスアイコン**をクリックし、**Template**を選択して事前に作成されたセクションライブラリを開きます。
* **ステップ2**：事前に作成されたセクションライブラリのポップアップで、**Category** > **Testimonials**をクリックし、必要なセクションを選択します。

![](https://2271939490-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FT9kr2rEW4UEj3nmGvBuq%2Fuploads%2Fgit-blob-8adc513c25443d5c373ed4fbe73baa0e61a89eda%2FAD_4nXchg0IL2uUObGHUjuOTAulvDTq8qQFduGtbtI85n84LVIQMQ90VU1jKFuzFr2jb6iJ8YXidpT90S9rZiPsWtE9-Ckdzcx8AEqLHG4IrU5e-1f0Dnx-6_92FxykmQCsYxDNjTqw9X0g7DTPktp7-pwkeyYg7Y7R36L48LYgX0clLJZQ.png?alt=media)

#### ステップ4：クロスセルセクションを追加する

Product suggestionの事前に作成されたセクションを使用して、このセクションを作成できます。

**General**タブで、**Custom Collection**オプションをクリックし、必要なコレクションを選択します。

![](https://2271939490-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FT9kr2rEW4UEj3nmGvBuq%2Fuploads%2Fgit-blob-b203a119fc53a5b1d5fb10594d105266a3d5710f%2FAD_4nXd06RC40M7-FyIHpWjhL1OgL2ecNOVDvfACpJD1hgu8ERtfOSjttAlpYWKPKNs4z9cjGNd8D-qUyYhrkcYXTXLH5rltMD5y8jo-iUk6wFLf5TGDPMZv8PqmpBD5O1-yn3VdkCqHZ1GRe_3pYPKbmQkeyYg7Y7R36L48LYgX0clLJZQ.png?alt=media)

これにより、顧客はストア内の他の製品を見ることができ、行動を促すことができます。

#### ステップ5：デフォルトの商品詳細を非表示にする

* Theme OS 1.0の場合：

商品詳細の上に商品プレビューセクションがあります。これは新しい商品ページを作成したときにデフォルトで表示されるセクションです。これはテーマによって生成される商品詳細のプレースホルダーです。ここでは、ページ設定で\*\*「Show default product details」\*\*オプションのチェックを外すことで非表示にできます。

![](https://2271939490-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FT9kr2rEW4UEj3nmGvBuq%2Fuploads%2Fgit-blob-b71463fc009262c44c09926fa3db84e1e3f666c5%2FAD_4nXcm4BIGGnd_0NKIPZOuyLHpWL4DKFS8wvt4i1o1ku8yqUyd0zcE3eYt5Ut9x8nLNUHEiUBcAFq4M5UCay5EQfuTct_LGzewbHpT-OgKwsM0w0vl3D4ie0fB98oo4ZcU2d3baBEDZTtgbBR8Xd2TjwkeyYg7Y7R36L48LYgX0clLJZQ.png?alt=media)

* Theme OS 2.0の場合：

Shopify Online Store 2.0のDawnテーマを使用している場合は、右上隅にある**More Action**アイコンをクリックし、Go to theme editorをクリックします。

![](https://2271939490-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FT9kr2rEW4UEj3nmGvBuq%2Fuploads%2Fgit-blob-73023bc1a653e116278b233d9e53a57e74b8b433%2FAD_4nXfTuMPsUSuAcgaMrAgx20P0trjdgRFvI6qxaNwpj57XMzTocB8JLLlG4hXu9UNRvivNPZtAt2AgcyIdzHRJnPA7B6-79WfQre_h_D5Ki_rwpwD0Qthm0KkTbYqboGYf94LFdlv5sX1ylXjTkd8RigkeyYg7Y7R36L48LYgX0clLJZQ.png?alt=media)

テーマエディターでは、商品詳細が2回表示されます。1つはテーマからのもの、もう1つはPageFlyからのものです。

片方を目のアイコンをクリックして非表示にできます。

![](https://github.com/sellersmith/pagefly-help-center/blob/master/ja/images/AD_4Xd84yJMrtEWClmOFoMFHEjwLx6T6iAKMJQ5H0VxnhjHqE-hXbto2YjLTovB4UVHTpFux6APNdO2-wLdu7R5nm54eZuAVZeVl3vkf2YDsHBmlGRMlGc0obwKEwJx_A-NbMc16xsY9Z0wesZD4Og3dAkeyYg7Y7R36L48LYgX0clLJZQ.gif)

PageFlyで作成したセクションは、商品ページ上で自由に移動させることもできます。テーマエディターで各セクションの横にある6つの点のアイコンをクリックアンドホールドして移動させます。

![](https://2271939490-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FT9kr2rEW4UEj3nmGvBuq%2Fuploads%2Fgit-blob-b4c4b52bb8a383b3bdcd6446f265e70714c4ea26%2FAD_4nXd9DrDMp9yfWrtm9zQeuiGYIPvCCItGgl_HzDncf8k3vNHdcTBBKN_TtY1NUJYIUnWwv39752QxJdL4hbUzjKvvrbwvWqViusPELRywO4f1HXNwckv5wPYRNyLHERO07QkoyjC-A-D2N7_t9VAkmAkeyYg7Y7R36L48LYgX0clLJZQ.gif?alt=media)

最後に、**Save**をクリックして変更を保存します。

### ヒントとベストプラクティス

1. 商品ページには、必須の商品情報、ユニークなセールスポイント、顧客からのフィードバック、クロスセル商品リストを含めるべきです。
2. 商品画像がすべての角度をカバーしていることを確認し、エンゲージメントを高めるためにライフスタイルショットを取り入れます。
3. ユニークなセールスポイントを明確に詳細に説明し、可読性を向上させるために長い段落を避けます。
4. エンゲージメントと信頼を育むために、商品ページで直接顧客レビューを有効にします。
5. 特にモバイル閲覧向けにページをレスポンシブに最適化します。

### よくある質問

**1. 検索しても商品が見つからないのはなぜですか？**

この場合、探している商品を見つけるためには、商品の完全なタイトルを入力するか、商品のURLとURLハンドルを入力する必要があります。商品のURLとハンドルを見つけるには、次の手順に従います。

1. Shopify管理画面 > 商品 > 探している商品を選択します。
2. 検索エンジンリスティングまでスクロールし > 編集をクリックすると、商品のURLとハンドルが見つかります。

![](https://2271939490-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FT9kr2rEW4UEj3nmGvBuq%2Fuploads%2Fgit-blob-a65a707f64b18b1137576a1179a3c15216a84a2e%2FAD_4nXf2qBe-3qFdf5-gH44IgPt_iZg0RHDWPuMEJjxBdu-B6hZPa0bf3EQ4D9vhikDig_wRCo_e_bhHrC1SprQzAxbmsBJRDMJKSeHlzXQp5mn8eO2xc6lVhc274j31FWdK0_pT9OLqLhvHLGH2w-pMPQkeyYg7Y7R36L48LYgX0clLJZQ.png?alt=media)

**2. Shopifyにおける商品ページとは何ですか？**

Shopify商品ページは、特定の商品の完全な情報を表示する、Shopify eコマースシステム内に存在する専用のWebページです。PageFly管理ダッシュボードで利用可能なShopify商品ページを作成できるようになりました。これは「PageFly商品ページ」と呼ばれます。

**3. モバイルフレンドリーなShopify商品ページを作成する方法は？**

PageFlyの強力な要素と機能を使用して、モバイルフレンドリーなShopify商品ページを作成します。

{% embed url="<https://www.youtube.com/watch?v=Mz_Rq4fHRe0>" %}