ドキュメントJourney OptimizerJourney Optimizer ガイド

Web デザイナーの操作 work-with-web-designer

Last update: Tue Oct 29 2024 00:00:00 GMT+0000 (Coordinated Universal Time)
  • トピック：

作成対象：

  • 初心者
  • ユーザー

Journey Optimizer では、ビジュアル web オーサリングは、Adobe Experience Cloud Visual Helper Chrome ブラウザー拡張機能によって動作します。 詳細情報

CAUTION
Journey Optimizer ユーザーインターフェイスで web ページへのアクセスや web ページを作成するには、こちらのセクションに記載されている前提条件を必ず満たすようにしてください。

Web エクスペリエンスの作成を開始

ビジュアル web デザイナーを使用して web エクスペリエンスの作成を開始するには、次の手順に従います。

CAUTION
Web ページには 🔗0}Adobe Experience Platform Web SDK} を含める必要があります。 詳細情報

  1. コンテンツを編集 画面から、「Web ページを編集」をクリックして Web デザイナーを開きます。

    note note
    NOTE
    読み込みに失敗した web サイトを読み込もうとすると、Visual Editing Helper のブラウザー拡張機能のインストールを勧めるメッセージが表示されます。トラブルシューティングのヒントについては、こちらのセクションをご覧ください。
    また、ビジュアルエディターを読み込まずに、web コンテンツを編集することもできます。 これを行うには、「ビジュアルエディター」オプションの選択を解除して、代わりに非視覚的な編集モードを使用します。 詳細情報

  2. Web デザイナーで、画像、ボタン、段落、テキスト、コンテナ、見出し、リンクなど、キャンバスから任意の要素を選択します。 詳細情報

  3. 要素を編集するには、以下を使用します。

    • コンテンツ、レイアウト、リンクの挿入、パーソナライゼーションなどを編集するためのコンテキストメニュー。

    • 各要素を編集、複製、削除または非表示にするための、右側パネルの上部にあるアイコン。

    • 選択した要素に応じて動的に変化する右側のパネル。 例えば、要素の背景、テキスト編集、境界線、サイズ、位置、間隔、エフェクトまたはインラインスタイルを編集できます。

NOTE
Web のコンテンツデザイナーは、E メールデザイナーと非常に似ています。詳細は Journey Optimizer でのコンテンツのデザインを参照してください。

Web コンテンツを編集したら、変更を管理できます。 詳細情報

コンポーネントの使用 content-components

  1. 左側の​ コンポーネント ​パネルで、項目を選択します。Web ページに以下のコンポーネントを追加し、必要に応じて編集できます。

    • ディバイダー
    • HTML
    • 画像
    • 見出し - このコンポーネントを使用することは、E メールデザイナーで​ テキスト ​コンポーネントを使用することに似ています。詳細情報
    • 段落 - このコンポーネントを使用することは、E メールデザイナーで​ テキスト ​コンポーネントを使用することに似ています。詳細情報
    • リンク

  2. ページにポインタを置いて、「前に挿入」または「後ろに挿入」ボタンをクリックして、コンポーネントをページ上の既存の要素に追加します。

    note note
    NOTE
    コンポーネントの選択を解除するには、キャンバス上部の青いコンテキストバナーにある ESC ボタンをクリックします。

  3. 必要に応じて、ページのコンテンツでコンポーネントを直接編集できます。

  4. 右側のコンテキストパネルに表示されるスタイル（背景、テキストカラー、境界線、サイズ、位置など）を調整します。- 選択したコンポーネントによって異なります。

パーソナライゼーションの追加

パーソナライゼーションを追加するには、コンテナを選択し、表示されるコンテキストメニューバーからパーソナライゼーションアイコンを選択します。 パーソナライゼーションエディターを使用して、変更を追加します。詳細情報

Web デザイナー内での移動 navigate-web-designer

この節では、web デザイナーでの様々なナビゲーション方法について説明します。Web エクスペリエンスに追加された変更の表示および管理について詳しくは、こちらの節を参照してください。

パンくずリストの使用 breadcrumbs

  1. キャンバスから任意の要素を選択します。

  2. 画面の左下に表示される「パンくずリストを展開／折りたたむ」ボタンをクリックすると、選択した要素に関する情報をすばやく表示します。

  3. パンくずリストにポインタを合わせると、エディターで対応する要素がハイライト表示されます。

  4. これを使用すると、ビジュアルエディター内で任意の親要素、兄弟要素または子要素に簡単に移動できます。

参照モードにスワップ browse-mode

専用ボタンを使用して、デフォルトの​ デザイン ​モードから​ 参照 ​モードにスワップします。

参照 ​モードでは、パーソナライズする選択した設定から該当するページに移動できます。

これは、認証の後のページや、特定の URL で最初から使用できないページを処理する場合に特に便利です。例えば、認証を行い、アカウントページや買い物かごページに移動して、デザイン ​モードに戻り、目的のページで変更を実行できます。

参照 ​モードを使用すると、単一ページアプリケーションを作成する際に、web サイトのすべてのビューをナビゲートできます。詳細情報

デバイスサイズの変更 change-device-size

Web デザイナーのディスプレイのデバイスサイズは、タブレット ​または​ モバイル横置き ​などの事前定義済みのサイズに変更したり、必要なピクセル数を入力してカスタムのサイズを定義したりできます。

また、ズームフォーカスを 25％から 400％に変更することもできます。

デバイスサイズを変更する機能は、様々なデバイス、ウィンドウ、画面のサイズに適切にレンダリングされるレスポンシブサイト用に設計されています。レスポンシブサイトは、デスクトップ、ノートパソコン、タブレット、携帯電話を含む、あらゆる画面サイズに自動的に調整および適応します。

CAUTION
特定のデバイスサイズで web エクスペリエンスを編集できます。ただし、セレクターが同じである限り、これらの変更は作業中のデバイスサイズだけでなく、すべてのサイズとデバイスに適用されます。同様に、通常のデスクトップビューでのエクスペリエンスの編集は、そのデスクトップビューだけでなく、すべての画面サイズに適用されます。
現在、Journey Optimizer は、デバイスサイズに固有のページの変更をサポートしていません。例えば、個別のサイト構造を持つ別のモバイル web サイトがある場合は、別のキャンペーンでそのモバイルサイトに固有の変更を行う必要があります。

チュートリアルビデオ video

次のビデオでは、Journey Optimizer キャンペーンで Web デザイナーを使用して web エクスペリエンスを作成する方法を確認できます。

https://video.tv.adobe.com/v/3418803/?quality=12&learn=on

recommendation-more-help
b22c9c5d-9208-48f4-b874-1cefb8df4d76