[ベータ版]{class="badge informative" title="この機能は、現在、限定ベータ版リリース中です"}
ランディングページのデザイン
ランディングページを作成 した後、ビジュアルデザインスペースを使用して、ページの構造コンポーネントとコンテンツコンポーネントをオーサリングします。
構造とコンテンツの追加 structure-content-landing-page
-
コンテンツデザインを開始するには、構造 から項目をドラッグし、キャンバスにドロップします。
必要に応じて 構造 から項目を追加し、右側のパネルで各項目の設定を編集します。
note tip TIP n:n 列 コンポーネントを選択して、列数（3～10）を任意に定義します。 また、列の下に矢印を移動して、各列の幅を定義することもできます。 
各列のサイズを構造コンポーネントの全幅の 10% 未満にすることはできません。 削除できるのは空の列のみです。
-
「コンテンツ」セクションを展開し、必要な数のコンテンツコンポーネントを 1 つ以上の構造コンポーネントに追加します。
-
必要に応じて、「設定」タブまたは スタイル タブで各コンポーネントに追加のカスタマイズを加えるこ ができ す。
例えば、各コンポーネントのテキストスタイル、パディングまたは余白を変更できます。
-
条件付きコンテンツを追加し、条件付きルールに基づいてコンテンツをターゲットプロファイルに適応させるには、コンテンツコンポーネントを選択し、コンポーネントツールバーの 条件付きコンテンツの有効化 アイコンをクリックします。
詳しくは、条件付きコンテンツ を参照してください。
カスタム CSS を追加
独自のカスタム CSS をランディングページデザインスペース内に直接追加できます。 カスタム CSS を使用して高度な特定のスタイル設定を適用し、コンテンツの外観をより柔軟に制御できます。 画像、ボタン、テキストなどのコンポーネントを含める前に、この最高レベルのスタイルを追加することをお勧めします。
キャンバスに 1 つ以上のコンテンツコンポーネントがある状態で、左側のナビゲーションツリーで 本文 コンポーネントを選択して、カスタム CSS エディターにアクセスします。
-
右側に表示される スタイル タブで、「カスタム CSS を追加 をクリックします。
note note NOTE 「カスタム CSS を追加」ボタンは、「Body」コンポーネントが選択されている場合にのみ使用できます。 ただし、カスタムの CSS スタイルを、その中のすべてのコンポーネントに適用できます。 カスタム CSS を追加 ポップアップエディターが、プレースホルダーコードのコメントと共に表示されます。
-
エディターに CSS コードを入力します。
カスタム CSS が有効で、適切な構文に従っていることを確認します。 入力した CSS が無効な場合は、エラーメッセージが表示され、CSS を保存できません。 詳しくは、CSS の有効性 を参照してください。
-
「保存」をクリックして、カスタム CSS を保存します。
カスタムスタイルシートは、既存のコンテンツに適用されます。 必要に応じて、カスタム CSS が適用されていることを確認できます。 スタイルシートのアプリケーションを変更および調整する方法について詳しくは、 トラブルシューティング を参照してください。
アセットの追加
Visual Content Editor で、左側のナビゲーションバーにある Marketo Engage 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 トラッキングを編集
-
左側の リンク アイコン（
-
必要に応じて、編集 （
リンクに タグ を追加することもできます。
作業内容を保存します
保存 をクリックすれば、いつでもドラフトランディングページを保存できます。
引き続きドラフトページに編集を加えることができます。 ページを表示し、メールまたは SMS メッセージでのリンクに使用できるようにする準備ができたら、ページを公開できます。
オプションを表示
ビジュアルデザインスペースで使用できる表示およびコンテンツの検証オプションを活用します。
-
プリセットのズームオプション全体でコンテンツをズームイン/ズームアウトします。
-
デスクトップ、モバイル、テキストのみ/プレーンテキストのいずれかでコンテンツの表示を切り替えます。
- 表示 アイコンをクリックして、デバイス間でコンテンツをプレビューします。
- 標準提供のデバイスの 1 つを選択するか、カスタムサイズを入力してコンテンツをプレビューします。
詳細オプション
ビジュアルデザインスペースの上部にある その他… メニューから、次の操作を実行できます。
- ランディングページをリセット – このオプションをクリックして、ビジュアルデザインキャンバスを空白のスレートにクリアし、ページコンテンツの作成を再開します。
- デザインを変更 - プライマリランディングページを作成 ホームページに戻ります。 ここから、別のテンプレートを選択してデザインプロセスを再開するか、空白のキャンバスでページをゼロからデザインするかを選択できます。
- HTMLを書き出し - ビジュアルキャンバスのコンテンツを、zip ファイルとしてパッケージ化されたHTML形式のローカルシステムにダウンロードします。