Web 実験用すぐに使えるウィジェット

すぐに使える (OOTB) ウィジェットを使用すると、モーダルやバナーなどの新しいウェブサイト要素を自分でデザインしたりコーディングしたりすることなくテストできます。すぐに使える標準ウィジェットは、あらかじめ構築された構成可能なコンポーネントであり、ビジュアルエディタで直接ブランドに合わせてカスタマイズできます。OOTB ウィジェットを使用すると、SDK や UI フレームワークの連携などのエンジニアリング設定が不要になるため、アイデアの検証や学習内容の収集、実験プログラムの規模拡大が可能です。保存されたデザインプリセットと再利用可能なスタイルにより、実験を通してブランドの一貫性を保ちます。 ビジュアルエディタの詳細とウェブ実験の設定については、「ビジュアルエディタ」を参照してください。

OOTBウィジェットはネイティブのAmplitudeAIを使用しているため、正確なブランドスタイルの詳細を提供することなく、会話プロンプトを使用してWeb実験を設計できます。

OOTB ウィジェット ライブラリには以下が含まれています。

• ボタン: 行動を促すための呼びかけ (CTA) ボタンです。 カスタマーが CTA ボタンをクリックすると、そのボタンによってアクションがトリガーされます。たとえば、カスタマーをショッピングカートやサポート担当者に送ります。
• バナー: 通知バーまたはメッセージバーです。 メッセージバナーは、予想されるサービスの中断、販売、その他のコミュニケーションなど、重要な情報をカスタマーに知らせます。
• ボタン付きバナー: CTA ボタンを含む通知またはメッセージバーです。 ボタン付きバナーは、ショッピングカートにプロモーションコードを適用するなど、お客様に実行してもらいたい特定のアクションを通知します。
• モーダルポップアップ: 設定された時間後にページに表示されるポップアップモーダルです。 モーダルには、CTAボタンやメッセージングなどがあります。数秒後にポップアップ モーダルが表示され、顧客にアカウントの登録などのアクションを促します。

また、カスタマイズしたウィジェットを将来使用するためにライブラリに保存することもできます。 たとえば、四半期ごとのセールを発表する通知バナーを作成した場合、そのカスタマイズされたメッセージを保存して後で再利用できます。実験を作成する権限を持つ組織内の全員が、保存されたすべてのウィジェットにアクセスできます。

ウェブ実験にOOTBウィジェットを追加する

OOTB ウィジェットは、任意の Web 実験に追加できます。 Web実験を作成したら、「ビジュアルエディタを開く」をクリックします。トップメニューバーの ［挿入］ をクリックします。 OOTBウィジェットモーダルが開き、必要なウィジェットを選択できます。ウィジェットを実験にドラッグ&ドロップします。**「挿入」**パネルでは、画像を直接アップロードすることもできます。

ウィジェットの編集

デフォルトでは、任意のウィジェットの次の側面を編集できます。

• テキスト。
• ボタンラベル。
• 背景色。
• フォント。

ウィジェットを選択すると、要素ツールバーを使用してウィジェットを削除したり、ウィジェットをライブラリに保存したりできます。

ビジュアルエディタにはすべての変更がリアルタイムで表示されます。

ウィジェットの配置をカスタマイズ

バナーやボタンをウェブサイト内で自由に移動できます。

• バナーはページの上部または下部に表示できます。
• ボタンはページ上のほぼどこにでも表示できます。 ボタンを配置すると、ボタンがグリッドレイアウトにスナップされます。

ポップアップ モーダルの場所はカスタマイズできません。ポップアップ モーダルはページの中央に表示されます。

バナーやボタンの移動に関する詳細は、「要素の移動」を参照してください。

AI スタイライザー

AI スタイライザー はビジュアルエディタの AI アシスタントで、コピーを改良したり、ブランドを意識したスタイルを適用したり、OOTB ウィジェット内の間隔や配置、階層を整理したりするのに役立ちます。 正確なブランドスタイルガイドの詳細やデザイン経験、コーディングスキルは必要ありません。 自然言語によるプロンプトを使用して、ウィジェットや要素をブランドのスタイルに合わせることができます。

ビジュアルエディタでウィジェットを選択すると、AI Stylizer コントロールが要素ツールバーにスパークルアイコンとして表示されます。コントロールを選択して、AI スタイライザーのポップオーバーを開きます。 自分の望むことを平易な言葉で説明することができます。

たとえば、「この見出しをより緊急に設定する」、「15%の割引プロモーションコードを含む夏のキャンペーンを作成する」、「CTAをよりアクション指向に設定する」と入力します。AI Stylizer は、お客様のリクエストに基づいて選択した要素を更新します。

AI Stylizer は以下の方法で使用できます。

AI Stylizer を事前構築済みのウィジェット（モーダル、CTA、バナー、プロモーションブロック）で使用する場合、AI Stylizer は要素をブランドに合わせて調整します。 AI Stylizerは、サイトに合わせてタイポグラフィ、色、間隔を更新し、見出しやCTAテキストを作成または改良することで、コンポーネントがプロダクトの一部であるように見せることができます。

• ヘッドライン: ヘッドラインをより説得力のあるものや緊急性を高めるものにしたり、トピックを簡略化したり明確化したり、新しい訪問者向けにヘッドラインをカスタマイズしたりできます。
• **ボタン（CTA）：**CTAをよりアクション指向にし、コントラストと可視性を向上させ、リピート顧客向けにCTAをカスタマイズできます。
• バナー: バナーをより目立つようにし、メッセージを簡素化し、新規訪問者向けにバナーをカスタマイズできます。
• テキストブロック: コンテンツを簡素化および明確化し、機能からメリットへと移行し、モバイルユーザー向けにテキストをカスタマイズします。

プリセットされたプロンプトを選択することも、独自のカスタムプロンプトを入力することもできます。 AI Stylizerは、1回のインタラクションで複数のバリアントを生成できるため、必要なものを選択できます。また、AI スタイライザーのバージョン履歴から以前の AI 生成バージョンに戻すこともできます。 AIが作成したスタイルやコピーは、実験にスタイルを適用した後でも引き続き編集することができます。たとえば、ヒーローの見出しを選択し、AI Stylizerにその見出しをより緊急または明確にするよう依頼します。最初のデザインが気に入り、そのデザインを自分の実験に適用します。 同僚からフィードバックを受け取った後、戻ってきて、彼らの提案を載せて見出しを更新します。