ランディングページの作成
ドラッグ＆ドロップエディターを使用してランディングページを作成およびカスタマイズし、Brazeで直接オーディエンスを拡大し、ユーザーの設定を収集する方法を学びましょう。
前提条件
ランディングページビルダーにアクセスするには、特定の権限が必要です。アクセスできない場合は、Braze管理者にお問い合わせください。
ランディングページの作成
ランディングページは、共有可能なURLを持つ公開済みのWebページであり、顧客がアクセスできます。
ステップ1:新しい下書きを作成する
メッセージング > ランディングページに移動し、ランディングページを作成を選択します。既存のランディングページの名前を選択して複製したり、変更を加えたりすることもできます。
ステップ2:ページの詳細を入力する
ランディングページの整理、ブランディング、共有に役立つ内部向けおよび公開向けの詳細を追加します。
一般的な詳細
ランディングページの名前と説明を入力します。これらの詳細は、内部ワークスペースでページを検索するために使用されます。顧客には表示されません。
サイトの詳細
メタタグを設定して、ブラウザータブでのページの表示をカスタマイズし、検索エンジンの結果を最適化します。これらは顧客に表示されます。
以下のベストプラクティスに従うことをお勧めします。
| フィールド | 説明 | 推奨事項 |
|---|---|---|
| サイトタイトル | ブラウザータブに表示されるタイトル。 | 60文字以内で使用してください。 |
| メタディスクリプション | 検索結果に表示されるテキストスニペット。 | 140～160文字で使用してください。 |
| ファビコン | ブラウザータブでサイトタイトルの横に表示されるアイコン。 | アスペクト比1:1を使用し、サポートされているファイルタイプはPNG、JPEG、またはICOです。 |
| ページURL | ランディングページへのURLパスです。この値は、メッセージに埋め込むランディングページLiquidタグを使用する際にも参照され、フォーム送信時にユーザーを自動的に識別します。 | この値はワークスペース全体で一意である必要があります。 |
ステップ3:ページをカスタマイズする
まだの場合は、下書きとして保存を選択します。ページのカスタマイズを開始するには、ランディングページを編集を選択します。ドラッグ＆ドロップエディターには、ユースケースに合わせてカスタマイズできるデフォルトテンプレートがプリロードされています。
エディターでは、ランディングページの構成に基本ブロックとフォームブロックの2種類のコンポーネントを使用します。すべてのブロックは行内に配置する必要があります。各ブロックとプロパティの詳細なリファレンスについては、エディターブロック（ランディングページ）を参照してください。
これらのブロックを使用して、コンテンツを追加し、ランディングページのレイアウトをカスタマイズできます。
| ブロックタイプ | 説明 |
|---|---|
| タイトル | コンテンツに見出しやタイトルを追加するためのテキストブロック。セクションの構造化や読みやすさの向上に役立ちます。 |
| 段落 | 長い説明や追加コンテキスト用のテキストブロック。リッチテキストフォーマットをサポートしています。 |
| ボタン | リンクを開いたりフォームを送信したりするなど、指定されたアクションにユーザーを誘導するクリック可能な要素。 |
| ラジオボタン | ユーザーが1つを選択する必要があるオプションのリストを追加します。送信されると、ユーザープロファイルに関連するカスタム属性が記録されます。 |
| 画像 | 画像を表示するためのブロック。画像をアップロードするか、外部ソースを参照するURLを提供できます。 |
| リンク | 指定されたURLに移動するためにユーザーがクリックできるハイパーリンク。テキスト内に埋め込むことも、スタンドアロンで使用することもできます。 |
| スペーサー | 要素間に垂直スペースを追加する非表示ブロック。レイアウトと読みやすさの向上に使用します。 |
| カスタムコード | 高度なカスタマイズのためにカスタムHTML、CSS、またはJavaScriptを挿入して実行できるブロック。このブロックからBraze SDKとインターフェイスするには、ランディングページ用JavaScriptブリッジおよびカスタムフォームブロックの作成を参照してください。 |
スパンテキスト
カスタムコードを使用せずにテキストブロックに特定のスタイルを適用するには、スタイルを設定したいテキストをハイライトし、スタイル用にスパンでラップを選択します。
スパンプロパティを調整してテキストスタイルを更新できます。以下が含まれます。
- フォントファミリー、ウェイト、サイズ
- 行の高さ
- 文字間隔
- テキストの配置と色
- ブロックのパディング
これらのブロックを使用して、ユーザーが送信したデータをBrazeのプロファイルにリンクするフォームを作成できます。フォームブロックを使用する場合、確認状態用の追加のランディングページも作成する必要があることに注意してください。
| ブロックタイプ | 説明 |
|---|---|
| メールキャプチャ | メールアドレス用のフォームフィールド。送信されると、メールアドレスがBrazeのそのユーザーのプロファイルに追加されます。 |
| 電話番号キャプチャ | 電話番号用のフォームフィールド。送信されると、ユーザーはSMSまたはWhatsApp購読グループに登録されます。 |
| 入力フィールド | 標準属性項目（名や姓など）または任意のカスタム属性文字列をサポートするフォームフィールド。 |
| ドロップダウン | ユーザーが事前定義されたリストから項目を選択できます。任意のカスタム属性文字列をリストに追加できます。 |
| チェックボックス | ユーザーがボックスにチェックを入れると、ブロックの属性がtrueに設定されます。チェックが入っていない場合、属性はfalseに設定されます。 |
| チェックボックスグループ | ユーザーが提示された複数の選択肢から選択できます。値は、定義された配列カスタム属性に設定または追加されます。 |
| 購読管理 | メール、SMS、またはWhatsApp購読グループのチェックリスト。ユーザーはフォーム送信時に参加するグループを選択します。各ブロックは1つのチャネル用です。詳細については、購読管理ブロックを参照してください。 |
フォーム付きのランディングページを作成した後、必ずそのランディングページLiquidタグをメッセージに埋め込んでください。このタグにより、Brazeはフォーム送信時に既存のユーザープロファイルを自動的に識別して更新できます。
ページコンテナスタイル
ページコンテナタブから、ランディングページ内のすべての関連するコンポーネントブロックに適用されるスタイルを設定できます。これらのスタイルは、特定のブロックで上書きする場合を除き、ページ全体に適用されます。
ブロックレベルでスタイルをカスタマイズする前に、ページコンテナレベルのスタイルを設定することをお勧めします。ページ全体の背景画像を追加することもできます。
ユーザーデバイスへのレスポンシブ対応
小さな画面でカラムを垂直にスタックすることで、ランディングページをユーザーのデバイスサイズにレスポンシブ対応させることができます。これを有効にするには、レスポンシブにしたい行にカラムを追加し、カラムのカスタマイズセクションで小さな画面では垂直にスタックをオンにします。
有効にすると、スタックカラムの順序を逆にして、小さな画面でのマルチカラムコンテンツの垂直順序を制御することもできます。これにより、カスタムコードなしでモバイルでのページの見た目と操作感が向上します。
デバイス別に行とブロックを非表示にする
デスクトップまたはタブレットとモバイルデバイスで行やブロックを非表示にできます。キャンバス上の行またはブロックを選択します。プロパティパネルで非表示にするを選択し、デスクトップまたはタブレットおよび小型デバイスを選択します。
非表示の行やブロックは、ドラッグ＆ドロップエディターのプレビューやライブランディングページでそのデバイスタイプに対して表示されません。
任意フィールドと必須フィールド
特定のフォームフィールドを必須または任意に設定できます。必須フィールドは、フォームを送信する前に入力する必要があります。任意フィールドは、ユーザーが空白のままにしたり、未選択のままにしたりできます。
ラジオボタンは常に必須であり、任意に設定することはできません。任意の単一選択フィールドが必要な場合は、代わりにドロップダウンの使用を検討してください。
たとえば、フォーム送信前に同意の取得を強制するには、必須フィールド入力をオンにして、適切な免責事項テキストとともにチェックボックスを必須に設定できます。
ステップ4:確認ページを作成する（任意）
ランディングページにフォームが含まれていない場合は、次のステップに進んでください。
フォームがマルチステップフォームを使用している場合は、このステップをスキップしてください。マルチステップフォームには組み込みのロック済み確認ステップが含まれているため、別の確認ページは必要ありません。
ランディングページにフォームが含まれている場合、確認体験として機能する2番目のランディングページをオプションで作成できます。このページは、ユーザーに感謝を伝えたり、フォーム送信後の次のステップを提供したりする必要があります。
- フォームの送信ボタンを選択します
- ユーザーがフォームを送信した際に確認ページを含めるかどうかを選択します
- WebURLを開くクリック時動作を使用して、ユーザーを確認ページに送信します
- なしクリック時動作を使用して、ユーザーがランディングページに留まるようにします
確認ページを含めない場合、ユーザーはフォームが正常に送信されたかどうかわからない可能性があります。ジャーニーを完了するために、必ず確認体験を含めてください。
確認ページが新しいタブで開く場合、元のランディングページに戻って更新された情報で再送信したユーザーは、前回の送信を上書きする可能性があり、データの不整合が生じることがあります。
ステップ5:ページをプレビューする
エディターのプレビュータブでランディングページをプレビューできます。ランディングページを下書きとして保存した後、ランディングページに移動し、ランディングページの横にあるURLをコピーを選択してURLにアクセスできます。
プレビューリンクの共有
エディターでプレビューリンクをコピーを選択して、ダッシュボードにアクセスできないレビュアーとページを共有することもできます。
- ランディングページがLiquidを使用していない場合、このリンクはURLをコピーからの直接URLと同じで、プレビューモードで開かれます。
- ランディングページがLiquidを使用しており、Landing Pages Proエンタイトルメントを持っている場合、リンクはリンク生成時のスナップショットではなく、現在の変更を反映したライブページをオンデマンドでレンダリングします。コンテンツはユーザーごとにパーソナライズされます。プレビューにはBrazeのファビコンが表示され、変更できません。
- Proティアなしでランディングページにnにを追加した場合、Liquidタグは評価されず、公開ページの訪問者には生のテキストとして表示されます。
他のチャネルのプレビューリンクについては、共有可能プレビューを参照してください。
ステップ6:公開する
公開する前に、以下を確認してください。
- プランの公開済みランディングページの上限を超えていないこと
- 各フォームベースのページがWebURLを開くアクションを使用して確認ページにリンクされているか、組み込みの確認ステップを持つマルチステップフォームを使用していること
- すべての必須ページフィールド（URLパスやタイトルなど）が完了していること
準備ができたら、ランディングページを公開を選択します。
iOSおよびSafari（Safariの組み込みコントロールやサードパーティ拡張機能を含む）の積極的なポップアップブロッカーや広告ブロッカーは、フォームの送信ボタンが別のURLも開く場合に、そのURLが同じタブで開くか新しいタブで開くかにかかわらず、ランディングページの動作に悪影響を与える可能性があります。
テンプレートの使用
ランディングページテンプレートは、ランディングページをより速く構築するための再利用可能なデザインの出発点です。テンプレートにはパブリックURLがなく、顧客がアクセスすることはできません。テンプレートからライブランディングページを作成するには、新しいランディングページを作成する際にテンプレートを選択し、必要に応じてカスタマイズしてから公開します。
テンプレートは、ランディングページエディターとランディングページテンプレートページ（コンテンツ > ランディングページ）の両方からアクセスおよび管理できます。ランディングページテンプレートには名前が必須で、説明は任意です。
テンプレートの管理
ランディングページテンプレートのプレビュー、アーカイブ、編集が可能です。自分のランディングページテンプレート（Your Templatesにあるもの）は複製できますが、Brazeテンプレートは複製できません。ランディングページの編集時には、ランディングページをテンプレートとして保存したり、テンプレートに変更を加えたり、ランディングページのコンテンツを削除したりできます。
分析の表示
ランディングページの効果を分析するには、メッセージング > ランディングページに移動し、公開済みのランディングページを選択します。ここでは、ランディングページのページビュー数、ページクリック数、ページ送信数、送信率を追跡できます。
フォーム送信エラーの処理
ユーザーが必須項目が未入力またはサポートされていない入力でフォームを送信しようとすると、一般的なエラーメッセージが表示され、送信できません。
一般的な原因：
- 必須フィールドが空白のまま
- テキスト入力に特殊文字が使用されている
- 必須チェックボックスが選択されていない
ユーザーに表示されるエラーメッセージはカスタマイズできません。公開前にランディングページをプレビューして、フィールドの動作を確認してください。