組込み(Native)> 「テキスト+画像+ボタン」(オーバーレイ)テンプレートは、端末画面のサイズに合わせてメッセージの縦幅を自動で調整する仕様となっています。
そのため、大きめの画面を保有する端末では、管理画面上のプレビューとレイアウトが異なるケースがあります。
画面サイズに囚われずオーバーレイのデザインを利用する代替案として、他のテンプレートを利用し調整する方法をご案内します。
HTML(WebView)テンプレートを利用する
HTML(WebView)>「テキスト + 画像 + ボタン」(ダイアログ)のスタンダードタイプは、画面中央に表示されるダイアログのデザインを調整できるものであるため、表示する端末によってレイアウトが伸びることはありません。
以下の手順を参考に、再現したいレイアウトに合わせてレイアウトの調整をお試しください。
具体的な手順
[新規作成] > [アプリ内メッセージ] からテンプレート選択画面を開き、 HTML(WebView)にある「テキスト + 画像 + ボタン」(ダイアログ)を選択します。
メッセージ作成画面を開いたら、「ダイアログ 背景色」のバケツマークをクリックし、不透明度を最小値まで下げ、ダイアログの背景色を透過させます。
見出しやテキストのカラーと文字量を、再現したいレイアウトに合わせて調整します。
組込み(Native)で期待通り動作しない理由
アプリ内メッセージのテンプレート「組込み(Native)」にあるオーバーレイは、プレビューで表示される縦横比の端末向けにレイアウトが調整されたものであり、画面上下の余白が固定で設定されています。
「テキスト+画像+ボタン」(オーバーレイ)のプレビュー
「テキスト+画像+ボタン」(オーバーレイ)の実機反映イメージ
iPhone SE(第3世代)の場合 iPhone 16 Pro Maxの場合
そのため、プレビューの縦横比より画面の縦幅が長い端末の場合、画面上下の余白は固定をしたまま、画面サイズに合わせて中央の余白が伸びる形で表示されます。