# PageFlyでお問い合わせページを作成する方法 ### PageFlyの問い合わせページについて PageFlyを使用すると、コーディングスキルがなくても、視覚的に魅力的な問い合わせページを簡単に作成できます。このガイドでは、PageFlyを使用して[問い合わせページ](https://help.pagefly.io/manual/how-to-create-a-contact-us-page-with-pagefly/)を構築する手順をご説明します。 ### PageFlyで問い合わせページを作成する方法 #### ステップ1：通常ページを作成する 1. PageFlyダッシュボードで、「ページ」タブに移動します。 2. 「新規白紙ページ作成」ボタンをクリックします。 3. ドロップダウンメニューから「通常」を選択します。 4. エディターの種類を選択します。 * **Gen 2 Editor**: ネストされたコンテナを備えたFlexシステムを利用した高度なエディターです。 {% hint style="warning" %} **重要**: Gen 2レイアウトは、従量課金制 ([スロットプラン](https://help.pagefly.io/manual/pricing-plans/)) モデルでのみ利用可能になります。 {% endhint %} * **Legacy Editor**: 従来のレイアウトオプションに焦点を当てた分かりやすいエディターです。 ![](/files/cyFwdrhD6K9pLoIeiN59) または、「テンプレートから作成」ボタンをクリックして、[PageFlyテンプレート](https://pagefly.io/pages/templates?utm_campaign%3Dtemplate%26utm_source%3Dmanual%26utm_medium%3Dcontent%26utm_content%3Darticle)を問い合わせページに使用することもできます。 #### ステップ2：画像バナーをアップロードする **ページキャンバスにセクションを追加する** 1. エディターで、「エレメント」アイコンをクリックします。 2. PageFlyタブの下で、「レイアウト」エレメントを選択します。 3. 1/1オプション (Legacyエディターの場合) またはBlank block (Gen 2エディターの場合) のいずれかをページエディターにドラッグアンドドロップします。 ![](/files/b46bgPqoVMP7g4BPf3YF) Legacyエディターでは、ブレッドクラムのSectionをクリック > Generalタブに移動 > Set fixed widthオプションを無効にすることで、Rowの表示スペースを拡大できます。 ![](/files/cPEapBq1EJhqdQ9vqa3k) Gen 2エディターでは、Flexセクションを選択 > Stylingタブに移動 > Content widthパラメーターの下にある「Fill container」オプションを選択することで、これを行うことができます。 ![](/files/nVRjOD2pD5MCN2LXQPlj) **バナーの背景画像を追加する** * ステップ1：Stylingタブで、Backgroundパラメーターまでスクロール > Select imageをクリックして画像を選択します。 ![](/files/L8wNTRcoWGV5YXU9DrBY) Image Managerから画像を使用するか、インターネットからアップロードできます。詳細については、[こちら](https://help.pagefly.io/manual/use-image-manager-to-upload-media-files/)をお読みください。 * ステップ2：Stylingタブで、Spacingセクションに移動 > top-paddingとbottom-paddingの値を設定して、セクションの高さを画像に合わせて変更します。中央の小さなボックスは、[PaddingとMargin](https://help.pagefly.io/manual/edit-spacing-margin-and-padding)の4辺すべてに同じ値を設定します。この場合、上下のパディングを200pxに設定します。 ![](/files/JqCd9CyRWuljTbyPb80q) * ステップ3：Backgroundパラメーターまでスクロールし、More Settingsボタンをクリック > Background PositionにはCenter、Background SizeにはCoverを選択します。 ![](/files/rzgZ8Hgwh6ObzTpmLH49) **「Contact Us」見出しを追加する** Elementsアイコンをクリック > 次に、PageFlyタブで[Headingエレメント](https://help.pagefly.io/manual/heading-element/)を選択 > 最初のバリアントをセクションにドラッグアンドドロップします。 ![](/files/xgIJ90GM6HMbrDIrPxyD) 見出しエレメントのテキストを変更し、スタイルを設定するには、以下の手順に従います。 * ステップ1：Generalタブで、サンプルテキストを「CONTACT US」に変更します。 * ステップ2：Stylingタブをクリック > Content color > お好みの色を選択します。 * ステップ3：Spacingで、必要に応じてmargin topとbottomを調整します。 * ステップ4：Typographyパラメーターまでスクロール > お好みのフォントファミリーを選択し、必要に応じてフォントサイズを調整します。 {% hint style="info" %} **注**: サイト全体で一貫性を持たせるには、見出しのスタイリングに[グローバルスタイル](https://help.pagefly.io/manual/global-styling-feature/)を使用することをお勧めします。 {% endhint %} ![](/files/S3FIG3C3iuFNPtNVQDPs) #### ステップ3：Google Mapエレメントを追加する Elementsアイコンをクリック > 次に、PageFlyタブでGoogle Mapエレメントを選択 > 最初のバリアントをページエディターにドラッグアンドドロップします。 ![](/files/UBsTbySycZB7zaBkt04F) マップの場所を設定するには、Generalタブを選択 > ContentパラメーターでMap location、Map zoom、Map typeを変更します。 ![](/files/IJnAHjKah1jRpjrYr1NE) Google Mapエレメントの詳細については、[こちらをお読みください](https://help.pagefly.io/manual/google-map-element/)。 #### ステップ4：連絡先情報フィールドと問い合わせフォームを作成する Google Mapと同じセクションに、1/2 – 1/2のレイアウトを追加します。左側の列には店舗の情報が含まれます。右側の列には、顧客が店舗に情報を送信できるように問い合わせフォームエレメントが配置されます。 ![](/files/ZCXfASKQRC4oKJvO62RR) **連絡先情報フィールドを追加する** **Generalタブでの設定** 左側の列に、次のコンテンツを持つ4つの見出しエレメントを追加します：Contact information、Address、Email、Phone number。1つの見出しエレメントを作成し、その見出しをクリックして複製し、4つの見出しエレメントにすることができます。 ![](/files/2NnDy3msIkEBtfC85Oos) 次に、各見出しにコンテンツを追加します。各見出しをクリックし、GeneralタブのContentパラメーターに店舗情報を入力します。 ![](/files/FGOBUWL1h54pFZyrOk9Z) 各情報行にはアイコンを追加します。 * 見出しをクリックし、Generalタブを確認します。 * Show iconオプションを有効にします。星アイコンが表示されます。別のアイコンに変更したい場合は、アイコンをクリックするだけです。この場合は、「location-dot」アイコンに置き換えます。 ![](/files/jEuzZiOV60KN7RG9D1kJ) 残りの見出しについても同様に行うことができます。 **Stylingタブでのスタイルのカスタマイズ** Stylingタブに移動して、フォントスタイルを設定します。 * 見出しとテキストエレメントのお好みのフォントファミリーとウェイトを選択します。 * デザインのニーズに合わせて、各見出しとテキストエレメントのフォントサイズを調整します。 * Copy Styles機能を使用して、1つの見出しから他の見出しに同じスタイルをすばやく適用し、一貫性を確保します。 {% hint style="info" %} **注**: サイト全体で統一感のあるデザインにするには、テキストスタイリングにグローバルスタイルを使用することを検討してください。 {% endhint %} ![](https://github.com/sellersmith/pagefly-help-center/blob/master/ja/images/AD_4nXfS5RQOAkSWUEiXZEGkzuMufVKlD1cNxdpf0E3gRY6OcedrU5pLeDC5Tb70zlTMGXohUwn9W3woza-ePURhudbUWG2vURNJMsjRXkWGC1b-8dtF5AL2B7X2zdR9EYGcLXUkl4sftHPyAVyoc-AYkeytQ0NH36IbDeD0L0ivxyIIQ-1.png) **問い合わせフォームを追加する** 「エレメント」アイコンをクリック > Shopifyタブに移動 > [問い合わせフォームエレメント](https://help.pagefly.io/manual/shopify-elements-contact-form/)を右側の列にドラッグアンドドロップします。 ![](/files/PsodKMuKKb3cd6zIkl6x) フォームのスタイルは、左側の列で見出しにスタイルを設定したのと同様に行うことができます。 ![](/files/D8vJudJtD8zMy00Rhc4R) PageFlyが提供するこの役立つビデオガイドで、顧客データを収集するためのShopifyフォームを簡単に作成する方法を学びましょう。 {% embed url="" %} #### ステップ5：Instagram Feedエレメントを追加する [Instagramエレメント](https://help.pagefly.io/manual/instagram-element/)を使用すると、顧客はあなたのブランドの個性を垣間見ることができ、ブランドへの信頼を高め、顧客エンゲージメントを促進し、最終的に売上を向上させることができます。 **見出し「Follow Us On Instagram」を追加する** Headingエレメントを使用して見出しを作成します。Generalタブで、Heading textに「Follow us on Instagram」というテキストを追加します。次に、Stylingタブに切り替えてテキストをカスタマイズします。 ![](/files/QOmUIM2Udop6ThNslMmv) **Instagram Feedエレメントを追加する** 「エレメント」アイコンをクリック > 上記の見出しと同じセクションにInstagram Feedエレメントをドラッグアンドドロップします。 ![](/files/VdVJ1WqubK0lbypsqHZN) Instagramに接続する必要があることに注意してください。 ![](/files/CsgQKSVmvyWHAaxImsrU) Instagramエレメントの詳細については、[この記事](https://help.pagefly.io/manual/instagram-element/)をご確認ください。 #### ステップ6：ページを保存して公開する Saveボタンをクリックし、次にPublishボタンをクリックしてページを公開します。Live viewボタンをクリックすると、ライブでページを確認できます。 ![](/files/GBn2CD2jXu6gruLGWCxs) [問い合わせページを構築する方法](https://pagefly.link/kZWdpKXb)と、PageFlyで[それを最大限に活用する方法](https://pagefly.link/pXGqxVXN)について詳しく知るには、これらのブログをご確認ください。 ### よくある質問 **1. 問い合わせページが重要なのはなぜですか？** 問い合わせページは、訪問者がブラウザから離れることなく、電話、メッセージ、またはフォームへの入力によってブランドに簡単に連絡できるため重要です。 **2. PageFlyの問い合わせページにはどのような要素を含めることができますか？** 問い合わせページには、以下の要素を追加して強化できます。 * 問い合わせフォーム * 情報のためのテキストコンテンツ * 訪問者を引き付けるビジュアル * 場所のためのマップ統合 (オプション) * 追加の連絡チャネルのためのソーシャルメディアボタン (オプション) --- # 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-a-contact-us-page-with-pagefly.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.