縦型スワイプLPの作成方法をステップバイステップで解説します
このツールはデザイン済みの画像を配置してLPを構成するツールです。まずは、各スライドに使用する画像をデザインツールで作成してください。
※ 2倍解像度（Retina対応）のサイズです
画面全体に画像を表示する場合のサイズ
固定CTAボタンを表示する場合のサイズ
ツールを開いたら、左側のスライド一覧パネルでスライドを管理します。
「+スライドを追加」ボタンをクリックして新しいスライドを追加します。
スライドを選択し、右側のパネルで「背景」タブを選択。画像をドラッグ＆ドロップまたはクリックしてアップロードします。
左側のスライド一覧でドラッグ＆ドロップして順番を変更できます。
スライドのメニューから複製や削除ができます。
スライドの追加・削除・並べ替え
スライドのプレビュー・要素の配置
背景・オーバーレイ・アニメーションの設定
背景画像の上に、テキストやボタンなどのオーバーレイ要素を追加できます。
見出しや説明文を追加。フォントサイズ、色、配置を自由に調整できます。
リンク付きのボタンを配置。色やサイズ、角丸などをカスタマイズ可能。
アイコンや装飾画像を追加。サイズと位置を自由に調整。
横スワイプで複数の画像を表示できるカルーセルを追加。
キャンバス上で要素をドラッグして位置を調整します。
要素をクリックすると、右パネルで詳細設定を編集できます。
フェードイン、スライドなどのアニメーションを追加できます。
画面下部に常に表示される固定CTAボタンを設定できます。コンバージョン率を高めるために効果的です。
固定CTAは、ユーザーがどのスライドを見ていても常に画面下部に表示されるボタンエリアです。
右パネルの「固定CTA」タブで「有効にする」をオンにします。
ボタンのテキスト、リンクURL、色などを設定します。画像を使用することもできます。
特定のスライド以降で表示させるなど、表示タイミングを調整できます。
完成したLPをZIPファイルとして書き出し、サーバーにアップロードして公開します。
「プレビュー」ボタンで実際の表示を確認します。スマートフォンでの見え方をチェックしましょう。
「書き出し」ボタンをクリックしてZIPファイルをダウンロードします。
ダウンロードしたZIPファイルを解凍します。
解凍したファイル一式をサーバーにアップロードして公開完了です。
your-lp/
├── index.html ... LPのHTMLファイル
└── assets/
├── images/ ... 画像ファイル
├── css/ ... スタイルシート
└── js/ ... JavaScript
書き出し時に「ecforce用」を選択し、パスを指定すると、ecforceのファイルパス形式に変換して書き出します。
テーマファイルのassetsフォルダにアップロード。Liquidテンプレートで読み込み。
HTMLエディタ機能を使用してLPを設置できます。
標準のHTML/CSS/JS形式で書き出されるため、どの環境にもアップロード可能です。