ドキュメントAEMAEM as a Cloud Service のチュートリアル

共同作業者を使用したアダプティブフォームを使用したAEM Sitesお問い合わせページの作成

最終更新日： 2026年10月10日
  • 適用対象：
  • Experience Manager as a Cloud Service

作成対象：

  • Beginner
  • Intermediate
  • Developer

[AEM Forms as a Cloud Service]{class="badge informative"}

概要

Coworker Enterpriseは、Adobe Experience Manager （AEM）で自然言語の指示を使用してタスクを実行するためのAI支援手法を提供します。 オーサリングや設定の各ステップを手作業で実行する代わりに、制作するエクスペリエンスを記述することができます。また、サポート対象のタスクをAEM内で実行することもできます。

チームメンバーは、インタラクティブに作業できます。また、参照ページ、既存の設定、使用するサービスなど、追加情報が必要な場合に、フォローアップで質問することもできます。 これにより、AIを活用したオーサリングを、既存のAEMのアセット、コンポーネント、フォーム、統合と組み合わせることが可能になります。

この記事では、Coworkerを使用して、ページとアダプティブフォームの作成、郵便番号ルックアップの設定、既存のAzure ストレージ設定へのフォーム送信の設定など、AEM Sitesお問い合わせエクスペリエンスの構築を支援します。

このチュートリアルでは、Coworker​を使用して、次の内容を含むAEM Sites お問い合わせ ページを作成する方法を説明します。

  • 全幅バンキングをテーマにしたバナー
  • AEM Sites ページ内に埋め込まれたアダプティブフォーム
  • 2列のフォームレイアウト
  • タブレットおよびモバイルデバイス向けのレスポンシブ動作
  • 顧客情報と問い合わせ詳細の論理的なグループ化

ページは次の場所に作成されます。

/content/bankingapplication/us/contact-us

前提条件

始める前に、次の点を確認してください。

Sites ページとアダプティブ Formsの作成と変更に必要な権限を持つAEM環境にアクセスできます。

この記事で使用する例では、bankingapplicationはアドビの環境で設定されたAEM プロジェクトであり、「お問い合わせ」ページは/content/bankingapplication/usの下に作成されます。

AEMのプロジェクト名とコンテンツ構造が異なる場合があります。 この記事のサンプルパスを、AEM環境に適したプロジェクト名とコンテンツの場所に置き換えます。

同様に、アダプティブ Formsと関連アセットは、プロジェクトに適した場所に作成できます。この記事に示すパスを使用する必要はありません。

ステップ 1：同僚を開く

Coworkerを開き、作成するページを説明する自然言語リクエストを入力します。

プロンプトには、次のようなものがあります。

  1. ページの場所
  2. 必要なページ構造
  3. バナーの要件
  4. アダプティブフォームの要件
  5. 2列レイアウト
  6. レスポンシブな行動
  7. フォームに必須のフィールド
  8. ビジュアルとアクセシビリティに対する期待は

通常、詳細なプロンプトは、「問い合わせページの作成」などの短いリクエストよりも予測可能な結果を生成します。

手順2：ページ作成プロンプトの指定

次のプロンプトをコピーしてCoworkerに貼り付けます。

手順2：ページ作成プロンプトの指定

次のプロンプトをコピーしてCoworkerに貼り付けます。

AEM Sitesで​お問い合わせ ページを次のコンテンツパスの下に作成したい：

/content/bankingapplication/us

ページの要件

1. 全角バンキングバナー

  • ページ全体に広がるバナー/ヒーロー画像を追加します。
  • 最新の銀行と金融サービスのテーマ​を使用して、適切なバナー画像を作成します。
  • ビジュアルでは、信頼、プロフェッショナリズム、セキュリティ、カスタマーサービスなどが表現されている必要があります。
  • バナーは、デスクトップ、タブレット、モバイルレイアウトで適切に動作する必要があります。

2. アダプティブフォーム​へのお問い合わせ

  • ページの下半分で、AEM Sites ページ内に​ AEM アダプティブフォーム ​を直接追加します。
  • フォームフィールドを論理的に​ デスクトップ上の2つのパネルと列 ​に整理します。
  • タブレットやモバイルデバイスでは、レスポンシブなエクスペリエンスを提供するために、パネルを垂直に積み重ねる必要があります。

左パネル – お客様の情報

  • 名前
  • メールアドレス
  • 住所
  • City
  • State
  • ZIP Code

右側のパネル – どのように役立ちますか？

  • 問い合わせタイプ
  • 件名
  • メッセージ/コメント
  • 希望する連絡時間

送信 ボタンをフォームフィールドの下の論理的な位置に配置して、フォーム全体がバランスが取れており、使いやすいように感じるようにします。

ページ場所

お問い合わせページを作成します。

/content/bankingapplication/us/contact-us

同僚のフォローアップの質問に答える

AEM Sites ページを作成する前に、プロンプトを送信した後で、さらに質問することができます。 これらの質問は、既存のサイト構造、設計規則、利用可能なコンポーネント、および必要な実装について理解するのに役立ちます。

同僚の応答

同僚の応答

recommendation-more-help
experience-manager-learn-help-cloud-service