# PageFlyテンプレートから新しいページを作成する方法 ### 概要 ホームページ、ランディングページ、商品ページ、ブログページなど、様々な種類の[110以上のテンプレート](https://pagefly.io/pages/templates?utm_campaign%3Dwebsite%26utm_source%3Dmanual%26utm_medium%3Darticle)から、ニーズに合わせて簡単にカスタマイズできる[PageFlyテンプレートから新しいページを作成する方法](https://help.pagefly.io/manual/use-a-template-to-create-a-new-page/)を学びましょう。 この記事を読むことで、PageFlyの事前設計されたテンプレートについて学ぶことができます。[こちらからPageFlyを無料でインストール](https://apps.shopify.com/pagefly?utm_campaign%3Dapp-listing%26utm_source%3Dmanual%26utm_medium%3Darticle%26utm_content%3Dtemplate)して、任意のテンプレートを使用してください。 以下のビデオチュートリアルで詳細を確認できます。 {% embed url="" %} ### サポートされている6つのページタイプ #### 通常ページ (Regular page) ストアやキャンペーンのための独立したページ、ランディングページ、またはサブページです。通常のページを使用して、会社概要、よくある質問、お問い合わせ、またはランディングページを作成できます。 #### ホームページ (Homepage) 訪問者がストアにアクセスした際に最初に見る、真新しい効率的なホームページです。 #### コレクションページ (Collection page) Shopifyコンテンツの下にある既存のコレクションページにコンテンツを追加する埋め込みページです。 #### 商品ページ (Product page) Shopifyコンテンツの下にある既存の商品ページにコンテンツを追加する埋め込みページです。 #### パスワードページ (Password page) フロントエンドパスワードが有効になっている際に、訪問者に通知したり楽しませたりするためのカスタマイズされたページです。 #### ブログ投稿 (Blog post) ブランドや商品について語るブログ投稿です。 [PageFlyテンプレートライブラリ](https://pagefly.io/pages/templates?utm_campaign%3Dwebsite%26utm_source%3Dmanual%26utm_medium%3Darticle)では、選択できるようにすべてのページタイプを提供しています。 ### PageFlyテンプレートへのアクセス方法 PageFlyテンプレートには、**ページ一覧から**と**エディターページから**の2つのアクセス方法があります。 #### ページ一覧からアクセス * **ステップ 1**: ページ一覧で「テンプレートから作成」ボタンをクリックし、作成したいページタイプを選択します。 * **ステップ 2**: テンプレートを選択します。 * **ステップ 3**: 「**選択**」ボタンをクリックします。 選択したテンプレートが適用された新しいページが作成されます。 ![](https://github.com/sellersmith/pagefly-help-center/blob/master/ja/images/AD_4nXdltN6pUXRmk5-OATJYJ3ZE7GK9Tgu7gz1-lomRdwpnUIbXk0ZlnnHXANL38t8vGPOpngaOvxr2kEYb-DBrNIXY3F6rUomOp3yI-9xHwQ3GyIZW3aSUvaxfpb0i7zsItvWuMFdQ2yOnICDTfKiLWgkeynOlxDeElImtYXNCWHQsoRQ.gif) #### エディターページからアクセス * **ステップ 1**: PageFlyエディターページで、左側ツールメニューの4番目のアイコンをクリックして、ページテンプレートモーダルを開きます。 * **ステップ 2**: テンプレートを選択します。 * **ステップ 3**: 「**選択**」ボタンをクリックします。 * **ステップ 4**: 「**内容を理解しました**」のチェックボックスをクリックします。 * **ステップ 5**: 「**テンプレートを選択**」ボタンをクリックします。 選択したテンプレートが現在のエディターページに適用され、カスタマイズが可能になります。 ![](https://2271939490-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FT9kr2rEW4UEj3nmGvBuq%2Fuploads%2Fgit-blob-b813b534cd269bf70c348eabf9d025e6c2e4ecd7%2FAD_4nXfGUtUV9QU3WX0EWHuBTHOMOojt-hL-hKc8Opn13H-b0-OiaeIFm2RUS-snbYqAybBdMmYjWNo8pcnjF8CESZaIjjZYENQp2YxOm6DX078tnuPO00tHyM7UUn71MZ5k-7NsemsSEY_yACUtzkGGLQkeynOlxDeElImtYXNCWHQsoRQ.gif?alt=media) ### PageFlyテンプレートモーダルでテンプレートを検索 ![](https://2271939490-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FT9kr2rEW4UEj3nmGvBuq%2Fuploads%2Fgit-blob-f3cd00b6c01d7e89472306f149a0cefe86480fef%2FAD_4nXfZpbpXyL1KrL6H48bCg4M3hnOd_rE93ehMxkgncXPsjHO9GSXYKPycVMusloz-OSn7c0cYi2UZyMW2aIu_GGNEpx_ywD2UwdfDzf9DFoFF0R-fOrHueSOEwdtMXkN9Rhitmnyg338O0ws2DFUbkeynOlxDeElImtYXNCWHQsoRQ.jpeg?alt=media) ページテンプレートモーダルでは、8つの機能を使用してテンプレートを検索できます。 1. **テンプレートを検索**: テンプレート名でテンプレートを見つけます。 2. **ページタイプ**: ランディング、ホーム、コレクション、商品、アバウト、コンタクト、パスワード、FAQ&ポリシーページなど、ページタイプでテンプレートを見つけます。 3. **業種**: 10以上の異なる業種でテンプレートを見つけます。 4. **スタイル**: 7つの異なるスタイルでテンプレートを見つけます。 5. **機能**: 20以上の機能でテンプレートを見つけます。 6. **コレクション**: ホリデーテーマまたはアプリ統合を含む2つのコレクションでテンプレートを見つけます。 7. **並べ替え**: 更新日または人気度でテンプレートを並べ替えます。 8. **デバイスプレビュー**: テンプレートがデスクトップとモバイルの2つの表示モードでどのように表示されるかを確認します。 ### PageFlyテンプレートのカスタマイズ #### 要素コンテンツの変更 * **ステップ 1**: コンテンツを変更したい要素をクリックします。 * **ステップ 2**: 「一般」タブで、テキストボックスのコンテンツを変更します。 ![](https://2271939490-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FT9kr2rEW4UEj3nmGvBuq%2Fuploads%2Fgit-blob-ac34af863ad2ef07bb72d0e0d4491a9224ca3769%2FAD_4nXdB4U4fGjcU6TYyrlxXzsyZNVl-ZAiGFckD0BKurMDUaoGZx_HfKHiPlRxfdd07fUWcVr7MbyObHbOhpqn4_2kY-LR31-oxaDH3CAtv5DNVLCm1lzzW5FrzlLlrVKP2omFU3QQ81Tntpz4tHvpDgkeynOlxDeElImtYXNCWHQsoRQ.gif?alt=media) 「一般」タブのすべての設定を理解するには、[この記事](https://help.pagefly.io/manual/elements-general-settings/)を参照してください。 #### 要素スタイルの変更 * **ステップ 1**: スタイルを変更したい要素をクリックします。 * **ステップ 2**: 「スタイル」タブで、色、間隔、タイポグラフィ、背景など、希望どおりにスタイルを変更します。 ![](https://2271939490-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FT9kr2rEW4UEj3nmGvBuq%2Fuploads%2Fgit-blob-a373acf554e3114c565940501057a615dbb6768d%2FAD_4nXcPfs2CX6La2-IvLwHx6qwcJZvs4JvOhDUzxSdCSpuDphqSgzpS01KnberrtqXbcq6QoiiKan3Z_hdxwn1pXUh9aELe9k4l2YWkUxnrG25EarXZg8xUit4PD1u3fA8pIRQ5GXtX4ZRYkVemTFRGtwkeynOlxDeElImtYXNCWHQsoRQ.gif?alt=media) 「スタイル」タブのすべての設定を理解するには、[この記事](https://help.pagefly.io/manual/elements-style-settings/)を参照してください。 #### 商品/コレクションの選択 ページに商品を選択するには： * **ステップ 1**: ページ上の商品要素のプレースホルダーをクリックします。 * **ステップ 2**: 「一般」タブで、「カスタム商品」オプションから商品を選択します。 コレクション要素にも同様の操作を適用できます。 ![](https://2271939490-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FT9kr2rEW4UEj3nmGvBuq%2Fuploads%2Fgit-blob-003b7345f5dc0b6e3c73db14a3cb328f48cb6d3c%2FAD_4nXcfl-bSEu5qw-9Rt2ZBWOSk4nouKGCFvyR9hgGESdGBeRHr0IxOs68UrmZdJk7j2J1wfip7JpatDVpDPanG4AOS4TF-5lYpc0UmpA-2oY2I0OfYUvNpcyzbfY5juMTYhYWY4VJNolgkTyxp9k1zeQkeynOlxDeElImtYXNCWHQsoRQ.gif?alt=media) #### 画像と背景画像の変更 **1. 画像要素:** * **ステップ 1**: PageFlyエディターで、変更したい画像要素を選択します。次に、「一般」タブに移動します。 * **ステップ 2**: 「**画像**」パラメーターで、「**変更**」ボタンをクリックして画像マネージャーモーダルを開きます。デザインに合う画像をブラウズして選択します。 ![](https://2271939490-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FT9kr2rEW4UEj3nmGvBuq%2Fuploads%2Fgit-blob-157e463109db96c8356a03ab04c5c8b14996a8e8%2FAD_4nXcxTeQ0pwefbJ3LMdb6eiCYzt8DYiAhXHxNi7_dUvrcrq26GLTB1BvwMfHtqgdmVUceSMoZW9l8rjUoy2nJpVi34eDvvPFoN7dREf47OSfHL3Z-oatS78H6-AsGEjSGaz2wSLFDEvFr6hjQ8SJoAkeynOlxDeElImtYXNCWHQsoRQ.jpeg?alt=media) **2. 背景画像:** * **ステップ 1**: PageFlyエディターで、背景を変更したいコンテナー要素（列、行、セクション、スライドなど）をクリックします。次に、「スタイル」タブに移動します。 * **ステップ 2**: 「背景画像」パラメーターで、「**選択**」ボタンをクリックします。これにより、画像マネージャーモーダルが開き、背景として使用する画像をブラウズして選択できます。 画像を選択すると、そのコンテナー要素の背景として適用されます。 ![](https://2271939490-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FT9kr2rEW4UEj3nmGvBuq%2Fuploads%2Fgit-blob-3ffdcdf7eae86fdd97b451fe66d534438cc9c3ea%2FAD_4nXeaGqea4oCxc6ZCFhwFzegNt_wIQYGJF3U7ryWdwEiTuM5ILMMmTjMAxMLZxTQh5CjkfbBEyAPNg_i6rhPBmWDp2GRPVORKIEXtVq4iCGytr3T91K3WH-1WzsvVW6nwtIIetLaHw152nGlycN9oCAkeynOlxDeElImtYXNCWHQsoRQ.gif?alt=media) #### 保存と公開 ページのカスタマイズが完了したら、ページを公開する前にプレビューできます。「保存」ボタンをクリックし、「プレビュー」をクリックしてプレビューモードを表示します。 ![](https://2271939490-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FT9kr2rEW4UEj3nmGvBuq%2Fuploads%2Fgit-blob-55da80933d32914eede5896480bbc6a356644ed0%2FAD_4nXfrlZliNGgdmavrhk_C2s9uOhRzH6I_l6mo6fi2WPlgyKsmpj4A3c6DL6Hc2JSeZo8fJZMgpvtMDDI88hAuAFACQF8AeZfKFHx3gAPrslv-t_OwJ9p7a1FLOoCjUl_Zv6ZW7ceqz7rUC2rb7ytt6gkeynOlxDeElImtYXNCWHQsoRQ.gif?alt=media) ページを保存した後、ページを公開準備ができていれば、「**公開**」ボタンをクリックしてライブ表示でページを表示できます。 ![](https://2271939490-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FT9kr2rEW4UEj3nmGvBuq%2Fuploads%2Fgit-blob-b567c807dfa7c7882ab90bbedbee97c2bf339769%2FAD_4nXf3XENUfEYZa1nPCPgEPAdT4NwF90K76MvSf0lc8lJqA4qY6jO-nvto4sBzREmP2jyoY_xmF3ZOrzNuLRWZLxjdaUHjaeSeAaMATVygan7qDQag4P6cD1mkk4CGE-SKKsGkZybrK_6nkqQhWEfP4QkeynOlxDeElImtYXNCWHQsoRQ.gif?alt=media) 次に、「**ライブ表示**」ボタンをクリックして、ライブ表示でページを確認します。 ![](https://2271939490-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FT9kr2rEW4UEj3nmGvBuq%2Fuploads%2Fgit-blob-9b0b5b647583f8b859e45610d03cd2efe5ec5f30%2FAD_4nXey3a7kawH4bHviJmv3Co7g9cs35-wz5dcswKIgmWOp4Xw02hp73Qv8zfhUrESFJTAdYLiObPOa5c1efwd4myvHVDzGkaGZBnd1uvCvd_nwrDBiKW9BuDsPtTuVnx7p1YbA7-LpJk4f6JvOi_jGDgkeynOlxDeElImtYXNCWHQsoRQ.jpeg?alt=media) ### 既製セクションを使用したページの作成 テンプレートに加えて、PageFlyは既製セクションも提供しています。これらは元々テンプレートの一部でした。これらのセクションは、新規または既存のページに即座に追加できます。また、既製セクションを保存して、後でテーマエディターで使用し、ページ間で一貫したデザインを維持することもできます。既製セクションの使用方法や独自の保存済みセクションの効果的な作成方法については、[保存済みセクション](https://help.pagefly.io/manual/saved-section/)の記事を参照してください。 既製セクションを追加するには： * **ステップ 1**: PageFlyエディターページで、セクションをクリックまたはホバーし、右側の「**+**」アイコンをクリックします。 * **ステップ 2**: ポップアップするセクションで、既製セクションまたは保存済みセクションを選択します。 * **ステップ 3**: 「セクションを選択」をクリックしてページに追加します。 ![](https://github.com/sellersmith/pagefly-help-center/blob/master/ja/images/AD_4nXdRNVyooTC-4EAA2wFxUVwosSDAhBNqRNQKC_NWuqdeG6g1cYkshgVFCPx3PanURygWwpDUhlT65WLoIu0IECDbmt_eRuTxc51nPfxN2NTUrCWG9NN3oV_ehXcEKd46r2w4yWJ_N4ADMyN-ctFlgkeynOlxDeElImtYXNCWHQsoRQ.gif) ### ヒントとベストプラクティス #### 1. 画像のアスペクト比を考慮する 画像を選択または作成する際には、それらのアスペクト比と、ページまたはテンプレートのレイアウトにどのように収まるかを考慮してください。意図したレイアウトと著しく異なるアスペクト比は、歪みやトリミングを引き起こす可能性があります。 **画像要素** > **一般**タブをクリックし、画像幅と画像高にスクロールして、正しいアスペクト比を見つけることができます。 ![](https://2271939490-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FT9kr2rEW4UEj3nmGvBuq%2Fuploads%2Fgit-blob-35b64ac437977711e5c57b357644d2343edaad42%2FAD_4nXe6TusZTKbwC1hPkdcDY8HAMtzArGi9JNDA8wOS5dPpJzd5kJL60d5x9IaINBZcxxlxFTZnR1r4Ckw_OQoFZWiBdpyXAx-4aXIfVmbFPtko4ZpYFr9KyBWJ33zXRRedD_cfflBWIuHjtnAe9lcyBwkeynOlxDeElImtYXNCWHQsoRQ.jpeg?alt=media) #### 2. 背景画像の解像度 背景画像の場合、高さはデザインでどのように表示したいかによって異なります。幅については、異なるデバイスに対して推奨される幅は以下のとおりです。 * モバイル = 767px以下 * タブレット = 768px - 1024px * ラップトップ = 1025px - 1199px * デスクトップ = 1200px以上 #### 3. ページ向けに画像を最適化する 画像をアップロードする前に、ページ用途に最適化されていることを確認してください。画質を著しく犠牲にすることなく、画像を圧縮してファイルサイズを削減します。これにより、ページの読み込み時間が短縮され、全体的なパフォーマンスが向上します。 #### 4. スタイルの一貫性を維持する ページ内またはサイト全体で複数の画像を使用する場合、一貫したスタイルとテーマを維持してください。これには、同様の色パレット、レイアウト、またはグラフィック要素を使用して、まとまりのあるプロフェッショナルな外観を作成することが含まれます。 #### 5. 説明的なALTテキストを使用する 画像に説明的で関連性のあるALTテキストを提供してください。これにより、アクセシビリティが向上し、画像のコンテンツを説明することで検索エンジン最適化（SEO）に役立ちます。 ![](https://2271939490-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FT9kr2rEW4UEj3nmGvBuq%2Fuploads%2Fgit-blob-a04495693b0c96785ede89db8336891d02ef85dc%2FAD_4nXfCd5hE2DfKnvuMk4bXys9Kltq8bET85Ahl96uzfKWtqqrh_n4OyQ-lWKrCCiWY5AFy13Gm_umP5SoxhXunDqnFpj5aVywJ77ke2rNDR3QQMjP8KgLCQEMLrVRxCusZoZwrLKuUz_jxILVGkqmseAkeynOlxDeElImtYXNCWHQsoRQ.jpeg?alt=media) ### よくある質問 **1. PageFlyテンプレートとは何ですか？** PageFlyテンプレートとは、PageFlyが提供する事前に設計されたレイアウトまたは構造を指します。これらのテンプレートは、ユーザーがゼロから始めることなく、オンラインストアのページを迅速に作成およびカスタマイズできるように設計されています。 **2. PageFlyテンプレートはいくつありますか？** レガシーエディターには110以上のオプションがあり、新しいGen 2エディターには40以上のオプションがあります。これらには、ホームページ、ランディングページ、商品ページ、ブログページなど、様々な種類があります。 {% hint style="warning" %} **重要事項**: Gen 2レイアウトは、ペイアズユーゴー料金モデル([スロットプラン](https://help.pagefly.io/manual/pricing-plans/))でのみ利用可能になります。 {% endhint %}