あなたはオンラインコースビジネスを運営する事業者として、LeadpagesなどからSysteme.ioにページを移行したいけれど、Systeme.ioのページビルダーの使い方が分からず困っていませんか？セクション、行、要素という概念をどう使えば良いか理解できていないかもしれません。ここではSysteme.ioでページを効率的に再構築する方法を、実際の作業手順に沿って解説します。
HTMLのデータをエクスポートして移植チームに依頼すれば、長いセールスレターでも3、4日で再構築してくれます。でも実は彼らも手動で再構築しているだけなので、僕たち自身でも同じことができます。移植チームがなくても、セクション、行、要素という基本構造を理解すれば、誰でもページを再構築できます。
今回お届けするノウハウはこちら
実践：ゼロから自分でページを作る手順
では実際に一緒に進めてみましょう。
まず、Systeme.ioの「セールスファネル」にアクセスし、「新規作成」から名前を入力します。今回は一から作るので「カスタム」を選択してください。保存後に作成したファネルを開き、「ステップの追加」からページを追加します。ファネル名やページ名は、「demo」など分かりやすい名前を付けて管理しましょう。
ここでページタイプを選ぶ場面になります。「販売ページ」は「セールスページ」のことです。ただし販売ページには決済フォームがありません。販売ページ上に直接、申込フォーム(埋め込み型)を配置したい場合は「注文フォーム」を使う必要があります。注文フォームはセールスレターとしても使えますし、決済も受けられます。
ですが、僕は販売ページにセールスレターを書き、その中のボタンから注文フォームに遷移させるやり方をおすすめしています。お客様がページをもう一度遷移する手間は増えますが、その方が全体的に使いやすいと感じています。また、注文フォームをページとして使う場合は、若干表示スピードが遅くなる傾向があります。今回の例では「販売ページ」を使って構築していきます。
セクション・行・要素の基本構造を理解する
まず、白紙から新しいページを作成し、必ず保存しましょう。Systeme.ioのページビルダーはClickFunnelsによく似た直感的なインターフェースなので、ClickFunnelsを使った経験があればすぐに操作に慣れるはずです。「編集」ボタンをクリックして、ページ編集画面に進みます。今回は何もない空のテンプレートなので、ゼロからページを組み立てていくことになります。
ここから実際にセクション・行・エレメントの使い方を身につけていきます。まず「どこでセクションを分けるべきか」ですが、目安として背景色の切り替わりを基準にすると分かりやすいです。たとえば、ページの背景色が黒からさらにもう少し濃い黒に変わった場合、そこがセクションの切り替えポイントとなります。
まず「セクション」を追加してください。Systeme.ioのページビルダーでは、緑色で表示される部分がセクション、青色で表示されるのが「行」となっています。行の内部に、テキストや画像など様々なエレメント（要素）を配置していく仕組みです。
効率的な作業手順：まずは構造を作ってからコンテンツを配置
効率的に作業を進めるためには、最初にページ全体の構造を作り、その後で内容を配置し、最後にデザインを調整するという手順で進めるのがポイントです。
作業手順1：構造を作る
まず「箱」となるセクションを作成し、その中に行を追加して構造を組み立てます。
例えば2列の行を作成し、左に動画、右にテキストを並べるレイアウトがよく使われます。
作業手順2：コンテンツを配置
テキストや画像エレメントを必要な数だけ追加し、それぞれに内容をコピー&ペーストしていきます。同じ行内に複数のサイズや内容の異なるテキストを入れたい場合は、必要なだけテキストエレメントを追加し、それぞれに本文をコピー&ペーストするのが効率的です。
さらに、画像も挿入したい場合は、テキストエレメントと同じように画像エレメントを追加し、それぞれを別々のボックス（エレメント）として配置していくのがおすすめです。こうすることで、例えばフォントサイズの違い（10、20、15など）がある場合も、個別のボックスで細かく調整することができます。
まずは必要数のテキストエレメントや画像エレメントを配置し、それぞれに内容を貼り付けていきましょう。多少地道な作業にはなりますが、この方法で進めると後からデザインや調整をするときにとても楽になります。細かいデザインは気にせず、まずは全体の文章を一通り貼り付けることで、大まかなページ構成を把握しましょう。
作業手順3：デザインを調整
フォントサイズや色、余白調整などの細かい修正は最後にまとめて行います。最初から完璧を目指すより、全体をざっくり構築→後から仕上げる流れの方が効率的です。
移植作業は確かに地道で手間がかかりますが、移植チームがやっていることと僕たちがやることに大きな違いはありません。違うのは、作業に慣れていることやスピードぐらいです。最初は時間がかかったとしても、1ページずつ丁寧に進めれば必ず完成します。
この経験は、今後新しいページを作りたくなったときにも必ず役立つはずです。移植チームに全部任せてしまうと、こうしたスキルは身につきませんが、自分で移植作業をすることで、Systeme.ioを使いこなす力が身につき、長期的に大きな資産になります。
まとめ：セクション→行→要素の順番で効率的に再構築
ここまでSysteme.ioでページを再構築する方法を解説してきました。最後に要点を3つにまとめました。
- Systeme.ioのページビルダーはセクション、行、要素の3層構造。背景色が変わる所でセクションを分ける。
- 先にセクションと行を配置し、その後テキストを貼り、デザインは最後に調整すると効率的。
- 自分でページを再構築することで、Systeme.ioのページビルダーの使い方を完全にマスターできる。
