[ベータ版]{class="badge informative" title="この機能は、現在、限定ベータ版リリース中です"}
ランディングページテンプレートのデザイン
ランディングページテンプレートを作成した後、ビジュアルデザインスペースを使用して、ページテンプレート内の構造コンポーネントとコンテンツコンポーネントをオーサリングします。
構造とコンテンツの追加 structure-content-landing-page
-
コンテンツデザインを開始するには、構造からアイテムをドラッグして、キャンバスにドロップします。
必要な数だけ 構造 の項目を追加し、右側のペインで各項目の設定を編集します。
note tip TIP n:n列 コンポーネントを選択して、選択した列数（3 ～ 10個）を定義します。 列の下にある矢印を移動して、各列の幅を定義することもできます。 
各列のサイズは、構造コンポーネントの全幅の10%未満にすることはできません。 削除できるのは空の列のみです。
-
「コンテンツ」セクションを展開し、必要な数のコンテンツコンポーネントを1つ以上の構造コンポーネントに追加します。
<!–
各要素の完全な参照がある場合のコンテンツ要素への参照。
–>
-
必要に応じて、設定またはスタイル タブで、各コンポーネントに対して追加のカスタマイズを行うことができます。
例えば、各コンポーネントのテキストスタイル、パディング、マージンを変更できます。
-
条件付きコンテンツを追加し、条件付きルールに基づいてターゲットプロファイルにコンテンツを適応させるには、コンテンツコンポーネントを選択し、コンポーネントツールバーの「条件付きコンテンツを有効にする」アイコンをクリックします。
詳しくは、条件付きコンテンツを参照してください。
カスタム CSS を追加
ランディングページのデザインスペース内で、独自のカスタム CSSを直接追加できます。 カスタム CSSを使用して、高度で特定のスタイルを適用し、コンテンツの外観をより柔軟に制御できます。 画像、ボタン、テキストなどのコンポーネントを含める前に、この最高レベルのスタイル設定を追加することをお勧めします。
キャンバス内に少なくとも1つのコンテンツコンポーネントがある場合は、左側のナビゲーションツリーでBody コンポーネントを選択して、カスタム CSS エディターにアクセスします。
-
右側に表示される スタイル タブで、「カスタム CSS を追加 をクリックします。
note note NOTE 「カスタム CSS を追加」ボタンは、「Body」コンポーネントが選択されている場合にのみ使用できます。 ただし、カスタムの CSS スタイルを、その中のすべてのコンポーネントに適用できます。 カスタム CSS を追加 ポップアップエディターが、プレースホルダーコードのコメントと共に表示されます。
-
エディターに CSS コードを入力します。
カスタム CSS が有効で、適切な構文に従っていることを確認します。 入力した CSS が無効な場合は、エラーメッセージが表示され、CSS を保存できません。 詳しくは、CSS の有効性 を参照してください。
-
「保存」をクリックして、カスタム CSS を保存します。
カスタムスタイルシートは、既存のコンテンツに適用されます。 必要に応じて、カスタム CSS が適用されていることを確認できます。 スタイルシートのアプリケーションを変更および調整する方法について詳しくは、 トラブルシューティング を参照してください。
アセットの追加
Visual Content Editor で、左側のナビゲーションバーにある Assets （
-
新しいアセットを追加するには、画像アセットを構造コンポーネントにドラッグ&ドロップします。
-
既存の画像アセットを置き換えるには、キャンバスで画像アセットを選択し、画像ソースツールの アセットを選択 をクリックします。
ソースタイプのアセットの使用について詳しくは、 コンテンツオーサリングにアセットを使用する を参照してください。
フォームを追加
フォームは、Adobe Journey Optimizer B2B edition全体で複数のランディングページおよびランディングページテンプレートから参照できる再利用可能なコンポーネントです。 ページデザインをすばやく一貫性のあるものにするために、事前に作成してすばやく挿入できるフィールドと送信ボタンのブロックです。
次の例では、ページをデザインする際にフォームを追加する手順の概要を説明します。
-
「コンテンツ」セクションで、「フォーム」項目をドラッグし、ページデザインスペースの構造コンポーネントにドロップします。
note tip TIP メール内の水平レイアウト全体を占めるようにフォームを追加するには、1:1 列構造を追加してから、フォームをドラッグ&ドロップします。 -
コンポーネントツールバーの フォーム アイコンをクリックするか、右側の 埋め込みフォーム プロパティを使用して、公開されたフォームを選択します。
-
フォームのデフォルトの フォローアップタイプ を上書きする場合は、ページまたはテンプレートの要件に応じて設定を変更します。
これはフォームの ありがとうページ とも呼ばれ、この設定は訪問者がフォームを送信したときの動作を決定します。
-
ページを維持 - フォームの送信時に訪問者のページを変えない場合は、このオプションを選択します。
-
ランディングページ – フォローアップとしてJourney Optimizer B2B editionまたはMarketo Engage ランディングページを選択する場合は、このオプションを選択します。
-
外部 URL – 任意の URL をフォローアップページとして指定する場合は、このオプションを選択します。 訪問者がフォームを送信すると、ブラウザーは指定された URL を読み込みます。
note tip TIP フォームを使用してファイルをダウンロードする場合は、ホストされるファイルの URL を指定できます。 この設定では、「送信」ボタンはダウンロードボタンとして機能します。
-
-
デバイスタイプごとにフォームの表示を制限する場合は、「表示オプション」設定を変更します。
- デスクトップデバイスでのみ表示
- モバイルデバイスでのみ表示
- すべてのデバイスで表示 （デフォルト）
-
必要に応じて、右側のパネルの「スタイル」タブを選択し、ページ内のフォームの余白を設定します。
レイヤー、設定、スタイルの移動
ビジュアルデザインスペースでコンテンツを操作する際は、ナビゲーションツリーを使用して、コンポーネント、列およびコンテンツ要素にアクセスできます。 左側の ナビゲーションツリー アイコン（
次の例では、列を持つ構造コンポーネント内のパディングと垂直方向の整列を調整する手順について説明します。
-
キャンバスで構造コンポーネントの列を直接選択するか、左側に表示される ナビゲーションツリー を使用して選択します。
-
列ツールバーから 列を選択 ツールをクリックし、編集する列を選択します。
構造ツリーから選択することもできます。 その列の編集可能なパラメーターは、右側の 設定 タブと スタイル タブに表示されます。
-
列のプロパティを編集するには、右側の「スタイル」タブをクリックし、必要に応じて変更します。
-
背景 については、必要に応じて背景色を変更します。
背景を透明にするには、このチェック ボックスをオフにします。 「背景画像」設定を有効にして、単色の代わりに画像を背景として使用します。
-
「整列」では、「上」、「中央」または「下」アイコンを選択します。
-
パディング については、すべての辺のパディングを定義します。
パディングを微調整する場合は、「各辺に異なるパディングを使用」を選択します。ロック アイコンをクリックして、同期を解除します。
-
「詳細」セクションを拡張して、列のインラインスタイルを定義します。
-
-
必要に応じて、これらの手順を繰り返して、コンポーネントの他の列の整列とパディングを調整します。
-
変更を保存します。
コンテンツのパーソナライズ
Journey Optimizer B2B editionでは、インラインのシンプルな構文を使用します。この構文を使用すると、パーソナライズされたコンテンツを二重の中括弧で囲んだ式を作 {} できます。 同じコンテンツまたはフィールドに、制限なく複数の式を追加できます。
例:
-
Hello {{profile.person.name.firstName}} {{profile.person.name.lastName}} -
Hello {{profile.person.name.fullName}}
Journey Optimizer B2B editionは、コンテンツの処理時に、式をExperience Platformデータベースに含まれるデータで置き換えます。 最初の例は、Hello John Doe となります。
次の例では、リード/アカウント属性とシステムトークンを使用してコンテンツをパーソナライズする手順の概要を説明します。
-
テキストコンポーネントを選択し、ツールバーの パーソナライゼーションを追加 アイコンをクリックします。
これにより、「Personalizationを編集 ダイアログが開きます。
-
+ または … をクリックして、空白スペースにトークンを追加します。
-
「保存」をクリックします。
リンクされたURL トラッキングを編集
-
左側の リンク アイコン（
-
必要に応じて、編集 （
リンクに タグ を追加することもできます。
作品を保存
いつでも 保存 をクリックして、ランディングページテンプレートを保存します。
表示オプション
ビジュアルデザイン分野で利用可能な表示およびコンテンツ検証オプションを活用します。
-
プリセットのズームオプション全体でコンテンツをズームイン/ズームアウトします。
-
デスクトップ、モバイル、またはテキストのみ/プレーンテキストのコンテンツ表示を切り替えます。
- デバイス間でコンテンツをプレビューするには、表示 アイコンをクリックします。
- すぐに使えるデバイスのいずれかを選択するか、カスタムディメンションを入力してコンテンツをプレビューします。
詳細オプション
ビジュアルデザインスペースの上部にある「その他…」メニューから、次の操作を実行できます。
- ランディングページをリセット – このオプションをクリックすると、ビジュアルデザインキャンバスが空白のスレートに消去され、ページコンテンツの作成が再開されます。
- デザインを変更 - メインのランディングページの作成のホームページに戻ります。 そこから、別のテンプレートを選択してデザインプロセスを再開するか、空白のキャンバスでページをゼロからデザインするかを選択できます。
- HTMLを書き出し - ビジュアルキャンバスのコンテンツを、zip ファイルとしてパッケージ化されたHTML形式でローカルシステムにダウンロードします。