Skip to content

ランディングページの作成

ドラッグ＆ドロップエディターを使用してランディングページを作成およびカスタマイズし、Brazeで直接オーディエンスを拡大し、ユーザーの設定を収集する方法を学びましょう。

前提条件

ランディングページビルダーにアクセスするには、特定の権限が必要です。アクセスできない場合は、Braze管理者にお問い合わせください。

ランディングページの作成

ステップ 1:新しい下書きを作成する

メッセージング > ランディングページに移動し、ランディングページを作成を選択します。既存のランディングページの名前を選択して、複製したり変更を加えたりすることもできます。

Brazeダッシュボードのランディングページセクション。

ステップ 2:ページの詳細を入力する

ランディングページの整理、ブランディング、共有に役立つ内部向けおよび公開向けの詳細を追加します。

一般的な詳細

ランディングページの名前と説明を入力します。これらの詳細は、内部ワークスペースでページを検索するために使用されます。顧客には表示されません。

サイトの詳細

メタタグを設定して、ブラウザタブでのページの表示をカスタマイズし、検索エンジンの結果を最適化します。これらは顧客に表示されます。

以下のベストプラクティスに従うことをお勧めします。

ステップ 3:ページをカスタマイズする

まだ保存していない場合は、下書きとして保存を選択します。ページのカスタマイズを開始するには、ランディングページを編集を選択します。ドラッグ＆ドロップエディターにデフォルトテンプレートがプリロードされ、ユースケースに合わせてカスタマイズできます。

ドラッグ＆ドロップエディターで作成中のランディングページの例。

エディターでは、ランディングページの構成に2種類のコンポーネントを使用します。基本ブロックとフォームブロックです。すべてのブロックは行内に配置する必要があります。

「行」と「フォームブロック」を含む「ビルド」セクション。

これらのブロックを使用して、コンテンツを追加し、ランディングページのレイアウトをカスタマイズできます。

スパンテキスト

カスタムコードを使わずに特定のスタイルをテキスト・ブロックに適用するには、スタイルを設定したいテキストをハイライトし、スタイルに「Wrap with span」を選択する。

テキストボックスには、異なるフォントサイズや色など、さまざまなスタイルが設定されたテキストセクションと、「スタイルをスパンで折り返す」オプションのあるツールバーが表示されるハイライトセクションがある。

スパンのプロパティを調整して、テキストのスタイルを更新する：

  • フォントファミリー、ウェイト、サイズ
  • ライン高さ
  • 文字間隔
  • テキストの配置と色
  • ブロック・パディング

スパンのプロパティパネルには、更新のためのさまざまなオプションが用意されている。

これらのブロックを使用して、ユーザーが送信したデータをBrazeのプロファイルにリンクするフォームを作成できます。フォームブロックを使用する場合は、確認状態用の追加のランディングページも作成する必要があることに注意してください。

新規顧客を登録し、メールにディスカウントコードを送信するフォームブロック。

ページコンテナスタイル

ページコンテナタブから、ランディングページ内のすべての関連コンポーネントブロックに適用されるスタイルを設定できます。これらのスタイルは、特定のブロックでオーバーライドしない限り、ページ全体で使用されます。

ブロックレベルでスタイルをカスタマイズする前に、ページコンテナレベルのスタイルを設定することをお勧めします。ページ全体の背景画像を追加することもできます。

背景画像、色、ボーダーの詳細、コンテンツスタイリングをカスタマイズするオプションを含む「ページコンテナ」セクション。

ユーザーデバイスへのレスポンシブ対応

小さな画面でカラムを垂直にスタックすることで、ランディングページをユーザーのデバイスサイズにレスポンシブ対応させることができます。これを有効にするには、レスポンシブにしたい行にカラムを追加し、カラムのカスタマイズセクションで小さな画面で垂直にスタックをオンに切り替えます。

有効にすると、スタックカラムの順序を逆にして、小さな画面でのマルチカラムコンテンツの垂直順序を制御することもできます。これにより、カスタムコードなしでモバイルでのページの見た目と操作感が向上します。

「カラムのカスタマイズ」セクションの「小さな画面で垂直にスタック」トグル。

オプションフィールドと必須フィールド

フォームフィールドを必須にするかオプションにするかを選択できます。必須フィールドは、フォームを送信する前に入力する必要があります。オプションフィールドは、ユーザーが空白のままにしたり未選択のままにしたりできます。

たとえば、フォーム送信前に同意の取得を強制するには、必須フィールド入力をオンにして、適切な免責事項テキストとともにチェックボックスを必須に設定できます。

「必須入力フィールド」トグルが選択されたチェックボックスフォームフィールド。

ステップ 4:確認ページを作成する（オプション）

ランディングページにフォームが含まれていない場合は、次のステップに進んでください。

ランディングページにフォームが含まれている場合は、確認エクスペリエンスとして機能する2つ目のランディングページを作成します。このページでは、フォーム送信後にユーザーに感謝を伝えたり、次のステップを案内したりする必要があります。

確認ページをリンクするには：

  • フォームの送信ボタンを選択します
  • Web URLを開くアクションを使用して確認ページにリンクします

確認ページを含めない場合、ユーザーはフォームが正常に送信されたかどうかわからない可能性があります。ジャーニーを完了するために、常に確認エクスペリエンスを含めてください。

ステップ 5:ページをプレビューする

エディターのプレビュータブでランディングページをプレビューできます。ランディングページを下書きとして保存した後、ランディングページに移動し、ランディングページの横にあるURLをコピーを選択してURLにアクセスできます。URLを共同作業者と共有することもできます。

メニューが開いて「URLをコピー」オプションが表示されているランディングページ。

公開する前に、以下を確認してください。

  • プランの公開ランディングページ数の上限を超えていないこと
  • 各フォームベースのページがWeb URLを開くアクションを使用して確認ページにリンクされていること
  • すべての必須ページフィールド（URLパスやタイトルなど）が入力されていること

準備ができたら、ランディングページを公開を選択します。

テンプレートの使用

ランディングページテンプレートを使用して、次のCampaigns用のテンプレートを作成できます。これらのテンプレートは、ランディングページエディターとダッシュボードのテンプレートセクション（テンプレート > ランディングページテンプレート）の両方からアクセスおよび管理できます。ランディングページテンプレートには名前が必須で、説明はオプションです。

テンプレートの管理

ランディングページテンプレートのプレビュー、アーカイブ、編集、複製ができます。ランディングページの編集時に、ランディングページをテンプレートとして保存したり、テンプレートに変更を加えたり、ランディングページのコンテンツを削除したりすることもできます。

ランディングページの保存、変更、削除のオプションを含むドロップダウン。

分析の表示

ランディングページの効果を分析するには、メッセージング > ランディングページに移動し、公開済みのランディングページを選択します。ここでは、ランディングページのページビュー数、ページクリック数、ページ送信数、送信率を追跡できます。

ランディングページの分析セクション。

フォーム送信エラーの処理

ユーザーが必須項目が未入力またはサポートされていない入力でフォームを送信しようとすると、一般的なエラーメッセージが表示され、送信できません。

一般的な原因：

  • 必須フィールドが空白のまま
  • テキスト入力に特殊文字が使用されている
  • 必須チェックボックスが選択されていない

ユーザーに表示されるエラーメッセージはカスタマイズできません。公開前にランディングページをプレビューして、フィールドの動作を確認してください。
New Stuff!