すぐに使えるAccount Engagement（旧 Pardot）レイアウトテンプレート｜作成手順とカスタマイズ事例を紹介

Account Engagement（旧 Pardot）を活用して効率的なマーケティング施策を展開する上で欠かせないのが「レイアウトテンプレート」の最適化です。

しかし、いざテンプレートを作成しようとすると「どこから手をつければ良いかわからない」「HTMLやCSSの知識がないと難しそう」と悩む方も少なくありません。

実はAccount Engagementのレイアウトテンプレートは基本構造を押さえれば、初心者でも十分にカスタマイズが可能です。

この記事ではAccount Engagementレイアウトテンプレートの概要から作成手順、カスタマイズ方法、無料で使える事例テンプレートまでをわかりやすく解説します。これから初めてPardotのテンプレートを扱う方でも読み進めることで実践に活かせる知識が身につく内容です。

Account Engagementの基本的な理解については以下の記事も参考にしてください。

Account Engagement（旧 Pardot）とは？機能や特徴・機能・費用・導入メリットまで徹底解説 | Strh株式会社(ストラ)

Account Engagement（旧 Pardot）レイアウトテンプレートとは

マーケティングオートメーションツールAccount Engagementを活用する上で欠かせないのが「レイアウトテンプレート」です。

HTMLメールやランディングページ、フォームといったマーケティング資産のデザインと構造を規定するテンプレートで、企業のブランドイメージやUXの最適化に大きく寄与します。

本章ではこのレイアウトテンプレートの基本構造やメリット、標準テンプレートの限界について解説します。

Account Engagement（旧 Pardot）レイアウトテンプレートの基本知識

Account EngagementのレイアウトテンプレートはHTMLおよびCSSによって構成されており、メールやランディングページの見た目と構造を定義するために用いられます。

これらのテンプレートは繰り返し使用することが可能でブランディングの一貫性を保ちながら、日々の運用を効率化できます。主な活用先は、HTMLメール、ランディングページ、フォームです。

これらのテンプレートには静的なデザイン要素に加え、受信者ごとにコンテンツを動的に変化させる変数タグ（例：%%first_name%%）やUI上で編集可能なエリアを指定する<pardot-region>タグが含まれています。

また各メールクライアントでの表示崩れを防ぐため、インラインスタイルや内部CSSによる対応も重要です。これらを適切に設計・実装することで、デザインの自由度と実用性を両立できます。

Account Engagement（旧 Pardot）レイアウトテンプレート利用のメリット

レイアウトテンプレートの導入によってただページやメールの見た目を整えるだけでなく、企業の信頼性向上やユーザー体験の改善、そして成果指標であるコンバージョン率の向上にもつながります。

ここでは具体的にどのような利点があるのかを3つの観点から見ていきましょう。

ブランドに合ったデザインで信頼性を高められる

テンプレートに企業のブランドカラーやロゴ、統一されたフォントを取り入れることで、ユーザーに安心感を与えるデザインが実現できます。

公式感のあるビジュアルは信頼性を高める要素となり、フォームやランディングページの利用をためらわせる要因を軽減します。結果としてユーザーがスムーズに行動を起こしやすくなり、入力完了率の向上が期待できます。

ユーザー体験（UX）が向上する

入力しやすいレイアウトや適切なガイドのあるフォームはユーザーのストレスを軽減し、スムーズな操作体験を提供します。

項目ごとの余白や配置の最適化、プレースホルダーの活用、モバイル対応といった工夫により視認性や操作性が向上し入力の離脱率を抑えることが可能です。こうしたUX設計は、成果につながる導線設計の土台とも言えるでしょう。

コンバージョン率の向上につながる

視認性や操作性に優れたレイアウトは、ユーザーの離脱を防ぐ重要な要素です。例えば入力欄の間隔や余白を最適化することで、情報の読み取りやすさが向上します。

また入力ガイドやプレースホルダーを設置することで、初めてのユーザーでも迷わずに操作できエラーやフラストレーションを軽減できます。

さらにスマートフォンやタブレットといったモバイル端末へのレスポンシブ対応も欠かせません。あらゆる環境でストレスなく操作できることで、UXの質が全体的に高まります。

標準テンプレートの限界と課題

Account Engagementに標準搭載されているレイアウトテンプレートは、すぐに利用できる利便性がある一方で柔軟性に欠ける点も存在します。

またレスポンシブ設計が不十分なテンプレートもあり、スマートフォンでの表示に問題が生じる可能性もあります。こうした制約を回避するには必要に応じてカスタムテンプレートを設計・導入し、戦略に応じた自由度の高いデザインを実現することが推奨されます。

Account Engagement（旧 Pardot）レイアウトテンプレートの作成方法

Account Engagementではレイアウトテンプレートを自社仕様にカスタマイズすることで、ランディングページやフォームのデザイン品質と運用効率を大幅に高めることができます。

本章ではテンプレートの新規作成から、レイアウトやフォーム構造の設定、保存・適用に至るまでの一連の流れを具体的に紹介します。

Account Engagement（旧 Pardot）の ランディングページの作成方法やレスポンシブ対応方法、注意点を詳しく解説 | Strh株式会社(ストラ)

①レイアウトテンプレートの作成

Account Engagementでレイアウトテンプレートを作成する手順は、コンテンツの一貫性を保ちながら、ランディングページやフォームのスタイルを柔軟に管理するための第一歩です。テンプレートは再利用が可能で、運用の効率化にも大きく貢献します。

1.Account Engagementにログインし、画面上部のメニューから「コンテンツ」タブを選択します。

2.表示されたメニュー内から「レイアウトテンプレート」をクリックし、「＋レイアウトテンプレートを追加」を選びます。

3.作成画面で名前を入力し、任意でフォルダーやタグを設定することで、整理・管理しやすくなります。

②レイアウトの設定

テンプレートの外観を決定するレイアウトの設定は、ユーザー体験やブランド訴求力に直結する重要なプロセスです。主にHTMLとCSSを用いてデザインを構築し、視認性や操作性を意識した調整が求められます。

レイアウトタブではコンテンツの配置を明示するために変数タグ（例：%content%）を活用し、柔軟なレイアウトを実現します。

また既存のウェブページのデザインを取り込む際は、インポート機能が便利です。URLを指定してインポートを実行することで、ベースとなる構造をすばやく整えることができます。

➂フォームとサイト検索の設定

テンプレートの基本デザインを整えたら、フォームとサイト検索に関する詳細設定を行います。これによりユーザーとのインタラクションや情報収集を効率的に行えるようになります。

フォームタブでは、必要なフォームフィールドの配置やスタイルをカスタマイズ可能です。例えば姓と名の表示順や必須項目の強調表示など、入力のしやすさに配慮した設計が求められます。

またサイト検索タブでは、検索結果の表示レイアウトを指定できます。これによりユーザーがWebサイト内で検索した際の情報提示の方法をコントロールでき、利便性の向上につながります。

④テンプレートの保存と適用

すべての設定が完了したらテンプレートを保存し、マーケティング資産への適用を行います。適切に保存・選択することで今後の運用でテンプレートを再利用でき、作業の手間を省くことが可能です。

1.各設定が整ったら、左下の「保存」ボタンをクリックします。

2.新しいランディングページを作成する際、使用するテンプレートとして今回作成したものを選択します。

これによりあらかじめ整えたデザインを基盤にしたページ制作が可能となり、短時間で品質の高いコンテンツが作成できます。テンプレート活用を習慣化することで、マーケティング活動の質と速度がともに向上します。

Account Engagement（旧 Pardot）レイアウトテンプレートのCSSカスタマイズ方法

レイアウトテンプレートの設計において、HTMLだけでなくCSSを活用することで見た目の自由度が格段に広がります。

Account EngagementではテンプレートごとにカスタムCSSを追加することができ、文字サイズや余白の調整、ボタンデザインの変更、エラーメッセージの強調などユーザー体験の向上につながる細やかなカスタマイズが可能です。

本章ではよく使われるCSSの調整項目を4つに分けて、具体的な記述例とともに解説します。

文字サイズ・色・余白の変更方法

テキストの視認性を高めて読みやすいフォームを作成するためには、文字サイズや色、段落ごとの余白などの調整が欠かせません。Account Engagementtの「レイアウト」タブにカスタムCSSを追加することで、これらのスタイルを自由に設定できます。

#pardot-form {

  font-size: 16px; /* 文字サイズ */

  color: #333333; /* 文字色 */

}

#pardot-form p {

  margin: 10px 0; /* 余白の設定 */

}

またカスタマイズの効果を正しく反映させるには、デフォルトCSSの読み込みを無効にする設定も重要です。これにより独自に定義したスタイルが優先的に適用され、狙い通りのデザインを実現できます。

ボタンのデザインカスタマイズ

CTAボタンはユーザーの行動を促すための重要な要素です。ブランドカラーに合わせた配色や視認性の高いスタイルを設定することでクリック率の向上が期待できます。以下はPardotの送信ボタンをカスタマイズするためのCSSの例です。

#pardot-form .submit-button {

  background-color: #007bff; /* ボタンの背景色 */

  color: white; /* ボタンの文字色 */

  padding: 10px 20px; /* ボタンの内側の余白 */

  border: none; /* ボタンの枠線をなしに */

  border-radius: 5px; /* ボタンの角を丸く */

  cursor: pointer; /* カーソルをポインターに */

}

#pardot-form .submit-button:hover {

  background-color: #0056b3; /* ホバー時の背景色 */

}

このようなスタイル設定により視覚的に魅力的で押しやすいボタンを作成でき、ユーザーのアクションを自然に促すことが可能になります。

必須項目のCSSスタイル設定

フォームにおける必須項目は、ユーザーが入力を漏らさないよう明示することが重要です。Account Engagementでは.requiredというクラスが用意されており、これを活用して必須フィールドを強調表示できます。

#pardot-form p.required, #pardot-form span.required {

  font-weight: bold; /* フォントを太字に */

  color: red; /* 文字色を赤に */

}

#pardot-form p.required:after {

  content: ” *”; /* 必須マークを追加 */

  color: yellow; /* マークの色を黄色に */

}

デフォルトでは「*」やアイコンで表示される必須マークもCSSを使えば「必須」などのテキストに変更可能です。こうしたカスタマイズを行う際には、使用しているテンプレートのHTML構造に応じた適切なセレクタの指定が必要です。

HTMLとCSSの関係性を意識したスタイリングにより、より分かりやすく親切なフォームを実現できます。

エラーメッセージのスタイル

フォーム入力にエラーが発生した際、ユーザーがその内容をすぐに理解できるように視覚的な強調が求められます。CSSを活用することでエラーメッセージを目立たせることが可能です。

#pardot-form .error {

  color: red; /* エラーメッセージの文字色 */

  font-weight: bold; /* 太字 */

  margin-top: 5px; /* 上部の余白 */

}

エラーメッセージのスタイルを適切に設定することでユーザーがどこに問題があるかをすぐに把握でき、入力の再試行もスムーズになります。結果としてフォームの完了率向上にもつながるため必ず調整しておきたいポイントです。

Account Engagement（旧 Pardot）レイアウトテンプレート作成時の注意点と対処法

Account Engagementのレイアウトテンプレートは、自由度の高いデザインが可能な一方で正しく活用するにはいくつかの技術的・運用的なポイントを押さえる必要があります。

特にコーディングの知識やレスポンシブ対応、動的コンテンツの扱い方、テンプレートの管理方法など事前に理解しておくことで、ミスや工数の増加を防げる項目が多く存在します。

本章ではテンプレート作成時によくある課題とその対処法について、実践的な視点から解説します。

コーディングの知識が必要

Account Engagementのレイアウトテンプレートを自在にカスタマイズするためには、HTMLとCSSに関する基本的な知識が求められます。

フォームやランディングページのレイアウトや配色、フォントスタイルを変更するには構造を正しく理解し、適切なコードを記述する必要があります。

例えばフォントサイズや余白を調整するだけでもCSSを用いる場面が多く、正しい書式と適用範囲を把握しておくことが重要です。知識が不十分なまま編集を行うと表示崩れやレイアウトの破綻が起きやすくなるため、基礎スキルの習得は不可欠です。

レスポンシブデザインの考慮

スマートフォンやタブレットなどユーザーが利用するデバイスは多様化しています。そのためAccount Engagementのテンプレートも画面サイズに応じた柔軟なデザインが求められます。

具体的にはCSSのメディアクエリを使用して、表示サイズに応じたフォントやコンテンツ幅の調整を行います。

これによりどのデバイスからアクセスしても閲覧性が損なわれず、ユーザーにとって快適な操作環境を提供できます。モバイル対応が不十分なテンプレートは離脱率を高めてしまう要因にもなるため、レスポンシブ対応は重要な工程のひとつです。

変数タグの正しい使用

Account Engagementでは変数タグを利用することで、動的にコンテンツを切り替えることが可能です。例えば「%%title%%」「%%first_name%%」などのタグを使用することで、ユーザーに合わせたパーソナライズされた表示が実現できます。

これらのタグを適切に使うことでテンプレートの汎用性が向上し、運用の効率化にもつながります。

ただし構文のミスや対応していないタグを使用すると意図した情報が表示されなくなることもあるため、公式のタグ一覧などを確認しながら正確に活用することが大切です。

テンプレートの整理

テンプレートを複数運用する場合、ファイルやデータの管理方法によって作業効率が大きく左右されます。すべてのテンプレートに対して明確な命名規則を設定し、用途ごとにフォルダーやタグで分類することで必要なテンプレートをすぐに見つけることができます。

また過去のバージョンを残すなどの管理体制を整えておくことで、誤って削除・上書きした際にも復旧が可能になります。定期的に不要なテンプレートを整理することも、管理の手間を減らす有効な手段です。

テストとプレビューの重要性

テンプレートを本番環境で使用する前に、必ずテストとプレビューを実施することが欠かせません。表示崩れや動作の不具合がないかを事前に確認し、必要に応じて調整を行うことでユーザーに不快な体験を与えるリスクを防ぐことができます。

特に異なるブラウザやデバイスでの表示をチェックすることで、意図しない見た目のズレを発見できる場合があります。また社内でフィードバックを受けながら改善を重ねることで、完成度の高いテンプレートを提供できるようになります。

無料で使えるAccount Engagement（旧 Pardot）レイアウトテンプレート

レイアウトテンプレートをゼロから作成するには一定の技術や時間が必要ですが、あらかじめ用意されたテンプレートを活用することで作業効率を大きく向上させることができます。

本章では特に実用性の高いテンプレートとして「姓・名を横並びに表示するフォーム」と「住所検索機能付きフォーム」の2種類をご紹介します。どちらも無料で使用でき、実務にすぐに取り入れられる形式です。

姓・名を横並びに表示するテンプレート

ユーザーにとって入力しやすいフォームを提供するためには、フィールドの配置にも工夫が必要です。特に名前の入力欄は「姓」「名」を1行に並べることで視認性と操作性が向上します。

以下のテンプレートは、姓と名を横並びに配置したシンプルかつ使いやすいフォーム構造になっています。CSSによるスタイリングも施されており、そのままPardotにインポートして使用することが可能です。ブランドカラーやフォントの調整を加えることで、自社仕様に簡単にカスタマイズできます。

テンプレートは以下よりダウンロードいただけます。

まとめ

Account Engagementのレイアウトテンプレートは、単なるデザインのためのツールではなくブランドの信頼性を高めてユーザー体験を最適化し、コンバージョンに直結する重要な要素です。

作成時にはHTML/CSSの基礎知識やレスポンシブ対応、変数タグの正しい使用など多くの点に配慮が必要となります。しかし一度しっかりと整備されたテンプレートを用意すれば、以後の運用が大幅に効率化されます。

本記事で紹介した内容をもとに自社の目的に合ったテンプレートを構築・活用することでAccount Engagementの導入効果をさらに高めることができるでしょう。

特に無料テンプレートをうまく活用することで開発工数を抑えつつ質の高いマーケティング施策を実現できます。今後の運用にぜひお役立てください。

また、ストラのAccount Engagementの導入支援、定着化・活用支援について、さらに詳しく知りたい方はこちらのページで紹介しています。

• Account Engagement （旧Pardot）導入支援
• Account Engagement （旧 Pardot） 定着化・活用支援