Show Menu
トピック×

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

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

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

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

ランディングページのコンテンツエディターを使用すると、Adobe Campaignでコンテンツを簡単に定義、変更およびパーソナライズできます。 このページにアクセスするには、ランディングペ Content ージのダッシュボードのブロックをクリックします。
コンテンツエディターは3つのセクションに分かれています。 これらのセクションでは、コンテンツを表示および編集できます。
  1. 画面 の左側のパレット では、選択したブロックにリンクされた一般オプションを変更できます。 変更できるオプションは次のとおりです。背景色、境界線、テキストの整列、表示条件など See Inserting a personalization field .
  2. アクシ ョンバーに 、ページの一般的なオプションが表示されます。 テンプレートを選択し、表示モードを変更できます。
  3. メインの編集 ゾーンでは 、コンテキストツールバーを使用してコンテンツを直接操作できます。画像へのリンクの挿入、フォントの変更、フィールドの削除など
アクシ ョンバーには 、作成中のコンテンツを操作するための様々なボタンが含まれています。
アイコン ボタン名 チャネル 説明
コンテンツの変更 ランディングページと電子メール そのまま使用できるコンテンツを選択したり、独自のHTMLコンテンツを読み込んだりできます。 詳しくは、既存 のコンテンツの読み込みを参照してくださ い。
元に戻す すべて 最後に実行された操作をキャンセルします。
やり直し すべて 最後に取り消した操作をやり直します。
ブロックを表示 ランディングページと電子メール コンテンツブロックの周囲のボックスを表示できます( <div> HTMLタグに対応)。
ソースを表示 ランディングページと電子メール ページのHTMLソースコードを表示できます。
ツール バーは 、エディタインターフェイスのコンテキスト要素で、選択したゾーンに応じて様々な機能を提供します。 テキストのスタイルを変更できるアクションボタンとボタンが含まれます。 実行された変更は、常に選択したゾーンに適用されます。 例えば、ブロックを選択したら、そのブロックを削除または複製できます。 ブロック内のテキストを選択した後、リンクにしたり、太字にしたりできます。
特定のツールバー機能を使用すると、HTML コンテンツを書式設定できます。However, if the page contains a CSS style sheet, the instructions from the style sheet may prove to take priority over the instructions specified via the toolbar.
アイコン ボタン名 コンテキスト 説明
外部 URL へのリンク 任意の要素 URLにリンクを追加できます。 リンクの設定方法の詳細については、「リンクの挿入」セクシ ョンを参照してくださ い。
ランディングページへのリンク 任意の要素 Adobe Campaignのランディングページへのアクセスを許可します。 リンクの設定方法の詳細については、「リンクの挿入」セクシ ョンを参照してくださ い。
購読リンク 任意の要素 サービス購読リンクを挿入できます。 リンクの設定方法の詳細については、「リンクの挿入」セクシ ョンを参照してくださ い。
購読解除リンク 任意の要素 サービスの購読解除リンクを挿入できます。 リンクの設定方法の詳細については、「リンクの挿入」セクシ ョンを参照してくださ い。
リンクを削除 リンク 確認後に、リンクと、そのリンクにリンクされているすべての設定を削除できます。
パーソナライゼーションフィールドの挿入 テキスト要素 データベースからコンテンツにフィールドを追加できます。 詳しくは、パーソナ ライゼーションフィールドの挿入を参照してくださ い。
コンテンツブロックの挿入 テキスト要素 コンテンツにパーソナライゼーションブロックを追加できます。 詳しくは、「コンテ ンツブロックの追加」を参照してくださ い。
動的コンテンツの有効化 テキスト要素 動的なコンテンツをコンテンツに挿入できます。 動的コンテンツ の定義を参照してください
動的コンテンツの無効 テキスト要素 動的コンテンツを削除できます。
フォントを拡大 テキスト要素 選択したテキストのサイズを拡大します( <span style="font-size:"> )。
フォントを縮小 テキスト要素 選択したテキストのサイズを縮小しま す(<span style="font-size:"> )。
太字 テキスト要素 選択したテキストに太字スタイルを追加します(テキストを <strong> </strong>タグで囲みます )。
斜体 テキスト要素 選択したテキストに斜体スタイルを追加します(テキストを<em> </em>タグで囲みます )。
下線 テキスト要素 選択したテキストに下線を付けます( <span style="text-decoration:underline;"> tag)。
背景色の変更 テキスト要素 選択したブロックの背景色を変更できます(style="background-color:rgba(170, 86, 255, 0.87))を参照してください。
フォントの色の変更 テキスト要素 ブロック内のすべてのテキストの色、またはブロック内で選択されたテキストのみの色を変更できます( <span style="color:#56ff56;"> )。
画像 画像を含むブロック ローカルに保存されたファイルから画像を挿入できます。
削除 任意のブロック ブロックとその内容を削除します。
複製 任意のブロック リンクされたスタイルを含むブロックを複製します。

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

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

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

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

You can also define a background color by selecting a color from the chart. この色は選択したブロックに適用されます。
You can add a border to the selected block.

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

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

ランディングページへのイメージの挿入

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

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

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