Account Engagement（旧Pardot）フォームデザイン完全ガイド 2024年07月01日
マーケティングオートメーションの強力なツールとして知られるAccount Engagement（旧Pardot）は、多くの企業がリードジェネレーションやカスタマーエンゲージメントの向上に利用しています。
その機能のひとつがフォームです。
Account Engagementを最大限活用するために、フォーム作成のコツとカスタマイズの手順をお伝えします！
- CONTENTS
-
1.デフォルトのpardotフォームデザインはCVRが低い？
Account Engagement（旧Pardot）は、多くの企業が利用するマーケティングオートメーションツールですが、デフォルトのフォームデザインにはいくつかの課題があります。
デフォルトのフォームはシンプルなデザインで、ユーザー体験の観点では充分とは言い切れません。
そのため、ユーザーがフォームを入力する際にストレスを感じやすく、結果として入力完了率（CVR）が低くなることがよくあります。
↑デフォルトのフォームイメージ
この問題を解決するため、フォームデザインのカスタマイズを行い、ユーザーにとって入力しやすいフォームにしましょう。
-
2.Account Engagement（旧Pardot）フォームデザインをカスタマイズするメリット３つ
ここからは、フォームデザインをカスタマイズすることで得られるメリットをご紹介します。
メリット①：自社のブランドに合わせたデザインにできる
フォームを自社のブランドカラーやロゴでカスタマイズすることで、ユーザーに公式のフォームである信頼感を高めます。自社ブランドとの統一感を持ったデザインにするための方法は以下の通りです。
- ブランドカラーの使用：フォームの背景やボタンに自社のブランドカラーを使用します。これにより、一貫性のあるデザインのユーザーエクスペリエンスが提供され、ブランドの公式なフォームであると認識が強まります。
- ロゴの追加：フォームに自社のロゴを配置します。ロゴは信頼性の象徴であり、ユーザーが安心して情報を入力できるようになります。
- サイトのコンテンツと同じフォントの使用：フォームに到達するまでに閲覧したサイトなどのコンテンツと同様のフォントを使用します。一貫したフォントを使用することで公式フォームの認識を高めます。
メリット②：ユーザー体験の向上
フォームデザインをカスタマイズすることで、ユーザー体験を大幅に向上させることができます。使いやすく、入力しやすいデザインは、ユーザーがストレスなくフォームを完了するために不可欠です。具体的な改善点は以下の通りです。
- レイアウトの最適化
入力項目の配置や間隔を調整し、視覚的な負担を減らします。余白の位置調整によってモバイルの誤タップを防ぐことができます。 - ガイドラインの追加
入力例やヒントを提供することで、ユーザーが迷わずに入力できるようにします。入力例があることで、フォーム送信時のエラー発生を減らすことができますので、ユーザーの負担を軽減することができます。 - レスポンシブデザイン
モバイルデバイスでも快適に入力できるよう、モバイルデバイス向けのデザインを表示するために、レスポンシブ対応のカスタマイズを行います。
ユーザーがフォーム入力中に感じるストレスを最小限に抑えることで、入力完了率を向上させることができます。
メリット③：コンバージョン率の向上
見やすく、入力しやすいフォームデザインは、コンバージョン率を大きく向上させます。以下の要素をカスタマイズすることで、コンバージョン率を向上させることができます。
- 視覚的な訴求力
魅力的なビジュアルデザインはユーザーの注意を引き、入力意欲を高めます。 - 明確なCTA（コール・トゥ・アクション）
目立つ場所に配置された明確なCTAボタンは、ユーザーが次のアクションを取りやすくします。 - エラーメッセージの工夫
入力エラー時のメッセージを分かりやすくすることで、ユーザーがスムーズに修正できるようにします。
カスタマイズされたフォームデザインは、ユーザーにとって使いやすく魅力的であり、結果としてコンバージョン率の向上につながります。
AccountEngagementのデフォルトフォームデザインは汎用性が高い一方で、ユーザー体験やブランドイメージを最大化するには限界があります。
フォームデザインをカスタマイズすることで、自社ブランドに合ったデザインに変更し、ユーザー体験を向上させ、最終的にコンバージョン率を上げることが可能です。 -
Account Engagement（旧Pardot）フォームのデザインをカスタマイズする手順
一般的なHTML及びCSSファイルによるフォームデザインと同様に、Pardotのフォームもデザインを反映するには、HTML及びCSSを使用してスタイルをカスタマイズしていきます。
Pardotのレイアウトテンプレートでカスタマイズ
Pardotでは、レイアウトテンプレートという画面上でHTML及びCSSファイルを使用したスタイルをカスタマイズすることができます。以下の画像は、レイアウトテンプレート画面から、デザインのスタイルをカスタマイズした例です。
Account EngagementはCSSやJsの外部ファイル読み込みも可能
Account Engagementのレイアウトテンプレートでは、CSSやJsの外部ファイル読み込みも可能です。既に作成してあるCSSやJsの外部ファイルを活用した上でカスタマイズしたい場合は、外部ファイル読み込みをレイアウトテンプレートのエディターに記述します。
カスタマイズの注意点
カスタマイズしたフォームデザインのスタイルを反映するためには、レイアウトテンプレート画面下部にある「デフォルトのCSSスタイルシートを含める（推奨）」のチェックを外すことを忘れないようにしましょう。
-
4.フォームの完了率を高める効果的なデザイン
デザインが良いフォームは、ユーザーにとって入力しやすく、ユーザーエクスペリエンスを向上させることができます。
そのため、分かりやすいレイアウトや視覚的に入力補助となるフォームをAccount Engagementで制作しましょう。ここではフォームの入力完了率を高める効果的なデザインを幾つか紹介します。
必須項目と任意項目を分かりやすく表示する
必須項目と任意項目は視覚的に分かりやすくしてユーザーエクスペリエンスを向上しましょう。
必須項目が明示されていると、入力後のフォーム送信時に必要な情報が埋められているかが分かりやすくなるため、ユーザーの負担が軽減されます。さらに、任意項目を明示することで、ユーザーが入力する必要がない情報を省略できるため、フォーム全体の入力の手間が軽減されます。
必須項目と任意項目を明示することで、フォーム送信時のエラーを軽減することができますので、フォームの入力完了率を高めることができます。
入力中の項目を目立たせる
フォーム入力の補助をするために、入力中の項目を目立たせましょう。入力中の項目を目立たせることで、入力中の項目を把握することが簡単になるので、ユーザは集中して入力作業ができて誤入力が減少します。
リアルタイムのエラーチェック
フォームの入力にエラーがある場合は、フォーム送信時に分かるのではなく、リアルタイムで分かるようにしましょう。全ての入力が終わった後にフォーム項目のエラー確認を全体的に行うのはユーザのストレスとなって、フォームの離脱原因になります。リアルタイムでエラーを検知してユーザの負担を軽減するフォームをカスタマイズしましょう。
-
5.まとめ
いかがだったでしょうか。
atsumelではSalesforceだけでなくAccount Engagementの設定支援、開発支援も行なっています。
また、サポートではAccount Engagementをよりご活用いただくための活用支援や設定代行も行なっています。
気になる方はお気軽にお問い合わせください！
