登録フォームビルダー：フォームをデザインする

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

登録フォームビルダーは、Maildroppaのすべての登録フォームとランディングページで使用するビジュアルエディターです。

レイアウトの配置、テキストや画像の追加、購読者フィールドの設定、色やフォントの変更、タグの割り当て、フォーム送信後の動作の指定に利用できます。作業中はキャンバスに結果が表示されるため、完全な登録体験をデザインするためにコードを書く必要はありません。

Maildroppaでは、4種類のフォームに同じビルダーを使用します。

• ランディングページは、公開してリンクで共有できる完全に独立したページです。
• 埋め込みフォームは、ウェブサイトのページ内に直接配置します。
• ポップアップはウェブサイト上に表示され、ページ要素から開くこともできます。
• スライドインは、ブラウザーウィンドウの選択した端または位置に表示されます。

このガイドでは、これらのフォームタイプに共通するすべての機能を説明します。リンク先のガイドでは、それぞれのタイプに固有の設定と手順だけを説明しています。

登録フォームビルダーを開く

Maildroppaで「登録フォーム」を開きます。次に「フォームを作成」をクリックして、新しいランディングページ、埋め込みフォーム、ポップアップ、またはスライドインを作成できます。

既存のフォームの作業を続けるには、その名前をクリックするか、登録フォームの概要の3点メニューから「フォームを編集」を選択します。

フォームには、内部管理用のわかりやすい名前を付けます。「フォーム1」のような一般的な名前よりも、「ホームページニュースレター」「ウェビナーポップアップ」「夏のリードマグネット」のような名前のほうが、後から識別しやすくなります。フォーム名はMaildroppaでフォームを管理するためのもので、訪問者に自動的に表示されることはありません。

ビルダーの構成

ビルダーは4つの主要な領域に分かれています。

上部バーにはフォーム名と主な操作が表示されます。ここから概要に戻ったり、作業内容をプレビューしたり、保存したりできます。ランディングページでは、このバーに下書きと公開に関する操作も表示されます。

左サイドバーには「レイアウト」「コンテンツ」「レイヤー」があります。ここで構造を作成し、新しい要素を追加し、キャンバス上に配置済みのすべてを管理します。

キャンバスは中央の作業領域です。現在のページまたはフォームが表示されます。要素をクリックして選択します。要素を別の場所へドラッグしたり、左サイドバーから新しい要素を追加したりすることもできます。

右サイドバーには「設定」と「ページ設定」があります。「設定」では選択した要素を変更します。「ページ設定」では全体の背景とデザインの既定値を変更します。

小さい画面では、サイドバーは「コンテンツ」ボタンと「設定」ボタンを使ってパネルとして開きます。利用できる機能は変わりません。

テンプレートから始める

フォームを作成すると、ビルダーに選択したフォームタイプ向けの初期デザインが表示されます。空白のデザインから始めたり、標準フォームを使用したり、完成済みのテンプレートを選択したりできます。

テンプレートには、初期レイアウト、色、タイポグラフィ、サンプルコンテンツが用意されています。後から変更できる内容に制限はありません。テンプレートを選択した後も、すべての要素を編集、移動、複製、再スタイル、削除できます。

各フォームタイプには、用途に適したテンプレートがあります。たとえば、ランディングページには、ニュースレター、リードマグネット、ウェビナー、ウェイトリスト向けの完全なページデザインが含まれています。埋め込みフォーム、ポップアップ、スライドインには、それぞれコンパクトな初期デザインがあります。

どのテンプレートを選ぶか迷った場合は、目的に最も近い構造のものを選択してください。空白のキャンバスから同じ構造を作るよりも、テキスト、色、画像を変更するほうが通常は早く済みます。

レイアウトを作成する

左サイドバーで「レイアウト」を開き、新しいセル行を追加します。利用できるレイアウトは次のとおりです。

• 1セル
• 2、3、または4つの均等なセル
• 2:1の比率の2セル
• 1:2の比率の2セル

レイアウトをクリックして現在の挿入位置に追加するか、キャンバスにドラッグします。その後、各セル内にコンテンツを配置できます。

ボックスまたは列を選択すると、右サイドバーでサイズ、間隔、配置、背景、境界線、パディングを調整できます。複数列のレイアウトでは、列幅の相対比率も変更できます。

レイアウトを使って、わかりやすい読み順を作成します。1列はコンパクトな登録フォームに適しています。画像、メリットの一覧、イベント情報などを登録フォームの横に表示したい場合は、2列レイアウトが便利です。

コンテンツを追加する

左サイドバーで「コンテンツ」を開き、個別のコンテンツブロックを追加します。ブロックをクリックして挿入するか、キャンバス上の希望する位置へドラッグできます。

ビルダーには次のコンテンツブロックがあります。

登録フォーム — 購読者フィールドと送信ボタンを含みます。動作するフォームとして保存するには、デザインに登録フォームブロックが1つ必要です。ブロックが配置されると、追加のコンテンツブロックとしては表示されなくなります。

テキスト — 見出し、段落、その他の書式付きテキストを追加します。

画像 — URL、アップロード、またはMaildroppaのメディアライブラリから画像を追加します。代替テキストの入力、リンクの追加、サイズ、アスペクト比、トリミング、焦点位置、回転、反転の設定ができます。

動画 — YouTubeまたはVimeoの動画、埋め込みURL、または直接動画ファイルを追加します。プレビュー画像や再生ボタンの外観も設定できます。

リスト — 箇条書きまたは番号付きリストを追加します。項目を編集し、マーカーの色、間隔、タイポグラフィ、配置を調整できます。

ボタン — テキスト、URL、サイズ、幅、色、境界線、タイポグラフィ、配置を設定できるリンクボタンを追加します。

ソーシャルリンク — Facebook、Instagram、LinkedIn、TikTok、YouTube、またはウェブサイトなどのサービスへのリンク付きアイコンを追加します。

購読者カウンター — 確認済み購読者の現在の人数を表示します。オフセットの追加、ラベルの変更、数字とテキストのスタイル設定ができます。

スペーサー — 調整可能な空白を追加します。デスクトップとモバイルの間隔は個別に設定できます。

区切り線 — 色、太さ、幅、スタイル、配置、間隔を設定できる水平線を追加します。

ランディングページには、再利用可能な完全なセクションも用意されています。詳しくはランディングページガイドで説明しています。

要素を選択して配置する

キャンバス上の要素をクリックして選択します。その設定が右サイドバーに表示されます。

選択した要素上またはその近くに表示される操作を使って、移動、複製、削除ができます。要素を別のセルや位置へドラッグすることもできます。配置インジケーターで挿入位置を確認できます。

ページに多数の入れ子になったボックス、列、コンテンツブロックがある場合は、「レイヤー」を開きます。レイヤーパネルには完全な構造が一覧表示されます。ここから次の操作ができます。

• 要素を選択する
• 識別しやすいように名前を変更する
• 上下に移動する
• 別の位置へドラッグする
• ロックまたはロック解除する
• 複製する
• 削除する

完成した背景、画像、セクションを誤って移動したくない場合は、ロックが便利です。再度編集または位置変更を行うときは、レイヤーのロックを解除します。

ビルダーのツールバーにある「元に戻す」と「やり直し」を使うと、最近のデザイン変更を前後に移動できます。

テキストを編集する

テキスト要素内をクリックすると、キャンバス上で内容を直接編集できます。テキストツールバーには、段落と見出しのスタイル、および一般的な書式設定オプションがあります。

選択したテキストに応じて、太字、斜体、下線、取り消し線、下付き文字、上付き文字、配置、箇条書きまたは番号付きリスト、リンク、絵文字を使用できます。選択テキストの設定では、他のテキスト要素を変更せずにタイポグラフィと色を調整することもできます。

すべての見出し、本文テキスト、リンク、ボタンで一貫したスタイルを使用する場合は、「ページ設定」の全体タイポグラフィ設定を使用します。1つのブロックだけ外観を変える場合は、選択した要素の設定を使用します。

登録フォームを設定する

キャンバス上の登録フォームブロックを選択して、その設定を開きます。利用できるセクションには、プログレスバー、購読者カウンター、フィールド、非表示タグ、フォームコンテナ、入力フィールド、送信ボタンがあります。

購読者フィールド

メールアドレスは登録フォームの中心となるフィールドです。Maildroppaアカウントに存在する購読者フィールドを追加することもできます。

各フィールドで、ラベルとプレースホルダーの変更、必須項目にするかどうかの指定、フィールドラベルを表示するかどうかの選択ができます。フィールドはドラッグするか移動操作を使って並べ替えられます。

本当に必要な情報だけを尋ねてください。短いフォームはすばやく入力できます。一方、追加フィールドは、その情報をセグメンテーションやパーソナライゼーションに使用する場合に便利です。

非表示タグ

非表示タグは訪問者に表示されません。フォームから登録すると、Maildroppaは選択したタグをその購読者に自動的に割り当てます。

これは、登録の流入元や関心の対象を識別するのに便利です。たとえば、ウェビナー用のフォームには「ウェビナー」タグを付け、リードマグネット用のフォームにはダウンロードしたトピックのタグを付けることができます。

プログレスバー

プログレスバーは無効にすることも、パーセント表示または2ステップインジケーターとして表示することもできます。

パーセント表示では、テキスト、色、フォントサイズ、太さ、配置を変更できます。2ステップインジケーターでは、両方のステップのラベルを編集し、アクティブと非アクティブの色を選択できます。

プログレスインジケーターを使うと、フォームの送信が最初のステップで、Double Opt-inメールの確認が2番目のステップであることを説明できます。

フォーム内の購読者カウンター

登録フォームでは、送信ボタンの前または後に、現在の確認済み購読者数を表示できます。

オフセットの追加、ラベルの入力、位置の選択、タイポグラフィと配置の調整ができます。オフセットは、Maildroppaが表示する確認済み購読者数に加算されます。

このフォームカウンターは、独立した「購読者カウンター」コンテンツブロックとは異なります。数字を送信エリアに直接関連付ける場合はフォーム設定を使用します。デザイン内の別の場所にカウンターを表示する場合は、コンテンツブロックを使用します。

フォーム、入力、ボタンのデザイン

「登録フォームブロック」の設定では、フィールドを囲むコンテナの背景、境界線、角の丸み、間隔を調整できます。

入力設定では、フィールドの背景、ラベル、テキスト、プレースホルダー、境界線、間隔を調整できます。送信ボタンには、テキスト、タイポグラフィ、色、境界線、サイズ、配置の個別設定があります。

キャンバス上のプログレスバーまたは送信ボタンを直接クリックすると、その部分の設定をすぐに開けます。

全体の外観を変更する

右サイドバーで「ページ設定」を開き、全体のデザインを変更します。埋め込みフォーム、ポップアップ、スライドインでは、これらの設定は完全にホストされたページではなく、フォームのキャンバスに適用されます。

メインの背景、背景画像、最大幅、モバイルの間隔を設定できます。外観設定では、次の項目の既定値を定義します。

• 本文フォントとテキストの色
• リンクの色、下線、ホバー時の色
• 見出しのフォント、色、太さ、サイズ、行の高さ
• ボタン
• ボックス、境界線、角の丸み、間隔、パディング
• モバイルページのパディングと列が積み重なる位置

これらの既定値により、デザインの一貫性を保てます。必要に応じて、個々のブロックで上書きすることもできます。

登録フローを接続する

すべてのフォームは登録フローに接続されています。登録フローでは、フォーム送信後の購読者の流れを制御します。

• フォーム送信直後に訪問者に表示する内容
• 送信するDouble Opt-inメール
• 購読者がメールアドレスを確認した後の動作

ビルダーのヘッダーにある登録フローの操作を開くと、現在割り当てられているフローを確認できます。別の既存フローを選択したり、選択したフローを編集したり、新しいフローを作成したりできます。

1つの登録フローを複数のフォームで使用できます。共有フローを編集すると、そのフローを使用しているすべてのフォームに変更が反映されます。そのためMaildroppaでは、共有フローを編集するか、現在のフォーム用に別のコピーを作成するかを選択できます。

プレビューと保存

「プレビュー」をクリックして、公開する前にデザイン全体と登録体験を確認します。プレビューは、長いテキスト、画像の比率、フィールドの順序、ボタンラベル、フォーム全体のバランスを確認するのに便利です。

埋め込みフォーム、ポップアップ、スライドインでは、現在のバージョンを保存する準備ができたら「変更を保存」をクリックします。

ランディングページでは、上部バーに下書きと公開の操作があります。公開せずに保存でき、すでに公開済みのページへの変更は、公開するまで未公開のままです。完全なワークフローについては、ランディングページを作成して公開するで説明しています。

保存後、登録フォームの概要に戻り、ウェブサイトフォームの有効化と埋め込み、または公開済みランディングページの管理を行います。

フォームタイプ別のガイドへ進む

共通するデザイン作業は完了です。作成しているフォームのガイドに進んでください。

• ランディングページを作成して公開する
• 埋め込みフォームを作成して埋め込む
• ポップアップを設定して表示する
• スライドインを設定して配置する