このページでは、要素の選択と編集、コンポーネントとパーソナライゼーションの追加、キャンバスのナビゲーション、デバイスサイズの変更など、Adobe Journey Optimizer Visual web designerを使用してweb エクスペリエンスを作成する方法について説明します。
Journey Optimizer のビジュアル web オーサリングには、Adobe Experience Cloud Visual Helper の Chrome ブラウザー拡張機能が利用されています。 詳細情報
Web エクスペリエンスの作成の開始
ビジュアル web designer を使用して web エクスペリエンスの作成を開始するには、次の手順に従います。
-
コンテンツを編集画面から、「Web ページを編集」をクリックして web designer を開きます。
note NOTE 読み込みに失敗した web サイトを読み込もうとすると、Visual Editing Helper のブラウザー拡張機能のインストールを勧めるメッセージが表示されます。 トラブルシューティングのヒントについては、こちらのセクションをご覧ください。 また、ビジュアルエディターを読み込まずに、web コンテンツを編集することもできます。 これを行うには、「ビジュアルエディター」オプションの選択を解除して、代わりに非ビジュアル編集モードを使用します。 詳細情報 -
Web デザイナーで、画像、ボタン、段落、テキスト、コンテナ、見出し、リンクなど、キャンバスから任意の要素を選択します。詳細情報
-
要素を編集するには、以下を使用します。
-
コンテンツ、レイアウト、リンクの挿入、パーソナライゼーションなどを編集するためのコンテキストメニュー。
-
各要素を編集、複製、削除または非表示にするための、右側パネルの上部にあるアイコン。
-
選択した要素に応じて動的に変化する右側のパネル。 例えば、要素の背景、テキスト編集、境界線、サイズ、位置、間隔、エフェクトまたはインラインスタイルを編集できます。
-
Web コンテンツを編集したら、変更を管理できます。 詳細情報
コンポーネントの使用 content-components
-
左側の コンポーネント パネルで、項目を選択します。 Web ページに以下のコンポーネントを追加し、必要に応じて編集できます。
- ディバイダー
- HTML
- 画像
- 見出し - このコンポーネントを使用することは、E メールデザイナーで テキスト コンポーネントを使用することに似ています。 詳細情報
- 段落 - このコンポーネントを使用することは、E メールデザイナーで テキスト コンポーネントを使用することに似ています。 詳細情報
- リンク
-
ページにポインタを置いて、「前に挿入」または「後ろに挿入」ボタンをクリックして、コンポーネントをページ上の既存の要素に追加します。
note NOTE コンポーネントの選択を解除するには、キャンバス上部の青いコンテキストバナーに表示されている ESC ボタンをクリックします。 -
必要に応じて、ページのコンテンツでコンポーネントを直接編集できます。
-
選択したコンポーネントに応じて、背景、テキストカラー、境界線、サイズ、位置など、右側のコンテキストパネルから表示されるスタイルを調整します。
パーソナライゼーションの追加
パーソナライゼーションを追加するには、コンテナを選択し、表示されるコンテキストメニューバーからパーソナライゼーションアイコンを選択します。 パーソナライゼーションエディターを使用して、変更を追加します。 詳細情報
Web designer 内での移動 navigate-web-designer
この節では、web designer での様々なナビゲーション方法について説明します。 Web エクスペリエンスに追加された変更の表示および管理について詳しくは、こちらの節を参照してください。
パンくずリストの使用 breadcrumbs
-
キャンバスから任意の要素を選択します。
-
画面の左下に表示される「パンくずリストを展開／折りたたむ」ボタンをクリックすると、選択した要素に関する情報をすばやく表示します。
-
パンくずリストにポインタを合わせると、エディターで対応する要素がハイライト表示されます。
-
これを使用すると、ビジュアルエディター内で任意の親要素、兄弟要素または子要素に簡単に移動できます。
参照モードにスワップ browse-mode
専用ボタンを使用して、デフォルトの デザイン モードから 参照 モードにスワップします。
参照モードでは、パーソナライズする選択した設定から該当するページに移動できます。
これは、認証の後のページや、特定の URL で最初から使用できないページを処理する場合に特に便利です。 例えば、認証を行い、アカウントページや買い物かごページに移動して、デザインモードに戻り、目的のページで変更を実行できます。
参照モードを使用すると、単一ページアプリケーションを作成する際に、web サイトのすべてのビューをナビゲートできます。 詳細情報
デバイスサイズの変更 change-device-size
Web designer のディスプレイのデバイスサイズは、タブレットまたは モバイル横置き などの事前定義済みのサイズに変更したり、必要なピクセル数を入力してカスタムのサイズを定義したりできます。
また、ズームフォーカスを 25％から 400％に変更することもできます。
デバイスサイズを変更する機能は、様々なデバイス、ウィンドウ、画面のサイズに適切にレンダリングされるレスポンシブサイト用に設計されています。 レスポンシブサイトは、デスクトップ、ノートパソコン、タブレット、携帯電話を含む、あらゆる画面サイズに自動的に調整および適応します。
チュートリアルビデオ video
次のビデオでは、Journey Optimizer キャンペーンで web designer を使用して web エクスペリエンスを作成する方法を確認できます。
This section contains structured knowledge intended to support interpretation, retrieval, and question answering related to this topic.
For complete understanding, this information should be combined with the documentation on this page. Neither source is intended to stand alone; the page describes the feature, while this section provides additional context that helps disambiguate terminology, intent, applicability, and constraints.
- TL;DR: This page explains how to author a web experience with the Journey Optimizer visual web designer, including selecting and editing elements, adding components and personalization, navigating the canvas, and changing the device size.
Intents:
- Open the web designer from the Edit content screen to author a web experience
- Select and edit elements on the canvas using the contextual menu, right panel icons, and dynamic right panel
- Add and edit components such as Divider, HTML, Image, Heading, Paragraph, and Link
- Add personalization to a container using the personalization editor
- Navigate the designer with breadcrumbs and Browse mode
- Change the device size and zoom focus of the designer display
Glossary:
- Web designer: The Journey Optimizer visual web authoring editor, powered by the Adobe Experience Cloud Visual Helper Chrome browser extension (product-specific)
- Design mode: The default web designer mode for performing changes on a page (product-specific)
- Browse mode: A mode used to navigate to the exact page from the selected configuration you want to personalize, useful for pages behind authentication or not available at a certain URL from the start (product-specific)
- Breadcrumbs: A control that displays information about the selected element and lets you navigate to any parent, sibling, or child element within the visual editor (product-specific)
- Non-visual edition mode: An alternative editing mode used by unselecting the Visual editor option to edit web content without loading the visual editor (product-specific)
Guardrails:
- Visual web authoring is powered by the Adobe Experience Cloud Visual Helper Chrome browser extension, and the prerequisites must be followed to access and author web pages.
- The Adobe Experience Platform Web SDK must be included in your web page.
- If a website fails to load, a message suggests installing the Visual Editing Helper browser extension.
- Changes made at a specific device size apply to all sizes and devices as long as the selectors are the same; editing in normal desktop view also applies to all screen sizes.
- Journey Optimizer does not currently support device size-specific page changes; changes for a separate mobile website with a separate structure should be made in a different campaign.
- The zoom focus can be changed from 25% to 400%.
Terminology:
- Canonical name: Web designer — Acronym: n/a — variants: visual web designer, web content designer, visual editor
- Synonyms: “web designer” = “visual web designer”
- Do not confuse: “Design mode” (default mode for performing changes) ≠ “Browse mode” (navigate to the exact page to personalize)
FAQ:
- Q: How do I open the web designer? — From the Edit content screen, click Edit web page.
- Q: Can I edit web content without the visual editor? — Yes; unselect the Visual editor option to use the non-visual edition mode instead.
- Q: What components can I add to a web page? — Divider, HTML, Image, Heading, Paragraph, and Link.
- Q: Do device-size changes apply only to that device? — No; as long as the selectors are the same, changes apply to all sizes and devices. Journey Optimizer does not currently support device size-specific page changes.
- Q: When should I use Browse mode? — When dealing with pages behind authentication or not available at a certain URL from the start, and to navigate through all the views of a website when authoring single-page applications.