# PageFlyで公開予定ページを作成する方法 ### 概要 このガイドでは、PageFlyを使って魅力的な公開予定ページを作成する手順をご説明します。これに従うことで、まもなく公開される製品やウェブサイトへの期待感を高める、視覚的に魅力的なランディングページを作成できます。 適切にデザインされた公開予定ページは、公式オープン前に潜在顧客の注意を引き、エンゲージメントを築くための強力なツールとなります。このガイドは、まもなく公開するサイトへの話題性を高め、早期にオーディエンスを獲得したいすべての方に最適です。 この記事の内容 * 要件 * PageFlyで公開予定ページを作成する方法 * ヒントとベストプラクティス * よくある質問 ### 要件 主な要件は、実際にページに含めたいコンテンツとビジュアルアセットです。これには、まもなく公開される内容に関するテキスト、ブランドを表現する画像や動画、そしてEメールリードを獲得するためのサインアップフォームが含まれる可能性があります。 PageFlyで公開予定ページを構築するのは、以下の明確で分かりやすい手順に従えば非常に簡単です。視覚的な学習者の方のために、PageFlyでパスワード/公開予定ページを作成する方法に関する役立つビデオも用意しています。 {% embed url="" %} ### Shopifyでパスワードを設定する方法 #### ストアパスワードの設定 パスワードタイプのページを作成する前に、ストアパスワードを設定する必要があります。以下の手順に従って、ストアのパスワードを設定してください。 * **ステップ 1**: **オンラインストア > 環境設定 > ストアのパスワードを表示** に移動します。 ![](https://2271939490-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FT9kr2rEW4UEj3nmGvBuq%2Fuploads%2Fgit-blob-0f72ff6c6af3c9c4c22bdbf2c611fc9499343543%2FAD_4nXen0zzfkiXYdN78lsNemLxRh2LC2oBcKlaGT_ecuRmp4xURhvuAPJxCyzv9v9wgLN8eukrFcIETR9DHpe7wnFolbvX8lDSkHoJ-OMWIV_RSBWe7PhGWIhI52Hu2Kq8Yrwh4rFF8upGkDkxp3ZvLngkeyJjhzipVRXQv61N8yZYYT7w.png?alt=media) * **ステップ 2**: ストアパスワードを設定します。例: password123 * **ステップ 3**: 「**保存**」をクリックして変更を適用します。 ![](https://github.com/sellersmith/pagefly-help-center/blob/master/ja/images/AD_4nXc_lOP8daY-ag_gYbKsUFO3PGjyUmgXBfbxtp5Ey2JoCTBlA5resT2uYNfuzWLJvz9t9kVOCKAenIFdK5nzBz7r__53QMnQlC07RgeuHz6QtKbbaP8iWogLpdhcHXXDeluS9cfH75n5-9OqIvtmpQkeyJjhzipVRXQv61N8yZYYT7w.png) #### パスワードページの作成 **空白ページの作成** PageFlyのダッシュボードで、公開予定ページを作成するには、**アプリ** > **PageFly**を選択 > **ページ**を選択します。 ![](https://github.com/sellersmith/pagefly-help-center/blob/master/ja/images/AD_4nXcszanvW0oxZOJ8O52QbtjVtUCxnFr0wVSLvLFeLlJovLiHHFpkCfoOZnQf1yxSXLDqdDWMdgfVyQ5nMxPjrrdCfp_XL96ZrGuTczAAqHZc4iQK6PNIDjRtAKH24GfLtEkvJVbtPUC-YpvycMpXhA) 右上隅の「**空白ページを作成**」を選択 > 「**パスワード**」をクリックします。 ![](https://github.com/sellersmith/pagefly-help-center/blob/master/ja/images/AD_4nXdnNZDiTcKSPqjbQA_8QD6pWu32e-nVu6vZ9aWNm1nvs9H8a0pPuLIwLFQdt8yjlqt5d9P4UMoCLQHOrIiehIMT3Cm-TImsN3xxCv_Qjx_SjQjUyiFmjXZF4ZuOkuzd1l7H-81wCe9J9W-rVkjZYA) **テンプレートから作成** ページをゼロから構築したくない場合は、「**テンプレートから作成**」> パスワードをクリックして、事前にデザインされたテンプレートを選択できます。 ![](https://2271939490-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FT9kr2rEW4UEj3nmGvBuq%2Fuploads%2Fgit-blob-ce232efdc429cafef0e3fb725bfb15e121ad7192%2FAD_4nXcrET3vJyYktN5c_hobBaRlrYfsPxUiCcrEjUFA4hIvYkGyjhk9okMIdPqm7Z6F9TNRFgdXJ8vZizvqTwu2a4nprDC12LT_BM7Ki6pmrRdi6-GCwJbs7csVqk3fv4_HjK28pzAi3zhcm52J-EhGcQkeyJjhzipVRXQv61N8yZYYT7w.gif?alt=media) 希望のテンプレートで「**選択**」をクリックします。 ![](https://2271939490-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FT9kr2rEW4UEj3nmGvBuq%2Fuploads%2Fgit-blob-8d9a1a67c243689cc893805f5c580c5385bef230%2FAD_4nXekopvFTAyLsX-7iMTAJXiPTA7R3oeYtS_t2VX-dY1EAsEvxZVHTB7z9qMRVmrAH_0nBuZfGrJE3Js9apkO0T7RTtgUry1xnBdSM8rIGrsqCC6YF_6YeQGg_1aJmTKGae16iAx0oIAz9S39zX8n4QkeyJjhzipVRXQv61N8yZYYT7w.png?alt=media) ### Gen 2エディタ - PageFlyで公開予定ページを作成する方法 {% hint style="warning" %} **重要事項**: Gen 2レイアウトは、Pay-as-you-go料金モデル（[スロットプラン](https://help.pagefly.io/manual/pricing-plans/)）でのみ利用可能になります。 {% endhint %} #### 1. 公開予定ページのレイアウトと背景を設定する 公開予定ページに視覚的に魅力的なビジュアルを使用すると、期待感を生み出し、ブランドアイデンティティを伝え、公式リリース前に潜在顧客を惹きつけて最新情報の登録を促すことができます。公開予定ページの素晴らしいビジュアルを作成する方法については、以下のガイドに従ってください。 **1.1. ページキャンバスにセクションを追加する** **要素を追加** > **レイアウト要素**を選択 > 1列レイアウトをページエディタにドラッグ＆ドロップします。 ![](https://2271939490-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FT9kr2rEW4UEj3nmGvBuq%2Fuploads%2Fgit-blob-a4b12ac20bd075801823f3bfa7cc9cb4b28a395b%2FAD_4nXcbPPbNBInjX0H0cbH2n52giQWk7iyUkrw00ARYyMy_KzAv6J1xkxdWFF48MKbv49e6dSv5q1Ouzqw3FLbr47AScMcmuu2NcYaxFh6TPxe3HLgif77VgEfGrLifHti1mjWo4vMvb3R0hUQjHMRsNQkeyJjhzipVRXQv61N8yZYYT7w.gif?alt=media) **1.2. 背景画像を追加する** **1.2.1. 画像を選択する** **スタイル**タブで、**背景**パラメーターまでスクロール > 背景画像のオプションから画像を選択 > 画像を選択します。 [Image Manager](https://help.pagefly.io/manual/use-image-manager-to-upload-media-files)にある画像、またはインターネットから画像をアップロードできます。 ![](https://github.com/sellersmith/pagefly-help-center/blob/master/ja/images/AD_4nXc9YO8fgNHNO9aERmO3uXrKjyFx2YRJxWquZjHSnuDhqMp7WYgB4QubW6e8X7NOHfi2UqrJtbhISVNzu5rNC79Gsdz0YAMRfBc3mdANjKd9t3kutlSet3ds3CVpempJGO1myo9W3lGKfbuiwfdAvgkeyJjhzipVRXQv61N8yZYYT7w.png) **1.2.2. 画像をスタイリングする** **スタイル**タブで、**間隔**パラメーター > **パディング**に移動します。 * トップパディングとボトムパディングの値を編集して、セクションの高さを画像に合わせて変更します。 * 中央の小さなボックスは、[パディングとマージン](https://help.pagefly.io/manual/edit-spacing-margin-and-padding)の4辺すべてに同じ値を設定します。この例では、トップパディングとボトムパディングの両方に300pxを設定しています。 ![](https://2271939490-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FT9kr2rEW4UEj3nmGvBuq%2Fuploads%2Fgit-blob-93fa2fa3cf28e564754dfb668d45845882985782%2FAD_4nXcRM8rYTHhTlt0fyjOSUoiLZ69ZzoW3nnjbSvVzMDpi2h6b8FQUTqFRmFI0tVAwPSfUxA-TwF2ko17zGs5dnBvQ_JxQj4yuEVfTbyomqWujnWPoF0QGzqUbbTS2wzVCEVckPJBvJhh51_bf6nM_9QkeyJjhzipVRXQv61N8yZYYT7w.png?alt=media) **1.2.3. その他の設定** **背景**パラメーターまでスクロールし、**その他の設定**ボタンをクリックします。 この例では、以下を選択しています。 * 背景位置に「中央 中央」 * 背景サイズに「カバー」 ![](https://2271939490-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FT9kr2rEW4UEj3nmGvBuq%2Fuploads%2Fgit-blob-76cb2fa00f2177b0da8971d452b984f00cf2c856%2FAD_4nXeKJtWEDOC-Pfij5g5v1s-rYqxvSqMLWBZOu7JbWjw26uTdoNnF1dKotpGCXCzMtHj-HdAEIYnwqsWH42VTAHLPzYyW0eeE2z6EhemBQQRb9UYAU9pSaMm1FGCPQfiG8J5fMnGX-vtIpwDnSoGftwkeyJjhzipVRXQv61N8yZYYT7w.png?alt=media) #### 2. ストア情報を追加する **2.1 見出しを追加する** PageFlyの見出し要素は、キャッチーなコンテンツ、つまりSEOタイトルを作成・最適化して顧客の注意を引き、コンバージョン率を向上させるために不可欠です。詳細については、こちらの[記事](https://help.pagefly.io/manual/heading-element/)をご参照ください。 **2.1.1. 見出しを選択する** * **ステップ 1**: 要素機能である**プラスアイコン**をクリックします。 * **ステップ 2**: PageFlyセクションの**見出し**要素をクリックします。 * **ステップ 3**: 使用したい要素をページエディタにドラッグアンドドロップして、使用を開始します。 ![](https://2271939490-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FT9kr2rEW4UEj3nmGvBuq%2Fuploads%2Fgit-blob-ad6b9d8cba8ddccc514ffb60a2a6174df8f4cbde%2FAD_4nXeF5X6xdTGckhBdx9qaf9F7IrhJ2Awk9I7eHV0H-x5OuEDhGP6q01bMrkFj_-cCFvDknVpjgj-Vhnx12IjrA7gPTG4Y1WpPKFN39mwdT-YgXi5i4XE6uX0We8X1IjwpTsE9gfZ8W3p0kVBjo9iAkeyJjhzipVRXQv61N8yZYYT7w-1%20\(1\).png?alt=media) **2.1.2. 見出しにテキストを追加する** **一般**タブから、テキストを追加します。 ![](https://github.com/sellersmith/pagefly-help-center/blob/master/ja/images/AD_4nXfHBQJx4Bo-pfVORcshl8y_FpFoP0hQaMw7R3Z8MxeKCk4UMSXYE5ExIYzq7P5FWxvq_pBXdAF67AkGzumYUOvJ6Hsv2XK7k6AKDnnkpfQnzsqi6bfsuoR-mKgFZTlfcuqbQ0agmweu9DMzYRXcLAkeyJjhzipVRXQv61N8yZYYT7w.png) ![](https://2271939490-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FT9kr2rEW4UEj3nmGvBuq%2Fuploads%2Fgit-blob-ea783c31c9f0be0f149a697d405f0d4c21136b15%2FAD_4nXfHBQJx4Bo-pfVORcshl8y_FpFoP0hQaMw7R3Z8MxeKCk4UMSXYE5ExIYzq7P5FWxvq_pBXdAF67AkGzumYUOvJ6Hsv2XK7k6AKDnnkpfQnzsqi6bfsuoR-mKgFZTlfcuqbQ0agmweu9DMzYRXcLA?alt=media) **2.1.3. 見出しをスタイリングする** * **スタイル**タブの**コンテンツカラー**に移動し、見出しに希望の色を選択します。 ![](https://2271939490-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FT9kr2rEW4UEj3nmGvBuq%2Fuploads%2Fgit-blob-d7bef35e0d9a18b95b9c673a07cf4473d55d43a6%2FAD_4nXdxYgPOu9DjkmIZXJlCTxuNN9W2gTTM_MKzHq7gOXt0Ca78jJqafH7U2LzoXha1-dnuU9StEy2KRm0aQQ5jjVbxfsn1Pw21y7N6Fct1-AI28GmPsazXyYT8rQuKAxajGNtQhl-37E6G170DDVSthAkeyJjhzipVRXQv61N8yZYYT7w.png?alt=media) * **間隔**で、見出しと下にある段落の間にスペースを作成するために、上マージンを0px、下マージンを20pxに設定します。 ![](https://2271939490-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FT9kr2rEW4UEj3nmGvBuq%2Fuploads%2Fgit-blob-7ac41e80aaf02313648352c8f408cd0043ca1fbe%2FAD_4nXcoLftyZN3RANoKAHBZwGh2VBOht-UKeyAGoKG_-WjQ55Y4SDevOcFSNvQ_OzTXpKxArGtVYpgZDDLdy907fRjgMKSyhXKfsLzEkEb6wlpEykHBhb07J09r8W15h_W2P6ErpDvzm4S5XgWSjgla5wkeyJjhzipVRXQv61N8yZYYT7w.png?alt=media) * **タイポグラフィ**パラメーターまでスクロール > フォントファミリーを選択します。 ![](https://2271939490-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FT9kr2rEW4UEj3nmGvBuq%2Fuploads%2Fgit-blob-fa598f75eca536f514688c1783198aca17ed949b%2FAD_4nXcx9T45YOCEl1TzH7TOwRABr0Lijj9k1apvB1rtqhegep-RdXNB_9SedLKZwfUV675Tc6N9YFooAUhn9IOJKlglxVNjg1fI09h1-2IBiOP5NjMBXEGrbeeq0DLEF0N4BP9hhDpgN0_5yEIR_eLBDgkeyJjhzipVRXQv61N8yZYYT7w.png?alt=media) * 見出し要素を整列するには、**スタイル**タブ > **サイズパラメーター** > 幅を見つけて、ドロップダウンをクリックし、塗りつぶしを選択します。 ![](https://2271939490-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FT9kr2rEW4UEj3nmGvBuq%2Fuploads%2Fgit-blob-0374ad0c7ce987a032983daf012c70560fc7dfb2%2FAD_4nXcCKD5ZjX1RvUHjP2nc5HwWNxB0bBOrA9MjbUIH16LRtIP-iidUXW3hFRjdGErnWyKGkfBkDwrOJKRkc25mKYK9661xyq4ewhKfD5Wk5NRdzUc4NAiz7REMcdJirGD00LCpOkdzpdMKqUXF4srMkeyJjhzipVRXQv61N8yZYYT7w.png?alt=media) 次に、**テキスト配置**までスクロールし、中央揃えアイコンを選択します。 ![](https://2271939490-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FT9kr2rEW4UEj3nmGvBuq%2Fuploads%2Fgit-blob-0c308c3af646789c8c72e2a1c64a58f0f276da20%2FAD_4nXdxfWvHGboLlCqpmEEOVXmvT2Fm5i2C-D1DdNe0L74xYjVgQZ4t675_Fq-DKJbzZA4ngrkOotTAZ488tX5rgFrr3_zGXR3QP9qrGFUo5QAWRGzKnRp1pDb8KsY0Vk3l_iIFU1nLd-tL3_AVULZrZgkeyJjhzipVRXQv61N8yZYYT7w.png?alt=media) * **その他の設定**をクリックします。 例として、フォントファミリーは「**Lato**」を選択し、フォントサイズは60pxに設定しました。フォントウェイトは太字、行の高さは64pxに設定します。 ![](https://2271939490-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FT9kr2rEW4UEj3nmGvBuq%2Fuploads%2Fgit-blob-6e112472d07f2662c1fb0143bae88595d4b5a44c%2FAD_4nXfojRLBeu3bx8s7EZ50FWnHxJvJkO-0jb52pbLMgRBoAt2YcajewmQ4GkIyJWYP-4xHHfE8ZdM-wCZAjSr_CojVJSBUCZy6M78mKgsYmpVxQRsCvJWM-N5DiWzJsoQeuXAvfc6jpVSw7hpjLDxENAkeyJjhzipVRXQv61N8yZYYT7w.png?alt=media) **2.2 段落を追加する** **2.2.1. 段落を選択する** 2. **要素を追加アイコン**をクリック > **段落要素**を選択 > 最初のバリアントをページエディタにドラッグアンドドロップします。 ![](https://2271939490-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FT9kr2rEW4UEj3nmGvBuq%2Fuploads%2Fgit-blob-701faf5387e8024cbe3c371b7db5a0d0069ff0c6%2FAD_4nXd63zCBjyPRdHTnWzVIkYM7mFOZVbREy4NCEapbxD2QNPP4Axn67nMKiHqqtPndo54VeucUGuUADdWytZOsbDd0KYEvg8m7mj_rAQ83BV1OEnYxoWj3VYsXJqsTGd6MmsiZQ6T_pHDfHEz10d-sGAkeyJjhzipVRXQv61N8yZYYT7w-1%20\(1\).png?alt=media) 3. **一般**タブで、推定リリース時間や遅延の理由について詳細を追加します。 ![](https://2271939490-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FT9kr2rEW4UEj3nmGvBuq%2Fuploads%2Fgit-blob-1fd689f02d2b154c9a2fe39f5751991b2e3fd147%2FAD_4nXfqf9Flg5_SbDQzXnZqkwopKi23n9XZGQq_hrkbu67gQucB980lzPc5P8wyZFgdMJZ8xHLCe0qAY3Ba92NCJsKuu-BLKseePbcGERwROm4shaqtrBMZxW6ylYfrPkZ_wKNA4Sq0o3ktqBBSkfFJPgkeyJjhzipVRXQv61N8yZYYT7w.png?alt=media) **2.2.2. 段落をスタイリングする** **スタイル**タブに移動します。 **コンテンツカラー**で、段落コンテンツに希望の色を選択します。 ![](https://2271939490-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FT9kr2rEW4UEj3nmGvBuq%2Fuploads%2Fgit-blob-6486dc5075b7834dd18dbf191a35c689123c4312%2FAD_4nXcjal2WsR2EP2eezaAlz1bvf6mcMFduDFaBz8xJ0LRWNLnzkRDSTgzWXJClSw6eleGpDxncXVWbBUby645n_IsdCBUKE9uUFWXY_iH18Q3Ns-ogJPfnWN8usDYjZAMMvI1TMpYWWneaDHog6GKr6QkeyJjhzipVRXQv61N8yZYYT7w.png?alt=media) * **間隔**で、見出しと下にある段落の間にスペースを作成するために、上マージンを0px、下マージンを40pxに設定します。 ![](https://2271939490-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FT9kr2rEW4UEj3nmGvBuq%2Fuploads%2Fgit-blob-037e4fe06de0851072c887dcba726619d4726e06%2FAD_4nXeTvjZJEUgls4s_bS8245rkXlamd6Fayl2jqt6luLZxfgvwmKzGao_05zigkWhrXk8GiH0mg4SUAy5nNf_jNih4SEKhaKGKkX8Jtn2LY2QUYOQ768KtWJr3oKP4hqiKl4Y5311nFmR4V2lvSplTGQ?alt=media) * **タイポグラフィ**パラメーターまでスクロール > フォントファミリーを選択します。 * **テキスト配置オプション**で、中央揃えを選択します。 ![](https://github.com/sellersmith/pagefly-help-center/blob/master/ja/images/AD_4nXfMKjBbVX-C4rTGvh2Y5WPKTDCvhbr5usvpRwZZNc6-5BF8ZJtGDkU_rscJ8cGm2V9NiRUcJNCDH4btdHVYEjC_KTL7k-gpoV6gTCk2EX5kWY6tEB8GqF9GaFlgSRiMxmTWbE74B8h7OXcQCwkeyJjhzipVRXQv61N8yZYYT7w.png) * **その他の設定**をクリックします。 例として、フォントファミリーは「**Shopifysans**」を選択し、フォントサイズは16pxに設定しました。フォントウェイトは標準、行の高さは24pxに設定します。 ![](https://2271939490-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FT9kr2rEW4UEj3nmGvBuq%2Fuploads%2Fgit-blob-a7a4c7de07ae33c7cda133661e9fb3e8701bc385%2FAD_4nXfN52r0ee_6m0jsEBmEnePX90CBnXn1GZFW9DWxPN0ZpID7TPsetmKRjoedsip2HIRGy6FSmkGA0gxSIexNHDJ_q2ZPtMnbTG8SrO7_6BcCHoWZ_9i0ExfeJClycCWIj1f7EX5HDfbCcc8v4t5vOAkeyJjhzipVRXQv61N8yZYYT7w.png?alt=media) #### 3. 顧客フォームを作成する 公開予定ページに顧客フォームを設置することは、貴重なリードを獲得し、期待感を高め、ターゲットマーケティングに必要な顧客データを提供するのに役立ちます。詳細については、こちらの[記事](https://help.pagefly.io/manual/shopify-elements-customer-form/)をご参照ください。 **3.1. フォームを選択する** エディタの左サイドバーで、**Shopifyセクション**をクリック > **顧客フォーム要素**を選択 > 最初のバリアントをページエディタにドラッグ＆ドロップします。 ![](https://2271939490-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FT9kr2rEW4UEj3nmGvBuq%2Fuploads%2Fgit-blob-ef477fb274ebbe710349e360e6dce993ba2494bd%2FAD_4nXdQnP2i4QcRxEdQTvS6jwLvuCv0SSEPc7N5Qc_EPa1hTe_tdQoqe1rocnlHhCHYMAm_tpmL1K4gj7QjiV9S18UdS9eRZKffOxGk6MHRtZWZbMCO6qY9zVk4CcBURN_zp1XZ7f8GZ7DXA3akPZ9QdAkeyJjhzipVRXQv61N8yZYYT7w-1%20\(1\).png?alt=media) **3.2. フォームをスタイリングする** **スタイル**に移動 > 左パディングと右パディングを調整します。例として、左パディングと右パディングの両方に250pxを設定しました。 ![](https://2271939490-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FT9kr2rEW4UEj3nmGvBuq%2Fuploads%2Fgit-blob-5ba274455da321a9995b4f84b76a92a5c68bd955%2FAD_4nXcMdt-nxH9iyhhj1GwXJXHar4xwJT_NMMFICYs38_JqeN38wMPc0RLu4fMoGJXPc1iaIg-5kKwWcTcfZl6PYdZIPgeunojHz5ZDbtRrXankHaurIuk7w7wYsp44b3Qfog-mARMgRpp0TQQL-bwWaQkeyJjhzipVRXQv61N8yZYYT7w.png?alt=media) **3.3. カスタムフォームフィールドを調整する** **カスタムフォームフィールド**をクリック > **一般**タブで、フィールド内のテキストを調整します。 ![](https://2271939490-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FT9kr2rEW4UEj3nmGvBuq%2Fuploads%2Fgit-blob-e8cdc60227552b04b7c07c3317fc7d3571be1f36%2FAD_4nXer4pZ-ljZ_H9i4xdMm0p0yJTB_8OA5jRiSfc8QG5IxcbOYmA7xQEjhBzjS4PZfsDrK6gIkOWhFd9MWFcfIhTPnbkI18mYiwqlYE4r66bUCsgy9GKiTzf5FsnxI8Gwd45cLU78tgDZ3TtpryugkuQkeyJjhzipVRXQv61N8yZYYT7w.png?alt=media) **3.4. カスタムフォームボタン** **カスタムフォームボタン**をクリックします。 * **一般**タブでは、テキストのみ、アイコン付きテキスト、アイコンのみの3つのボタンタイプから選択できます。 ![](https://2271939490-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FT9kr2rEW4UEj3nmGvBuq%2Fuploads%2Fgit-blob-4c00db26b3cc6ebbc1b27374842802e8ebfae5b5%2FAD_4nXf5VccFd6bVtkNl2NfZ_8bKkYj5F4V2JRcYjStg_6I1e9tENbXKyehGA7nlWdZUVgSle1On_40Xp1TOy8716QcNTW9JD31fs8Kn12q70rJEt5p_-E--ZItVknEZdCVM2ETc-UTeQDBqL7L7Efrt_g?alt=media) * ボタンにテキストを追加します。 ![](https://2271939490-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FT9kr2rEW4UEj3nmGvBuq%2Fuploads%2Fgit-blob-df47a29602d04e17c15dabbf4c3419474043033d%2FAD_4nXfFw9oNZ4PQN-b3cvG_ExTOMaN6vLBijnt-jlYfdPWVzhr80uVP2uCIouCS-K_ACJjRqHcv5VkiCUs3tusLbLgWCk-Q0gtuLM9F9jzUalifypG8OO8uG28V04ucdZrAJeS-s4gfJRUia4yZf9NEVQkeyJjhzipVRXQv61N8yZYYT7w.png?alt=media) * **全幅を有効にする**: ボタンの全幅を有効にしたい場合は「はい」をクリックします。そうでない場合は「いいえ」を選択します。 ![](https://2271939490-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FT9kr2rEW4UEj3nmGvBuq%2Fuploads%2Fgit-blob-881e16d4132d88d7b97916fe18ea297276626565%2FAD_4nXc_wcw8duZNpvHZjSdlc8exNiV893LsCDmB55JfMM-j4piY9Z1OnCFO-I1pRSr7TarqIqpC1I2pLheazilMJ3LGgcpk7BCGTaZfImvCbfTszhDFnT5l_HyVJ2tPAF9Nx1SNnCQ3M24s1D9zbTIIUAkeyJjhzipVRXQv61N8yZYYT7w.gif?alt=media) **顧客フォームボタン**の表示をカスタマイズするには、**スタイル**タブに切り替えます。利用可能なスタイルオプションには以下が含まれます。 * **コンテンツカラー**: グローバルスタイルで設定された色に基づいてテキストの色をカスタマイズするか、独自に設定します。 * **タイポグラフィ**: フォント、フォントサイズ、テキスト要素などをカスタマイズします。 * **ボーダー**: ボタンのボーダーを調整します。 * **通常状態**: ボタンをより魅力的に見せるために、ホバー/アクティブ状態を追加します。 ![](https://2271939490-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FT9kr2rEW4UEj3nmGvBuq%2Fuploads%2Fgit-blob-bb5a361d6c2e3299e53cd8b5204d27de01e7c958%2FAD_4nXcP5eoV3vAg0UFq6A0J-NQQ80HozoNL0r8nOHTIFBkbxsaWkBah5-iy1xk6qHzuOh1Ermj4Qlc6i-X9Gz6pEQceZH0oY9s2GG0JAZ_Me0AYncEJ-PcEaZpZTaPK4P3g-r19V8Tg5WqchkV5oW5CigkeyJjhzipVRXQv61N8yZYYT7w.png?alt=media) [顧客フォームボタン](https://help.pagefly.io/manual/shopify-elements-customer-form-button/)のスタイリングについての詳細は、こちらで確認できます。 #### 4. 保存して公開する ページの編集が完了したら、ページ全体をもう一度確認します。 公開したくない場合は、「**保存**」ボタンをクリックします。 ![](https://2271939490-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FT9kr2rEW4UEj3nmGvBuq%2Fuploads%2Fgit-blob-472fbe4be0e6eacccd68c40409d545fd645b7cc6%2FAD_4nXdECAgtnvLW1QTeZNo8sGxEMFZPfC89CLgCybCZ6EI4Es3Z7mue_g1AgurjyvpAoZPg6GJExqvwRmAUftJhBpIhq88XVbaUO1q83492aKc0Svu0vHIY2CJSMtJNk079zUDyQ6TQ6uZFu-PW0b7DAQkeyJjhzipVRXQv61N8yZYYT7w.png?alt=media) 「**プレビュー**」をクリックして、プレビューモードで表示を確認します。 ![](https://2271939490-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FT9kr2rEW4UEj3nmGvBuq%2Fuploads%2Fgit-blob-8583e6bf11831986af5d36f4d0f00ab4088dbcc7%2FAD_4nXcd1c2tuxBtV2w3QZF_rAKDfWCweUMe5M4qfVIbYOY6V5PtFbIPMsac15zIvWcOwXEZjZG95MPZ39ZUVajGOQvsw7ANJtL95Edjj3WlWLSOr-uhsqiTpFhnChFfqreCLrJXkAxcOF3QwNWclqt8TQ?alt=media) プレビューは以下のようになります。 ![](https://2271939490-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FT9kr2rEW4UEj3nmGvBuq%2Fuploads%2Fgit-blob-83916f594d024ba2fda2bdcc919096411273b017%2FAD_4nXdHz1XYLUt4LGlTR6fb0M_tsz7pPDqJuwfd_GnhI7tPfSqOA5DllPmK-xES9pjy30icQZp8GB-wWdb1juubUIEfJwHQACP0P-KQx4iXVBjDzOWV70bYDjCeBOpvC-8Qx2jafxbCXkTqxeyeSO6lEwkeyJjhzipVRXQv61N8yZYYT7w-1%20\(1\).png?alt=media) ページの作成が完了したら、「**公開**」ボタンをクリックして、ライブ表示でページを確認します。 ![](https://2271939490-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FT9kr2rEW4UEj3nmGvBuq%2Fuploads%2Fgit-blob-8c326cea41756d445b5bbccf33b89669ddd22d58%2FAD_4nXfaxez0oposg3AnyiLaIOLCrpUvQjhuJUgBekfOoXdlTFbw1DBmtoUzIKUwDc6xo-6RZwSvxJV2QSWaIZEE4g3rsrZfEt0lJiMDoUtL2hboT3d78M7HD08h3IqmxaxhpOg_2VORz5sh6rws4vc2jA?alt=media) ### レガシーエディタ - PageFlyで公開予定ページを作成する方法 #### 1. 公開予定ページのレイアウトと背景を設定する 公開予定ページに視覚的に魅力的なビジュアルを使用すると、期待感を生み出し、ブランドアイデンティティを伝え、公式リリース前に潜在顧客を惹きつけて最新情報の登録を促すことができます。公開予定ページの素晴らしいビジュアルを作成する方法については、以下のガイドに従ってください。 **1.1. ページキャンバスにセクションを追加する** **要素を追加** > **レイアウト要素**を選択 > 1列レイアウトをページエディタにドラッグ＆ドロップします。 ![](https://2271939490-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FT9kr2rEW4UEj3nmGvBuq%2Fuploads%2Fgit-blob-ba93fe6c6554269492d17166ec1a6805aa8ba70f%2FAD_4nXfs-32VwgtjMhAPLq1lCgyvnG-vfZMibFQI-Ln_vJb5LvfwiNHUeBxXkbrITMK5_va1NLXXEApGJIVq9B149D1AugGVRjBe7Ew_V4zEJqI-00DU4kAJNcan7CzDwa7-N0NEGUekWE-7PBKUN-AogkeyJjhzipVRXQv61N8yZYYT7w.gif?alt=media) **1.2. 背景画像を追加する** **1.2.1. 画像を選択する** スタイルタブで、**背景**パラメーターまでスクロール > **背景画像オプション**から画像を選択 > 画像を選択します。 [Image Manager](https://help.pagefly.io/manual/use-image-manager-to-upload-media-files)にある画像、またはインターネットから画像をアップロードできます。 ![](https://2271939490-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FT9kr2rEW4UEj3nmGvBuq%2Fuploads%2Fgit-blob-ae612d4b617721379d545e34e77e257663043ac8%2FAD_4nXcF3pcHsMtsDA-820HU7Ka-iQW6YbrjZQK4Gl5TYwkNE2Gl9fDPFqxP2kjoE3LU4zrUPS3jjHw7OElSFofHLKtJrHs6qgTUcaOZppPJbhViwvNoW0cBhsZsHNB785e44CsM6Du9is_14LUjIUEk4wkeyJjhzipVRXQv61N8yZYYT7w.png?alt=media) **1.2.2. 画像をスタイリングする** **スタイル**タブで、**間隔**パラメーター > **パディング**に移動します。 * トップパディングとボトムパディングの値を編集して、セクションの高さを画像に合わせて変更します。 * 中央の小さなボックスは、[パディングとマージン](https://help.pagefly.io/manual/edit-spacing-margin-and-padding)の4辺すべてに同じ値を設定します。この例では、トップパディングとボトムパディングの両方に300pxを設定しています。 ![](https://2271939490-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FT9kr2rEW4UEj3nmGvBuq%2Fuploads%2Fgit-blob-d79684a3ff9004ed87d369ff5ec2c91bb2ae9556%2FAD_4nXexHD2NnoapsKUCHubMjcp6cDSXrT1-LZp0e1a2kCLD66Lkc4FplvRbmOIGXXZLovdf7fgwn5Q5U5AuC-gOHaFOq1Rj-MBkgIwy_Asnbd7ZuuOs4hoCUEweUELnD7u-VHDNdFc0QqiXI5QyjY6uiAkeyJjhzipVRXQv61N8yZYYT7w.png?alt=media) **1.2.3. その他の設定** **背景**パラメーターまでスクロールし、**その他の設定**ボタンをクリックします。 この例では、以下を選択しています。 * **背景位置**に「中央 中央」 * **背景サイズ**に「カバー」 ![](https://2271939490-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FT9kr2rEW4UEj3nmGvBuq%2Fuploads%2Fgit-blob-a68e4c5002bc079f6004db568cb5afc23681a1a2%2FAD_4nXesw4-eb0_hyfUywIklI0IfG6dDrXMUXBjeb14BpmmtcdwhCCxPZbjDF-YRcvNZYiCCrQuUO_aH3Qezx9uP4EclgWRB9QgJq8TBSW0jYwwY71DNZmE2vyuVsXl-7NCRgv_WjpEqwsw66500RIIqnwkeyJjhzipVRXQv61N8yZYYT7w.png?alt=media) #### 2. ストア情報を追加する **2.1 見出しを追加する** PageFlyの見出し要素は、キャッチーなコンテンツ、つまりSEOタイトルを作成・最適化して顧客の注意を引き、コンバージョン率を向上させるために不可欠です。詳細については、こちらの[記事](https://help.pagefly.io/manual/heading-element/)をご参照ください。 **2.1.1. 見出しを選択する** * **ステップ 1**: 要素機能である**プラスアイコン**をクリックします。 * **ステップ 2**: PageFlyセクションの**見出し**要素をクリックします。 * **ステップ 3**: 使用したい要素をページエディタにドラッグアンドドロップして、使用を開始します。 ![](https://2271939490-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FT9kr2rEW4UEj3nmGvBuq%2Fuploads%2Fgit-blob-ad6b9d8cba8ddccc514ffb60a2a6174df8f4cbde%2FAD_4nXeF5X6xdTGckhBdx9qaf9F7IrhJ2Awk9I7eHV0H-x5OuEDhGP6q01bMrkFj_-cCFvDknVpjgj-Vhnx12IjrA7gPTG4Y1WpPKFN39mwdT-YgXi5i4XE6uX0We8X1IjwpTsE9gfZ8W3p0kVBjo9iAkeyJjhzipVRXQv61N8yZYYT7w.png?alt=media) **2.1.2. 見出しにテキストを追加する** **一般**タブから、テキストを追加します。 ![](https://2271939490-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FT9kr2rEW4UEj3nmGvBuq%2Fuploads%2Fgit-blob-aa15970f166344dd0507cd316282df47417d980a%2FAD_4nXfwfQ9kR0ozyWLjGS4Q45SoTPrBdPmBDY0sM1M-CQYt8VCl3hcLg1TGkrnnStSSvpWWM6krS3cMQkyNllHOYrXAS1E1ifGS4OiIwqmmlOzCDiQX4Wn-CzW8wp1MvoAltRdmBvf1OWJs3UA1PycAHQkeyJjhzipVRXQv61N8yZYYT7w.png?alt=media) **2.1.3. 見出しをスタイリングする** * **スタイル**タブの**コンテンツカラー**に移動し、見出しに希望の色を選択します。 ![](https://2271939490-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FT9kr2rEW4UEj3nmGvBuq%2Fuploads%2Fgit-blob-7905ac5668dbf97baeb08aa8c9274ed19ee45ba1%2FAD_4nXfW-xDZOc9nCLOhXkeSESzxXG_oITvQAm3t4ESHg3Oxl3YpVvhKQ49TUSJIQska7Bq-siFJVJUjk3BIbiZVR9LRRPzutLJqVidYqxkW_XMCI3BKiynBqaGDtvPMCYWDdRjgPyB5AEVk9XshKWoYFgkeyJjhzipVRXQv61N8yZYYT7w.png?alt=media) * **間隔**で、見出しと下にある段落の間にスペースを作成するために、上マージンを0px、下マージンを20pxに設定します。 ![](https://2271939490-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FT9kr2rEW4UEj3nmGvBuq%2Fuploads%2Fgit-blob-76d1e8763f45f617fcf6253e2b64a0e9c446aa26%2FAD_4nXcOZLEVaTCXVDWHZs1KOjGkqrLHwCmWs51TM2jbbM9GH4LieL8kWMq2GShtHqhUNqUnGGvYGEAL2EWtUMwDss9iRxcmIRCo2kpmKYQ9gJH-190byFrNOJ3lJ-jW81lrvdB7hwkmBcKxo17OWygpMgkeyJjhzipVRXQv61N8yZYYT7w.png?alt=media) * **タイポグラフィ**パラメーターまでスクロール > **フォントファミリー**を選択します。 * **テキスト配置オプション**で、中央揃えを選択します。 ![](https://2271939490-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FT9kr2rEW4UEj3nmGvBuq%2Fuploads%2Fgit-blob-0597a3b66e2b1713afa822298033d7763e9ef107%2FAD_4nXeeQYPbXfWuy8xoufmgV1b-HFMOm_7R1gz789maPtezwNXC1OMPNyiKzUaqP2cLXp-XMTNlmV3NbzrFAoHJKpzcyWgW0SdLPPDtka1YVky8cxSJydu7hixFaNBjc90vkcaxSIyeIktDxZxRlZE0BgkeyJjhzipVRXQv61N8yZYYT7w.png?alt=media) 見出しを整列するには、**スタイルタブ** > 「**アイテムを整列**」パラメーターを見つけて > 中央揃えアイコンを選択します。 ![](https://2271939490-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FT9kr2rEW4UEj3nmGvBuq%2Fuploads%2Fgit-blob-0b0da8de0c6e47c604407b7677a5fc17fbb2bc98%2FAD_4nXfaRCNG4q4rYa21Nq2NI-sYJcAVOOS0U-iZyBEaEU-QZSe8yq6qQHqzQKdN9_HOb_fvmY5dWoX1DPS5MPgai0nGWILqfyNC03pzQvM9eoAJSrJdOKOxwivGsmbFGvRkDmNTOwGt-_SIOd6Ea-zUFAkeyJjhzipVRXQv61N8yZYYT7w.png?alt=media) 次に、**タイポグラフィ**パラメーターまでスクロール > フォントファミリーを選択します。 ![](https://2271939490-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FT9kr2rEW4UEj3nmGvBuq%2Fuploads%2Fgit-blob-367a124b3fcc39d4e1e2585561e468129ab55044%2FAD_4nXfBsEfL-eX-bVO9NR5MUBtKC1zH5b1VdBFBD075rIql41PxPexs9_2S_vBLYMUOBDn5tQ3YwbjkkTMUXDEjr7OZPFvTtVnCzoKhrYHUb85hYYHnVO4bPLWB6LRqopoJVgEzyxAZZKGpvD1Q6pF1keyJjhzipVRXQv61N8yZYYT7w.png?alt=media) * その他の設定をクリックします。 例として、フォントファミリーは「**Lato**」を選択し、フォントサイズは60pxに設定しました。フォントウェイトは太字、行の高さは64pxに設定します。 ![](https://2271939490-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FT9kr2rEW4UEj3nmGvBuq%2Fuploads%2Fgit-blob-0f0d97b5844b72b465c0bbf463c049156429a6b9%2FAD_4nXc60qzYkogPB4cV8cdWEZfn-fym1llSMzlph118DGZqUw-JGf-ExPrxhK2RRzQfZrUV493MwjlDVLiAAEysVep4n3QIjgFCvvjVuSKnxp0h_uhbrF8ToVTPaRvwF-CcQOm-cUij3XHFXLVtzevGJgkeyJjhzipVRXQv61N8yZYYT7w.png?alt=media) **2.2 段落を追加する** **2.2.1. 段落を選択する** 1. **要素を追加アイコン**をクリック > **段落要素**を選択 > 最初のバリアントをページエディタにドラッグアンドドロップします。 ![](https://2271939490-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FT9kr2rEW4UEj3nmGvBuq%2Fuploads%2Fgit-blob-701faf5387e8024cbe3c371b7db5a0d0069ff0c6%2FAD_4nXd63zCBjyPRdHTnWzVIkYM7mFOZVbREy4NCEapbxD2QNPP4Axn67nMKiHqqtPndo54VeucUGuUADdWytZOsbDd0KYEvg8m7mj_rAQ83BV1OEnYxoWj3VYsXJqsTGd6MmsiZQ6T_pHDfHEz10d-sGAkeyJjhzipVRXQv61N8yZYYT7w.png?alt=media) 2. **一般**タブで、推定リリース時間や遅延の理由について詳細を追加します。 ![](https://2271939490-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FT9kr2rEW4UEj3nmGvBuq%2Fuploads%2Fgit-blob-459abc48ad38cd754b708242dd49eac501b4d289%2FAD_4nXdEj9MxN_g_McXymVop4MhugC3ijJOu4IrvFh47yKvTDmIPWiIBKRZzYDnXGyg8blU_1zFsbcRwaAE3bD8LkAoLVrz7TIzLOP3TtXFxWDz6JHAoR92lZuUNYYkT4j-6uFV5a3alN4UEq_qQ0DeCFAkeyJjhzipVRXQv61N8yZYYT7w.png?alt=media) **2.2.2. 段落をスタイリングする** 「**スタイル**」タブに移動します。 **コンテンツカラー**で、段落コンテンツに希望の色を選択します。 ![](https://2271939490-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FT9kr2rEW4UEj3nmGvBuq%2Fuploads%2Fgit-blob-1f974566273f2138960e470bb31305566587d30c%2FAD_4nXe_94ACRiz1DQQVCsDV_Z4CJEw-1oasjoKSB7qZWulFVnMt8P_w11Gam88XcCm911TNyAueVVO4SBI0aR5keBW_FzgusLVIA20laJgPoPLHoTDfEO0hDkdoFpM-Zb9Wqsly4AZOT5Wy5i_D7odHIAkeyJjhzipVRXQv61N8yZYYT7w.png?alt=media) * **間隔**で、見出しと下にある段落の間にスペースを作成するために、上マージンを0px、下マージンを40pxに設定します。 ![](https://2271939490-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FT9kr2rEW4UEj3nmGvBuq%2Fuploads%2Fgit-blob-2c21e365e2572ccb0a7f6595dc083d94a703ed18%2FAD_4nXfto2Qw5dWuKsP1a6iMZyLmZKkSuVYWWT2ANlsj5AiwJEARvfbdh27gS_Cei3lK8EUI62_liNBu9firXeBbfiohfk9M57FYEjjwxW6-DP3XudDoLe41CjkmR0aZ_leKO2_gJvnhjPjUztcEwfh-rwkeyJjhzipVRXQv61N8yZYYT7w.png?alt=media) * **タイポグラフィ**パラメーターまでスクロール > フォントファミリーを選択します。 * **テキスト配置オプション**で、中央揃えを選択します。 ![](https://2271939490-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FT9kr2rEW4UEj3nmGvBuq%2Fuploads%2Fgit-blob-5985c9662770554777640f18afa1ae1bf039d803%2FAD_4nXe-YqTjIxsuTYXt6D-RJHHxts7be7P96FwaxjggQQkmKfYjEZaYZM3zMTGEwr6D357_9b0cPA4jNuimsuBueten4ulV81IrIF9lmCMsHdKNj1uuxxEeGtEL9ub1ew-owND10INdcP-iXsqMFV6vJgkeyJjhzipVRXQv61N8yZYYT7w.png?alt=media) * その他の設定をクリックします。 例として、フォントファミリーは「**Shopifysans**」を選択し、**フォントサイズ**は16pxに設定しました。**フォントウェイト**は標準、行の高さは24pxに設定します。 ![](https://2271939490-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FT9kr2rEW4UEj3nmGvBuq%2Fuploads%2Fgit-blob-44026640bba168334da9b8117da53a2e72cb36a0%2FAD_4nXdjYqlDm1zkQ4RGRv61DHSUs96oiimHIVQmnMwD8P21bGehumTJHlak93KVgy_pCtU82LZzxuWLJVSNlcOXmE1XxPRfjcUZzP_Zg26HckfsO-k_bhYUEqro6WqmCmihpPS-BeuCPsEYL7eoDUMMkeyJjhzipVRXQv61N8yZYYT7w.png?alt=media) #### 3. 顧客フォームを作成する 公開予定ページに顧客フォームを設置することは、貴重なリードを獲得し、期待感を高め、ターゲットマーケティングに必要な顧客データを提供するのに役立ちます。詳細については、こちらの[記事](https://help.pagefly.io/manual/shopify-elements-customer-form/)をご参照ください。 **3.1. フォームを選択する** エディタの左サイドバーで、**Shopifyセクション**をクリック > **顧客フォーム**要素を選択 > 最初のバリアントをページエディタにドラッグ＆ドロップします。 ![](https://2271939490-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FT9kr2rEW4UEj3nmGvBuq%2Fuploads%2Fgit-blob-ef477fb274ebbe710349e360e6dce993ba2494bd%2FAD_4nXdQnP2i4QcRxEdQTvS6jwLvuCv0SSEPc7N5Qc_EPa1hTe_tdQoqe1rocnlHhCHYMAm_tpmL1K4gj7QjiV9S18UdS9eRZKffOxGk6MHRtZWZbMCO6qY9zVk4CcBURN_zp1XZ7f8GZ7DXA3akPZ9QdAkeyJjhzipVRXQv61N8yZYYT7w.png?alt=media) **3.2. フォームをスタイリングする** **スタイル**に移動 > 左パディングと右パディングを調整します。例として、左パディングと右パディングの両方に250pxを設定しました。 ![](https://2271939490-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FT9kr2rEW4UEj3nmGvBuq%2Fuploads%2Fgit-blob-2aa904ab7506832571b3d34ba21b1687746cbb70%2FAD_4nXeUYyF3mOUaW7F6K_7V7OUMs7whEPuSXO-9mLwh_V703ZOrECQzNPCQYTI8ZJYGD_1viEjnjLLseBTQ_U_S9t12JglU-w95HWhluvi292WigseH0E6gdFT2Wy3BPbldVujaNoZzLnpTb0mM4_Y8keyJjhzipVRXQv61N8yZYYT7w.png?alt=media) **3.3. カスタムフォームフィールドを調整する** **カスタムフォームフィールド**をクリック > **一般**タブで、フィールド内のテキストを調整します。 ![](https://2271939490-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FT9kr2rEW4UEj3nmGvBuq%2Fuploads%2Fgit-blob-c8fd91d5d0eb2497a13ba1b1daa4d5a305aa6bf2%2FAD_4nXc3Y8NcFyxheCbtaw_7IdLe4RCO1WKfvcRxaSBilmH1KBPoJG120Zo6E-mTxfikJWegA3x_QSk0T3VOOlIKU-dnP3JpVkB4vISlzEmm9k9aVRIH5N8ZcfGCk6lnwbmeGQTUJ3mVTcf4Qiq2An3waQkeyJjhzipVRXQv61N8yZYYT7w.png?alt=media) **3.4. カスタムフォームボタン** **カスタムフォームボタン**をクリックします。 * **一般タブ**では、テキストのみ、アイコン付きテキスト、アイコンのみの3つのボタンタイプから選択できます。 ![](https://2271939490-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FT9kr2rEW4UEj3nmGvBuq%2Fuploads%2Fgit-blob-ca2422630964bc1dc649f578cfaabaebcbc480d0%2FAD_4nXconbkNwF-uZDvK9ysDwnVvr_Xvn39CJNAPz9kBqFC7kMlpf9bEgXJi2o9rmBNy6yFcUaQesPr9POQs4hqTuVotWpdeIIx5cUZSMGrSjjRwAlrljXmkyIPopd5Zl0bUDA2wqsmMfVe5JSSqKFJUWgkeyJjhzipVRXQv61N8yZYYT7w.png?alt=media) * ボタンにテキストを追加します。 ![](https://2271939490-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FT9kr2rEW4UEj3nmGvBuq%2Fuploads%2Fgit-blob-bcd48b9a5981979c6c57b2655d5d7c0572633883%2FAD_4nXdsvAlId4D6Y8d7__kE90O1uwpPR5bsBN6MA-8wSR-7hGHtK1-2unBWDVNa5uZqlgeIJ_xhqdy9oLkkGxuRpNuoMj3XUJKGP0OWHns6NZEdUJROP23relu_e_6ZI0ePVGBaYIW-n00ErCbynVmsEgkeyJjhzipVRXQv61N8yZYYT7w.png?alt=media) * **全幅を有効にする**: ボタンの全幅を有効にしたい場合は「はい」をクリックします。そうでない場合は「いいえ」を選択します。 ![](https://2271939490-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FT9kr2rEW4UEj3nmGvBuq%2Fuploads%2Fgit-blob-78f02ee09e7ebe4c723b6ff22316075b4ccf0598%2FAD_4nXdrW_y7hWT8Zw25zRr3p1lo0BJLcWx0a3Hu83HChjCxm4S04p_puSMSpHiF8vE-3QSrGQLyehqldHLbBipZ74Dt9aH2r7TmPE5kVXdEE98I5dM4ZRB4uVpLLVLsYPyOmec5b-RWMmYVvKJ3mURMtgkeyJjhzipVRXQv61N8yZYYT7w.gif?alt=media) **顧客フォームボタン**の表示をカスタマイズするには、**スタイル**タブに切り替えます。利用可能なスタイルオプションには以下が含まれます。 * **コンテンツカラー**: グローバルスタイルで設定された色に基づいてテキストの色をカスタマイズするか、独自に設定します。 * **タイポグラフィ**: フォント、フォントサイズ、テキスト要素などをカスタマイズします。 * **ボーダー**: ボタンのボーダーを調整します。 * **通常状態**: ボタンをより魅力的に見せるために、ホバー/アクティブ状態を追加します。 ![](https://2271939490-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FT9kr2rEW4UEj3nmGvBuq%2Fuploads%2Fgit-blob-e540f85ad8c97f57ac40d33d7c37de2ecf4ccfa7%2FAD_4nXfXpqsScHvKIaMAzPN55smiVuxTympq8ST9hl2tZrXYO0FBBoqFpXwSOEVCORXsHJG6iiCM_oE1zAFLBcqnBtL2pGZtuCF8-eb9k7Jol1kzZXJUeC-mj8N0WZ32xUoyiXmghUnAc45prvK2pqxMkQkeyJjhzipVRXQv61N8yZYYT7w.png?alt=media) [顧客フォームボタン](https://help.pagefly.io/manual/shopify-elements-customer-form-button/)のスタイリングについての詳細は、こちらで確認できます。 #### 4. 保存して公開する ページの編集が完了したら、ページ全体をもう一度確認します。 公開したくない場合は、「**保存**」ボタンをクリックします。 ![](https://github.com/sellersmith/pagefly-help-center/blob/master/ja/images/AD_4nXXcAXOAEAQkXlb22-ELWIbYS3EAggb0AnxOTKbfxj1ou3ixlCHnPFt7vNkE_FlHTrJDH8j7YAQduL0-IKmWQ6KK7VyufQpchL2pZ0MK2cuvRAq2WAGjqlKn8V36_24WMxAOkOXwVdSdwdsZIXNVkeyJjhzipVRXQv61N8yZYYT7w.png) 「**プレビュー**」をクリックして、**プレビュー**モードで表示を確認します。 ![](https://2271939490-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FT9kr2rEW4UEj3nmGvBuq%2Fuploads%2Fgit-blob-d2459696320a035ef9201fe0b569c01f3d318517%2FAD_4nXccHNWA76uxwRaz0_-jxtID9YiNXMJ72bC5REYdH-k-aFl-9ldYa06jLJeo5_nvBxDE8dtOpS1uMNu07H03XJH6tvkqSsJ30hZwhBCoKSPzbvMax4LvrbUtSxTZpU6Ad__IsHnyVOoU0I7Gab9YkeyJjhzipVRXQv61N8yZYYT7w.png?alt=media) プレビューは以下のようになります。 ![](https://2271939490-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FT9kr2rEW4UEj3nmGvBuq%2Fuploads%2Fgit-blob-83916f594d024ba2fda2bdcc919096411273b017%2FAD_4nXdHz1XYLUt4LGlTR6fb0M_tsz7pPDqJuwfd_GnhI7tPfSqOA5DllPmK-xES9pjy30icQZp8GB-wWdb1juubUIEfJwHQACP0P-KQx4iXVBjDzOWV70bYDjCeBOpvC-8Qx2jafxbCXkTqxeyeSO6lEwkeyJjhzipVRXQv61N8yZYYT7w.png?alt=media) ページの作成が完了したら、「**公開**」ボタンをクリックして、ライブ表示でページを確認します。 ![](https://2271939490-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FT9kr2rEW4UEj3nmGvBuq%2Fuploads%2Fgit-blob-e97b0cd10fbda8f9fd3aee1e6c2ed4b970fcfa1d%2FAD_4nXfaHpDgTSdXLRpdmA0uRaiErvgwOc_ZyKlnCCpJJYNwFNKEIaeFQLKXP09BvPt-2FlzcXN-wn4xol-haxg7_LWo3b9xhCBWB5X0HZ_7PAIQM2IAZtw-RFQLAXZD_IqKVmLcCfLS5UPyeseXHs1swkeyJjhzipVRXQv61N8yZYYT7w.png?alt=media) ### ヒントとベストプラクティス * 高品質のビジュアルと明確な見出しを使用して、訪問者の興味を引きつけます。 * 強力なコールトゥアクションで訪問者に登録を促します。 * すべてのデバイスでデザインが美しく表示され、完璧に機能することを確認します。 * カウントダウンタイマーと、まもなく公開される内容に関する魅力的なテキストを含めます。 ### よくある質問 **1. 公開予定ページとは何ですか？** 公開予定ページは、販売者が何かをリリースする準備をしていることを顧客に知らせるヒントです。例えば、新製品や新ブランドの立ち上げなどです。 **2. 公開予定ページには何を含めるべきですか？** ロゴ、簡潔な文章、美しい画像、そしてお問い合わせフォームです。 **3. 公開予定メッセージの素晴らしい例は？** 「新製品がまもなく登場します。現在、完全版を鋭意制作中ですので、しばらくお待ちください。」または「乞うご期待ください。まもなく公開されます。素晴らしいものが登場します。最初にお知らせを受け取りましょう。」