ランディングページのデザイン
ランディングページを作成した後、ビジュアルデザインスペースを使用して、ページ内の構造コンポーネントとコンテンツコンポーネントをオーサリングします。
構造とコンテンツの追加 structure-content-landing-page
-
コンテンツデザインを開始するには、構造からアイテムをドラッグして、キャンバスにドロップします。
必要な数だけ 構造 の項目を追加し、右側のペインで各項目の設定を編集します。
note tip TIP n:n列 コンポーネントを選択して、選択した列数（3 ～ 10個）を定義します。 列の下にある矢印を移動して、各列の幅を定義することもできます。 
各列のサイズは、構造コンポーネントの全幅の10%未満にすることはできません。 削除できるのは空の列のみです。
これらのコンポーネントの使用と書式設定について詳しくは、構造コンポーネント を参照してください。
-
「コンテンツ」セクションを展開し、必要な数のコンテンツコンポーネントを1つ以上の構造コンポーネントに追加します。
-
必要に応じて、設定またはスタイル タブで、各コンポーネントに対して追加のカスタマイズを行うことができます。
例えば、各コンポーネントのテキストスタイル、パディング、マージンを変更できます。
-
条件付きコンテンツを追加し、条件付きルールに基づいてターゲットプロファイルにコンテンツを適応させるには、コンテンツコンポーネントを選択し、コンポーネントツールバーの「条件付きコンテンツを有効にする」アイコンをクリックします。
詳しくは、条件付きコンテンツを参照してください。
カスタム CSS を追加
ランディングページのデザインスペース内で、独自のカスタム CSSを直接追加できます。 カスタム CSSを使用して、高度で特定のスタイルを適用し、コンテンツの外観をより柔軟に制御できます。 画像、ボタン、テキストなどのコンポーネントを含める前に、この最高レベルのスタイル設定を追加することをお勧めします。
キャンバス内に少なくとも1つのコンテンツコンポーネントがある場合は、左側のナビゲーションツリーでBody コンポーネントを選択して、カスタム CSS エディターにアクセスします。
-
右側に表示されている「スタイル」タブで、「カスタム CSSを追加」をクリックします。
note NOTE カスタム CSSを追加ボタンは、Body コンポーネントが選択されている場合にのみ使用できます。 ただし、その中のすべてのコンポーネントにカスタム CSS スタイルを適用できます。 カスタム CSSを追加 ポップアップエディターが、プレースホルダーコードコメント付きで表示されます。
-
エディターにCSS コードを入力します。
カスタム CSSが有効であり、適切な構文に従っていることを確認します。 入力したCSSが無効な場合は、エラーメッセージが表示され、CSSを保存できません。 詳しくは、CSS validityを参照してください。
-
「保存」をクリックして、カスタム CSSを保存します。
カスタムスタイルシートが既存のコンテンツに適用されます。 必要に応じてカスタム CSSが適用されていることを確認できます。 スタイルシート アプリケーションを変更および調整する方法について詳しくは、 トラブルシューティング を参照してください。
アセットの追加
ビジュアルコンテンツエディターで、左側のナビゲーションバーでAssets （
-
画像アセットを構造コンポーネントにドラッグ&ドロップして、新しいアセットを追加します。
-
既存の画像アセットをキャンバスで選択し、画像ソースツールで「アセットを選択」をクリックして置き換えます。
ソースタイプのアセットの使用について詳しくは、 コンテンツのオーサリングにアセットを使用を参照してください。
フォームを追加
フォームは、複数のランディングページとランディングページテンプレートで参照できる、再利用可能なコンポーネントです。 これは、フィールドブロックと送信ボタンで構成され、事前に作成してすばやく挿入することで、ページデザインをより迅速に、より一貫性のあるものにできます。
次の例では、ランディングページをデザインする際にフォームを追加する手順の概要を説明します。
-
目次 セクションの下で、フォーム項目をドラッグして、ページデザインスペースの構造コンポーネントにドロップします。
note tip TIP フォームを追加してページ内の水平レイアウト全体を占めるには、1:1列構造を追加してから、フォームをドラッグ&ドロップします。 -
コンポーネントツールバーの「フォーム」アイコンをクリックするか、右側の「フォームを埋め込む」プロパティを使用して、公開したフォームを選択します。
-
フォームのデフォルトの フォローアップタイプ を上書きする場合は、ページまたはテンプレートの要件に従って設定を変更します。
これはフォームの ありがとうページ とも呼ばれ、この設定により、訪問者がフォームを送信したときに何が起こるかが決まります。
-
ページを維持 - フォームの送信時に訪問者を同じページに維持するには、このオプションを選択します。
-
ランディングページ – 他のランディングページをフォローアップとして選択するには、このオプションを選択します。
-
外部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 トラッキングを編集
リンクトラッキングパネルには、コンテンツ内の各URLを簡単に見つけることができる一元的なビューが用意されています。 左側のリンク アイコン（
リストされたコンテンツリンクのトラッキングを定義するには、編集 （
トラッキングタイプを使用して、リンクのトラッキングを制御します。
- トラッキング済み - リンク URLでトラッキングをアクティブ化します。
- なし - リンク URLのトラッキングをアクティブ化しません。
作品を保存
いつでも 保存 をクリックして、ドラフト ランディングページを保存します。
引き続きドラフトページを編集できます。 ページを表示し、電子メールまたはSMS メッセージでリンクできるようにする準備ができたら、ページを公開できます。
表示オプション
ビジュアルデザイン分野で利用可能な表示およびコンテンツ検証オプションを活用します。
-
プリセットのズームオプション全体でコンテンツをズームイン/ズームアウトします。
-
デスクトップ、モバイル、またはテキストのみ/プレーンテキストのコンテンツ表示を切り替えます。
- デバイス間でコンテンツをプレビューするには、表示 アイコンをクリックします。
- すぐに使えるデバイスのいずれかを選択するか、カスタムディメンションを入力してコンテンツをプレビューします。
詳細オプション
ビジュアルデザインスペースの上部にある「その他…」メニューから、次の操作を実行できます。
- ランディングページをリセット – このオプションをクリックすると、ビジュアルデザインキャンバスが空白のスレートに消去され、ページコンテンツの作成が再開されます。
- デザインを変更 - メインのランディングページの作成のホームページに戻ります。 そこから、別のテンプレートを選択してデザインプロセスを再開するか、空白のキャンバスでページをゼロからデザインするかを選択できます。
- HTMLを書き出し - ビジュアルキャンバスのコンテンツを、zip ファイルとしてパッケージ化されたHTML形式でローカルシステムにダウンロードします。