> For the complete documentation index, see [llms.txt](https://help.pagefly.io/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://help.pagefly.io/pagefly-help-center-japanese/pjitosekushonno/sections/how-to-create-ai-section-in-pagefly-ai-sales-page.md). # PageFlyのAI Smart PageでAIセクションを作成する方法 ### 概要 この記事では、PageFlyのAIセクションジェネレーターを使用してAIを活用したセクションを作成する方法を学びます。AIセクションジェネレーターには、コンバージョンに最適化されたセクションのための、より良く構造化されたプロンプトを作成するのに役立つプロンプトビルダーツールが含まれています。 {% hint style="success" %} **注意**: 現在、AIセクションはAI Smart Pageでのみ利用可能で、[PageFlyグローバルセクション](https://help.pagefly.io/pages-and-sections-creation/sections/saved-section)として保存または再利用することはできません。これらは、インテリジェントで文脈に応じたセクションでAI Smart Pageのコンテンツを強化するために設計されています。 {% endhint %} ### PageFlyのAIセクションとは？ AIセクションは、人工知能によって動的に生成されるページセクションで、現在AI Smart Page内でのみ利用可能です。各要素を手動でデザインする代わりに、必要なものを記述するだけで、AIがコンテンツ、レイアウト、スタイリングを備えたプロフェッショナルにデザインされたセクションを生成します。内蔵のプロンプトビルダーは、より良い結果を得るためにプロンプトを構造化するのに役立ちます。 #### 主な利点 * **時間の節約**: 手動で構築する代わりに、数秒で完全なセクションを生成します * **プロフェッショナルなデザイン**: AIはベストプラクティスに基づいてコンバージョンに最適化されたレイアウトを作成します * **プロンプトビルダー**: テンプレート、目的、レイアウト、要素を使用してプロンプトを構造化し、より良い結果を得ます * **AIによる編集**: 会話形式でセクションを洗練させます - AIが自動的に設定パラメーターを作成するため、コードなしでスペーシング、パディング、色などを制御できます * **パーソナライズ対応**: AI Smart Pageのパーソナライズ設定に基づいて、セクションは異なる顧客セグメントに自動的に適応します #### 要件 このガイドを始めるには、以下が揃っていることを確認してください： * **PageFlyがインストール済みであること**: ShopifyストアにPageFlyアプリがインストールされていることを確認してください * **AI Smart Pageが作成済みであること**: AIセクションを追加するには、アクティブなAI Smart Pageが必要です。作成方法は[こちら](https://help.pagefly.io/pages-and-sections-creation/pages/how-to-create-ai-sales-pages-with-pagefly)で学べます * **製品が選択されていること**: AI Smart Pageキャンペーンに少なくとも1つの製品が設定されている必要があります ### AIセクションジェネレーターを使用してAIセクションを作成する方法 #### ステップ1：AIセクションジェネレーターを開く AI Smart Pageエディターで、ページコンテンツパネルの\*\*「セクションを追加」\*\*ボタンをクリックします
{% hint style="warning" %} 注意: AIセクションボタンを有効にするには、AI Smart Pageに少なくとも1つの製品を割り当てる必要があります。 {% endhint %} AIセクションジェネレーターのドロワーが開き、セクションを記述する2つの方法が表示されます： * 説明を直接入力するためのテキストフィールド * 構造化されたプロンプト作成のための\*\*「プロンプトを構築」\*\*ボタン
#### ステップ2：必要なものを記述する AIが生成するセクションの品質は、必要なものをどれだけうまく記述するかに大きく依存します。目的、レイアウト、要素に関する詳細を提供すればするほど、結果は良くなります。要件をじっくり考える時間をかけることで、後々の編集時間を節約し、最初の試行でよりプロフェッショナルな結果を生み出すことができます。 AIに必要なセクションを伝えるには、2つのオプションがあります： **オプション1：説明を直接入力する** 何が欲しいか正確にわかっている場合は、テキストフィールドに直接入力してください。 > **例：** オンラインストアのセールスページに、当社のプレミアムワイヤレスヘッドフォンの製品ショーケースセクションを作成してください。このセクションでは、価格が299ドルで、ソニーやボーズなどのブランドと競合する当社のフラッグシップモデル「SoundWave Pro X」を強調する必要があります。ターゲットオーディエンスは、音質とデザインの両方を重視する25歳から45歳のオーディオファンや専門家で、彼らは通常、購入前に複数のブランドを比較検討しています。 > > その後、**ステップ3**に進みます。 **オプション2：プロンプトビルダーを使用する** より詳細な制御とより良い結果を得るには、\*\*「プロンプトを構築」\*\*ボタンをクリックします。プロンプトビルダーは、ガイド付きの選択肢でプロンプトを構造化するのに役立ちます。 **1. テンプレート（クイックスタート）** 製品ショーケース、お客様の声、機能などの提案されたテンプレートを閲覧します。テンプレートを選択すると、目的、レイアウト、要素が自動的に入力されます。
**2. 目的、レイアウト、要素** テンプレートを使用したくない場合は、手動で選択することもできます： * **目的**: セクションが達成すべきこと（機能の紹介、お客様の声の表示など） * **レイアウト**: 視覚的な配置（グリッド、カラム、全幅など） * **要素**: 含めるコンポーネント（画像、動画、ボタン、お客様の声など）
**3. カスタム要件** ブランドカラー、メッセージング、スタイリングのニーズ、または特別な要件に関する具体的な詳細をテキストフィールドに追加します。
#### ステップ3：セクションを生成する \*\*「生成」\*\*ボタンをクリックします。AIは次のことを行います： 1. プロンプトを処理する 2. プロフェッショナルにデザインされたセクションを作成する 3. 自動的にページに追加する **読み込み時間**: 通常、複雑さに応じて10〜30秒です。
#### ステップ4：確認と保存 生成されたら： 1. ページ上のセクションを確認し、期待通りであることを確認します 2. \*\*「保存」\*\*をクリックして変更を保持します ### AIセクションの編集 AIセクションが作成されると、それをカスタマイズするための2つの異なる方法があります。 #### 方法1：設定パラメーターを使用して編集する AIがセクションを生成した後、コードなしでセクションを制御できる設定パラメーターを自動的に作成します。 **ステップ1**：ページ内のAIが生成したセクションをクリックします。 **ステップ2**：左側にセクション設定パネルが開き、そのセクションで利用可能なすべてのパラメーターが表示されます。 **ステップ3**：パラメーターを直接調整します：テキストコンテンツの変更、画像の更新、色やスペーシングの調整など。 **ステップ4**：\*\*「保存」\*\*をクリックして変更を適用します。 {% hint style="info" %} **この方法を使用する場合：** * 特定の設定に対して正確な手動制御を行いたい場合 * パラメーターを直接調整することに慣れている場合 * 迅速で軽微な調整を行う必要がある場合 * どの設定を変更すべきか正確にわかっている場合 {% endhint %}
{% hint style="warning" %} ヒント：AIセクションは、スタイリングメニューの設定から一部のスタイルを継承します。外観が完全でない場合は、このデモで行ったように、それらのグローバル設定を調整して目的の外観を実現してください。 {% endhint %} #### 方法2：チャットエディターを使用してAIで編集する チャットエディターを使用すると、会話形式で変更をリクエストできます。AIは変更を行うだけでなく、必要に応じて新しい設定パラメーターを作成し、コードなしで制御できるようにします。 **ステップ1**：セクション設定パネルで、\*\*「チャットエディターを開く」\*\*をクリックするか、下部のチャットフィールドにリクエストを入力してEnterキーを押します。 **ステップ2**：フルのチャットパネルが開き、以下が表示されます： * あなたの会話履歴（過去30日間） * セクションのすべての以前のバージョン * 新しいリクエストのためのテキストフィールド **ステップ3**：自然言語を使用して編集リクエストを入力します。例：「見出しを大きく、太字にしてください」- AIはフォントサイズのパラメーターを調整・作成します。「パディングを制御したい」- AIは調整可能なパディングパラメーターを作成します。 **ステップ4**：**Enter**キーを押すか、\*\*「送信」\*\*をクリックします。AIはリクエストを処理し、次のことを行います： 1. セクションを更新する 2. 必要に応じて新しい設定パラメーターを作成する 3. 新しいバージョンとして保存する 新しく追加されたパラメーターは、設定パネルで直接制御できます。
{% hint style="info" %} **この方法を使用する場合：** * 平易な言葉で変更を記述したい場合 * AIに新しい制御パラメーターを作成させたい場合 * 複雑または複数の変更を一度に行う場合 * 素早く反復して実験したい場合 * AIに後で制御できるパラメーターを作成させることで、ハルシネーション（AIの誤った応答）を避けたい場合。 このアプローチは、カスタマイズ能力の最高の部分を提供します：AIの知性が必要なものを作成し、手動のコントロールでコードなしで微調整できます。 {% endhint %} #### バージョン履歴と復元 すべてのチャット編集は新しいバージョンを作成し、自動的に30日間保存されます。各バージョンにはタイムスタンプが表示され、新しいパラメーターは青いインジケーターでマークされます。 **以前のバージョンを復元するには：** 1. チャットエディターで、履歴サイドバーから任意のバージョンをクリックします 2. 復元を確認します 3. セクションはそのバージョンに戻ります
30日以内であれば、どのバージョンでも復元できます。30日を過ぎると、古いバージョンにはアクセスできなくなります。 {% hint style="success" %} **フィードバックの提供**: 生成されたセクションを「いいね」/「よくないね」ボタンで評価し、改善できる点を説明してください。あなたのフィードバックは、AIがより良いセクションを生成するためのトレーニングに役立ちます。 {% endhint %} ### ベストプラクティス #### より良いプロンプトの作成 * **テンプレートから始める**: まずテンプレートカテゴリを閲覧してください - それらはプロがデザインした出発点です * **具体的にする**: 「素敵にして」と言う代わりに、色、メッセージング、主要な機能を指定してください * **プロンプトビルダーを使用する**: より良い結果を得るために、すべてのオプション（目的、レイアウト、要素）を考慮するのに役立ちます #### 効果的な編集 * **チャットエディターで反復する**: ベースを生成し、その後ステップバイステップで洗練させます * **パラメーターをリクエストする**: AIにコントロール（スペーシング、パディング、色）を作成するように依頼し、ハルシネーションを減らし、手動での制御を可能にします #### 最適化 * **最初にAI Smart Pageを設定する**: パーソナライズ（トラフィックソース、顧客タイプ）を設定して、セクションが自動的に適応するようにします * **モバイルビューをテストする**: 最終決定する前にレスポンシブな動作を確認します ### よくある質問 #### 1. AIが生成したセクションを通常のPageFlyセクションのようにドラッグ＆ドロップで編集できますか？ いいえ、AIセクションは異なります。編集方法は次のとおりです： 1. AIが自動的に作成する設定パラメーターを調整する 2. チャットエディターを使用して会話形式で変更をリクエストする チャットエディターはAIセクションに特有のもので、必要に応じて新しいパラメーターを作成します。 #### 2. 通常のPageFlyページでAIセクションを使用できますか？ いいえ、AIセクションは現在AI Smart Page専用であり、グローバルセクションとして保存することはできません。これらはAI Smart Pageのパーソナライズ機能と連携するように設計されています。 #### 3. バージョン履歴はどのくらいの期間保存されますか？ バージョン履歴とチャットメッセージは30日間保存されます。 #### 4. 編集時にAIのハルシネーションを避けるにはどうすればよいですか？ 制御したい設定のパラメーターをAIに作成するように依頼してください：「パディングコントロールを追加して」や「色のパラメーターを作成して」など。これにより、AIに自動的に変更させるのではなく、手動で制御できるようになります。 #### 5. AIセクションは自動的にパーソナライズできますか？ はい！AIセクションは、AI Smart Pageのパーソナライズ設定（トラフィックソース、場所、顧客タイプ）に基づいて自動的に適応します。AI Smart Page[の設定](https://help.pagefly.io/pages-and-sections-creation/pages/how-to-create-ai-sales-pages-with-pagefly)について詳しく学んでください。 #### 6. 「いいね」/「よくないね」でセクションを評価するとどうなりますか？ あなたのフィードバックは直接PageFlyの製品チームに送られ、AIがより良いセクションを生成するためのトレーニングに役立ちます。 #### 7. 1つのページにいくつのAIセクションを追加できますか？ Shopifyにはページごとに256KBの制限があります。固定数はありませんが、最適なページパフォーマンスを確保し、Shopifyのサイズ制限内に収まるようにセクションの数を制限する必要があります。 ### トラブルシューティング #### 生成に関する問題 **問題**: 生成に時間がかかりすぎる、またはタイムアウトする。 **解決策:** * プロンプトを簡素化する - 要素を少なくしてみてください * インターネットの速度を確認する * オフピークの時間帯に再試行する * リフレッシュして再試行する * 問題が続く場合はサポートに連絡する #### 結果の品質に関する問題 **問題1**: 生成されたセクションが要求したものと一致しない。 **解決策:** * プロンプトを見直す - 十分に具体的でしたか？ * より構造化された入力のためにプロンプトビルダーを使用する * カスタム要件フィールドに例を含めてみる * チャットエディターを使用してより具体的なリクエストで洗練させる * 最も近いテンプレートから始めて、カスタマイズする **問題2**: セクションは良さそうに見えるが、リロードするとテキストコンテンツが変わり続ける。 **解決策:**\ AIセクションは、テキスト要素（見出し、段落）に対してパーソナライズされたコンテンツを自動的に有効にします。つまり、テキストは動的で訪問者に基づいて変化します。テキストを固定するには： 1. AIセクションをクリックします 2. 設定パネルを開きます 3. テキスト要素の設定を見つけます 4. 「パーソナライズを有効にする」トグルをオフにします 5. 固定テキストを入力します 6. これでテキストはすべての顧客に対してそのまま表示されます
#### 編集に関する問題 **問題**: チャットエディターが私のリクエストを理解しない。 **解決策:** * より具体的にする - 「もっと良くして」ではなく、「見出しのサイズを48pxに大きくして」と試してみてください * 複雑なリクエストを小さなステップに分割する * 明確なアクションワードを使用する：変更、追加、削除、更新、移動、リサイズ * 特定の要素を参照する：「青いボタン」、「メインの見出し」 * より簡単な言葉で言い換えてみる ### ヘルプが必要ですか？ このガイドでカバーされていない問題や質問が発生した場合： **ライブサポート：** PageFlyエディターのライブチャットボタンをクリックしてください **フィードバック：** エディターのフィードバックボタンを使用して改善を提案するか、[こちらのフォーム](https://forms.gle/KXP9GMyoEtDhRKG69)を送信してください。 --- # Agent Instructions This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com. ## 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, and the optional `goal` query parameter: ``` GET https://help.pagefly.io/pagefly-help-center-japanese/pjitosekushonno/sections/how-to-create-ai-section-in-pagefly-ai-sales-page.md?ask=&goal= ``` `ask` is the immediate question: it should be specific, self-contained, and written in natural language. `goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal. 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.