# PageFlyでパスワードページを作成する方法

### 概要

要約：事業の準備が整うまで、パスワードページを近日公開予定のページとして使用し、新しい商品、コレクション、または今後のセールについて顧客に知らせることができます。

このガイドでは、[PageFlyを使用してパスワードページを作成する方法](https://help.pagefly.io/manual/create-password-page/)を説明します。視覚的なガイドについては、こちらのビデオチュートリアルをご覧ください。

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

### 要件

新しいパスワードページを作成する前に、Shopifyのパスワードを有効にする必要があります。手順は以下の通りです。

1. Shopify管理画面 > 販売チャネル > オンラインストア > 設定 に移動します。
2. パスワード保護 セクションまでスクロールし、ストアのパスワードを有効にします。
3. 保存 をクリックして変更を適用します。

![](https://github.com/sellersmith/pagefly-help-center/blob/master/ja/images/AD_4nXc2nKk4GS2VxRYZaryXf3hU-8aBFzNGOsfwdW0IQwRjhpvS0EYAJwUIWoJPvBZ-edaLEzy1k25EJWReB3K60pe-7N8IpH6PUHOkeCUHVEo-GNJxeSXDraeTpQlKF33DFs9kLrjHRHTAm257ViZUsAkeyet9cyCLD2hDVO6jvOe6P6A.png)

### Gen 2エディター - PageFlyでパスワードページを作成する方法

{% hint style="warning" %}
**重要な注意**: Gen 2 レイアウトは、ペイ・アズ・ユー・ゴー料金モデル ([スロットプラン](https://help.pagefly.io/manual/pricing-plans/)) 専用で利用可能になります。
{% endhint %}

#### ステップ1：パスワードページを作成する

PageFlyダッシュボードから、ページ に移動します。

テンプレートから作成 をクリックし、ドロップダウンメニューで パスワード を選択します。

ページテンプレートライブラリで目的のテンプレートを選択し、選択 ボタンをクリックします。

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

#### ステップ2：パスワードページをカスタマイズする

パスワードページのテンプレートを選択したら、次にカスタマイズを行います。以下の主要な要素の調整に焦点を当ててください。

| <p><strong>お知らせの見出しを変更する</strong></p><p>1. メインのお知らせテキストを選択するためにクリックします。</p><p>2. 全般タブの下で、見出しテキストボックスのテキストを更新します。</p><p>3. スタイルタブに切り替えて、間隔 (パディング、マージンを含む) および タイポグラフィ (フォントファミリー、フォントサイズ、テキストアライメント、テキスト方向を含む) パラメーターを調整します。</p> | ![](https://2271939490-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FT9kr2rEW4UEj3nmGvBuq%2Fuploads%2Fgit-blob-8d46a2fd2d8ebcff4004336b9ca91c15bc7c741f%2FAD_4nXdu95JttIohhHTO10XbE64pPKlvkW6GvtSl6V1n-NyqGdCj8OabsXXGfur60ZCR1IA7pHmhTIdi3M6Ce1bXT6GzFt1mWnYJRSqpaLOnphAnZr9axv6TQkrjQ4uL9y2UksTXIsW1BT571gO9lzpQ-Qkeyet9cyCLD2hDVO6jvOe6P6A.gif?alt=media) |
| -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| <p><strong>お知らせのコンテンツを変更する</strong></p><p>1. 見出しの下の段落テキストを選択します。</p><p>2. 全般タブで、段落ボックスのテキストを変更します。</p><p>3. 追加のスタイリングについては、スタイルタブに切り替えて、見出しのカスタマイズと同様に、間隔やタイポグラフィなどのパラメーターを変更します。</p>                                            | ![](https://2271939490-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FT9kr2rEW4UEj3nmGvBuq%2Fuploads%2Fgit-blob-a4f614f5f00dc3c9665364cef93d525c049971e0%2FAD_4nXcKYk2KfvSh4HvAEpc4Bki6Be9OOynI6kXOSW6EtJ0e2CO1c4paEnBcrk-hedhhsZfxek8Hdi323iUH16n2IPvVE-p5_6xrk5THrBcDcyffhPEar_VRKZh2E0jkmPvywjTv8OGIzLiYW40ip34Eogkeyet9cyCLD2hDVO6jvOe6P6A.gif?alt=media) |
| <p><strong>背景セクションを変更する</strong></p><p>1. 背景セクションをクリックします。</p><p>2. スタイルタブで、背景パラメーターを見つけ、背景画像オプションで背景を更新します。</p><p>3. 詳細設定 ボタンを使用して、背景の位置と背景サイズを調整します。この例では、位置は中央、サイズはカバーを選択しています。</p>                                           | ![](https://2271939490-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FT9kr2rEW4UEj3nmGvBuq%2Fuploads%2Fgit-blob-bce932f3d1a36383cb5fe50e80053851e215ebc2%2FAD_4nXfI_LxoSDrnOxASCDwryrGNjAed4wbv1nyaDnEvOo2AQ2FO1FeeDCexltBdMN-YHhCc_ZRjH7v387InYrF8qv7IxRmniCLNCW_w0YGGNHcufLeCzYk_YxFGWHjwE5_hDbSlu7Y-_QTVGNF7ZEWk?alt=media)                                |
| <p><strong>カウントダウンタイマーを変更する</strong></p><p>1. カウントダウンタイマー要素を選択します。</p><p>2. 全般タブで、希望する開始時間と終了時間を設定します。</p><p>3. 詳細設定 の下で、フル幅に設定 を切り替えて、ページ全体にカウントダウンタイマーを拡張します。</p>                                                              | ![](https://2271939490-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FT9kr2rEW4UEj3nmGvBuq%2Fuploads%2Fgit-blob-3351f88a9d19c18a7591c1d0a41206d6e975d8a0%2FAD_4nXfhEecoSUIlnxnXpjCs3W07fYSbI15OkNwrniuMFxlRoNZ9GtS_uW4tLHTwDZLpED_tG0VmFWT6GtuaaswYn07LNV5aOyla8NeUMZ0aaqs_iFaCaBTUIUj5TEe09U186P_GasgoPs2e7V8xsnZPpQkeyet9cyCLD2hDVO6jvOe6P6A.gif?alt=media) |

#### ステップ3：設定を保存してページを公開する

1. 画面右上の設定アイコンをクリックして、[ページ設定](https://help.pagefly.io/manual/page-settings/)を開きます。
2. ページタイトル および ページタイプ フィールドでページ名を更新できます。
3. 保存 をクリックして変更を適用します。
4. 公開 を押してページをライブにし、ライブビューで ページを表示 を選択して確認します。

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

### レガシーエディター - PageFlyでパスワードページを作成する方法

#### ステップ1：パスワードページを作成する

1. PageFlyダッシュボードから、ページ に移動します。
2. テンプレートから作成 をクリックし、ドロップダウンメニューで パスワード を選択します。
3. ページテンプレートライブラリで目的のテンプレートを選択し、選択 ボタンをクリックします。

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

#### ステップ2：パスワードページをカスタマイズする

パスワードページのテンプレートを選択したら、次にカスタマイズを行います。以下の主要な要素の調整に焦点を当ててください。

| <p><strong>お知らせの見出しを変更する</strong></p><p>1. メインのお知らせテキストを選択するためにクリックします。</p><p>2. 全般タブの下で、見出しテキストボックスのテキストを更新します。</p><p>3. スタイルタブに切り替えて、間隔 (パディング、マージンを含む) および タイポグラフィ (フォントファミリー、フォントサイズ、テキストアライメント、テキスト方向を含む) パラメーターを調整します。</p> | ![](https://2271939490-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FT9kr2rEW4UEj3nmGvBuq%2Fuploads%2Fgit-blob-26c506991264280a028c7dacd8b54ce180baf85b%2FAD_4nXfcrxBeS0XpMznMSyvDFN5K51PI7wUQI_Gw08yv6CVzudyGROK3UTOvx_gOh7Tfhycw26oFHQ08xT1vCF6kB_cRkJOgPmIjDeD-hDxnXKIuoRS3C7M5ovcdpD_hyUL7poZ991H6LU9aPCs979MEAAkeyet9cyCLD2hDVO6jvOe6P6A.gif?alt=media) |
| -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| <p><strong>お知らせのコンテンツを変更する</strong></p><p>1. 見出しの下の段落テキストを選択します。</p><p>2. 全般タブで、段落ボックスのテキストを変更します。</p><p>3. 追加のスタイリングについては、スタイルタブに切り替えて、見出しのカスタマイズと同様に、間隔やタイポグラフィなどのパラメーターを変更します。</p>                                            | ![](https://2271939490-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FT9kr2rEW4UEj3nmGvBuq%2Fuploads%2Fgit-blob-fd5118bfd0c8fa13021fe822ef13a332bb66304b%2FAD_4nXcz6FyF-nrxKNKFKWSax_WNhAurpZRcPnfKOo3a-7RiueUDV17ni-zQmT1Om4OvppeaIMkW_B7Z0oSrGt-GoBHWnQBFe-ZzYZ80rprHJa6Z5cKwD-EbxYQKZqo2nCOtNtaBFgonvSZVRarEFr4Ekeyet9cyCLD2hDVO6jvOe6P6A.gif?alt=media)   |
| <p><strong>背景セクションを変更する</strong></p><p>1. 背景セクションをクリックします。</p><p>2. スタイルタブで、背景パラメーターを見つけ、背景画像オプションで背景を更新します。</p><p>3. 詳細設定 ボタンを使用して、背景の位置と背景サイズを調整します。この例では、位置は中央、サイズはカバーを選択しています。</p>                                           | ![](https://2271939490-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FT9kr2rEW4UEj3nmGvBuq%2Fuploads%2Fgit-blob-4fccae1822d463ee19ee2f132a7d06bface4c6f1%2FAD_4nXcrfbrONbNk5cw9BfWR2YAD6-rZ81oWp8groM49d2sSPBjZFscbjSQpiEQMXciRDFYBU2qiJaRRRTvW_WcsSWaEKd6oxhBZTFr4KXVCSO-AOJE4-EyWwD2FO6Ly84CA92Z71UmUgC5SEYw0ehekCQkeyet9cyCLD2hDVO6jvOe6P6A.gif?alt=media) |
| <p><strong>カウントダウンタイマーを変更する</strong></p><p>1. カウントダウンタイマー要素を選択します。</p><p>2. 全般タブで、希望する開始時間と終了時間を設定します。</p><p>3. 詳細設定 の下で、フル幅に設定 を切り替えて、ページ全体にカウントダウンタイマーを拡張します。</p>                                                              | ![](https://2271939490-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FT9kr2rEW4UEj3nmGvBuq%2Fuploads%2Fgit-blob-5b0bdb5f625d8690aa23dfaedf745c38b730b705%2FAD_4nXcZN2crc9ipHVSCskBkfknZoUj-u5AJcaxUxMUduZ_Hm7g3hLywajzsHpM28Ozsocr3Y8R6QUV-qgBPWdTED1LYHS0skJU1omXqcdToDddW2qWuFWPBOODqbVkmeoSDeEsAf2BWYJf4-BsgrAt5Uwkeyet9cyCLD2hDVO6jvOe6P6A.gif?alt=media) |

#### ステップ3：設定を保存してページを公開する

1. 画面右上の三点アイコンをクリックして、[ページ設定](https://help.pagefly.io/manual/page-settings/)を開きます。
2. ページタイトル フィールドでページ名を更新できます。
3. ストアフロントパスワード オプションが "**Allow visitors to view page content by entering password.**" に設定されていることを確認します。
4. 保存 をクリックして変更を適用します。
5. 公開 を押してページをライブにし、ライブビューで ページを表示 を選択して確認します。

![](https://2271939490-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FT9kr2rEW4UEj3nmGvBuq%2Fuploads%2Fgit-blob-a039abeed5124dcc1b42a75f44e7fd0071dfbc09%2FAD_4nXfuJvC0958CUq-nGTdCbhQEhRiWativlpA3ejBc3w3-cZbKpi6_j5JDkDJ3MPUZ2HuwPJDZux3Y7SWPTXjd1Ai8_cBz6jKeN9ZKruERbGrE8CfE56MRRJoKaEC5UK-qWS3fVjYIdvBJ9mqnse3AaQkeyet9cyCLD2hDVO6jvOe6P6A.gif?alt=media)

### ユースケース

* プレローンチプロモーション: 新しいウェブサイト、商品、またはサービスのローンチを準備しているビジネスに最適です。パスワードページを使用して期待感を高め、関心のある顧客からメールアドレスを収集します。
* 限定アクセス: 会員、VIP、ニュースレター購読者などの特定の顧客グループに限定コンテンツや早期アクセスを提供するために、特定のページをパスワードで保護します。
* イベント準備: ウェビナーやセールなどのオンラインイベントのセットアップ段階で使用し、正式に開始されるまでイベントを限定的に保ちます。

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

* インパクトのあるデザイン: ブランドを引き立てるシンプルで対比的な背景を使用します。コールトゥアクション(CTA)ボタンなどの要素を明確かつアクセスしやすいように配置します。
* モバイル最適化: パスワードページがレスポンシブであることを確認します。様々なデバイス、特にモバイルでの表示と機能性を確認し、すべての要素が正しく表示されるようにします。
* プレセールエンゲージメント: パスワードページにプレセール戦略を導入してコミュニティを構築し、早期の顧客フィードバックを収集し、信頼性と顧客満足度を高めます。
* 再訪問を奨励する: プレセール顧客に限定割引や特別オファーを提供して、ローンチ時にストアを再訪するよう奨励します。

### よくある質問

**1. PageFlyアプリでパスワードページを公開できないのはなぜですか？**

Shopifyの設定でストアフロントパスワードを有効にしており、PageFlyでのすべての変更が正しく保存されていることを確認してください。問題が解決しない場合は、エラーメッセージを再確認するか、PageFlyサポートに連絡してさらなる支援を受けてください。

**2. パスワードページが重要なのはなぜですか？**

パスワードページは注目を集め、メールアドレスを収集し、ビジネスを開始する前にフィードバックを得るのに役立ちます。

**3. パスワードページでフッターとヘッダーを非表示にできますか？**

残念ながらできません。他のページではフッターとヘッダーを非表示にできますが、パスワードページではできません。こちらのガイドを確認してください：[ヘッダーとフッターを非表示にする](https://help.pagefly.io/manual/hide-header-and-footer-on-your-pages/)

### その他のリソース

* [PageFlyで近日公開予定のページを作成する方法は？](https://help.pagefly.io/manual/how-to-create-a-coming-soon-page-with-pagefly/)
* [PageFlyで会社概要ページを作成する方法](https://help.pagefly.io/manual/how-to-create-an-about-us-with-pagefly/)
