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

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

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

[メッセージスタイル] タブから、アプリ内メッセージにある関連するすべてのブロックに特定のスタイルを設定できます。たとえば、メッセージ内のすべてのテキストまたはすべてのリンクの色のフォントをカスタマイズできます。

この項のスタイルは、指定したブロックで上書きする場合を除き、メッセージ内のあらゆる場所で使用されます。メッセージに複数ページが含まれている場合は、表示タイプと最大幅を除き、個々のページのメッセージレベルスタイルをオーバーライドすることもできます。

デザインをより簡単にするために、メッセージレベルのスタイルを設定してから、スタイルをブロック段階でカスタマイズすることをお勧めします。

いつでもメッセージスタイルタブに戻るには:

• 個々のブロックプロパティーで「X を閉じる」ボタンを選択します
• メッセージコンテナ、メッセージクローズX ボタン、またはエディタバックグラウンドを選択します

カスタムフォント

フォントのファイルタイプは、.ttf、.woff、.otf、および .woff2 です。詳細については、アセットファイルを参照してください。

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

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

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

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

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

閉じるxボタン

ModalおよびFullscreen アプリ内メッセージでは、メッセージの右上隅にと表示される閉じるボタンをカスタマイズできます。カスタマイズ機能には、ボタン位置、サイズ、塗りつぶしカラー、バックグラウンドカラー、ボーダースタイル、ボーダー半径などがあります。

スパンスタイル

アプリ内メッセージ内のテキストにスパンスタイルを追加すると、メッセージアプリのイヤランスのカスタマイズが強化され、さまざまなテキストカラー、フォント、およびサイズを使用できるようになります。スパンスタイリングを使用すると、主要な情報に注意を払い、全体的なメッセージの明瞭度を向上させることで、ユーザーがより魅力的で視覚的にアプリなイーリングエクスペリエンスを実現できます。

- 行

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

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

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

ベストプラクティスとして、行および列のプロパティーを書式設定してから、行内のブロックs を書式設定します。間隔や整列を調整できる場所はたくさんありますので、基礎から始めると、行きながら編集しやすくなります。

背景画像

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

ブロック

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

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

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

クリエイティブの詳細

大きな画面では全画面表示

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

バックグラウンド画像の追加

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

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

Liquid の追加

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

次に、生成した Liquid スニペットをメッセージに挿入します。アプリ内メッセージを設計および構築した後、プレビュー & テスト に移動して、メッセージをプレビューします。

AI コピーライターの使用

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

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

デフォルトスタイルから変更したプロパティーには、橙色の点が付きます。特定のプロパティをデフォルトスタイルにリセットするには、フィールドの上にマウスポインタを合わせて [デフォルトにリセット] を選択します。

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

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

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

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

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

キーボードショートカットを使用してスタイルをコピー&ペーストすることもできます。

アクション (Action)	Mac	Windows
スタイルのコピー	⌘ + Shift + c	Ctrl + Shift + c
スタイルのペースト	⌘ + Shift + v	Ctrl + Shift + v