スワイプLPを作成する

スワイプLPエディター(β)もしくはカルーセルWidgetを活用して、スワイプLPを作成することが可能です。


スワイプLPエディター(β)

従来はWidgetのみでしたが、スワイプLPエディターβでの作成が可能になりました!

  • 直感的に制作が可能

    追加したい画像をクリックするだけ。ワンクリックでスライドの非表示もできるため、アイディアを瞬時に実行。

  • 比較モード搭載
    制作画面の左側に、制作中のスワイプLPや他のversionのLPを表示し、比較しながら製作可能。

  • 詳細設定がより柔軟に
    カルーセル矢印・スクロールバーの表示、スワイプ自動再生や、スワイプの方向など柔軟に設定可能。

※スワイプLPエディターはβ版になります。2025年9月現在、下記機能の利用は出来ません。

今後アップデートを予定しています。

・Widget/フォーム/リンク置換/履歴の閲覧/デバイス別等の出し分け機能

作成方法_スワイプLPエディター(β)

  1. 新デザインにて「新規ページを作成」ボタンをクリック


  2. beyondページ作成時の編集タイプを「スワイプLPエディター(β)」を選択しページを作成
    ※編集タイプは後から変更出来ません



  3. 検索バー右側のあるVersion作成ボタンを押下しVersionを作成



  4. 画像やリンク追加、詳細設定は下記手順でそれぞれ設定が出来ます
    1. 画像の差し込み:スライドを選択 > 右側の画像から差し込みたい画像選択することでスライドに反映
      ※追加のボタンから画像をアップロードする必要がございます



    2. リンク追加:スライドを選択 > 下部に「スライドにリンクを追加」のボタンが表示されるためクリック > 追加したリンクを設定する



    3. 詳細設定:画面右側の「Version設定」を選択 > ナビゲーションや動作設定を行うことが可能です




WidgetでスワイプLPを作成する

スワイプLPの種類とWidget名

  • 横スワイプ
  • 横スワイプ(全画面、2枚目からCTA表示)
    • Widget名:全画面スライド(上に進捗バー/下に動くボタン)※要javascrript(アクション)

 

作成方法_Widget

  1. Version内にWidgetを追加
  2. Widgetをクリックし、Scriptタグをタグ設定のheadとbodyに移動
  3. HTML編集 > Scriptタグをカット
  4. タグ設定 > Scriptタグをペースト
  5. HTML編集 > 画像、テキスト、リンク先を変更
    ※画像サイズについて、縦長の場合は「600*750」もしくは「580*750」でお試しください。また、デバイスによって表示サイズが変わるため調整が必要な場合がございます。

    ezgif-73fde1d86a7ed

ABテストの実施方法

  1. 作成したVersionを複製
  2. FVやテキスト、ABテストしたい箇所を変更
  3. 配信割合を「0」→「1」に変更

ezgif-7ae763dd9922c

 

注意点

  • 設問(画像)ごとの分析はできません。
    • 画像単位でのヒートマップや数値分析はできませんが、ABテストを実施することでどちらの画像やテキストの成果がいいのか簡単にテストすることができます。
  • ヒートマップはファーストビューで取得できるデータのみ確認いただけます。
    • 外部ツールのタグを利用して、レコーディングをして確認いただくことは可能です。
    • 例:Clarity
      Clarity_recording

参考URL