Show Menu
トピック×

ランディングページのデザイン

ランディングページコンテンツデザインのコンテンツデザインについて

ランディングページは、任意の マーケティングアクティビティ として作成されます。
ランディングページをデザインする場合、ページそのもの、確認ページ、エラーページのコンテンツを定義する必要があります。アクションバーの下の切り替えボタンを使用して、各ページを表示し設定します。
ランディングページのコンテンツは、キャンペーンのコンテンツエディターを使用してデザインします。
Adobe Campaign Standard 19.0 リリースより前にインストールしたインスタンスでも、従来のメールコンテンツエディターにアクセスできます。インターフェイス、使用上の原則、設定は、ランディングページについて以下で説明するものとほとんど同じです。ただし、19.0 リリース以降では非推奨となる、従来のメールコンテンツエディターでは、すべての機能を使用または維持できない場合があります。拡張機能を備えたドラッグ&ドロップインターフェイスでメールコンテンツをすばやく編集するには、 メールデザイナー を使用します。
ここでは、ランディングページコンテンツエディターに特有の事項について説明します。1 つ以上のマーケティングアクティビティに共通する操作について詳しくは、 E メールコンテンツのデザイン ​ガイドの次の節を参照してください。
HTML 形式で既に定義済みのランディングページがある場合は、「 Change content 」ボタンを使用して直接読み込むことができます。
Adobe Campaign で HTML ページを読み込む前に、様々なブラウザーで HTML ページを開いて適切に表示されることを確認してください。HTML ページに JavaScript スクリプトが含まれている場合、エディターの外部でエラーなしで実行する必要があります。一般に、メールクライアントによって正しく処理されるように、メッセージコンテンツにはスクリプトを使用しないでください。

ランディングページコンテンツエディターのインターフェイス

ランディングページコンテンツエディターを使用すると、Adobe Campaign でコンテンツを簡単に定義、変更およびパーソナライズできます。アクセスするには、ランディングページのダッシュボードで​ Content ​ブロックをクリックします。
コンテンツエディターは 3 つのセクションに分かれています。これらのセクションでは、コンテンツの表示と編集が可能です。
  1. 画面の左側の​ パレット ​を使用すると、選択したブロックにリンクされた一般オプションを変更できます。変更できるオプションは背景色、境界線、テキストの整列、表示条件などです。 パーソナライゼーションフィールドの挿入 を参照してください。
  2. アクションバー ​には、ページの一般的なオプションが含まれています。テンプレートを選択し、表示モードを変更できます。
  3. メイン​ 編集ゾーン ​では、コンテキストツールバーを使用して、コンテンツを直接操作できます。画像にリンクを挿入する、フォントを変更する、フィールドを削除するなどです。
アクションバー ​には、作成中のコンテンツを操作するための様々なボタンが含まれています。
アイコン ボタン名 チャネル 説明
Change content ランディングページとメール 標準搭載のコンテンツを選択するか、独自の HTML コンテンツを読み込むことができます。詳しくは、 既存コンテンツの読み込み を参照してください。
Undo すべて 最後に実行された操作をキャンセルします。
Redo すべて 最後にキャンセルした操作をやり直します。
Show blocks ランディングページとメール コンテンツブロックの周囲にボックスを表示できます( <div> HTML タグに対応)。
Show source ランディングページとメール ページの HTML ソースコードを表示できます。
ツールバー ​はエディターインターフェイスのコンテキスト要素で、選択したゾーンに応じて様々な機能を提供します。テキストのスタイルを変更するためのアクションボタンと各ボタンが含まれています。実行された変更は、常に選択したゾーンに適用されます。ブロックを選択すると、それを削除したり、複製したりできます。ブロック内のテキストを選択した後に、そのテキストをリンクに変えたり、太字にしたりできます。
特定のツールバー機能を使用すると、HTML コンテンツを書式設定できます。ただし、ページに CSS スタイルシートが含まれる場合、スタイルシートからの​ 指示 ​が、ツールバーで指定された指示よりも​ 優先 ​されることがあります。
アイコン ボタン名 コンテキスト 説明
Link to an external URL 任意の要素 URL にリンクを追加できます。リンクの設定方法の詳細については、 リンクの挿入 の節を参照してください。
Link to a landing page 任意の要素 Adobe Campaign ランディングページへのアクセスを許可します。リンクの設定方法の詳細については、 リンクの挿入 の節を参照してください。
Subscription link 任意の要素 サービス購読リンクを挿入できます。リンクの設定方法の詳細については、 リンクの挿入 の節を参照してください。
Unsubscription link 任意の要素 サービス購読解除リンクを挿入できます。リンクの設定方法の詳細については、 リンクの挿入 の節を参照してください。
Remove link リンク 確認後に、リンクおよびリンクにリンクされているすべての設定を削除できます。
Insert a personalization field テキスト要素 データベースからコンテンツにフィールドを追加できます。 パーソナライゼーションフィールドの挿入 を参照してください。
Insert a content block テキスト要素 コンテンツにパーソナライゼーションブロックを追加できます。 コンテンツブロックの追加 を参照してください。
Enable dynamic content テキスト要素 動的コンテンツをコンテンツに挿入できます。 動的コンテンツの定義 を参照してください。
Disable dynamic content テキスト要素 動的コンテンツを削除できます。
Enlarge font テキスト要素 選択したテキストのサイズを拡大します( <span style="font-size:"> を追加します)。
Reduce font テキスト要素 選択したテキストのサイズを縮小します( <span style="font-size:"> を追加します)。
Bold テキスト要素 選択したテキストに太字スタイルを追加します( <strong> </strong> タグでテキストを囲みます)。
Italic テキスト要素 選択したテキストに斜体スタイルを追加します( <em> </em> でテキストを囲みます)。
Underline テキスト要素 選択したテキストに下線を付けます( <span style="text-decoration: underline;"> タグ)。
Change background color テキスト要素 選択したブロックの背景色を変更できます(style="background-color: rgba(170, 86, 255, 0.87) を追加します)。
Change font color テキスト要素 ブロック内のすべてのテキストの色、またはブロック内で選択されているテキストのみの色を変更できます( <span style="color: #56ff56;"> )。
Image 画像を含むブロック ローカルに保存されたファイルから画像を挿入できます。
Delete 任意のブロック ブロックとその内容を削除します。
Duplicate 任意のブロック リンクされているスタイルを含むブロックを複製します。

ランディングページの構造とスタイルの管理

コンテンツエディターでのブロックの管理

様々な HTML コンテンツ要素がブロック( <div> </div> タグに対応)としてランディングページに表示されます。操作するブロックを選択します。そのブロックが青いボックスで囲まれます。
ブロックを選択した場合、対応する HTML 要素の親オブジェクトが、編集ゾーンの下部にあるパンくずリストに表示されます。
パンくず要素の 1 つにマウスを合わせると、関連する要素がハイライト表示されます。したがって、様々なブロック間を簡単に移動でき、変更する HTML 要素を正確に選択できます。
パレットとコンテキストツールバーのオプションを使用すると、ブロックの変更、削除、複製をおこなえます。
テキストを含むブロックの場合は、ブロック内を再度クリックして、テキスト編集モードを有効にします。ブロックの周りのフレームが緑色に変わります。その後、テキストを選択または入力できます。パレットとコンテキストツールバーのオプションを使用すると、リンクを追加したり、テキストの書式設定を変更したりできます。
ブロック内の要素(リンク、パーソナライゼーションフィールド、コンテンツブロックなど)に対して定義されたパラメーターは、パレットからいつでも変更できます。

コンテンツエディターでの境界線と背景の追加

また、チャートから色を選択することで、 背景色 ​を定義できます。この色は、選択したブロックに適用されます。
選択したブロックに​ 境界線 ​を追加できます。

コンテンツエディターでのテキストスタイルの変更

テキストのスタイルを変更するには、テキストブロック内をクリックする必要があります。
テキストの整列を変更するには、左側のパレットで次の 3 つのアイコンのいずれかを選択します。
  • 左揃え :選択されたブロックの左側にテキストを揃えます(style="text-align: left;" を追加します)。
  • 中央揃え :選択されたブロック内のテキストを中央に配置します(style="text-align: center;" を追加します)。
  • 右揃え :選択されたブロックの右側にテキストを揃えます(style="text-align: right;" を追加します)。
ツールバーを使用してフォント属性を変更することもできます。フォントサイズを調整し、テキストを太字または斜体にしたり、テキストに下線を引いたり、テキストの色を変更したりします。 こちらの節 を参照してください。

ランディングページへの画像の挿入

  1. ランディングページコンテンツで、画像を含んだブロックを選択します。
  2. Insert 」ボタンをクリックします。
  3. コンテキストツールバーから「 Local image 」を選択します。
  4. ファイルを選択します。
  5. 必要に応じて画像のプロパティを調整します。

ランディングページへの動的コンテンツの定義

ランディングページに動的コンテンツを定義するには、パンくずリストを使用するか要素を直接クリックして、ブロックを選択します。
画像などの特定のブロックは直接選択できません。その場合は、パンくずリストを使用して親ブロックを選択します。その後、この親要素に含まれるすべての要素(画像を含む)を変更できます。この条件は、親ブロック内のすべての子要素に適用されます。
パンくずリストについては、 ブロックの管理 の節を参照してください。
ランディングページに動的コンテンツを定義するための次の手順は、E メールの場合と似ています。 こちらの節 を参照してください。
バリエーション要素が赤でアウトライン表示されている場合は、式がまだ定義されていないことを意味します。
ブロックの様々は動的コンテンツ間を移動できます。手順は次のとおりです。
  1. ブロックを選択します。
    画像の右側と左側に矢印が表示されます。
  2. 右向き矢印をクリックして、使用可能な動的コンテンツを参照します。
    使用可能な最後の動的コンテンツに達したか、最初の動的コンテンツに達したかに応じて、片側の矢印が淡色表示されます。
  3. ブロックに適用されたすべての条件を削除するには、そのブロックを選択し、「 Disable dynamic content 」アイコンをクリックします。
  4. 保持する動的コンテンツを選択します。
パレット内は次のようになります。
  • 式が入力されているコンテンツは、赤くアウトライン表示されなくなり、灰色で表示されます。
  • 現在選択されているコンテンツは青色で表示されます。