Skip to content

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

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

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

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

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

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

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

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

カスタムフォント

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

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

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

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

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

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

- 行

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

行を選択すると、Column customizationセクションから必要な列数を追加または削除して、異なるコンテンツ要素を並べて配置できます。

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

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

ブロック

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

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

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

クリエイティブの詳細

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

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

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

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

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

Liquid の追加

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

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

AI コピーライターの使用

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

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

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

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

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

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

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

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

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

Github   GitHub でこのページを編集
「このページはどの程度役に立ちましたか?」
New Stuff!