# PageFlyでよくある質問（FAQ）ページを作成する方法 ### 概要 [FAQ（よくある質問）ページ](https://help.pagefly.io/manual/how-to-create-faqs-pagefly-page/)は、ウェブサイトにとって不可欠な部分です。顧客が抱く可能性のある一般的な質問に回答し、時間を節約し、即座にサポートを提供します。 効果的なFAQページは、顧客満足度を向上させ、サポートリクエストを減らし、オーディエンスとの信頼を築くことができます。このガイドでは、PageFlyを使用してプロフェッショナルで機能的なFAQページを作成する手順を順を追って説明します。 ### 要件 PageFlyでFAQページの作成を開始する前に、以下が準備されていることを確認してください。 * よくある質問リスト: 必要に応じてカテゴリ別に整理された一般的な質問と回答を準備します。 * ShopifyにPageFlyがインストールされていること: ShopifyストアにPageFlyアプリがインストールされ、設定されていることを確認します。 * コンテンツと画像: FAQページに必要な追加コンテンツや画像を準備します。これには、視覚的な魅力を高めるための商品画像、アイコン、グラフィックなどが含まれます。 ### Gen 2エディター - PageFlyでFAQページを作成する方法 {% hint style="warning" %} **重要**: Gen 2レイアウトは、従量課金制（[スロットプラン](https://help.pagefly.io/manual/pricing-plans/)）でのみご利用いただけます。 {% endhint %} #### ステップ1: 通常ページを作成する 1. PageFlyダッシュボードで、**ページ**タブを選択します。 2. 画面右側にある「**空白ページを作成**」ボタンをクリックし、「**通常**」を選択します。 3. 「**レガシーエディター**」を選択します。![](https://2271939490-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FT9kr2rEW4UEj3nmGvBuq%2Fuploads%2Fgit-blob-64b4f63bb0716222a71814985cbe7ba93b2bb93b%2F5.gif?alt=media) または、「**テンプレートから作成**」ボタンをクリックして、FAQページにPageFlyテンプレートを使用することもできます。 ![](https://2271939490-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FT9kr2rEW4UEj3nmGvBuq%2Fuploads%2Fgit-blob-ad03b25db68fa8f60801d8a9402e2a23169e1aad%2F6.gif?alt=media) #### ステップ2: FAQページを構築する **1. 見出しを追加する** まず見出しを追加します。 * 左メニューに移動し、**エレメント**を選択し、**PageFly**タブに移動し、**見出し**エレメントをキャンバスにドラッグします。 ![](https://2271939490-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FT9kr2rEW4UEj3nmGvBuq%2Fuploads%2Fgit-blob-0e021fdfb5642764684898d334b8f6977385c8f2%2FAD_4nXfPy_XjxGb6N92-z2Dcn0Ph3WDZ50XpAYogJXdwSdjSD3FBfvgh3kgITMdDMcJ7YZWXRU1KrY2PzS-c2wst0DJfac7HEwkMEkbXp3ncdWut7F9qKELDUVTKO_6b4H0MiETsqcf7UsVZA0b8sCroP0T-r2U?alt=media) * **一般**タブに移動し、見出しテキストボックスに見出しを入力します。 * **スタイル**タブに移動し、見出しのサイズ、色、フォント、間隔などを調整します。 ![](https://2271939490-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FT9kr2rEW4UEj3nmGvBuq%2Fuploads%2Fgit-blob-923c22b3bdde9a744fce6ecb0300324ca6626482%2FAD_4nXeiX6nXhuodz9x6RSmyv-y5JzExEg85Fw2F_bUF-KuUCeyThBi50dcOy3Fjk0bzbq1y_67b7x2ATRZ4hWtMnBwOrOofYhM6pfX3nX8vFKLMZ4HRqis48H8NSBv16MJ_l7O8gX9tdbK9aiScLsqkfz_s95Sm?alt=media) 詳細については、こちらの[スタイルタブ](https://help.pagefly.io/manual/elements-style-settings/)をご確認ください。 **2. 段落を追加する** 次に、FAQページに段落を追加します。これはFAQページの短い紹介文になります。 * 左メニューから**段落エレメント**を選択し、キャンバスにドラッグします。 ![](https://2271939490-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FT9kr2rEW4UEj3nmGvBuq%2Fuploads%2Fgit-blob-11505be3a8bd5426d4e925c62ef965582eea505e%2FAD_4nXe6LkcB5fsMQB4x_9Cf_fPnVLxRNxZ7Jre-1NQoRCTewmSfdJY0NfvqpAtzWMzH-aZM6tp2gcIZv5eg7CDc5pJ9vM5THDyzYIhqSMvAZsVQy0PrQ_ssM1EN-8lZghW_XOXGJCzP1yfiQnzC6PN0psTVIrg-?alt=media) * **一般**タブに移動し、段落テキストボックスにコンテンツを入力します。 * **スタイル**タブに移動し、見出しのサイズ、色、フォント、間隔などを調整します。背景色を設定したり、背景画像を追加したりすることもできます（オプション）。 ![](https://2271939490-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FT9kr2rEW4UEj3nmGvBuq%2Fuploads%2Fgit-blob-df166a00dfa4dcd6e2f9e3635dc8e374dca3f833%2FAD_4nXcsvvbwGziRMtIR7sgmuhYu0yt3cqXRmoUt4WHY1JKbh7usaVllvd9yeReSrdwwiEOnATTTzDVKbGn8XUIycgAT7Clwrt0Z8T2ITF5N3bnhxstrOwmjtKcM2oCIwiOXfPv6d2ILkPUM5qlGjNVpEZ3Q-pU?alt=media) 詳細については、こちらの[スタイルタブ](https://help.pagefly.io/manual/elements-style-settings/)をご確認ください。 **3. FAQを整理する** FAQを整理するために、アコーディオンエレメントとタブエレメントを検討してください。 **3.1 アコーディオンエレメントを使用する** このエレメントを使用して、折りたたみ可能なコンテンツを作成します。 * 左メニューに移動し、**エレメント**を選択し、**PageFly**タブに移動し、**アコーディオン**エレメントを選択し、そのバリアントをキャンバスにドラッグします。 ![](https://2271939490-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FT9kr2rEW4UEj3nmGvBuq%2Fuploads%2Fgit-blob-2986b6a52235d7d62ba0f40e0a60e3fe306d0bfa%2FAD_4nXfl-zx5qyg1Bfrdy8bhOBC2ZBgh18_ceSAgunNcasC6uJrtp99rOE7BGnWGZtIVq3w7bp7QyTaVxyTN-nJekkgjqlLbt1S7rniPm8OR0H3ixe1pL8MS1i-WpLH3V4Pv-KEj5EW5APv1fsZ15Yh14PsaGdyf?alt=media) * **アコーディオン**アイテムをクリックし、**一般**タブに移動 > ヘッダーテキストに質問を入力します。 ![](https://github.com/sellersmith/pagefly-help-center/blob/master/ja/images/AD_4nXfU3xi8bMyTT-mxIzyed136MCNfl8LiMqYJMPxbveG2pFR2g9d-8QTsV0ayk7FtZkg_rkK0_0p9U3yqRC_20cvUgB_2K2Y3p4ZK_nd7q6ixw-4cjNxDN245p872ajArL8b4Vf1EowAkkLg8VpzUNlyc5fzI) * **段落エレメント**を**アコーディオン**アイテムにドラッグして回答を追加します。 ![](https://2271939490-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FT9kr2rEW4UEj3nmGvBuq%2Fuploads%2Fgit-blob-eb5626254c0b31e55609ea4ba15c53a29751162f%2FAD_4nXcHVbUvU3icWYoJy7ly0YBgz9wlbvGKOYw_92JdtgcYUT7amK8gwxMUxyA3TSA3qtsWdL3JXy56SrHKSG0v0FIz_c4eV0kKLSfD4_3wfmw7QcHdYxW1FBbX8F2hzpyBUEivCjPzsQkypTV9W_e8j99DaW9s?alt=media) * **一般**タブに移動し、段落テキストボックスに回答を入力します。 ![](https://2271939490-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FT9kr2rEW4UEj3nmGvBuq%2Fuploads%2Fgit-blob-d0126bc58d7325f8e38e3de260cc16bac81ea8c5%2FAD_4nXd55VZpKC307Z6Ad1FV1cl8qSgSHmv4LXRfP1ktcaTdfyifsuv3M4NHiUUGkOu8joRLk3Hn_FsIWy-4_PQ4cKaxtDlhXlq9LFl8l1SzseekP72RiZsCb2OtLdaRHDW0_0uKhuivCvmHWMxmoEP3H3xikHHO?alt=media) 以下は、アコーディオンエレメントを使用したFAQセクションの例です。 ![](https://2271939490-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FT9kr2rEW4UEj3nmGvBuq%2Fuploads%2Fgit-blob-cb00914cc00dd197d2a5504e0134b62698cc3b45%2FAD_4nXee_OEsN7BDh2VVQv0k3jI2DCKYSOkMsp5A3N-Wh5-wihSQh2rN0ArDMSHdSrHqNrGJzk12f0-hgTfzPq5vqIQ778sXTT4VMwcNllkNuikXk_Gr6wfBUJOhb1RVZ1Euh3EOmAISbAX44kr5Mb3-RpXEmuS3?alt=media) **3.2 タブエレメントを使用する** このエレメントを使用して、「**配送**」や「**サイズとフィット感**」などの質問をカテゴリ分けします。 * 左メニューに移動 > **エレメント**を選択 > **PageFly**タブに移動 > **タブ**エレメントを選択し、そのバリアントをキャンバスにドラッグします。 ![](https://2271939490-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FT9kr2rEW4UEj3nmGvBuq%2Fuploads%2Fgit-blob-b55bc4cf7e49dab320f5ccc71aa63bbe0aa989a4%2FAD_4nXde0nLxawAjyuQ3pDsoEsGRpykukx0N6cN25_vAWG6_Rd9eFIVvoMnOz1-E-N4yNtEoqcl-ykxMNk-d7L5DUwBrZ1mNqrOfe8joa0k7vLfGH65sxUReV2bBRuA0jzpjtRMeZSzE41JXtQQ_Kos97FNe15oQ?alt=media) * タブをクリックし、**一般**タブに移動 > **ヘッダーテキスト**ボックスにカテゴリ名を入力して、質問カテゴリに名前を付けます。 ![](https://2271939490-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FT9kr2rEW4UEj3nmGvBuq%2Fuploads%2Fgit-blob-7aca06092234339b8d73a54e719c2d1b93594b51%2FAD_4nXer9K1W77cu4GibhxAFJm_yfONlmTzzTEuWifbOJXzEusLKQX7Bu1EgIj6cZ7PQW1lgEStPrJMgNdfm3s4pYF6JN2HXD8phNvgnKGQYN4U5eD_BymQfe20uCq7wxthUrXx41mzdj-3Vs_Yx2Nl9fPqPYWoc?alt=media) * **見出し**エレメントと**段落**エレメントを使用して、各カテゴリの質問と回答を追加します。左メニューの**PageFly**タブでそれらを選択し、**タブ**エレメントにドラッグアンドドロップします。 ![](https://2271939490-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FT9kr2rEW4UEj3nmGvBuq%2Fuploads%2Fgit-blob-9fa6000b611ba57124e686254f54f16688aa4867%2FAD_4nXfDaGLCGr76uc-C3NhBxRnoQiBFLanUH1vXH9YskiNHfGcFjrEXrr43Uj_SuMmfkeA35PGfFlVDudcFf5VyUGcDtVduab3S-WAyGJduR-2xdrGV_VrHy14-MtIIaFA66ufCgkYfgIlAmKQfYJp8zkxzhcmj?alt=media) * 質問と回答を追加するには、見出しエレメントと段落エレメントの**一般タブ**に移動します。 ![](https://github.com/sellersmith/pagefly-help-center/blob/master/ja/images/AD_4nXcXL9qGRPxP_2TVROKa9NR3MjVAzUSNw86KcdedREX_lhbJ5vMj7d_RWC75W2JO7IzaBWFGaUxRorlKjIzDVS2NTKQHlmHkO6-H_EjRRQbyFrAd75kmaV-6SA2qNUhf7KtV7WJ3f2WLKvARAllBaXExC3I) 以下は、タブエレメントを使用したFAQセクションの例です。 ![](https://2271939490-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FT9kr2rEW4UEj3nmGvBuq%2Fuploads%2Fgit-blob-aa37dccb6e5ae4ebda03f4b18d96a4951906d3fd%2FAD_4nXdS36qaQGQVGGcmjuUJYhnXODra0u2kE0aGiTc8LBRsMFyH0wqDhuN7nCYIPP-XUmkpbqJiaZO9bSBj9maWn4AZG0yVp0DoVFXgMja5GRG9Beznxi0XpUzzMX-GD2_eZqEANIgvv3RKbW3HKUto6cYjVMRH?alt=media) 時間を節約するために、PageFlyの既製セクションからFAQセクションを使用することもできます。 * 左メニューで、**ページコンテンツ**に移動 > 「**セクションを追加**」ボタンをクリックします。 * 「**テンプレート**」をクリック > カテゴリドロップダウンメニューで「**FAQs**」を選択 > 「**選択**」ボタンをクリックします。 ![](https://2271939490-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FT9kr2rEW4UEj3nmGvBuq%2Fuploads%2Fgit-blob-ae104480ab0a8518e3878edda33cf4fff78c8e80%2FAD_4nXcaQerNkSYIRwvLKmtxabBdgezXrR68MwanVchHKK9MfBVXTZZI0tdBDKxpCtNGBv6Bfnao3UQRwSAu-KqR01qvd-bXSWHEjBKTuQY8oXG7YJxO_MF8Mw8qsL8BNn4Hl97qfUZTb_8FezUR4TwOFRFv-AKk?alt=media) * このセクションのコンテンツを、準備したFAQに合わせてカスタマイズします。 ![](https://2271939490-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FT9kr2rEW4UEj3nmGvBuq%2Fuploads%2Fgit-blob-16f09d3e6c2774740408cefa4f2288d7be49fb3d%2FAD_4nXcse8F94sxqKp5XissoyxtFCFH3wppzqZ9nlWR7pBtPbPOI4Pj5mrm4tUmfAJDHWNoVovYZu1YppK-4WB31PK7Ova9vzhbgKS9bGWxZN8ut7Ia9tUkOCIXw7bGAvIS6yuy49o_IK1fWQhuFXtztxi685L8?alt=media) #### ステップ3: ページを保存して公開する * ページの作成が完了したら、「**保存**」ボタンをクリックしてページを保存します。 * 「**公開**」ボタンをクリックして公開します。 ![](https://2271939490-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FT9kr2rEW4UEj3nmGvBuq%2Fuploads%2Fgit-blob-1b5410168e6555247c764b37a570bc8824d39123%2FAD_4nXdO8VltWwejLCl_OS2zb6T8fYB-CLwzNAXkNjuHlE4XirGg0kmEYGGGqXZaGHQuHPXuY1c1Qc7Jk7zHdD7O6jANREWLR8XCRmnMIF4e_eOdCYVj4J1qFRF2Ng0tYbB3j-FPl27R-NGPIb1nxL5UYeEVr15-?alt=media) * 「**ライブビュー**」ボタンをクリックしてライブビューを確認します。 ![](https://github.com/sellersmith/pagefly-help-center/blob/master/ja/images/AD_4nXd2OXv1PgJaRysFhQjrk0uvCFv9GeU2kicB6-vEYJV_HotAEzpKKYVk9h7bxvboiQhMh3aE7-ZtjpRvHe2JfXSi9L-KG4w_ZLMn4SwvWlzGDkNB0KFWKuSO7WCkMHkQ8vO_L-J1RBh5XRjIpras6X9fG3ML) #### ステップ4: FAQページをShopifyストアメニューに追加する これでFAQページが準備できました。顧客がアクセスできるように、Shopifyストアのメニューに追加しましょう。 1. Shopifyダッシュボードに移動 > **オンラインストア**に移動 > **ナビゲーション**をクリックします。 2. FAQページに顧客がアクセスできる場所を決定します（フッター、メインメニュー、クイックリンク）。以下の例では、フッターを選択しています。 ![](https://2271939490-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FT9kr2rEW4UEj3nmGvBuq%2Fuploads%2Fgit-blob-c934e71cc1adb8d106e49cbef28b692174c9ac66%2FAD_4nXfqyl0lMsVJy_Cr5NwVO6L9BxiHTKU37Cjy8lODHZOP5cR5fjMQ8N9bIOnFP90kr8D-TrmF7uJkkpAweSsObcTqiu96DTrT-rXggjzax8LPj4rMcIaD8aV7YM5-Zc0emHl5-nu4ideexyxcI6Ak8Z4FP-A?alt=media) 3. 「**メニュー項目を追加**」をクリックします。 4. 名前（FAQs）を入力し、作成したFAQページを選択します。 5. 「**追加**」ボタンをクリックし、次に「**メニューを保存**」をクリックして変更を保存します。 ![](https://2271939490-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FT9kr2rEW4UEj3nmGvBuq%2Fuploads%2Fgit-blob-82862c45e7d37e253a27c3812df90d6a70e83c85%2FAD_4nXfBv1KewDAyi34JkKaod_-BFjC-hKYLOE2WYQ3y782k2VNyHm4o1eRXYRoBx6X6BhlfvpFZVI3h7mRg9QMC2T2YGzCbLxfoCyl0jTrqWCqPZPhPQ5OEMAjmiim25o7-WSzKE0aYXD9G0xkv2fGt7IeKERhG?alt=media) ### レガシーエディター - PageFlyでFAQページを作成する方法 {% embed url="" %} #### ステップ1: 通常ページを作成する 1. PageFlyダッシュボードで、**ページ**タブを選択します。 2. 画面右側にある「**空白ページを作成**」ボタンをクリックし、「**通常**」を選択します。 3. 「**レガシーエディター**」を選択します。![](https://2271939490-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FT9kr2rEW4UEj3nmGvBuq%2Fuploads%2Fgit-blob-1f8ecacdcb542d2e87409e59ffedd94973b8dd08%2FPageFly-Store-sample-%C2%B7-PageFly-Page-Builder-%C2%B7-Shopify-2024-11-14-09-09-17-3.png?alt=media) または、「**テンプレートから作成**」ボタンをクリックして、FAQページにPageFlyテンプレートを使用することもできます。 #### ステップ2: FAQページを構築する **1. 見出しを追加する** まず見出しを追加します。 * 左メニューに移動し、**エレメント**を選択し、**PageFly**タブに移動し、**見出しエレメント**をキャンバスにドラッグします。 ![](https://2271939490-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FT9kr2rEW4UEj3nmGvBuq%2Fuploads%2Fgit-blob-4933e1a544829c1f0f4e820c12809a9a3ba7863f%2FAD_4nXcPcBIXwoadIVjMTbPFcxkBFVYWFzf4m09LiPIwOpQxYCWwJt1ktMtG7P_HRN5ZE3a1Lnrmh0rTDcG1p4gEYUa30IAV1oicUR8V44JrTTqKC7eax1S1-c2zWn4LH99OJ7S1zpTywH3EJD-cJW6bIzrkCpKc?alt=media) * **一般**タブに移動し、見出しテキストボックスに見出しを入力します。 * **スタイル**タブに移動し、見出しのサイズ、色、フォント、間隔などを調整します。 ![](https://2271939490-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FT9kr2rEW4UEj3nmGvBuq%2Fuploads%2Fgit-blob-f962bfa0261648f976b89eb47409890952fc5593%2FAD_4nXfFtPX9bo3C2B4iqKQxye261AJu4eHOt17O2l6p0pMCOXabepyrPnXKP0SAoXM9itBzePVBtZOtBYkayPHhww0AtjcnvyvaZa9sQcYia6T30-O4AdQS1F0Yiq1ZeOVk3MQ-J8KGHvQ197qVC6yuetQGXoy3?alt=media) * 背景色を設定したり、背景画像をアップロードしたりします（オプション）。 * 背景色を設定する: 見出しを含むセクションを選択 > **スタイル**タブに移動 > **背景色**までスクロールダウン > 希望の背景色を選択します。 ![](https://2271939490-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FT9kr2rEW4UEj3nmGvBuq%2Fuploads%2Fgit-blob-3e419538e687a2b149b4d540e7fc058b296ae21d%2FAD_4nXdU3ThePwcqD_yooMOi2mNGpvsl63kGg09yjRWVdY9_uC8x5xqkmZoTMg4qkBfHyumF7fheF0b-ahLkfjbs6dh0Y55JcOOWViCwGQUy4NS6sag0j72kKGW0uXD1n_nIpz7dRY8W-sqgkdom-x_Xanw7Z62M?alt=media) * **背景画像を追加する**: 見出しを含むセクションを選択 > **スタイル**タブに移動します。**背景画像**までスクロールダウン > **画像マネージャー**から希望の画像を選択するか、**デバイスからアップロード**します。 ![](https://2271939490-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FT9kr2rEW4UEj3nmGvBuq%2Fuploads%2Fgit-blob-2cf589da14c852c764e895b9e4668fb3ac7afdf6%2FAD_4nXeoU7gJvt0J1GGpHRd_SEF5zT5VrJL_Qx4vVi1MP2UpL_KstJjWWomiewShUReR3xSVmQDQp63z_JGfSAFFJsHzc_mQlz_3Gpu3ShZ9lbsVbu6xM82vT3GM0A5zw4YJ6ghBQ8nYzaFaFsn3Kjeoy9fohmUz?alt=media) 詳細については、こちらの[スタイルタブ](https://help.pagefly.io/manual/elements-style-settings/)をご確認ください。 **2. 段落を追加する** 次に、FAQページに段落を追加します。これはFAQページの短い紹介文になります。 * 左メニューから**段落エレメント**を選択し、キャンバスにドラッグします。 ![](https://2271939490-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FT9kr2rEW4UEj3nmGvBuq%2Fuploads%2Fgit-blob-e495d957e615a5ee9de7434ea1e6daadff580145%2FAD_4nXfDzvP_nrPSECNX_RAGS_xyeiigAtaKTbVhZa3S2lZwy5G0SSvPootTqGQnSCiI6VGYqYpmKGurSOtdw37duLd8XPUPcmxIzgBq4r_s46Ud2o0m6SLaqNjox-tVcVzH9zkHytJaU0KbfVS_r4e5jF6_Eqs?alt=media) * **一般**タブに移動し、段落テキストボックスにコンテンツを入力します。 * **スタイル**タブに移動し、見出しのサイズ、色、フォント、間隔などを調整します。背景色を設定したり、背景画像を追加したりすることもできます（オプション）。 ![](https://2271939490-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FT9kr2rEW4UEj3nmGvBuq%2Fuploads%2Fgit-blob-b1cf6b63ec8f46e8a3525780665379b753a98f2b%2FAD_4nXe76VlzyDAeY-Q7yLuNPvGhFVVM8LPPO6TPBj3jfPQ4TvWvplpZ8uBHhjb9xpJH36GfiRpn9JAQLghlGA1LT47OsvGMIq_Y_Ksh75_1y2hXvMN2FN6_VYccWw3DWNTu88dgCCivj2Qx0K07tlMdc0gHYVWr?alt=media) 詳細については、こちらの[スタイルタブ](https://help.pagefly.io/manual/elements-style-settings/)をご確認ください。 **3. FAQを整理する** FAQを整理するために、アコーディオンエレメントとタブエレメントを検討してください。 **3.1 アコーディオンエレメントを使用する** このエレメントを使用して、折りたたみ可能なコンテンツを作成します。 * 左メニューに移動し、**エレメント**を選択し、**PageFly**タブに移動し、**アコーディオンエレメント**を選択し、そのバリアントをキャンバスにドラッグします。 ![](https://2271939490-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FT9kr2rEW4UEj3nmGvBuq%2Fuploads%2Fgit-blob-8a50c09656b7b6e88075aa1e2c1ca6d8a632891c%2FAD_4nXcKaV0PrnU-zj3Usl193pntWGu1TKJXqv5Ldlg6BoVojqmDXqkRk-Kp2zwQgGsbLFu1FTMokYg16fuYoSPgpNeBtS9k_Poe6VYH7E5dTMlzAI_ldhN04oe8Ipk7vcUr2kKCoaIG3aenENFMzYiFbZcsALhw?alt=media) * **アコーディオン**アイテムをクリックし、**一般**タブに移動 > ヘッダーテキストに質問を入力します。 ![](https://2271939490-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FT9kr2rEW4UEj3nmGvBuq%2Fuploads%2Fgit-blob-21c788711b9ded683fc5c0815f54c5a2c7ac4577%2FAD_4nXeMd_H7LK6gkHNN_oNKkWuGc3ZuUiyDFJHKaUWcNHfGzQwkK0DOWz9d6Cb9Yb31yYlQAo03m-1VjdhMPxHwvNZFKfFgKRfQQ4rSrvW0pVgR_dlVrGXADaxWCvC99py1oAQsFDy__ieoucYFoQStrapUWef6?alt=media) * **段落エレメント**を**アコーディオン**アイテムにドラッグして回答を追加します。 ![](https://2271939490-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FT9kr2rEW4UEj3nmGvBuq%2Fuploads%2Fgit-blob-6dc71e4866a4b9520e41c7c365ea070597e6b7aa%2FAD_4nXepjo0SaknB117zGHn9IriYlGgr2BrFUV_g5nByBa7CAfEpFtYq0h9Lw3XR-gSip13THHc91jJTxSQuCgiM0QUGd3qLM9LOinsZ3WfdHbkXz_WPK3ZMLMBJGdHgO-wTSIWhzyDEQMRAMIz8hYwRFtEf5_Em?alt=media) * **一般**タブに移動し、段落テキストボックスに回答を入力します。 ![](https://2271939490-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FT9kr2rEW4UEj3nmGvBuq%2Fuploads%2Fgit-blob-6619aad6c6315a7daf4f1b42757819a095a3cd7e%2FAD_4nXe0eN089UbFZaqPu1RgeIeqav2Hks_bo_ZV76yGJxhdTcuPXXnyovsk8LuSloRvVCx7y_W8zEIiXeYzZss0sMtN0gIPg5BXnCtRoP376h-eJu5fTwyJDc6mNPVEzKlt1tFsbOLD8jRvLTQ851w1KR0dRi3d?alt=media) 以下は、アコーディオンエレメントを使用したFAQセクションの例です。 ![](https://2271939490-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FT9kr2rEW4UEj3nmGvBuq%2Fuploads%2Fgit-blob-1b3499fc9c647d597c30d0fdaf390b535226f59d%2FAD_4nXdwjvUaZtteCtHavVg1GVHq6Il9m-XK6_ZG5RpMZxCMcS0IChWQA_R0mM9AGRENl6YV-FUaTydUyT1HSP-6GCNU9TO46li0Ba0kbIhR13JM3L63WPIgvvY4ZcJLIp8ZagKwcW-A25A75GCZn6PrGr3XojEr?alt=media) **3.2 タブエレメントを使用する** このエレメントを使用して、「**配送**」や「**サイズとフィット感**」などの質問をカテゴリ分けします。 * 左メニューに移動 > **エレメント**を選択 > **PageFly**タブに移動 > **タブ**エレメントを選択し、そのバリアントをキャンバスにドラッグします。 ![](https://2271939490-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FT9kr2rEW4UEj3nmGvBuq%2Fuploads%2Fgit-blob-1b2b1bc974d0842d5e418d68e2da1db583aab2c7%2FAD_4nXdjfVtCsk8oMRMyTIrD_QR0-z86IwZ98Omgq8XWe0p1nwh9_kGBlHCe6M6bNdPNPCdhtCKvtr7cgYKlozLwLHoCtFAWuESXziCZCoXSei1sXIH2pRdNqgLSPumrHgyyzL49tlSgaMVmO5M3NbIjGVBNB_o?alt=media) * タブをクリックし、**一般**タブに移動 > **ヘッダーテキスト**ボックスにカテゴリ名を入力して、質問カテゴリに名前を付けます。 ![](https://2271939490-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FT9kr2rEW4UEj3nmGvBuq%2Fuploads%2Fgit-blob-230bc131c0828fab652f703ab286aa696d64b0e2%2FAD_4nXcZ13NQFYaQIVQBiRx91omRMpv1-11LZdAsCuwHaA1rMYz_ZObuXLA648paktY-Bvba2FZ1S0RjMVlNH-1Dg8_GakTMtyAjDj9D2f8YrQI2La4Gj7MXRfYcNFfjdQOf6mM2QEAb4b3kvJM_-k6GLNeTPSOX?alt=media) * **見出し**エレメントと**段落**エレメントを使用して、各カテゴリの質問と回答を追加します。左メニューの**PageFly**タブでそれらを選択し、**タブ**エレメントにドラッグアンドドロップします。 ![](https://github.com/sellersmith/pagefly-help-center/blob/master/ja/images/AD_4nXczifhmiXQnwDVfV9Qn8x9EU9hsEIne3M796jVTtWrMdLi4sANg4AciDRxIggDytv6i9PKGRXv4d9UvhCEi4dChh4YWlEqtKYRsDR1jUv3ebgtQpwSn36-UnApOpyo6kjUNS8VTinlJovjChW4rw2u6Kaae) * 質問と回答を追加するには、見出しエレメントと段落エレメントの**一般タブ**に移動します。 ![](https://2271939490-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FT9kr2rEW4UEj3nmGvBuq%2Fuploads%2Fgit-blob-07c3ae39f6f371ba377e06c86ac2d8b037d5cba4%2FAD_4nXcdQcMjyA5CisT-OQGwo-X9yKCtVnvMFwkmmvJeMXVUvS4lN3P10JuY2JbZirokQcA2PYCCW7I8KQfGpqERdTNGvSL-9X0GYgjI5btiSOUXQxZbcG3ThljyRyA7aJd4hPaaVvGaTktJNgSPVQuHvOfhhPSq?alt=media) 以下は、タブエレメントを使用したFAQセクションの例です。 ![](https://github.com/sellersmith/pagefly-help-center/blob/master/ja/images/AD_4nXcsj7OyJvmAQ8Ejwnv7u7CjNYu2jlKLXGPWeE6AghfGcjU01JZELmlkIQJQARhoJqm6GxVaphS8tWYJqxevsSl14W659TEPvNjwyQqscdgotw3SaTm-0Jj9arWQQ1z3XxGHngeGvZejqNLM0zT05hDjEr52) 時間を節約するために、PageFlyの既製セクションからFAQセクションを使用することもできます。 * 左メニューで、**ページコンテンツ**に移動 > 「**セクションを追加**」ボタンをクリックします。 * 「**テンプレート**」をクリック > カテゴリドロップダウンメニューで「**FAQs**」を選択 > 「**選択**」ボタンをクリックします。 ![](https://2271939490-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FT9kr2rEW4UEj3nmGvBuq%2Fuploads%2Fgit-blob-9deb6d0e0c4457957a6077e611be46a40e15af44%2FAD_4nXdi4xPe_aiqNWlp4jJMWOb1POYpzTpBjpbs78cpDx2gHwW1wrMv_HWxLO3syJR0tao58saAkujo8-X37s0MkGD03Un6uxo-hYDUVM2bMf3pQfYQMHlzPynSlEEgYQlKl4WgM_6YDtweDvd5r-oTtE6lcf80?alt=media) * このセクションのコンテンツを、準備したFAQに合わせてカスタマイズします。 ![](https://2271939490-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FT9kr2rEW4UEj3nmGvBuq%2Fuploads%2Fgit-blob-1e0711ff9304611013ed15cf99d04d88421f6dc5%2FAD_4nXcFEkmoRXxIYbk574LN8vFT9llCtO5x-LVZeWZG9DNZsvDcEylr5mSX5zs2MH5ho9yWt6ZpH-eDOCYqFmoe09C3995iZw9sLjwi_ho9cxhW8UypIiN7m85qDhTFn6ntRWPZ6PV1jMTghm74c5zm8m2iIev8?alt=media) #### ステップ3: ページを保存して公開する * ページの作成が完了したら、「**保存**」ボタンをクリックしてページを保存します。 * 「**公開**」ボタンをクリックして公開します。 ![](https://2271939490-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FT9kr2rEW4UEj3nmGvBuq%2Fuploads%2Fgit-blob-664528addcadd039efa52c593770236811ff4b5a%2FAD_4nXdUICrv1Ik-IkqU5jK2jSfEo6c9Muw7DGzPMlql8EooFekIwjV0hayz11AxHjBkf2I0NFF7IHFsVEybY-nU0R641cd03tVZfZc3-FtEaHu0wXgUTvE_gA4R5eZciVFoAt6Zwm04QIbg72NMKr9AN6GmmGRf?alt=media) * 「**ライブビュー**」ボタンをクリックしてライブビューを確認します。 ![](https://2271939490-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FT9kr2rEW4UEj3nmGvBuq%2Fuploads%2Fgit-blob-8dbee052e0e17e6ae3ea3ca5abac30e81fb8e197%2FAD_4nXdz3AICfQg4xhgFk0i03vNq9ESfxB5HNcV_0LKEPzedKlHPxP_yHXLGvy4p2AZ_VZbE9kQ7nC7aN3G6-iD_P0DjWQMJrvJ0wyMFFnhO0zK-sa04tw1YjyX-nBMkfkpoqLGxW97DZJ3-KpP_wNink_Wia9K8?alt=media) #### ステップ4: FAQページをShopifyストアメニューに追加する これでFAQページが準備できました。顧客がアクセスできるように、Shopifyストアのメニューに追加しましょう。 1. Shopifyダッシュボードに移動 > **オンラインストア**に移動 > **ナビゲーション**をクリックします。 2. FAQページに顧客がアクセスできる場所を決定します（フッター、メインメニュー、クイックリンク）。以下の例では、フッターを選択しています。 ![](https://2271939490-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FT9kr2rEW4UEj3nmGvBuq%2Fuploads%2Fgit-blob-c934e71cc1adb8d106e49cbef28b692174c9ac66%2FAD_4nXfqyl0lMsVJy_Cr5NwVO6L9BxiHTKU37Cjy8lODHZOP5cR5fjMQ8N9bIOnFP90kr8D-TrmF7uJkkpAweSsObcTqiu96DTrT-rXggjzax8LPj4rMcIaD8aV7YM5-Zc0emHl5-nu4ideexyxcI6Ak8Z4FP-A?alt=media) 3. 「**メニュー項目を追加**」をクリックします。 4. 名前（FAQs）を入力し、作成したFAQページを選択します。 5. 「**追加**」ボタンをクリックし、次に「**メニューを保存**」をクリックして変更を保存します。 ![](https://2271939490-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FT9kr2rEW4UEj3nmGvBuq%2Fuploads%2Fgit-blob-82862c45e7d37e253a27c3812df90d6a70e83c85%2FAD_4nXfBv1KewDAyi34JkKaod_-BFjC-hKYLOE2WYQ3y782k2VNyHm4o1eRXYRoBx6X6BhlfvpFZVI3h7mRg9QMC2T2YGzCbLxfoCyl0jTrqWCqPZPhPQ5OEMAjmiim25o7-WSzKE0aYXD9G0xkv2fGt7IeKERhG?alt=media) ### 用途 * **カスタマーサポート**: FAQページは一般的な質問に回答するのに役立ち、サポートチケットとメールの数を削減します。顧客は素早く回答を見つけることができ、満足度向上につながります。 * **製品情報**: 製品に関する詳細情報（仕様、使用方法、トラブルシューティングのヒントなど）を提供し、顧客が情報に基づいた購入決定を下すのに役立ちます。 * **配送と返品**: 配送ポリシー、配達時間、返品プロセスに関するFAQは、顧客に期待することを明確にし、混乱や潜在的な紛争を減らします。 * **会社ポリシー**: FAQページは、プライバシー、セキュリティ、利用規約などの会社ポリシーを概説し、透明性を確保し、顧客との信頼を築くことができます。 ### ヒントとベストプラクティス * **明確で簡潔な回答を書く**: 専門用語を避け、分かりやすく理解しやすい回答を作成します。 * **モバイル向けに最適化する**: FAQページがモバイルデバイスでシームレスに表示されるよう最適化されていることを確認します。 * **関連するビジュアルを含める**: コンセプトを説明するために、補足的な画像、グラフィック、またはビデオを追加します。 * **他のリソースにリンクする**: 返品、配送、連絡先情報などの関連ページへのリンクを含めます。 ### よくある質問 **1. FAQページのデザインをカスタマイズできますか？** はい、PageFlyでは、フォント、色、レイアウトなど、FAQページのデザインをブランドのスタイルに合わせて完全にカスタマイズできます。 **2. FAQページには何を含めるべきですか？** FAQページには、製品やサービスに関する一般的な質問と回答、配送と返品ポリシー、会社情報、その他顧客が頻繁に問い合わせる関連情報を含めるべきです。 **3. FAQページをナビゲートしやすくするにはどうすればいいですか？** アコーディオンやタブなどのエレメントを使用して、質問をカテゴリに整理します。これにより、訪問者は必要な情報を素早く効率的に見つけることができます。 **4. セクションとフレックスセクション（Gen 2）の違いは何ですか？** セクションは、ユーザーがページレイアウトを行と列のコンテナ構造で設計することを可能にし、PageFlyセクションとPageFlyページの両方に追加できます。一方、フレックスセクションは行と列の構造を持ちません。PageFlyページにエレメントを直接追加でき、フレックスブロックによってより柔軟でカスタマイズされたレイアウトが可能です。 ### バージョン更新 従来のページ構築メカニズム（行、列）に加えて、PageFly 4.23.0では、複雑で高度にカスタマイズ可能なレイアウトの作成を可能にする、より柔軟で効率的な技術であるGen 2エディターが追加されました。これは直感的でユーザーフレンドリーなインターフェースを備えています。 ### 追加リソース * [PageFlyの使用方法｜5分で始める](https://help.pagefly.io/manual/get-started-in-5-mins/) * [ページエディター – ページキャンバス｜ページ上のすべてのエレメントを含む](https://help.pagefly.io/manual/page-editor-page-canvas/) --- # 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/pjitosekushonno/pages/how-to-create-faqs-pagefly-page.md?ask= ``` 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.