> ## Documentation Index
> Fetch the complete documentation index at: https://documentation.onesignal.com/llms.txt
> Use this file to discover all available pages before exploring further.
# ドラッグアンドドロップでアプリ内メッセージをデザインする
> OneSignalのビジュアルコンポーザーを使用して、ブロック、レイアウト、カルーセル、パーソナライゼーションを備えた高コンバージョンのアプリ内メッセージを構築します。
OneSignalのドラッグアンドドロップエディターを使用すると、モジュール式のブロックを使用してアプリ内メッセージを構築できます — コーディングは不要です。マークアップを好む場合は、[HTMLでアプリ内メッセージをデザインする](./design-your-in-app-message-with-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（フル）** | オンボーディングフロー、マルチステップオファー、カルーセル | 画面を埋めるように展開（オプションのマージン付き） |
### カルーセルでマルチスクリーンフローを構築する
カルーセルを使用すると、オンボーディング、機能ツアー、マルチステップオファーなどのマルチスクリーンアプリ内体験を作成できます。
1. **Full**メッセージタイプを選択します。
2. **Create Carousel**をクリックします。
3. 最大10枚のカード（画面）を追加します。
4. 任意のブロックの組み合わせで各カードをカスタマイズします。
### 向きのサポート
アプリ内メッセージはポートレートとランドスケープの両方をサポートしていますが、レイアウト（特にテンプレート）は両方で美しく表示するために調整が必要な場合があります。
ランドスケープの使用が多い場合（タブレット、ゲーム、動画アプリ）、公開前にランドスケープでメッセージをテストしてください。ワイドレイアウトでは、より小さいテキストサイズ、タイトなスペーシング、またはより少ないスタックブロックが必要になることがよくあります。
***
## ブロックとスペーシングで整ったレイアウトを作成する
すべてがBackgroundブロック（キャンバス）上に配置されます。以下を使用してください：
* **Background**の**Padding**でコンテンツとメッセージの端の間のスペースを制御。
* 個々のブロックの**Margin**で要素間のスペースを制御（見出し → 画像 → ボタン）。
**一貫したレイアウトのための簡単なルール**
1. **Padding**を使用してメッセージの端からの距離を制御します。
2. **Margin**を使用してブロックを垂直に分離します。
3. 同じ側に大きなパディングとマージンを積み重ねないでください。
4. タイト/エッジ揃えのデザインよりも中央揃えのフローベースのレイアウトを優先します。
5. 公開前に常に複数のデバイスサイズで**プレビュー**を使用してください。
***
## ブロックリファレンス
これらのブロックを使用してメッセージを構築します。各ブロックはスタイリングと（ほとんどの場合）オプションのクリックアクションをサポートしています。
### テキストブロック
見出し、説明、免責事項、またはパーソナライズされたコピーに使用します。
**カスタマイズ可能な項目**
* **レスポンシブサイジング**：パーセンテージでの幅/高さ。
* **フォント**：Google Fonts。
* **書式設定**：太字、斜体、下線。
* **色**：HexまたはRGBA（透明度をサポート）。
* **配置**：左、中央、右。
* **サイズ**：調整可能なフォントサイズ。
**詳細**
* **マージン**：ブロックの周囲のスペース。
**ヒント**
* 言語ベースのセグメントまたは[Liquid構文の使用](./using-liquid-syntax)でローカライズします。
* [データタグ](./message-personalization)でパーソナライズします。
### 画像ブロック
画像を使用してオファーを強調したり、機能を紹介したり、ブランディングを追加したりします。
**サポートされるフォーマットと制限**
* `.jpg`、`.png`、`.gif`
* 最大ファイルサイズ：5MB
**ヒントと推奨事項**
* `16:9`、`4:3`、`3:2`などの一般的なアスペクト比を使用してください。
* サーバーホストされたパスを使用して、リンクと画像URLを動的に入れ替えることができます。[ダイナミックURL](./links#dynamic-urls)を参照してください。
* 例：`https://example.com/images/{{ tag_key }}.png`
**カスタマイズ可能な項目**
* **画像URL**：パフォーマンスのためにホストされたURLを推奨。
* **クリックアクション**：オプション（リンク、ディープリンク、タグ、アウトカム、プロンプト）。
**詳細**
* **クリック時に閉じる**
* **マージン**：ブロックの周囲のスペース。
画像URLの読み込みが遅い、ブロックされている、またはエラーを返す場合、メッセージが壊れたメディアや空のメディアで表示される可能性があります。信頼性の高いCDNに画像をホストし、モバイルネットワークで素早く読み込めることを確認してください。
### ボタンブロック
ナビゲーション、フィードバック収集、権限プロンプトなどの主要アクションにボタンを使用します。
**カスタマイズ可能な項目**
* ボタンテキストとフォントスタイリング
* 背景色、サイズ、角の半径
* オプションのアイコン/画像
* クリックアクション（タグ付け、アウトカム、プロンプト、ディープリンク）
**詳細**
* クリック時に閉じる
* マージン
* 境界線と影
**ヒント**
* タグを使用してボタンテキストまたはリンク先をパーソナライズします。
* 背景の不透明度を0に設定して、画像のみのボタンを作成できます。
* 微妙な影（低い不透明度、高いぼかし）を使用して、プライマリCTAを目立たせます。
### 閉じるボタンブロック
閉じるボタンは、ユーザーが「X」アイコンを使用してメッセージを閉じることができるかどうかを制御します。
**カスタマイズ可能な項目**
* 表示の有効化/無効化
* カスタムアイコン（`.jpg`、`.png`、`.svg`、`.gif`）
* 推奨サイズ：`10x10px`
* オプションのクリックアクション
**詳細**
* マージン
閉じるボタンを無効にする場合は、ユーザーが明確に退出できる方法があることを確認してください（例：ボタンまたは背景の**閉じるアクション**、または体験で使用している場合は閉じるタイマー）。そうしないと、ユーザーがメッセージに閉じ込められるリスクがあります。
### 背景ブロック
背景は、レイアウトを保持するキャンバスです。
**カスタマイズ可能な項目**
* 背景色（RGBAをサポート）
* 背景画像（`.jpg`、`.png`、`.gif`）
* オプションのクリックアクション
**詳細**
* パディング（デフォルト `24px`）
* クリック時に閉じる
***
## パーソナライゼーションとローカライゼーション
[データタグ](./add-user-data-tags)を使用して、テキスト、ボタンラベル、URLを含むアプリ内メッセージをパーソナライズできます。
ローカライゼーションについては、[多言語メッセージ](./multi-language-messaging#send-messages-in-different-languages)を参照してください。
パーソナライゼーションの良いテストは、既知のタグ値を持つ小さな内部セグメントにメッセージを送信し、以下を確認することです：
* テキストと画像が期待される置換で表示される
* リンクが正しく解決される
* ボタンが期待されるクリックアウトカム/タグを発火する
***
## FAQ
### 上部/下部バナーのアプリ内メッセージからグレーのオーバーレイやドロップシャドウを削除できますか？
はい — SDKを更新し、以下の設定を追加してください。
**iOS 5.1.5+**
```xml iOS Info.plist theme={null}
OneSignal_in_app_message_hide_drop_shadow
OneSignal_in_app_message_hide_gray_overlay
```
**Android 5.1.9+**
```xml Android Manifest.xml theme={null}
```
***
## 次のステップ
* [アプリ内クリックアクション](./iam-click-actions)について学び、ユーザーがメッセージ内の要素をクリックした際の動作をカスタマイズしましょう。
* さまざまな[アプリ内メッセージトリガー](./iam-triggers)を試して、メッセージの表示タイミングを制御しましょう。
* さらにカスタマイズが必要ですか？[HTMLでアプリ内メッセージをデザインする](./design-your-in-app-message-with-html)を試してみてください。
***