アプリ内メッセージのスタイル設定

ドラッグ＆ドロップの編集エクスペリエンスは、ビルドとプレビュー＆テストの2つのセクションに分かれています。この記事では、エディターのビルドタブでの作業に必要な情報を説明します。すでにアプリ内メッセージを作成していることを前提としています。

メッセージレベルのスタイル

メッセージスタイルタブから、アプリ内メッセージ内のすべての関連ブロックに適用されるスタイルを設定できます。例えば、メッセージ内のすべてのテキストのフォントやすべてのリンクの色をカスタマイズしたい場合などに利用します。

このセクションのスタイルは、特定のブロックでオーバーライドする場合を除き、メッセージ全体で使用されます。メッセージに複数のページがある場合、表示タイプと最大幅を除き、個々のページに対してメッセージレベルのスタイルをオーバーライドすることもできます。

デザイン作業をスムーズに進めるために、ブロックレベルのスタイルをカスタマイズする前に、メッセージレベルのスタイルを設定することをお勧めします。

メッセージスタイルタブにいつでも戻るには、以下のいずれかを行います。

• 個々のブロックプロパティの閉じる X ボタンをクリックする
• メッセージコンテナ、メッセージの閉じる X ボタン、またはエディターの背景を選択する

カスタムフォント

フォントのファイル形式は.ttf、.woff、.otf、.woff2に対応しています。詳しくは、アセットファイルを参照してください。

フォントファミリーの複数のバリエーションを追加できます。一部のスタイルオプションはカスタムフォントでは利用できない場合があります。現在、URLによるフォントの追加はサポートしていません。

カスタムフォントを追加するには:

1. メッセージスタイルタブのコンテンツセクションに移動します。
2. カスタムフォントを追加をクリックします。
3. メディアライブラリを使用してフォントをアップロードします。

注

メッセージレベルのフォントは、現在のメッセージとその複製メッセージにのみ適用され、将来のテンプレートには適用されません。

メッセージコンポーネント

ドラッグ＆ドロップエディターは、アプリ内メッセージを構成するために2つの主要コンポーネントを使用します。行とブロックです。すべてのブロックは行の中に配置する必要があります。

閉じる（×）ボタン

モーダルおよびフルスクリーンのアプリ内メッセージでは、メッセージ上部に として表示される閉じるボタンをカスタマイズできます。カスタマイズオプションには、ボタンの位置、サイズ、塗りつぶしの色、背景色、枠線スタイル、枠線の角丸が含まれます。

スパンスタイリング

アプリ内メッセージのテキストにスパンスタイリングを追加すると、メッセージの外観をさらにカスタマイズでき、異なるテキストの色、フォント、サイズを使用できるようになります。スパンスタイリングにより、重要な情報にユーザーの注意を引きつけ、メッセージ全体の明瞭さを向上させることで、より魅力的で視覚的に優れたエクスペリエンスを提供できます。

行

行は、セルを使用してメッセージのセクションの水平方向の構成を定義する構造単位です。

行を選択すると、列のカスタマイズセクションから必要な列の数を追加または削除して、異なるコンテンツ要素を横並びに配置できます。

また、スライドして既存の列のサイズを調整することもできます。

ベストプラクティスとして、行内のブロックをフォーマットする前に、行と列のプロパティをフォーマットしてください。スペーシングと配置を調整できる箇所は多数あるため、基盤から始めることで編集が容易になります。

背景画像

行のプロパティパネルで行に背景画像を追加できます。背景画像をオンに切り替え、画像URLを入力するか、メディアライブラリから画像を選択します。最後に、代替テキスト、サイズ、位置、行全体にパターンを作成するために画像を繰り返すかどうかを設定します。

ブロック

ブロックは、メッセージで使用できるさまざまな種類のコンテンツを表します。既存の行セグメント内にドラッグすると、セルの幅に自動的に調整されます。

ヒント

ブロックを追加する前に、メッセージコンテナ、フォント、色、その他カスタマイズしたい要素のメッセージレベルのスタイルを設定してください。その後、必要に応じて個々のブロックをカスタマイズできます。閉じるボタンはメッセージの上部セクションに常に表示されるため、ユーザーはいつでもメッセージを閉じることができます。

すべてのブロックには、パディングの詳細な制御などの独自の設定があります。右側のパネルは、選択されたコンテンツ要素のスタイリングパネルに自動的に切り替わります。詳細については、エディターブロックのプロパティを参照してください。

アプリ内メッセージを作成する際、ツールバーでモバイル、タブレット、またはデスクトップビューを選択して、ユーザーグループに対してアプリ内メッセージがどのように表示されるかをプレビューできます。これにより、コンテンツがレスポンシブであることを確認し、必要な調整を随時行うことができます。

クリエイティブの詳細

大画面でのフルスクリーン

タブレットやデスクトップブラウザでは、フルスクリーンのアプリ内メッセージはアプリ画面の中央に表示されます。フルスクリーンメッセージの最大幅に対する編集は、タブレットおよびデスクトップデバイスにのみ適用されます。

バックグラウンド画像を追加する

メッセージスタイルタブから、メッセージのバックグラウンドに画像を追加できます。

1. キャンバスエリアで、バックグラウンドコンテナを選択します。これはメッセージのスクロール可能なセクションです。
2. メッセージスタイルタブで、バックグラウンド画像をオンにします。
3. メディアライブラリから画像を追加するか、画像がホストされているURLを入力します。

ヒント

特定のブロックの選択が難しい場合は、ブロックのインラインツールバーの上矢印を使用して、各親ブロックにフォーカスを移動できます。

Liquidでバックグラウンド画像を動的に切り替える

ユーザーデータ（カスタム属性やユーザープロパティなど）に基づいてバックグラウンド画像を動的に切り替えるには、Liquid {% capture %}ブロックを使用して、HTMLとCSSが読み込まれる前に正しい画像URLを変数に割り当てます。

Liquidロジックをメッセージの先頭に配置し、キャプチャした変数をバックグラウンド画像のURLフィールドで参照します。これにより、各ユーザーのデータに基づいて正しい画像が選択されます。

画像URLをキャプチャした後、{{ image_url | strip }}を使用して、余分な空白を除去したURLを出力します。このLiquidをバックグラウンド画像のURLフィールドに貼り付けることで、ユーザーごとに異なる画像を動的に表示できます。

例

1
2
3
4
5
6
7
8
9
10

{% capture image_url %}
{% if {{custom_attribute.${membership_tier}}} == 'gold' %}
https://example.com/images/gold-background.png
{% elsif {{custom_attribute.${membership_tier}}} == 'silver' %}
https://example.com/images/silver-background.png
{% else %}
https://example.com/images/default-background.png
{% endif %}
{% endcapture %}
{{ image_url | strip }}

Liquidを追加する

アプリ内メッセージにLiquidを追加するには、エディターツールバーからパーソナライゼーションを追加を選択します。ここでは、デフォルト属性、デバイス属性、カスタム属性など、さまざまなパーソナライゼーションタイプを追加できます。

次に、生成されたLiquidスニペットをメッセージに挿入します。アプリ内メッセージのデザインと構築が完了したら、プレビューとテストに移動してメッセージをプレビューします。

AIコピーライターを使用する

アプリ内メッセージでテキストブロックが選択されている場合、ブロックツールバーのAIコピーライターを選択して、AI搭載コピーライティングアシスタントを起動します。AIコピーライティングアシスタントは、簡単な商品名や説明をOpenAIのGPT3コピー生成ツールに渡し、メッセージング向けの人間らしいマーケティングコピーを生成します。

ヒント

ブロック内のテキストをハイライトしてからアイコンをクリックすると、数回のクリックを省略できます。ハイライトされたテキストがツールに追加され、すぐにコピーが生成されます。

スタイルをデフォルトにリセットする

デフォルトのスタイルから変更したプロパティには、オレンジ色のドットが表示されます。特定のプロパティをデフォルトスタイルにリセットするには、フィールドにカーソルを合わせてデフォルトにリセットを選択します。

また、プロパティパネル名の横にあるを選択し、デフォルトスタイルにリセットを選択することで、選択した要素のすべてのスタイルをリセットすることもできます。

スタイルのコピーと貼り付け

要素のスタイルを変更した後、それらのスタイルを別の要素にコピーして貼り付けることができます。スタイルを貼り付ける際は、その要素に関連するプロパティのみが適用されます。

1. 要素を選択した状態で、プロパティパネル名の横にあるスタイルのコピーまたは貼り付けを選択します（例えば、ボタンが選択されている場合は「ボタンのプロパティ」の横）。
2. スタイルをコピーをクリックし、コピーしたスタイルを適用したい要素を選択します。
3. スタイルのコピーまたは貼り付けを再度選択し、スタイルを貼り付けを選択します。

キーボードショートカット

キーボードショートカットを使用してスタイルのコピーと貼り付けを行うこともできます。