アプリ内メッセージのスタイル設定
ドラッグ＆ドロップの編集エクスペリエンスは、ビルドとプレビュー＆テストの2つのセクションに分かれています。この記事では、エディターのビルドタブでの作業に必要な情報を説明します。すでにアプリ内メッセージを作成していることを前提としています。
メッセージレベルのスタイル
メッセージスタイルタブから、アプリ内メッセージ内のすべての関連ブロックに適用される特定のスタイルを設定できます。たとえば、メッセージ内のすべてのテキストのフォントやすべてのリンクの色をカスタマイズできます。
このセクションのスタイルは、特定のブロックでオーバーライドしない限り、メッセージ全体で使用されます。メッセージに複数のページがある場合、表示タイプと最大幅を除き、個々のページのメッセージレベルのスタイルをオーバーライドすることもできます。
デザインをスムーズに進めるために、ブロックレベルのスタイルをカスタマイズする前に、メッセージレベルのスタイルを設定することをお勧めします。
メッセージスタイルタブにいつでも戻るには:
- 個々のブロックプロパティの閉じるXボタンをクリックします
- メッセージコンテナ、メッセージの閉じるXボタン、またはエディターの背景を選択します
カスタムフォント
フォントのファイルタイプは.ttf、.woff、.otf、.woff2に対応しています。詳細については、アセットファイルを参照してください。
カスタムフォントでは一部のスタイルオプションが利用できない場合があるため、フォントファミリーの複数のバリエーションを追加できます。現在、URL経由でのフォント追加はサポートされていません。
カスタムフォントを追加するには:
- メッセージスタイルタブのコンテンツセクションに移動します。
- カスタムフォントを追加をクリックします。
- メディアライブラリを使用してフォントをアップロードします。
メッセージレベルのフォントは、現在のメッセージと複製されたメッセージにのみ適用され、将来のテンプレートには適用されません。
メッセージコンポーネント
ドラッグ＆ドロップエディターでは、アプリ内メッセージの作成に行とブロックの2つの主要コンポーネントを使用します。すべてのブロックは行の中に配置する必要があります。
閉じるXボタン
モーダルおよびフルスクリーンのアプリ内メッセージでは、メッセージの右上隅にとして表示される閉じるボタンをカスタマイズできます。カスタマイズオプションには、ボタンの位置、サイズ、塗りつぶし色、背景色、ボーダースタイル、ボーダー半径があります。
スパンスタイル
アプリ内メッセージのテキストにスパンスタイルを追加すると、メッセージの外観をさらにカスタマイズでき、異なるテキストの色、フォント、サイズを使用できるようになります。スパンスタイルにより、重要な情報にユーザーの注意を引き、メッセージ全体の明瞭性を向上させることで、より魅力的で視覚的に訴求力のあるエクスペリエンスを提供できます。
行
行は、セルを使用してメッセージのセクションの水平方向の構成を定義する構造単位です。
行を選択すると、列のカスタマイズセクションから必要な列数を追加または削除して、異なるコンテンツ要素を横に並べて配置できます。
既存の列のサイズをスライドして調整することもできます。
ベストプラクティスとして、行内のブロックをフォーマットする前に、行と列のプロパティをフォーマットしてください。間隔や配置を調整できる箇所が多いため、基盤から始めることで編集が容易になります。
背景画像
行プロパティパネルで行に背景画像を追加できます。背景画像をオンに切り替え、画像URLを入力するか、メディアライブラリから画像を選択します。最後に、代替テキスト、サイズ、位置、および画像を繰り返して行全体にパターンを作成するかどうかを設定します。
ブロック
ブロックは、メッセージで使用できるさまざまな種類のコンテンツを表します。既存の行セグメント内にドラッグすると、セルの幅に自動調整されます。
ブロックを追加する前に、メッセージコンテナ、フォント、色、その他カスタマイズしたい項目のメッセージレベルのスタイルを設定してください。その後、必要に応じて個々のブロックをカスタマイズできます。閉じるボタンはメッセージの上部セクションに残るため、ユーザーはいつでもメッセージを閉じることができます。
各ブロックには、パディングの細かい制御など、独自の設定があります。右側のパネルは、選択したコンテンツ要素のスタイルパネルに自動的に切り替わります。詳細については、エディターブロックのプロパティを参照してください。
アプリ内メッセージを作成する際、ツールバーでモバイル、タブレット、またはデスクトップビューを選択して、ユーザーグループに対してアプリ内メッセージがどのように表示されるかをプレビューできます。これにより、コンテンツがレスポンシブであることを確認し、必要な調整を随時行うことができます。
クリエイティブの詳細
大画面でのフルスクリーン
タブレットまたはデスクトップブラウザでは、フルスクリーンのアプリ内メッセージはアプリ画面の中央に表示されます。フルスクリーンメッセージの最大幅の編集は、タブレットおよびデスクトップデバイスにのみ適用されます。
背景画像の追加
メッセージスタイルタブからメッセージの背景に画像を追加できます。
- Canvasエリアで背景コンテナを選択します。これはメッセージのスクロール可能なセクションです。
- メッセージスタイルタブで、背景画像をオンにします。
- メディアライブラリから画像を追加するか、画像がホストされているURLを入力します。
特定のブロックの選択が難しい場合は、ブロックのインラインツールバーの上矢印を使用して、各親ブロックにフォーカスを移動できます。
Liquidの追加
アプリ内メッセージにLiquidを追加するには、エディターツールバーから Add Personalizationを選択します。ここでは、デフォルト属性、デバイス属性、カスタム属性など、さまざまなパーソナライゼーションタイプを追加できます。
次に、生成されたLiquidスニペットをメッセージに挿入します。アプリ内メッセージのデザインと構築が完了したら、プレビュー＆テストに移動してメッセージをプレビューします。
AIコピーライターの使用
アプリ内メッセージでテキストブロックを選択した状態で、ブロックツールバーのをクリックすると、AI搭載コピーライティングアシスタントが起動します。AIコピーライティングアシスタントは、簡単な製品名や説明をOpenAIのGPT3コピー生成ツールに渡し、メッセージング用の人間らしいマーケティングコピーを生成します。
ブロック内のテキストをハイライトしてからアイコンをクリックすると、数クリック省略できます。ハイライトされたテキストがツールに追加され、すぐにコピーが生成されます。
スタイルをデフォルトにリセット
デフォルトのスタイルから変更されたプロパティには、オレンジ色のドットが表示されます。特定のプロパティをデフォルトのスタイルにリセットするには、フィールドにカーソルを合わせてReset to defaultを選択します。
選択した要素のすべてのスタイルをリセットするには、プロパティパネル名の横にあるを選択し、Reset to default stylesを選択します。
スタイルのコピーと貼り付け
要素のスタイルを変更した後、そのスタイルを別の要素にコピーして貼り付けることができます。スタイルを貼り付ける際、その要素に関連するプロパティのみが適用されます。
- 要素を選択した状態で、プロパティパネル名の横にあるを選択します（たとえば、ボタンを選択している場合は「Button properties」の横）。
- Copy stylesをクリックし、コピーしたスタイルを適用する要素を選択します。
- を再度選択し、Paste stylesを選択します。
キーボードショートカット
キーボードショートカットを使用してスタイルのコピーと貼り付けを行うこともできます:
| アクション | Mac | Windows |
|---|---|---|
| スタイルをコピー | ⌘ + Shift + c | Ctrl + Shift + c |
| スタイルを貼り付け | ⌘ + Shift + v | Ctrl + Shift + v |