メール配信ツールで メールマーケティングを シンプルに
スライドインフォームの作成と配置
公開日: · 最終更新日: · 著者 Marcus Biel
この記事のポイント
Maildroppaのスライドインフォームのデザイン方法を解説します。画面上の表示位置、表示までの待ち時間と頻度の設定、ウェブサイトへの埋め込み、モバイルでのテスト手順を紹介します。
スライドインは、ブラウザウィンドウの端や指定した位置に表示される、コンパクトな登録フォームです。
ページ内に配置するフォームよりも目を引きやすく、画面中央に表示されるポップアップよりもページを覆う範囲が小さいのが特徴です。メルマガ登録の案内や割引情報、製品の更新情報など、訪問者がページを読んでいる間も表示しておきたい短い案内に適しています。
このガイドでは、スライドイン固有の設定を説明します。共通のレイアウト、コンテンツ、フィールド、タグ、タイポグラフィ、レイヤー、登録フローの機能については、登録フォームビルダーのメインガイドを参照してください。
スライドインを作成する
「Signup Forms」を開き、「Create Form」をクリックして「Slide-in」を選択します。管理用にわかりやすい名前を入力し、ビルダーに進みます。
既存のスライドインを編集するには、登録フォーム一覧（Signup Forms Overview）でフォーム名をクリックします。
名前は「Blog Newsletter Slide-in」「New Product Reminder」「Summer Coupon Slide-in」など、用途がわかるものにしましょう。この名前はフォームを管理するためのもので、訪問者に自動的に表示されることはありません。
スライドインのテンプレートを選ぶ
スライドインでは、空白のフォーム、標準フォームに加え、デザイン済みの4種類のテンプレートを選べます。
- Clean reminder（すっきりとしたリマインダー）
- Dark offer（ダークな配色のオファー）
- Warm coupon（温かみのあるクーポン）
- Minimal note（ミニマルなお知らせ）
テンプレートは短いメッセージに適したデザインですが、すべての要素を編集できます。ベースとなるテンプレートを選んだ後に、コンテンツ、フィールド、色、タイポグラフィ、枠線、余白、送信ボタンを変更できます。
スライドインをデザインする
ビジュアルビルダーでスライドインのレイアウトを整えます。登録フォームとともに、テキスト、画像、動画、リスト、ボタン、SNSリンク、購読者数カウンター、スペーサー、区切り線を配置できます。
ランディングページや幅の広い埋め込みフォームに比べ、使えるスペースは限られています。伝えたい内容を絞り、訪問者が入力欄や送信ボタンを探すことにならないよう、コンテンツを増やしすぎないようにしましょう。
登録フォームブロックを選択し、フィールド、必須情報、非表示タグ、進捗インジケーター、購読者数カウンター、入力欄、送信ボタンを設定します。「Page settings」を開くと、スライドインの背景や全体の外観の初期設定を変更できます。
通常は1列のレイアウトが最もわかりやすくなります。複数列を使う場合は、狭い画面で各列がどのように縦に並ぶかをよく確認してください。
画面上の表示位置を選ぶ
登録フォームブロックを選択し、「Widget Settings」を開きます。位置セレクターでは、3×3のグリッドから表示位置を選べます。
- 左上、上中央、右上
- 左中央、中央、右中央
- 左下、下中央、右下
ウェブサイトの重要な操作部分を覆わない位置を選びましょう。Cookie通知、チャットウィジェット、ナビゲーション、ショッピングカートのボタン、その他の固定表示要素の位置を確認してから決めてください。
幅の狭いモバイル画面では、スライドインが画面幅に収まるよう、Maildroppaが配置を調整します。上側に設定したものは上部に表示され、それ以外は下端に表示されます。パソコンでの表示位置だけで判断せず、必ず小さな画面でもテストしてください。
表示までの待ち時間を設定する
「Display Delay」では、スライドインを埋め込んだウェブページで、表示までに待機する秒数を設定します。
すぐに表示できるようにする場合は、0を指定します。訪問者が先にページを読んだり操作したりする時間を確保したい場合は、待ち時間を長めに設定します。ビルダーでは最大86,400秒まで設定できます。
シンプルなメルマガ登録の案内なら、短い待ち時間が適している場合があります。長い記事では、少し時間を置いてから表示するほうが自然で、記事を読み進めている訪問者の関心に合った案内になりやすくなります。
表示頻度を設定する
「Display Frequency」では、同じ訪問者にスライドインを再び表示できるようになるまでの間隔を設定します。次の選択肢があります。
- Always（常に表示）
- Once per hour（1時間に1回）
- Once per day（1日に1回）
- Once per week（1週間に1回）
- Once per month（1か月に1回）
案内の内容に合った頻度を選びましょう。期間限定のプロモーションでは短い間隔が必要な場合もありますが、通常のメルマガ登録の案内を訪問のたびに表示する必要はあまりありません。
表示頻度に関する情報は、訪問者のブラウザに保存されます。別のブラウザやプライベートブラウジングのウィンドウを使った場合、またはブラウザのストレージを消去した場合は、別の訪問履歴として扱われます。
登録フローを設定する
ビルダーのヘッダーで、割り当てられている登録フローを確認します。登録フローでは、フォーム送信後の応答、ダブルオプトインの確認メール、登録確認後の処理が決まります。
既存のフローを選ぶ、現在のフローを編集する、このスライドイン専用のフローを作成する、という選択ができます。複数のフォームで共有しているフローを変更すると、そのフローを使うすべてのフォームに影響します。
プレビューして保存する
ウェブサイトに追加する前に「Preview」をクリックして、スライドインを確認します。選択した表示位置、表示時の動作、フィールドの順序、閉じる操作、登録完了までの一連の応答を確認してください。
フォームと「Widget Settings」の設定が整ったら、「Save changes」をクリックします。その後、登録フォーム一覧（Signup Forms Overview）に戻ります。
スライドインを有効化して埋め込む
スライドインがまだ有効になっていない場合は、3点メニューから有効化します。「Show Code Snippet」をクリックし、「JavaScript」タブからコード全体をコピーします。
スライドインを表示したいすべてのウェブページに、このスクリプトを追加します。埋め込みフォームとは異なり、ページ内でスクリプトを配置する位置によって、スライドインの表示位置が決まるわけではありません。表示位置は「Widget Settings」で選択した設定に従います。
「HTML」タブには、独自の実装に使える生成済みのマークアップが表示されます。この方法をウェブサイトで使う場合は、一連の操作とフォーム送信の流れを入念にテストしてください。
コードの一般的な配置手順については、埋め込みフォームの作成と埋め込みを参照してください。
ウェブサイトでスライドインをテストする
コードを追加したら、実際のウェブページでテストします。
- 設定した待ち時間の後にスライドインが表示されることを確認します。
- 幅の広い画面で表示位置を確認します。
- 幅の狭い画面で、調整後の位置と幅を確認します。
- ナビゲーション、Cookieの操作部分、チャットボタン、その他の重要な操作部分を覆っていないことを確認します。
- スライドインを開く操作と閉じる操作をテストします。
- フォームを送信し、確認メールで登録を確定するダブルオプトインの手続きを完了します。
- Maildroppaで購読者情報と非表示タグを確認します。
繰り返しテストすると、表示頻度の設定によってフォームが再表示されない場合があります。新しい訪問者としてテストする必要がある場合は、プライベートブラウジングのウィンドウを使うか、該当するブラウザのストレージを消去してください。
スライドインを更新・無効化する
Maildroppaで同じスライドインを開き、変更を加えてプレビューした後、「Save changes」をクリックします。JavaScriptスニペットは引き続き同じフォームIDを使い、保存した設定を読み込みます。
スライドインを削除せずに非公開にするには、登録フォーム一覧（Signup Forms Overview）で「Deactivate」を選択します。そのウェブサイトで今後使う予定がなければ、ウェブサイトからスクリプトも削除してください。
メール配信を、もっと効果的にしませんか？
機能過多のツールや割高なプランに振り回されるのは、もう終わりにしませんか。Maildroppaなら、個別のサポート、プライバシーに配慮した管理機能、充実したメールマーケティング機能を利用できます。永年無料のプランから始められます。
クレジットカード情報の入力は不要です。利用期限もありません。