【Systeme.io活用ガイド】リスト集客を劇的に効率化！LP用テンプレートの使い方とカスタマイズ方法

英語圏ツールの「デザインの壁」を突破する、日本語対応テンプレートを作ってみたよ

こんにちは！
この記事では、systeme.io（システム・アイオー）用のLPのテンプレートをご紹介したいと思います。

英語圏のサービスを使うときに、いつも私が最初に絶望するのが、デザインなんですね。
英語ではかっこいいんだけど、日本語に置き換えた途端に、いろんなバランスが崩れてしまうということに絶望して、「もうこんなツール使えない」と思ってしまったりするんですけれど、大抵なんとかなります。

ニーズに合わせて選べる2種類のオプトイン・ファネル

これはsysteme.io用に私が作ったものです。オプトイン・ファネルですね。
メルマガに登録していただく代わりに、何か差し上げますという。そしてサンキューページが表示されるという、まあ、ただそれだけのものなんですが、文言を変更したりすると、お使いいただける感じになっています。

これはパン教室の先生が、オンラインコースを売りたいんだけれど、その前に無料のE-bookいかがですか？ということでリストを取るという想定をしています。

名字、お名前、メールアドレスをいただくという風になっています。
入力して「ダウンロードする」を押していただいたら、サンキューページに遷移するという、ことですね。

このフッターの部分ですね。「あなたのお名前」というところを書き換えていただいたり、あとは利用規約、プライバシーポリシー、特商法表記などあれば、ここにリンクを張ることができますので、そのように使っていただければと思います。

それからもう一つ。
「お金のことがよくわかる投資入門無料講座」ということで、「無料講座に申し込みませんか？」というLPです。
「こんなお金の心配はありませんか？」
画像とか変えていただけますので、文言も書き換えてください。

「何が学べますか？」ということで、ここも書き換えることができます。
そして、お申し込みフォーム。「お申し込み後、ご登録メールアドレス宛に無料講座の視聴URLをお届けします」ということで、動画講座を視聴していただくという、まあ、それと引き換えにメールアドレスくださいというLPですね。

これもフッターが同じようになっています。これのサンキューページがこちらです。似た感じですけれど、シンプルにこんな風にできます。

共有リンクから一瞬で完了する、ファネルの取り込み手順

どうやって取り込むかということなんですが、たとえばですけれど、このパンの方をやりましょうか。
このオプトインページとサンキューページとが、2ページ対になって「セールスファネル」という形になっています。
オプトイン・ファネル、ちょっと分かりづらいので名前変えますね。「パンレシピ・オプトインファネル」にしておきます。保存。

このパンレシピの私が共有リンクをお渡しします。
私これ今、中野琴子のアカウントで入っているのを見ておいてくださいね。
1回ログアウトして、別の無料アカウントで入り直します。

こちらが、グレーアイコンになってますね。私の無料アカウントです。「アップグレード」と出ているということは、無料アカウントであるということですね。
この「サイト」から「セールスファネル」に行きます。今まだ何にもないです。

この状態で、ブラウザのアドレスバーに先ほどの共有リンクを貼り付けます。「type=funnel」となってますね。エンターキーを押します。
そうすると「アカウントにファネルが追加されました」と言って、なんか時計マークが表示されるんですが、再読み込み（リロード）してみてください。

そうすると有効になっています。開けてみましょう。
そうすると「基本のパンのE-book差し上げます」というのが。
無料アカウントなので下にバッジが出ていますけれど、取り込まれました。

内部のURLパスとかは、それぞれ、なんか任意の文字列がついているんですけれど、この2つのページが読み込まれます。
「プライバシーポリシー」という情報ページを一応作っておきました。どんな感じかというと、まあ、タイトルがあってテキストを入れられますよ、ということなんですね。

直感的な操作で自由自在にカスタマイズ

私はウェブサイトの方にこの法的なページを持っているので、そこにリンクさせているんですけれど、そうでない方は、このsysteme.ioの中に、こういう情報ページという形を使って、これも複製できますので、たとえば次は「利用規約」という形で作ってもいいと思います。
このリンクをこのフッターのリンクに、していくということなんですね。

あとは、この「基本のパンのE-book」の場合、ページを編集するから入っていただいて、まあお好きに使ってください。
たとえば、「名字いらないよ」という場合は、この行ごと削除する。

「OK」とお名前とメールアドレスだけになりますし、「いや、名前も最初はもらわなくていいよ、メールアドレスだけでいいよ」という場合は、これを削除して、メールアドレスだけいただいて、お名前は後々いただく、という風にしてもいいと思います。

あとは、画像をパンじゃなくて何か差し替えたいというとき。
オーバーレイはセクションの背景色で設定しているんですけれど、後ろの画像は、ページの「設定」から行って、ページの背景画像に設定しているんですね。
なので、画像は1回削除するともう二度と読み込まれないので、何か任意の画像を入れていただくといいです。

背景画像は、幅・高さ100%とか、いろいろ変えられるので実験してみてください。

あとは、レイアウトを変えたときにモバイルアイコンで確認することをお忘れなく。
この3列になっているときは、モバイルで見たときになんかこんなに隙間が開くのかな、と思うんですが、実機（スマートフォン）で見てください。
実機でどう見るかというのは、後でお話しします。

あとは、フッターの「あなたの名前」というところをドラッグして打ち替える。ご自身の名前、あるいは教室の名前に打ち替える。
そして「利用規約」のところは、リンクを張ることができます。リンクを入力して「確認」って押すとハイパーリンクになりますので、そのようにお使いください。