スライドインフォームの作成と配置

Published: 2026年7月16日 · Last updated: 2026年7月21日 · By Marcus Biel

スライドインは、ブラウザウィンドウの端や選択した位置に表示される、コンパクトな登録フォームです。

ページ内に配置されたフォームよりも注意を引きやすく、中央に表示されるポップアップよりもウェブサイトを覆う範囲が小さいのが特徴です。スライドインは、ニュースレターのリマインダー、割引、製品アップデート、訪問者がページを読み進めている間も表示しておきたい短いオファーに適しています。

このガイドでは、スライドイン固有の設定について説明します。共通のレイアウト、コンテンツ、フィールド、タグ、タイポグラフィ、レイヤー、登録フローの機能については、メインの登録フォームビルダーガイドで説明しています。

スライドインの作成

「Signup Forms」を開き、「Create Form」をクリックして、「Slide-in」を選択します。わかりやすい内部名を入力し、ビルダーに進みます。

Signup Forms Overviewでフォーム名をクリックすれば、既存のスライドインを編集することもできます。

「Blog Newsletter Slide-in」、「New Product Reminder」、「Summer Coupon Slide-in」のような名前を使用してください。内部名はフォームの管理に役立つもので、訪問者に自動的に表示されることはありません。

スライドインテンプレートの選択

スライドインには、空白のフォーム、標準フォーム、4種類のデザイン済みテンプレートがあります。

• シンプルなリマインダー
• ダークなオファー
• 温かみのあるクーポン
• ミニマルなメモ

テンプレートはコンパクトなメッセージ向けに設計されていますが、すべての要素を編集できます。スターターを選択した後、コンテンツ、フィールド、色、タイポグラフィ、境界線、間隔、送信ボタンを変更できます。

スライドインのデザイン

ビジュアルビルダーを使ってスライドインを配置します。登録フォームに加えて、テキスト、画像、動画、リスト、ボタン、ソーシャルリンク、登録者カウンター、スペーサー、区切り線を含めることができます。

ランディングページや幅の広い埋め込みフォームよりも使えるスペースが限られています。オファーを簡潔にまとめ、訪問者がフィールドや送信ボタンを探さなければならないようなコンテンツの追加は避けてください。

登録フォームブロックを選択して、フィールド、必須情報、非表示タグ、進捗インジケーター、登録者カウンター、入力欄、送信ボタンを設定します。「Page settings」を開くと、スライドインの背景と全体的な外観のデフォルト設定を変更できます。

通常は、1列レイアウトが最もわかりやすい選択です。複数列を使用する場合は、狭い画面での積み重なり方を念入りに確認してください。

画面位置の選択

登録フォームブロックを選択し、「Widget Settings」を開きます。位置セレクターには3×3のグリッドが表示されます。

• 左上、上中央、右上
• 左中央、中央、右中央
• 左下、下中央、右下

重要なウェブサイトの操作部分を覆わない位置を選択してください。決定する前に、Cookie通知、チャットウィジェット、ナビゲーション、ショッピングカートボタン、その他の固定要素を確認します。

狭いモバイル画面では、スライドインが利用可能な幅に収まるよう、Maildroppaが配置を調整します。上側の位置は上部に残り、それ以外の位置は下端から表示されます。デスクトップの位置だけを頼りにせず、必ず小さな画面で結果をテストしてください。

表示遅延の設定

「Display Delay」は、埋め込み先のウェブサイトページでスライドインを表示するまでにMaildroppaが待機する秒数を指定します。

スライドインをすぐに表示できるようにする場合は、0を使用します。訪問者がまずページを操作する時間を設けたい場合は、より長い遅延を入力します。ビルダーで設定できる遅延は最大86,400秒です。

短い遅延は、シンプルなニュースレターのリマインダーに適しています。長い記事では、遅いタイミングで表示したほうが自然に感じられ、記事を熱心に読んでいる訪問者にとってオファーがより関連性の高いものになる場合があります。

表示頻度の設定

「Display Frequency」は、同じ訪問者にスライドインを再び表示できるようになるまでの期間を設定します。次の中から選択できます。

• 常に表示
• 1時間に1回
• 1日に1回
• 1週間に1回
• 1か月に1回

オファーに合った頻度を使用してください。一時的なプロモーションには短い間隔が必要な場合がありますが、一般的なニュースレターのリマインダーは、訪問のたびに表示する必要は通常ありません。

頻度は訪問者のブラウザに保存されます。別のブラウザ、プライベートブラウジングウィンドウ、またはブラウザストレージを消去した状態は、別の訪問履歴として扱われます。

登録フローの接続

ビルダーのヘッダーで、割り当てられた登録フローを確認します。登録フローによって、送信後の応答、ダブルオプトインメール、確認後の処理が決まります。

既存のフローを選択したり、現在のフローを編集したり、このスライドイン専用のフローを作成したりできます。複数のフォームで共有されているフローを変更すると、共有しているすべてのフォームに影響します。

プレビューと保存

「Preview」をクリックして、ウェブサイトに追加する前にスライドインを確認します。選択した位置、表示動作、フィールドの順序、閉じる操作、登録完了後の応答を確認してください。

フォームとWidget Settingsの準備ができたら、「Save changes」をクリックします。その後、Signup Forms Overviewに戻ります。

スライドインの有効化と埋め込み

まだ有効になっていない場合は、3点メニューからスライドインを有効にします。「Show Code Snippet」をクリックし、「JavaScript」タブからコード全体をコピーします。

スライドインを表示したいすべてのウェブサイトページに、このスクリプトを追加します。埋め込みフォームとは異なり、ページ内でのスクリプトの正確な位置によって、表示されるスライドインの位置が決まるわけではありません。表示位置はWidget Settingsで選択した設定によって決まります。

「HTML」タブには、カスタム実装用に生成されたマークアップが表示されます。ウェブサイトでこのオプションを使用する場合は、完全な操作と送信フローを慎重にテストしてください。

一般的なコード配置手順については、埋め込みフォームの作成と埋め込みを参照してください。

ウェブサイトでのスライドインのテスト

コードを追加したら、実際のウェブサイトページでテストします。

1. 選択した遅延後にスライドインが表示されることを確認します。
2. 大きな画面で位置を確認します。
3. 狭い画面で調整された位置と幅を確認します。
4. ナビゲーション、Cookie操作、チャットボタン、その他の重要な操作部分を覆っていないことを確認します。
5. スライドインの開閉をテストします。
6. フォームを送信し、ダブルオプトインの手続きを完了します。
7. Maildroppaで登録者と非表示タグを確認します。

頻度の設定により、繰り返しテスト中にフォームが再表示されない場合があります。新しい訪問者を想定してテストする必要がある場合は、プライベートブラウジングウィンドウを使用するか、該当するブラウザストレージを消去してください。

スライドインの更新または無効化

Maildroppaで同じスライドインを開き、変更を加えてプレビューし、「Save changes」をクリックします。JavaScriptスニペットは同じフォームIDを引き続き使用し、保存された設定を読み込みます。

スライドインを削除せずにオフラインにする場合は、Signup Forms Overviewで「Deactivate」を選択します。今後そのウェブサイトで使用しない場合は、ウェブサイトからスクリプトも削除してください。