メール配信ツールで メールマーケティングを シンプルに
登録フォームビルダー：フォームをデザインする
公開日: · 最終更新日: · 著者 Marcus Biel
この記事のポイント
Maildroppaのビジュアル登録フォームビルダーの使い方を解説。テンプレートの選択、コンテンツの配置、入力項目のデザイン、タグの割り当て、登録フローの関連付けから、プレビュー、保存までを紹介します。
登録フォームビルダーは、Maildroppaのすべての登録フォームとランディングページで使えるビジュアルエディターです。
レイアウトの調整、テキストや画像の追加、購読者項目の設定、色やフォントの変更、タグの割り当て、フォーム送信後の動作の設定ができます。作業中はキャンバスに仕上がりが表示されるので、コードを書かずに登録までの一連の体験をデザインできます。
Maildroppaでは、次の4種類のフォームで同じビルダーを使用します。
- ランディングページは、公開してリンクで共有できる独立したページです。
- 埋め込みフォームは、ウェブサイトのページ内に直接配置するフォームです。
- ポップアップは、ウェブサイトに重ねて表示されるフォームです。ページ上の要素から開くこともできます。
- スライドインは、ブラウザーウィンドウの指定した端や位置に表示されるフォームです。
このガイドでは、これらのフォームに共通するすべての機能を説明します。リンク先のガイドでは、各タイプに固有の設定と手順を説明しています。
登録フォームビルダーを開く
Maildroppaで「Signup Forms」を開きます。「Create Form」をクリックすると、新しいランディングページ、埋め込みフォーム、ポップアップ、スライドインを作成できます。
既存のフォームの編集を続けるには、その名前をクリックするか、登録フォーム一覧の3点メニューから「Edit Form」を選択します。
フォームには、内部管理用のわかりやすい名前を付けましょう。「フォーム1」のような一般的な名前よりも、「ホームページのメルマガ登録」「ウェビナーのポップアップ」「夏のリードマグネット」のような名前のほうが、後から見分けやすくなります。フォーム名はMaildroppa内での管理に使うもので、訪問者に自動的に表示されることはありません。
ビルダーの構成
ビルダーは、大きく4つの領域に分かれています。
上部バーには、フォーム名と主な操作ボタンがあります。ここから一覧に戻ったり、作業内容をプレビューしたり、保存したりできます。ランディングページでは、下書きの保存や公開に関する操作もここで行います。
左サイドバーには「Layout」「Content」「Layers」があります。ここでフォームの構造を作成し、新しい要素を追加し、キャンバスに配置したすべての要素を管理します。
キャンバスは、中央の作業領域です。編集中のページやフォームが表示されます。要素をクリックすると選択できます。要素を別の場所へドラッグしたり、左サイドバーから新しい要素を追加したりすることもできます。
右サイドバーには「Settings」と「Page settings」があります。「Settings」では選択した要素を、「Page settings」では全体の背景やデザインの初期設定を変更します。
小さい画面では、「Content」ボタンと「Settings」ボタンでサイドバーをパネルとして開きます。利用できる機能は変わりません。
テンプレートから始める
フォームを作成すると、選択したフォームタイプに合わせた初期デザインがビルダーに表示されます。白紙から始めることも、標準フォームや作成済みのテンプレートを選ぶこともできます。
テンプレートには、レイアウト、色、タイポグラフィ、サンプルコンテンツがあらかじめ用意されています。テンプレートを選んでも、その後の変更に制限はありません。どの要素も編集、移動、複製、スタイルの変更、削除ができます。
各フォームタイプには、用途に適したテンプレートがあります。たとえばランディングページには、メルマガ、リードマグネット、ウェビナー、ウェイトリスト向けのページデザインが一式用意されています。埋め込みフォーム、ポップアップ、スライドインにも、それぞれに適したコンパクトな初期デザインがあります。
どのテンプレートを選ぶか迷ったら、目的に最も近い構成のものを選びましょう。白紙のキャンバスから同じ構成を作るよりも、テキスト、色、画像を変更するほうが、通常は早く仕上がります。
レイアウトを作成する
左サイドバーで「Layout」を開き、セルの行を追加します。次のレイアウトを利用できます。
- 1セル
- 均等な幅の2、3、4セル
- 幅の比率が2:1の2セル
- 幅の比率が1:2の2セル
レイアウトをクリックすると、現在の挿入位置に追加されます。キャンバスへドラッグして追加することもできます。その後、各セルにコンテンツを配置します。
ボックスや列を選択すると、右サイドバーでサイズ、間隔、配置、背景、枠線、パディングを調整できます。複数列のレイアウトでは、列幅の比率も変更できます。
レイアウトを工夫して、自然に読み進められる構成にしましょう。コンパクトな登録フォームには1列のレイアウトが適しています。画像、メリットの一覧、イベント情報などを登録フォームの横に表示する場合は、2列のレイアウトが便利です。
コンテンツを追加する
左サイドバーで「Content」を開き、コンテンツブロックを追加します。ブロックをクリックして挿入するか、キャンバス上の配置したい位置へドラッグします。
ビルダーには、次のコンテンツブロックがあります。
Signup form（登録フォーム） — 購読者項目と送信ボタンを含むブロックです。機能するフォームとして保存するには、デザイン内に登録フォームブロックが1つ必要です。配置すると、追加可能なコンテンツブロックには表示されなくなります。
Text（テキスト） — 見出し、段落など、書式付きのテキストを追加します。
Image（画像） — URL、アップロード、Maildroppaのメディアライブラリから画像を追加します。代替テキストやリンクの追加に加え、サイズ、縦横比、トリミング、焦点位置、回転、反転を設定できます。
Video（動画） — YouTubeやVimeoの動画、埋め込みURL、または動画ファイルを直接追加します。プレビュー画像や再生ボタンの外観も設定できます。
List（リスト） — 箇条書きや番号付きのリストを追加します。各項目を編集し、マーカーの色、間隔、タイポグラフィ、配置を調整できます。
Button（ボタン） — リンクボタンを追加します。テキスト、URL、サイズ、幅、色、枠線、タイポグラフィ、配置を設定できます。
Social links（ソーシャルリンク） — Facebook、Instagram、LinkedIn、TikTok、YouTubeなどのサービスや、自社のウェブサイトへのリンク付きアイコンを追加します。
Subscriber counter（購読者カウンター） — 現在の登録確認済み購読者数を表示します。オフセット値の加算、ラベルの変更、数字とテキストのスタイル設定ができます。
Spacer（スペーサー） — 調整可能な余白を追加します。デスクトップとモバイルで、それぞれ個別に間隔を設定できます。
Divider（区切り線） — 水平線を追加します。色、太さ、幅、スタイル、配置、間隔を設定できます。
ランディングページには、再利用可能なセクションも一式用意されています。詳しくはランディングページガイドで説明しています。
要素を選択して配置する
キャンバス上の要素をクリックすると、その要素が選択され、右サイドバーに設定が表示されます。
選択した要素の上や近くに表示される操作ボタンで、移動、複製、削除ができます。別のセルや位置へドラッグすることもできます。挿入先は配置インジケーターで確認できます。
ページ内にボックス、列、コンテンツブロックが多数入れ子になっている場合は、「Layers」を開きます。レイヤーパネルには全体の構造が一覧表示され、次の操作ができます。
- 要素を選択する
- 識別しやすい名前に変更する
- 上下に移動する
- 別の位置へドラッグする
- ロックまたはロック解除する
- 複製する
- 削除する
完成した背景、画像、セクションを誤って動かしたくない場合は、ロックが便利です。再び編集したり位置を変えたりするときは、レイヤーのロックを解除します。
ビルダーのツールバーにある「Undo」と「Redo」を使うと、直前のデザイン変更を取り消したり、取り消した変更をやり直したりできます。
テキストを編集する
テキスト要素の内側をクリックすると、キャンバス上で直接編集できます。テキストツールバーには、段落や見出しのスタイルと、一般的な書式設定のオプションがあります。
選択したテキストに応じて、太字、斜体、下線、取り消し線、下付き文字、上付き文字、配置、箇条書き、番号付きリスト、リンク、絵文字を使用できます。選択範囲の設定では、他のテキスト要素を変えずにタイポグラフィや色を調整することもできます。
すべての見出し、本文、リンク、ボタンに統一したスタイルを適用するには、「Page settings」の全体向けタイポグラフィ設定を使います。1つのブロックだけ外観を変えたい場合は、その要素の設定を使います。
登録フォームを設定する
キャンバス上の登録フォームブロックを選択して、設定を開きます。プログレスバー、購読者カウンター、項目、非表示タグ、フォームのコンテナ、入力欄、送信ボタンの各セクションを設定できます。
購読者項目
登録フォームの中心となる項目はメールアドレスです。Maildroppaアカウントに登録されている購読者項目も追加できます。
各項目では、ラベルやプレースホルダーの変更、必須項目にするかどうかの指定、ラベルの表示・非表示の選択ができます。ドラッグするか、移動用の操作ボタンを使って並べ替えることもできます。
入力を求める情報は、本当に必要なものに絞りましょう。短いフォームはすばやく入力できます。一方、セグメント分けやパーソナライズに情報を活用する場合は、項目を追加すると役立ちます。
非表示タグ
非表示タグは訪問者には表示されません。フォームから登録すると、選択したタグがその購読者に自動で割り当てられます。
登録元や関心のあるテーマを把握するのに便利です。たとえば、ウェビナー用フォームでは「ウェビナー」タグを、リードマグネット用フォームではダウンロードしたコンテンツのテーマに対応するタグを付けられます。
プログレスバー
プログレスバーは、非表示にするか、パーセント表示または2ステップ表示に設定できます。
パーセント表示では、テキスト、色、フォントサイズ、文字の太さ、配置を変更できます。2ステップ表示では、両ステップのラベルを編集し、アクティブ時と非アクティブ時の色を選択できます。
プログレスバーを使うと、フォームの送信が最初のステップ、ダブルオプトインの確認メールで登録を確定する操作が2番目のステップであることを伝えられます。
フォーム内の購読者カウンター
登録フォームでは、送信ボタンの前または後に、現在の登録確認済み購読者数を表示できます。
オフセット値の加算、ラベルの入力、表示位置の選択、タイポグラフィや配置の調整ができます。オフセット値は、Maildroppaが表示する登録確認済み購読者数に加算されます。
このフォーム内カウンターは、独立した「Subscriber counter」コンテンツブロックとは別のものです。送信エリアに直接関連付けて人数を表示する場合は、フォームの設定を使います。デザイン内の別の場所にカウンターを表示する場合は、コンテンツブロックを使います。
フォーム、入力欄、ボタンのデザイン
「Signup Form Block」の設定では、項目を囲むコンテナの背景、枠線、角の丸み、間隔を調整できます。
入力欄の設定では、背景、ラベル、テキスト、プレースホルダー、枠線、間隔を調整できます。送信ボタンには、テキスト、タイポグラフィ、色、枠線、サイズ、配置の個別設定があります。
キャンバス上のプログレスバーや送信ボタンを直接クリックすると、その部分の設定をすぐに開けます。
全体の外観を変更する
右サイドバーの「Page settings」を開いて、全体のデザインを変更します。埋め込みフォーム、ポップアップ、スライドインでは、ホストされたページ全体ではなく、フォームのキャンバスに設定が適用されます。
全体の背景、背景画像、最大幅、モバイルでの間隔を設定できます。外観の設定では、次の項目の初期設定を指定します。
- 本文のフォントと文字色
- リンクの色、下線、ホバー時の色
- 見出しのフォント、色、太さ、サイズ、行の高さ
- ボタン
- ボックス、枠線、角の丸み、要素間の間隔、パディング
- モバイル表示でのページのパディングと、列を縦に並べる切り替えポイント
これらの初期設定により、デザインの一貫性を保てます。必要に応じて、個々のブロックで設定を上書きすることもできます。
登録フローを関連付ける
すべてのフォームには登録フローが関連付けられています。登録フローでは、フォーム送信後の一連の動作を設定します。
- フォーム送信直後に訪問者に表示する内容
- 送信するダブルオプトインの確認メール
- 購読者がメールアドレスを確認した後の動作
ビルダーのヘッダーにある登録フローの操作メニューを開くと、現在割り当てられているフローを確認できます。別の既存フローを選択したり、選択中のフローを編集したり、新しいフローを作成したりできます。
1つの登録フローを複数のフォームで使用できます。共有フローを編集すると、そのフローを使用しているすべてのフォームに変更が反映されます。そのためMaildroppaでは、共有フローを編集するか、現在のフォーム専用のコピーを作成するかを選べます。
プレビューと保存
「Preview」をクリックして、公開前にデザイン全体と登録までの一連の体験を確認します。長いテキスト、画像の縦横比、項目の順序、ボタンのラベル、フォーム全体のバランスを確認するのに便利です。
埋め込みフォーム、ポップアップ、スライドインでは、現在の内容を保存する準備ができたら「Save changes」をクリックします。
ランディングページでは、上部バーで下書きの保存や公開を行います。公開せずに保存することもできます。公開済みのページを変更した場合も、その変更を公開するまでは反映されません。詳しい手順は、ランディングページを作成して公開するで説明しています。
保存後は登録フォーム一覧に戻り、ウェブサイト用フォームの有効化と埋め込み、または公開済みランディングページの管理を行います。
フォームタイプ別のガイドへ進む
これで共通のデザイン作業は完了です。作成しているフォームのガイドに進んでください。
メール配信を、もっと効果的にしませんか？
機能過多のツールや割高なプランに振り回されるのは、もう終わりにしませんか。Maildroppaなら、個別のサポート、プライバシーに配慮した管理機能、充実したメールマーケティング機能を利用できます。永年無料のプランから始められます。
クレジットカード情報の入力は不要です。利用期限もありません。