石崎 力也

今回はClickFunnelsでSMSのオプトインフォームを作っていきます。通常は名前とEメールアドレスを入れたりするのですが、今回は電話番号のSMSのオプトインフォームを作っていきます。

Step1. 「SMS SIGN UP」を挿入する

「ADD NEW ELEMENT」をクリックして「SMS SIGN UP」を選択します。これは1つのエレメントになっています。

Step2. SETTINGSタブを設定する

• TOP MARGIN：エレメントの上の余白を調整できます。この辺は文言を入れることができます。「SMS CHECKBOX」は例えば「イベント直前にSMSに通知する」というふうにチェックボックスの所の文言を変更できます。
• PHONE FIELD：「電話番号（例: 090-XXXX-XXXX）」と入力してみます。
• SMS NOTICE：文言が長かったので用意していないのですが、注意事項の所を日本語に直すといいと思います。
• FONT FAMILY：フォントを変更できます。
• 「INPUTS」「CHECKBOX TEXT」「NOTICE TEXT」はそれぞれ文字の大きさを変えることができます。このチェックボックスの所も文字が小さいので大きくしてあげるといいと思います。注意事項などはあまり大きくせずに、目立つものだけ大きくするほうがいいと思います。
• 「SMS CHECKBOX」と「SMS NOTICE」は色を変更できます。「SMS CHECKBOX」の色を緑にして、「SMS NOTICE」を薄めのグレーにしてみます。あまり薄いと見えなくなるので調整してみてください。

Step3. THEMESタブを設定する

次はTHEMESタブです。THEMESタブはだいたいデザインなどが出たりするのですが、こういうエレメントに関してはテーマが用意されていないことがあるので、ここは飛ばしていきます。

Step4. ADVANCEDタブを設定する

まずはSTYLESタブです。

• CHECKBOX TEXT STYLE：チェックボックスのテキストのスタイルを選択できます。「Bold」にしているのですが、文字の太さがあまり変わっていません。もしかすると日本語が多いからあまり見た目が変わらないのかもしれません。
• TEXT ALIGN：電話番号のボックスの所のテキストの左右の位置を変更できます。
• CORNERS：テキストのボックスの角を丸めることができます。なぜか「Country Code For Mobile」のほうは角を丸めることができません。本当はここも日本語化したいのですが、こういうところはClickFunnelsが対応していないことがあるので、徐々に修正されていくのではないかと思います。
• BG COLOR：電話番号のボックス内の背景の色を設定できます。「Black」は見にくいので「Grey」がいいかもしれません。
• ICON：電話のアイコンのことです。これは右側に入るため「TEXT ALIGN」が右だとかぶってしまうので、左に寄せておきます。こうすると電話だということが一目でわかるのでけっこういいです。
• ICON STYLE：色を選択することができ、「Color」というものもあります。「Black」か「White」が無難でいいと思います。
• ICON POSITION：ここも変更できます。右だとちゃんとテキストをよけてくれなかったのですが、左だとちゃんとテキストをよけてくれます。

次は「ANIMATION」です。他のエレメントでもお話ししている内容なのですが、これはページを読み込んでからのディレイのことで、遅れてエレメントを表示させることができます。上と下で分かれていて、上のほうは1秒以上の比較的長めの「TIMED DELAY」を設定することができ、下のほうはミリセカンド単位の短めの「TIMED DELAY」を設定することができます。

上のほうの「TIMED DELAY」は例えば60分のウェビナーで30分たってからピッチが入ったりしたときに、登録ボタンや購入のフォームを時間差で出す場合に使います。「TIMED DELAY」でスタイルを選びます。「Fade In」と「Fade In With Scale」があるので、この辺もテストしてみてください。

「MINUTES」と「SECONDS」はページが読み込まれてからどのくらいたってから表示するかを設定するものです。例えば「MINUTES」を「30」、「SECONDS」を「15」にするとページがロードされてから30分15秒後にエレメントが出てくるという感じになるのですが、このエレメントだとこの機能はあまり使わないかもしれません。

「ANIMATION」のほうは1秒、つまり1000ミリセカンド未満の「TIMED DELAY」です。JavaScriptでいうLazy Loadingの考え方に近いです。「TYPE」で2種類から選べます。

「On Page Load」はページの表示から起算してどのくらいのディレイを出すかという秒数を数えます。「STYLE」を選択することができ、「Fade In」は先ほど説明したとおりです。他にもあるのでいろいろ試してみてください。「DELAY (MS)」はミリセカンド単位で、500ミリセカンドが0.5秒です。これも調整することができます。「On Page Scroll (becomes visible)」はページをスクロールしていってこのエレメントの場所が見え始めたときから起算する秒数を指定するという、若干の違いがあります。

このような感じで完成です。今回は以上です。

やり方を動画で見る

ClickFunnels（クリックファネル）の使い方・操作方法の一覧ページに戻る

今回はClickFunnelsで住所の入力フォームを作っていきます。

ClickFunnelsにおける住所の入力フォームの特徴

今開いているのはオーダーフォームのページなのですが、「Step #2」の所に住所を入力するフォームが作ってあります。これは1つのエレメントで構成されているのですが、ClickFunnelsは英語圏にカスタマイズされているところがあるので、住所の番地が先にきていたりして英語表記になっています。

ここの「Full Address」や「City Name」は変更できません。入力フォームの中に表示される文字は日本語にできますが、「Select Country」の所も全部英語で出てしまうので、日本のお客さんにリーチする際に驚かれるかもしれません。そういうことを気にしないという人はデジタルプロダクト以外で配送先が必要であればClickFunnelsでこういうものが作れるので、このやり方を説明していきます。

Step1. 「SHIPPING ADD.」を挿入する

「ADD NEW ELEMENT」をクリックします。「BILLING ADD.」というものもあるのですが、今回は配送先のほうなので「SHIPPING ADD.」を選択します。そうすると先ほどと同じような画面が出てくるので設定していきます。

Step2. SETTINGSタブを設定する

• TOP MARGIN：エレメントの上の余白を調整できます。
• フォームの中の日本語化：例えば「ADORESS TEXT」を「番地」、「CITY TEXT」を「市町村」というふうにそれぞれ変えていきます。
  • 「ADORESS TEXT」：番地
  • 「CITY TEXT」：都市名
  • 「STATE TEXT」：都道府県
  • 「ZIP TEXT」：郵便番号

• FONT SIZE：フォームの中のフォントサイズを変更できます。外側のフォントサイズは変わりません。

Step3. THEMESタブを設定する

だいたいはTHEMESタブでプリセットされたデザインが選べるのですが、残念ながらこのエレメントでは選べません。このようにデザインがあまり調整できないエレメントもあります。

Step4. ADVANCEDタブを設定する

STYLESタブから見ていきましょう。

• REQUIRED：「Not Required」にしておけばこのフォームを記入せずに先へ進めます。デフォルトでは「Not Required」になっていますが、これも選んでみてください。
• TOGGLE EXTRA INFO：「Full Address」を入力してもらうか「Country」だけを入力してもらうかが選択できます。デフォルトだと「Show Full Address」になっているのですが、場合によっては「Only Country」を選択するのもありだと思います。
• TEXT ALIGN：「TOGGLE EXTRA INFO」を「Show Full Address」にしたときのフォーム内のテキストの左右の位置を変更できます。これは左側が一番いいと思います。
• CORNERS：入力フォームの角丸の半径を変更できます。ピクセル数を大きくするほど角が丸くなり、デフォルトの「5px」に戻すと四角い感じになります。
• BG COLOR：背景色を変更すると入力欄が認識しやすくなるので、「BG COLOR」でカラーを選択してもいいと思います。「White」「Gray」「Black」があるので、色味を確認しながら選択してみてください。

次はADVANCEDタブです。これは他のエレメントでも説明したのですが、ページを読み込んだりしたときにエレメントを表示する際のディレイを選択できます。上と下に分かれていて、上のほうは1秒以上の比較的大きなディレイを入れることができ、下のほうはJavaScriptでいうLazy Loadingのような感じで時間の短いディレイを入れることができます。

上のほうから見ていきます。「TIMED DELAY」ではエフェクトを選択できます。「Fade In」と「Fade In With Scale」があり、これも実際のエフェクトを確認してみてください。

「MINUTES」と「SECONDS」で時間を指定できます。「HOURS」はないのですが、例えば1時間半であれば90分で指定できるので、その辺は安心してください。これは例えば60分のウェビナーのときに30分のところでオーダーフォームなどを出したいという場合によく使います。「MINUTES」を「30」、「SECONDS」を「15」と入力すれば30分15秒たったときにセールスページでこういうフォームを出したりすることができます。

「ANIMATION」のほうは短い期間のディレイでしたね。「On Page Load」と「On Page Scroll (becomes visible)」の2つがあります。

「On Page Load」はページが表示されたときから起算して指定したミリセカンドでディレイを表示できます。「STYLE」は種類がたくさんあるのでいろいろ試してみてください。「DELAY (MS)」はデフォルトでは500ミリセカンドですが、これも変更できます。

「On Page Scroll (becomes visible)」は例えば長いセールスレターなどでページをスクロールしていってエレメントの場所に来た時点から起算するようにできます。こちらも「STYLE」と「DELAY (MS)」を変更できます。

今回はオーダーフォームで入れましたが、他のページでも「SHIPPING ADDRESS」のエレメントを使えるので、例えばオプトインの際に「Country」だけ選択してもらうということもできると思います。いろいろできるので使ってみてください。今回は以上です。

やり方を動画で見る

ClickFunnels（クリックファネル）の使い方・操作方法の一覧ページに戻る

今回はClickFunnelsであらかじめ決まった時間をカウントダウンする方法を説明します。

「MINUTE TIMER」とは

ClickFunnelsのタイマーは何種類かあり、例えば24時間を毎日カウントダウンするようなタイマーもあります。これについては別の動画で説明しているのですが、今回作るのは例えば1時間、30分、15分というふうにあらかじめ決まった秒数、分数をカウントダウンしてくれるタイマーで「MINUTE TIMER」という機能です。何も設定しないと例えば今見ているページを更新した場合に設定した30分に戻るのですが、もう一回更新するとまた30分に戻ります。この辺の挙動も変更することができるのでやっていきます。

Step1. 「MINUTE TIMER」を挿入する

「ADD NEW ELEMENT」で今回は「MINUTE TIMER」を使います。先ほど言った毎日X時をカウントするものは「DAY TIMER」です。「COUNTDOWN 2.0」はまた別の機能があるので、別の動画を見てください。「MINUTE TIMER」を選択して挿入されたら設定していきます。

Step2. SETTINGSタブを設定する

• TOP MARGIN：エレメントの上の余白を調整できます。
• 「HOURS」「MINUTES」「SECONDS」：カウントダウンする時間を指定できます。今回は30分に指定しておきます。
• TRANSLATE：ラベルの言語を変更できるので、日本語にしておきます。
• EXPIRE ACTION：カウントダウンが0になったときの挙動をどうするかというものです。いくつかあるのですが、「Redirect To URL」はここで指定したURLに自動的にリダイレクトしてくれるという機能です。「Show & Hide Elements」は例えばタイマーの下に申し込みボタンがあるような場合にそれを隠したり、カウントダウンが0になった瞬間に他のページやメーリングリストに登録するボタンやフォームを出したりする設定ができます。
• HIDE THESE：複数選択できるので、ボタンやフォームなどのエレメントにチェックを付けて複数のエレメントを隠すことができます。
• SHOW THESE：「HIDE THESE」とは逆に、タイマーが0になった際に表示したいエレメントを選択できます。この下に“「SHOW THESE」で設定したものはタイマーがまだ動いている状態のときは消えています”という注意書きが書いてあります。
• RE – VISIT ACTION：最初にお見せしたようにページを更新し直したり、もう一度そのページに戻ってきたときのタイマーの挙動です。
  • デフォルトは「Auto Reset Timer」になっているので、30分に設定していた場合は例えば残りが1分になっていてもリロードした瞬間に30分に戻るようになっています。
  • あとの2つはCookieを使って途中まで覚えていてくれるという機能です。「Auto Expire For X Days」は「EXPIRE COOKIE (DAYS)」に入力したカウントダウンの時間を覚えていてくれるという機能です。「Hide Timer & Show Section/Row」は残り時間の有無に関わらずタイマーを隠して他のSectionやRowを表示するという機能です。これも「SHOW THIS」で何を表示するか選択できます。これはリビジットしたときに表示するエレメントのことです。例えば「EXPIRE COOKIE (DAYS)」が7日間であれば1週間はこの設定を覚えていてくれて、1週間たったらまた指定した時間に戻るという感じの挙動になります。この辺は少しややこしいかもしれませんが、必ずご自身でテストしてみることをお勧めします。

• FONT FAMILY：フォントを選択できるもので、他のエレメントと共通しています。

Step3. THEMESタブを設定する

デザイン不要でいろいろな形が出てきます。今回は赤だときついのでシンプルな黒のデザインにします。このようにワンクリックですごくいいデザインを選ぶことができます。

Step4. ADVANCEDタブを設定する

STYLESタブから見ていきます。

• SIZE：全体のサイズを選択できます。「Large」にして見やすくしておきます。
• ALIGN：左右の位置を変更できます。
• LABEL WEIGHT：ラベルの部分の太さです。見やすく「Bold」にしておきます。
• LABEL COLOR：「Black – subtle」になっていますが、「White – subtle」だとこのような感じになります。

次はANIMATIONタブです。

他のエレメントでも説明したことがありますが、ページがロードされてから若干遅れてエレメントを表示させることができます。上は1秒以上の比較的大きなディレイを表示することができ、下はJavaScriptでいうLazy Loadingのような考え方になるのですが、指定したミリセカンドごとのディレイを表示することができます。

上の「TIMED DELAY」は「Fade In」と「Fade In With Scale」の効果があり、どちらがいいかは実際にやってみたほうがわかりやすいと思うので、いろいろ試してみてください。

「MINUTES」と「SECONDS」で時間を設定できます。例えば90分に設定すれば1時間半になるので、「HOURS」がなくても心配しないでください。これは例えば60分のウェビナーに対して30分で表示したいという場合によく使います。「MINUTES」を「30」、「SECONDS」を「15」にして30分15秒に指定することもできます。これは起算点に注意してほしいのですが、ウェビナーの所に入れた場合もウェビナーを再生したときからではなくて、ページをロードしたときから指定した時間でディレイを入れて表示するという感じになるので、この辺は挙動を確認してください。

「ANIMATION」はミリセカンド単位でしたね。「TYPE」の「On Page Load」を見ていきます。「STLYLE」は「TIMED DELAY」よりも選択肢があるのでいろいろ試してみてください。「DELAY (MS)」はデフォルトで500ミリセカンドになっています。「On Page Load」はページの読み込みから起算した短めのディレイです。

「On Page Scroll (becomes visible)」は例えば長いセールスレターなどでこのタイマーの場所に来たときから起算するというもので、ディレイの起算点を変えることができます。こちらも「STYLE」と「DELAY (MS)」を変更できます。今回は以上です。

やり方を動画で見る

ClickFunnels（クリックファネル）の使い方・操作方法の一覧ページに戻る

今回はClickFunnelsで毎日決まった時刻をカウントダウンするタイマー（Day Timer）を作っていきます。

Step1. 「DAY TIMER」を挿入する

「ADD NEW ELEMENT」をクリックします。タイマーはいくつか種類があるので間違えないようにしてほしいのですが、今回作るのは「DAY TIMER」です。では、設定していきます。

Step2. SETTINGSタブを設定する

• TOP MARGIN：エレメントの上の余白を調整できます。
• END TODAY AT：何時に対してカウントダウンするかという時間を選択できます。例えば「1 AM」であれば夜中の1時です。ここが今回の肝になるところです。
• TIMEZONE：これが一番大事なところです。「EST」や「PST」など4つのタイムゾーンがありますが、アメリカのタイムゾーンなので日本のタイムゾーンはありません。つまり、例えば「TIMEZONE」で「EST」を選択したら日本のタイムゾーンである「JST」との対応を調べてもらう必要があります。日本時間で夜中の12時にしたい場合は「EST」では何時かがわかると思うので、その時間に設定してください。

• TRANSLATE：「Japanese」があり、選択するとラベルの部分が日本語になります。他の言語も選択できます。
• EXPIRE ACTION：カウントダウンタイマーが0になったときの挙動です。いくつか選択できるのですが、「Redirect To URL」はここで指定したURLに自動的にリダイレクトしてくれます。「Show & Hide Elements」は時間が来たらエレメントを隠してくれるというもので、例えば登録ボタンをなくしたりできます。あとはウェイトリストに飛ばすための代わりのボタンを出したりもできます。あるいは「本日の受付は終了しました」と表示させたりしてもいいかもしれません。
• RE – VISIT ACTION：ページを更新したりもう一度そのページに飛んできたときにどうするかを選択できます。
  • Auto Reset Timer：デフォルトではこれになっていて、例えばページを閉じてタイマーが0になった後、もう一回訪れた際に次の日の時間に対してカウントダウンが始まるというふうに、カウントダウンタイマーがずっと動き続けているという感じになります。
  • Auto Expire For X Day：これを選択するとブラウザのcookieが覚えていて、タイマーが0になった後、「EXPIRE ACTION」で指定した挙動をどのくらい継続するかを選択できます。
  • Hide Timer & Show Section/Row：タイマーがなくなる代わりに別のSectionやRow、エレメントなどを表示することができます。これも「ESPIRRE COOKIE (DAYS)」で日数を指定できるのでやってみてください。これもいろいろ設定した後は必ずチェックすることをお勧めします。

• FONT FAMILY：フォントを選択できます。

Step3. THEMESタブを設定する

THEMESタブにはプリセットのデザインがいろいろあるので、色合いなど好きなものを選んでください。

Step4. ADVANCEDタブを設定する

STYLESタブから見ていきましょう。

• SIZE：サイズを変更できます。
• ALIGN：左右の場所を選択できます。
• LABEL WEIGHT：ラベルの部分の太さを選択できます。太いほうが見やすいと思います。
• LABEL COLOR：「Black – subtle」が選択してありますが、「White – subtle」も選択できるのでページに合わせてください。

最後はANIMATIONタブです。これは他のエレメントでも説明していることですが、ページが表示されてから少し遅延してディレイを表示することができるものです。上のほうは1秒以上の比較的大きなディレイを表示することができ、下のほうはミリセカンド単位の時間の短いディレイを表示することができます。

上のほうの「TIMED DELAY」はディレイで表示させるときの効果を選択できます。これもいろいろと試してみてください。

「MINUTES」と「SECONDS」でどのくらいディレイさせるかという時間を設定できます。例えば60分のウェビナーで30分ぐらいからピッチが始まるような場合によく使います。これはページを表示してからなので動画の再生が遅れた分はカウントしてくれないのですが、「MINUTES」を「30」、「SECONDS」を「15」にするとページの読み込みから30分15秒ディレイさせて表示してくれます。

下のほうはJavaScriptでいうLazy Loadingのような効果が得られます。「TYPE」はページがロードされてから起算する「On Page Load」とページをスクロールしていってエレメントの場所まで来てから起算する「On Page Scroll (becomes visible)」の2つがあります。

「On Page Load」のほうを見ていきます。スタイルを選択でき、ディレイの時間はミリセカンド単位で指定できます。「DELAY (MS)」が「500」で0.5秒です。「On Page Scroll (becomes visible)」のほうも同様です。今回は以上です。

やり方を動画で見る

ClickFunnels（クリックファネル）の使い方・操作方法の一覧ページに戻る

今回はClickFunnelsで大きめのアイコンを入れる方法を説明します。アイコンを入れるとセールスページがすごく映えるので追加していきましょう。

Step1. 「ICON」を挿入する

「ADD NEW ELEMENT」をクリックし、「ICON」をセレクトして設定していきます。

Step2. SETTINGSタブを設定する

• TOP MARGIN：エレメントの上の余白を調整することができます。
• ALIGN：表示エリアに対して左寄せなのか中央なのか右寄せなのかを選択できます。
• URL / ACTION：クリックしたときに飛ばすURLを指定できます。また、ここにカーソルを合わせてクリックすると「#open-popup」や「#submit-form」、「#yes-link」や「#no-link」などのショートコードが出てきます。他にも「#scroll-Section」でページ内のSectionに飛ばすという動作も指定できるので、必要に応じて設定してみてください。
• URL TARGET：同じタブやウィンドウで開く「Normal」か、新しいタブやウィンドウで開く「New Tab/Window」のどちらかを選択できます。
• FONT SIZE：フォントサイズではなく、実際はアイコンのサイズです。「72」がスライダーのマックスですが、「200」などと手動で入力してこのマックス値を超えた設定ができます。
• ICON COLOR：カラーを選択できます。

Step3. THEMESタブを設定する

次はTHEMESタブです。これはClickFunnelsがあらかじめプリセットのような感じでデザインを用意してくれていて、デザイン要らずで画像を用意しなくてもアイコンの周りに装飾を付けてくれるので、使い勝手がいいと思います。これをクリックすると「FONT SIZE」で設定してあるアイコンのサイズがプリセットに合わせて変わってしまうので、大きくしたい場合はプリセットを選んでから大きくしてください。

Step4. ADVANCEDタブを設定する

ADVANCEDタブが一番大事な「ICON PICKER」の設定です。アイコンの種類を選ぶのですが、たくさんの種類があります。英語のフィルター機能もあるので、例えばチェックマークが欲しい場合は「check」と入力することでチェックマークっぽいアイコンがたくさん出てきます。「video」や「cart」など、いろいろと試してみてください。

次はANIMATIONタブです。これは表示のディレイを設定でき、上のほうは1秒以上の大きなディレイ、下のほうはJavaScriptでいうLazy Loadingのような感じのミリセカンド単位のディレイです。

上の「TIMED DELAY」は1秒以上のディレイでしたね。どういうスタイルでディレイを表示するかが選択できるので、これもいろいろ試してください。ディレイの時間も設定することができるのですが、これはウェビナーなどの途中でセールスが始まったときに決済ボタンやエレメントを表示したい場合によく使います。

例えば60分のウェビナーに対して30分15秒などと指定して表示することができます。これはウェビナーのボタンをクリックして再生を開始してからではなくて、ページの読み込みが終わった後から起算する時間なので、そこは間違いがないように設定してみてください。

「ANIMATION」のほうはミリセカンド単位のもので、「On Page Load」と「On Page Scroll (becomes visible)」の2種類があります。「On Page Load」はページの読み込みから起算してディレイを表示してくれるというものです。「STYLE」もいろいろな種類があるのでいろいろ試してみてください。「DELAY (MS)」はデフォルトで500ミリセカンドになっているのですが、これも変更できます。

「On Page Scroll (becomes visible)」は長いセールスページなどをスクロールしてこのアイコンの場所に来たときから起算して、指定したミリセカンドで効果を出すことができるものです。これも同じくスタイルやディレイの時間を選ぶことができます。

こういうアイコンはアクセントになるので大きくして使ってもいいですし、いろいろと使い勝手がいいと思うので試してみてください。今回は以上です。

やり方を動画で見る

ClickFunnels（クリックファネル）の使い方・操作方法の一覧ページに戻る