はじめに
画面の向きへの対応により、さまざまなデバイスの画面で一貫したユーザーエクスペリエンスを実現できます。魅力的なユーザーインタラクションのためには、縦向きモードと横向きモードにシームレスに適応するUIコンポーネントをデザインすることが重要です。 この記事では、デザインアプリの新機能 Brand Kit を紹介するアプリ内HTMLポップアップを作成します。このポップアップは横向きと縦向きに自動的に調整され、ユーザーがデバイスをどのように持っていても視覚的に魅力的な体験を提供します。期待される結果
ユーザーには、横向きと縦向きの両方で美しくデザインされたポップアップが表示され、関連情報やプロモーションコンテンツが提供されることで、プロモーション対象の機能の認知度と利用率が向上します。
アプリ内キャンペーンを作成する
このセクションでは、横向きと縦向きに自動的に調整されるアプリ内HTMLポップアップを作成します。ステップ1: ターゲットユーザー
- 左側のサイドバーで Engage > Campaigns に移動して + Create campaign をクリックするか、+ Create new> Campaign をクリックします。
- Inbound で In-app をクリックします。
キャンペーン定義の最初のステップ「Target users」に移動します。 - 次の詳細を入力します。
- Campaign name: キャンペーン名を入力します。例:「HTML In-app campaign」
- Campaign tags: 関連するキャンペーンタグを選択します。
- Target Platforms セクションで iOS を選択します。
- Trigger Criteria セクションで On app open を選択します。
- Select trigger time セクションで Immediately を選択してメッセージを送信します。
- Target audience セクションで Filter users by を選択し、新機能をまだ使用していないユーザーのみを対象とし、デバイスでプッシュ通知をオプトアウトしたユーザーや、すでに新機能を利用しているユーザーを除外します。
- Next をクリックして2番目のステップ「Content」に移動し、キャンペーンに含めるコンテンツを定義します。
ステップ2: コンテンツ
MoEngageのアプリ内キャンペーンには、あらゆるユースケースに対応するさまざまなテンプレートが用意されています。また、ゼロから作成するオプションもあります。- ユーザーに表示するテンプレートを選択します。ポップアップのデザインには任意のHTMLアプリ内メッセージテンプレートを選択できます。このユースケースでは Popup—Promotional テンプレートを選択します。Template Settings ページでカスタマイズできます。
- 次の手順を実行して、ポップアップメッセージをデザインします。
- タイトルを更新する: “Introducing Brand Kit!”
- スタイル: 注目を集めるために、太字で魅力的なフォントを使用します。
- スタイル: 注目を集めるために、太字で魅力的なフォントを使用します。
- 説明を含める: 機能の概要と、ユーザーにとってのメリットを簡潔に説明します。
- テキスト: “Our new Brand Kit helps you store and manage your brand assets like logos, fonts, and color palettes all in one place. Try it now and streamline your design process!”
- スタイル: テキストが簡潔で読みやすいことを確認します。
- ビジュアル要素を追加する: 機能を視覚的に説明する関連画像、アイコン、アニメーションを含めます。
- 例: ロゴ、フォント、カラーパレットを含むBrand Kitを表示したアプリインターフェースの画像を使用します。
- 以下の動画に示すように、ファイルをアップロードしてから、HTMLコード内で相対パスを使用します。
- コールトゥアクション(CTA)ボタンを含める: “Get started”
- リンク: ボタンのリンク先を、機能にアクセスできるアプリ内のセクションまたはチュートリアルに設定します。
- スタイル: 鮮やかな色と明瞭なフォントでボタンを目立たせます。\
- 横向きと縦向きの両方のモードでテンプレートを確認する: View portrait and landscape をクリックして、横向き表示でポップアップを確認します。
- タイトルを更新する: “Introducing Brand Kit!”
- Next をクリックして3番目のステップ「Schedule and goals」に移動し、キャンペーンのスケジュールと目標を定義します。
ステップ3: スケジュールと目標
ここでは、キャンペーンのスケジュールの選択、コンバージョンゴールの追加、キャンペーンの優先度の選択、カスタム配信コントロールの定義を行えます。- Send campaign セクションで、アプリ内メッセージの開始日時と終了日時を、頻度と制限とともに定義します。
- Conversion Goals セクションで、トラッキングしたいコンバージョンゴールを追加します。
- Campaign priority セクションで、このキャンペーンに優先度を割り当てます。優先度を割り当てることで、ユーザーが特定の時点で複数のメッセージの対象となる場合に、どのアプリ内メッセージを表示するかを決定できます。たとえば、Critical を選択すると、ユーザーが対象となる他のキャンペーンがある場合でも、常にこのメッセージが表示されます。
- Delivery Controls セクションで、要件に基づいてコントロールを定義します。詳細については、Create In-app Campaignを参照してください。
- Publish をクリックします。