コンテンツエディターでウィジェットとマイクロサイトをカスタマイズする

コンテンツエディターを使えば、ブランドのアイデンティティにシームレスに一致するウィジェットやマイクロサイトを作成でき、お客様に一貫性があり信頼できる体験を提供できます。ブランドが適切に反映された接点は、高いエンゲージメントとプログラムの利用促進に不可欠です。

一元化されたブランディング管理

ウィジェットまたはマイクロサイトのスタイルオプションを使えば、ブランドの中核となるデザイン要素を簡単に見つけて更新できます。すべてのブランディング設定は、専用のブランディングセクションにまとめられています。

ウィジェットやマイクロサイトは、ユーザーがログインしているか、エラーに遭遇しているか、モバイルデバイスで閲覧しているかなど、状況によって表示が異なります。エディターのプレビューを使えば、ウィジェットやマイクロサイトのあらゆる状態を簡単に切り替えて確認できます。

注：プレビューはウィジェット（例：即時アクセスウィジェット）やコンポーネント（例：現金、リワード交換）により適しています。マイクロサイトをプレビューするには、各マイクロサイトのページに移動して状態を確認する必要があります。

これにより、コンポーネントの見た目を確認するために手動で操作を完了する必要がなくなります。これからは、ユーザージャーニーの各ステップにおけるテキストとデザインを安心して編集できます。たとえば、以下が含まれます：

• ログイン済み表示とログアウト時表示
• エラーメッセージと成功メッセージ
• 複数ステップのフローにおける異なる手順（現金支払いの確認など）

ブランディングスタイルをカスタマイズするには：

1. 左側のナビゲーションメニューで、 [Engage] → コンテンツ.

   • ウィジェットの場合は、 ウィジェットを編集 、マイクロサイトの場合は、 コンテンツを編集.
2. 左側メニューで、編集対象をマイクロサイトにするかウィジェットにするかを選択します。
3. 編集したいページテンプレートを選択し、次に ウィジェットのスタイル/マイクロサイトのスタイル.
4. ウィジェットまたはマイクロサイトに表示されるメインカラーを変更するには、ブランドカラーを選択します。
5. 次に、使用したいフォントスタイルを選択します。
6. [任意] 残りのスタイルオプションを順に設定して、ウィジェットまたはマイクロサイト内でブランドアイデンティティを完全にカスタマイズします。

   

スタイルエディター要素の参照

スタイル要素	説明
メインブランドカラー	この色は、ウィジェットまたはマイクロサイト全体のさまざまな要素に使用されるため、この手順は重要です。メインブランドカラーを選択してください。 この色は、編集オプションの下部にあるプライマリボタンおよびセカンダリボタンのセクションでも使用されます。
フォント	ウィジェットまたはマイクロサイトに表示したいフォントスタイルを選択します。
色	ウィジェットまたはマイクロサイトに表示したい各種の色とアクセントを選択します： • 背景 ウィジェットまたはマイクロサイトの背景色を選択します。 • テキスト ウィジェットまたはマイクロサイト内のメインテキストと控えめなテキストの両方のフォントカラーを変更できます。 • アクセントカラー アクセントの色を変更します。これには、ウィジェットまたはマイクロサイト内のタブやアイコンなどの要素が含まれます。 • 追加の色 ウィジェットまたはマイクロサイトの種類に応じて、各要素の色やアクセントをさらに調整できます。
プライマリボタン	プライマリボタンまたはメインボタンの配色を選択します。ボタンの角丸の半径もピクセル単位で調整できます。 展開する ホバー状態 セクションを展開すると、ユーザーがボタンにホバーしたり操作したりしたときにボタンが変化する色をさらに選択または変更できます。
セカンダリボタン	セカンダリボタンの配色を選択します。ボタンの角丸の半径もピクセル単位で調整できます。 展開する ホバー状態 セクションを展開すると、ユーザーがボタンにホバーしたり操作したりしたときにボタンが変化する色をさらに選択または変更できます。
枠線	ウィジェットまたはマイクロサイト内の表やカードなどのコンポーネントの色と枠線の輪郭を変更します。 • 色 枠線の色を選択します。 • 太さ 枠線の太さを決めるために、ピクセル単位を入力してください。 • 角丸半径 枠線の角丸半径を決めるために、ピクセル単位を入力してください。
フォームフィールド	ウィジェットまたはマイクロサイト内の各種フォームフィールドに使用する色を選択します。これには、ユーザーが入力するすべての入力フィールドが含まれます。角丸半径のサイズを変更するために、ピクセル単位も入力できます。 展開する 詳細オプション セクションを展開すると、フォームフィールドの選択時状態やホバー状態の色をさらにカスタマイズできます。
ウィジェットサイズ	テンプレート内のウィジェットのサイズを変更します。埋め込みウィジェットとポップアップウィジェットの両方のサイズを調整できます。最小サイズと最大サイズを選択し、ドロップダウンで単位を選びます。測定方法はピクセル単位またはパーセンテージで設定できます。