メインコンテンツまでスキップ

レイアウトを作成する

レイアウトは、ページ上でオファーが表示される位置と方法を決定します。最も一般的なレイアウトタイプは、オーバーレイと埋め込みです。

レイアウトを追加する​

  1. my.rokt.com にログオンします。
  2. Transactions をクリックします。
  3. Layouts をクリックします。
  4. Add layout を選択します。 Add layout
  5. レイアウトテンプレートを選択します。

テンプレートをデザインする​

注記

画面上部のボタンを使用して、レイアウトのデスクトップビューとモバイルビューを切り替えることができます。

  1. レイアウトの名前を入力します。

  2. テーマをパーソナライズします:

    1. 設定

      設定説明
      オファーレイアウトに表示するオファーの最小および最大数を設定します。
      フリークエンシーキャップリピーターに対してレイアウトを抑制する期間を設定します。
      言語レイアウトを表示する言語を選択します。
      プラットフォームレイアウトが表示されるプラットフォームを選択します。

    2. 一般スタイル

      設定説明
      背景レイアウトの背景色を設定します。
      外枠外枠の太さ、半径、および色を設定します。
      スペーシングレイアウトのマージンとパディングをピクセル (px) で設定します。
      上部ディバイダー上部ディバイダーのデザインパラメータを設定します。
      上部マージンが >0 の場合にのみ上部ディバイダーが表示されます。
      下部ディバイダー下部ディバイダーのデザインパラメータを設定します
      下部マージンが >0 の場合にのみ下部ディバイダーが表示されます。

      General Style settings

    3. 進捗トラッカー

      設定説明
      進捗トラッカーを表示オンまたはオフを切り替えます。
      進捗トラッカーの外観番号付き、塗りつぶし円、またはダッシュから選択して、レイアウトの進捗を表示します。
      開始位置進捗トラッカーを表示し始める位置を、最初または2番目の広告から選択します。
      番号付きカウンターの開始位置これは開始位置設定に直接関連します。番号付けを最初の広告から始める場合はここで1を選択し、2番目から始める場合は2を選択します。

| Location | 配置において進捗トラッカーを表示する位置を選択します。「Above」または「Below」のいずれかを選択してください。 | | Visited | 進捗トラッカーで訪問済みの広告を示す色を設定します。 | | Unseen | 進捗トラッカーでまだ訪問していない広告を示す色を設定します。 |

Progress tracker settings

  1. テキストスタイル

ドロップダウンからレイアウトで使用するフォントを選択します。

初めは利用可能なフォントの選択肢は少ないですが、以下の手順で独自のブランドフォントをアップロードできます。

カスタムフォントを追加

注記

このプロセスを開始する前に、フォントファイル (.tff, .otf, .woff, .woff2) をダウンロードしておく必要があります。

以下の手順でレイアウトにフォントを追加できます：

  1. Manage custom fonts をクリックします。
  2. Click to add a new font をクリックします。
  3. フォントを使用するプラットフォームを選択します（複数選択可能）。
  4. Upload をクリックし、ファイルを検索して選択します。
  5. （オプション）Show optional styles をクリックし、フォントの Bold または Italic バージョンをアップロードします。
  6. Save をクリックします。

新しいフォントはドロップダウンから選択できるようになります。

各テキストセクションのフォントサイズ、色、マークダウンスタイリング（太字、斜体、下線オプション）などのテキストプロパティを編集できます。編集しているテキストセクションを理解するには、レイアウトとエディタ内の両方に表示される名前を確認してください。この例では、レイアウトの Title セクションが編集されています：

Layout Text Styles

  1. ボタン
設定説明
一般
フォントボタンで使用するフォントとフォントサイズを選択します。
ボタンの半径ボタンの角の丸みを決定します。0 px は四角い角を提供し、16 px は最も丸い角を提供します。
ボタンサイズボタンの最小の高さと幅を設定します。
CTAの文字ケースAs typed（入力した通りに表示）、Title case（各単語の最初の文字を大文字で表示）、または Uppercase（すべての文字を大文字で表示）から選択します。
フォーメーション肯定的または否定的な応答を先に表示するか選択します。
モバイルビューモバイルデバイスでボタンをスタックまたはアンスタックとして表示するか選択します。
プライマリとセカンダリ
ボタンのスタイルと色をパーソナライズするために使用します。
  1. ハイパーリンク
設定説明
フッター
デスクトップデフォルトデスクトップで表示されるレイアウトのフッター内のハイパーリンクのデフォルトスタイルと色を設定します。
デスクトップホバーデスクトップで表示されるレイアウトのフッター内のハイパーリンクのホバースタイルと色を設定します。
モバイルデフォルトモバイルデバイスで表示されるレイアウトのフッター内のハイパーリンクのスタイルと色を設定します。
一般
デフォルトレイアウトの本文内のハイパーリンクのデフォルトスタイルを設定します。
ホバーレイアウトの本文内のハイパーリンクのホバースタイルを設定します。
  1. オファー終了時の動作
設定説明
コンテンツ
タイトルレイアウトの最終ページ、すなわちすべてのオファーが提示された後のページのタイトルを設定します。
メッセージレイアウトの最終ページに表示されるメッセージを追加します。
スタイル
テキストの配置レイアウトの最終ページのテキストの配置を設定します。

  1. セクションをパーソナライズします。

  2. ヘッダー

設定説明
コンテンツ
テキストレイアウトのヘッダーセクションに表示されるテキストを追加します。
**このテキストはレイアウト上で黒 (#000000) で表示されます。
スタイル
背景ヘッダーの背景色を設定します。
境界線(オプション) ヘッダーの境界線の太さ、半径、色を設定します。
ヘッダーの間隔ヘッダーのマージンとパディングをピクセル (px) で設定します。
テキストの配置ヘッダーのテキストの配置を設定します。
セクション区切りトグルをオンにすると、ヘッダーの下に水平線を表示します。

レイアウトのヘッダー

  1. 開始段落
設定説明
コンテンツ
最初の段落これは事前に入力されたテキストですが、編集可能です。
2番目の段落(オプション) 必要に応じて追加のテキストを記入するスペースです。
スタイル
背景開始段落の背景色を設定します。
境界線（オプション）開始段落の太さ、半径、および色を設定します。
開始段落の間隔開始段落のマージンとパディングをピクセル（px）で設定します。
テキストの配置開始段落のテキストの配置を設定します。
  1. オファー
設定説明
スタイル
背景オファーの背景色を設定します。
境界線（オプション）オファーの太さ、半径、および色を設定します。
オファーの間隔オファーのマージンとパディングをピクセル（px）で設定します。
設定
画像レイアウト上で画像を表示するタイミングと場所を決定します。
配置コンテンツの配置を選択します。
クリエイティブコピーの位置クリエイティブコピーを表示する場所を選択します。
ボタンボタンの配置を選択します。
否定的な反応で閉じるこのトグルが選択されている場合、クリエイティブに否定的な反応があるとレイアウトが閉じます。
応答タイプ表示される応答のタイプを選択します。
  1. 確認メッセージ
設定説明
確認メッセージを表示確認メッセージをすべての位置で表示するか、2番目の位置以降のみで表示するか、またはまったく表示しないかを選択します。
  1. 閉じの段落
設定説明
コンテンツ
テキスト（オプション）レイアウトのボタンの下に表示される閉じの段落のテキストを入力します。
ポジション1用とポジション2+用の2つのテキストボックスがあります。すべてのポジションでテキストを表示したい場合は、両方のテキストボックスを完成させる必要があります。
スタイル
背景閉じの段落の背景色を設定します。
境界線（オプション）閉じの段落の太さ、半径、および色を設定します。
閉じの段落の間隔開始段落のマージンとパディングをピクセル（px）で設定します。
テキストの配置閉じの段落のテキストの配置を設定します。
セクション区切りトグルをオンにすると、閉じの段落の下に水平線が表示されます。必要に応じて区切り線のスタイルを設定します。

  1. フッター

    設定説明
    設定
    リンクフッターに表示するリンクを選択します。
    リンク表示テキストクライアントプライバシーポリシーを表示を有効にした場合に表示するテキストを入力します。
    URLクライアントプライバシーポリシーを表示を有効にした場合にプライバシーポリシーのURLを入力します。
    スタイル
    背景フッターの背景色を設定します。
    境界線(オプション) フッターの境界線の太さ、半径、および色を設定します。
    閉じる段落の間隔フッターのマージンとパディングをピクセル(px)で設定します。
    テキストの配置フッター内のテキストの配置を設定します。
    モバイルビューでのリンクモバイルビューでリンクを積み重ねるか、インラインで表示するかを選択します。

  2. 保存して閉じるをクリックして、レイアウトをRoktに送信し、承認を受けます。

この記事は役に立ちましたか？
Last updated Oct 29, 2025