メインコンテンツへスキップ
OneSignalのドラッグアンドドロップエディターを使用すると、モジュール式のブロックを使用してアプリ内メッセージを構築できます — コーディングは不要です。マークアップを好む場合は、HTMLでアプリ内メッセージをデザインするを参照してください。
ドラッグアンドドロップエディターを使用してアプリ内メッセージを作成する

​
前提条件

  • アプリにOneSignal SDKがインストールされ、初期化されている。
  • 最新のエディター機能に推奨されるSDKを使用している：
    • iOS 5.1.5+
    • Android 5.1.9+
  • OneSignalに画像をアップロードしない場合、画像は高速で一般公開されたURL（CDN推奨）にホストされ、モバイル画面に適切なサイズに調整されている必要があります。
アプリで最新バージョンのOneSignal SDKを使用してください。 古いバージョンでもメッセージは表示される場合がありますが、フォールバックスタイリング（例：デフォルトのマージンやデフォルトのオーバーレイ）が適用されます。プレビューとデバイステストを使用して、サポートする最低SDKバージョンでの動作を確認してください。

​
プリビルトテンプレートから始める

プリビルトテンプレートは、コンバージョン向けに設計されたレイアウト（権限プロンプトを含む）で素早くローンチするのに役立ちます。テンプレートを選択し、コピー、色、アクションをブランドに合わせて更新してください。
**デバイステスト：**プリビルトデザインはPixel 6+、iPhone（iOS 14+）、Huawei Nova 9、Huawei P50 Foldable、iPad（第10世代+）でテスト済みです。これらのテンプレートはポートレート向けに最適化されており、ランドスケープモードでは意図した通りに表示されない場合があります。

​
メッセージレイアウトを選択する

メッセージレイアウトは、アプリ内メッセージが画面にどのように表示されるかを制御します。
メッセージタイプ最適な用途動作
Top（上部）スリムなお知らせと確認上部からスライドダウン
Center（中央）ほとんどのマーケティングおよびプロダクトプロンプト中央から展開し、画面を部分的に埋める
Bottom（下部）スナックバー、同意プロンプト下部からスライドアップ
Full（フル）オンボーディングフロー、マルチステップオファー、カルーセル画面を埋めるように展開（オプションのマージン付き）
Top、Center、Bottom、Fullのアプリ内メッセージレイアウト

​
カルーセルでマルチスクリーンフローを構築する

カルーセルを使用すると、オンボーディング、機能ツアー、マルチステップオファーなどのマルチスクリーンアプリ内体験を作成できます。
  1. Fullメッセージタイプを選択します。
  2. Create Carouselをクリックします。
  3. 最大10枚のカード（画面）を追加します。
  4. 任意のブロックの組み合わせで各カードをカスタマイズします。
複数のアプリ内メッセージカードを含むカルーセルの例

​
向きのサポート

アプリ内メッセージはポートレートとランドスケープの両方をサポートしていますが、レイアウト（特にテンプレート）は両方で美しく表示するために調整が必要な場合があります。
ポートレートとランドスケープの向きで表示されるアプリ内メッセージ
ランドスケープの使用が多い場合（タブレット、ゲーム、動画アプリ）、公開前にランドスケープでメッセージをテストしてください。ワイドレイアウトでは、より小さいテキストサイズ、タイトなスペーシング、またはより少ないスタックブロックが必要になることがよくあります。

​
ブロックとスペーシングで整ったレイアウトを作成する

すべてがBackgroundブロック（キャンバス）上に配置されます。以下を使用してください：
  • BackgroundのPaddingでコンテンツとメッセージの端の間のスペースを制御。
  • 個々のブロックのMarginで要素間のスペースを制御（見出し → 画像 → ボタン）。
一貫したレイアウトのための簡単なルール
  1. Paddingを使用してメッセージの端からの距離を制御します。
  2. Marginを使用してブロックを垂直に分離します。
  3. 同じ側に大きなパディングとマージンを積み重ねないでください。
  4. タイト/エッジ揃えのデザインよりも中央揃えのフローベースのレイアウトを優先します。
  5. 公開前に常に複数のデバイスサイズでプレビューを使用してください。
アプリ内エディターのBackgroundパディングとブロックマージンコントロール

​
ブロックリファレンス

これらのブロックを使用してメッセージを構築します。各ブロックはスタイリングと（ほとんどの場合）オプションのクリックアクションをサポートしています。

​
テキストブロック

見出し、説明、免責事項、またはパーソナライズされたコピーに使用します。 カスタマイズ可能な項目
  • レスポンシブサイジング：パーセンテージでの幅/高さ。
  • フォント：Google Fonts。
  • 書式設定：太字、斜体、下線。
  • 色：HexまたはRGBA（透明度をサポート）。
  • 配置：左、中央、右。
  • サイズ：調整可能なフォントサイズ。
詳細
  • マージン：ブロックの周囲のスペース。
ヒント
エディターのテキストブロック設定オプション

​
画像ブロック

画像を使用してオファーを強調したり、機能を紹介したり、ブランディングを追加したりします。 サポートされるフォーマットと制限
  • .jpg、.png、.gif
  • 最大ファイルサイズ：5MB
ヒントと推奨事項
  • 16:9、4:3、3:2などの一般的なアスペクト比を使用してください。
  • サーバーホストされたパスを使用して、リンクと画像URLを動的に入れ替えることができます。ダイナミックURLを参照してください。
    • 例：https://example.com/images/{{ tag_key }}.png
カスタマイズ可能な項目
  • 画像URL：パフォーマンスのためにホストされたURLを推奨。
  • クリックアクション：オプション（リンク、ディープリンク、タグ、アウトカム、プロンプト）。
詳細
  • クリック時に閉じる
  • マージン：ブロックの周囲のスペース。
エディターの画像ブロック設定オプション
画像URLの読み込みが遅い、ブロックされている、またはエラーを返す場合、メッセージが壊れたメディアや空のメディアで表示される可能性があります。信頼性の高いCDNに画像をホストし、モバイルネットワークで素早く読み込めることを確認してください。

​
ボタンブロック

ナビゲーション、フィードバック収集、権限プロンプトなどの主要アクションにボタンを使用します。 カスタマイズ可能な項目
  • ボタンテキストとフォントスタイリング
  • 背景色、サイズ、角の半径
  • オプションのアイコン/画像
  • クリックアクション（タグ付け、アウトカム、プロンプト、ディープリンク）
詳細
  • クリック時に閉じる
  • マージン
  • 境界線と影
ヒント
  • タグを使用してボタンテキストまたはリンク先をパーソナライズします。
  • 背景の不透明度を0に設定して、画像のみのボタンを作成できます。
  • 微妙な影（低い不透明度、高いぼかし）を使用して、プライマリCTAを目立たせます。
エディターのボタンブロック設定オプション

​
閉じるボタンブロック

閉じるボタンは、ユーザーが「X」アイコンを使用してメッセージを閉じることができるかどうかを制御します。 カスタマイズ可能な項目
  • 表示の有効化/無効化
  • カスタムアイコン（.jpg、.png、.svg、.gif）
  • 推奨サイズ：10x10px
  • オプションのクリックアクション
詳細
  • マージン
閉じるボタンを無効にする場合は、ユーザーが明確に退出できる方法があることを確認してください（例：ボタンまたは背景の閉じるアクション、または体験で使用している場合は閉じるタイマー）。そうしないと、ユーザーがメッセージに閉じ込められるリスクがあります。
エディターの閉じるボタン設定オプション

​
背景ブロック

背景は、レイアウトを保持するキャンバスです。 カスタマイズ可能な項目
  • 背景色（RGBAをサポート）
  • 背景画像（.jpg、.png、.gif）
  • オプションのクリックアクション
詳細
  • パディング（デフォルト 24px）
  • クリック時に閉じる
背景ブロックの色、画像、パディング、アクションコントロール

​
パーソナライゼーションとローカライゼーション

データタグを使用して、テキスト、ボタンラベル、URLを含むアプリ内メッセージをパーソナライズできます。 ローカライゼーションについては、多言語メッセージを参照してください。
パーソナライゼーションの良いテストは、既知のタグ値を持つ小さな内部セグメントにメッセージを送信し、以下を確認することです：
  • テキストと画像が期待される置換で表示される
  • リンクが正しく解決される
  • ボタンが期待されるクリックアウトカム/タグを発火する

​
FAQ

​
上部/下部バナーのアプリ内メッセージからグレーのオーバーレイやドロップシャドウを削除できますか？

はい — SDKを更新し、以下の設定を追加してください。 iOS 5.1.5+
iOS Info.plist
<key>OneSignal_in_app_message_hide_drop_shadow</key>
<true/>
<key>OneSignal_in_app_message_hide_gray_overlay</key>
<true/>
Android 5.1.9+
Android Manifest.xml
<meta-data android:name="com.onesignal.inAppMessageHideGrayOverlay" android:value="true"/>
<meta-data android:name="com.onesignal.inAppMessageHideDropShadow" android:value="true"/>

​
次のステップ