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