石崎 力也

今回はClickFunnelsでポップアップ表示する画像を入れていきます。

Step1. 「IMAGE POPUP」を挿入する

「ADD NEW ELEMENT」をクリックして「IMAGE POPUP」を選択します。サムネイル部分とクリックした後のフルサイズの画像を両方セットしていきます。

Step2. SETTINGSタブを設定する

• TOP MARGIN：エレメントの上の余白を調整できます。
• 「THUMBNAIL」と「FULL SIZE」：小さい画像をわざわざ作り直す必要はありません。両方ともURLは全く同じものが入っています。この場合はサムネイルの部分だけ「THUMBNAIL HEIGHT」を小さくして、クリックすると同じ画像が引き延ばされたような状態で出てくるように加工しています。「ADD IMAGE」をクリックして画像を追加します。「FULL SIZE」のほうも「ADD IMAGE」で同じ画像を追加します。これは別の画像でも構いません。クリックしたら別の画像が出てくるというのもありなので、クリックしたいような画像にしておいて、見てほしい画像を「FULL SIZE」のほうに入れるというやり方でもいいです。今回はサイズが大きいままやっていきます。

• ALT TEXT：画像が表示されないときにテキストで代替するという機能です。HTMLがわかる人はピンとくるのではないかと思います。
• 「THUMBNAIL WIDTH」と「THUMBNAIL HEIGHT」：先ほども説明したようにサムネイル部分の大きさを変えることができます。WIDTHと HEIGHTを指定することができるのですが、両方というよりは片方を指定するほうがいいと思います。片方だけを指定すると画像の縮尺の比率をうまく保ったままリサイズしてくれるので便利だと思います。

Step3. THEMESタブを設定する

テーマに関してはClickFunnelsが用意してくれているデザインをプリセットのような感じで使うことができます。枠付きのものやシャドウが付いただけのものなどがあります。

Step4. ADVANCEDタブを設定する

最初にSTYLEタブです。

• ALIGN：画像を右、左、中央と変えることができます。
• RADIUS：画像の枠に関する設定ができます。「Circle」にすると丸くなり、「Round Corners」にすると四角のままで角だけ丸くなります。
• SHADOW：画像の枠にドロップシャドウを付けることができます。
• OPACITY：画像の透明度を設定できます。サムネイルを透明にするのもいいと思います。下に行くほど透明度が上がって薄くなっていきます。
• GREY SCALE FX：画像をフルカラーで表示するのかモノクロで表示するのかを設定できます。いちいちモノクロの画像を用意しなくてもいいので重宝すると思います。

ANIMATIONタブではディレイを設定することができます。大きく上と下に分かれていて、上のほうは1秒以上の比較的大きなディレイを表示させることができ、下のほうはミリセカンド単位の細かいディレイを表示させることができます。

上のほうは「TIMED DELAY」で効果を選択できます。「Fade In」でいいと思います。例えば60分のウェビナーで30分15秒たってからピッチのところで画像を出したいという場合に使います。

逆にJavaScriptでいうLazy Loadingのような感じでミリセカンド単位で表示したいという場合は「ANIMATION」の「TYPE」で設定します。「On Page Load」と「On Page Scroll (becomes visible)」の2種類があり、「On Page Load」のほうは、ページの読み込みから起算して指定した効果で指定した時間後に表示させるという機能です。「On Page Scroll (becomes visible)」のほうは、例えば長いセールスページなどでこの画像がある所までスクロールしてきたときから起算して、指定した時間のディレイで表示させるという機能です。

画像をたくさん配置して、クリックして詳細やグラフを見てほしいという場合にけっこう使えると思うのでやってみてください。今回は以上です。

やり方を動画で見る

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

今回はClickFunnelsでクリックするとページ内でスクロールしてジャンプしてくれるようなリンクを作っていきます。

Step1. 「BUTTON」と「HEADLINE」を挿入する

「ADD NEW ELEMENT」をクリックして「BUTTON」と「HEADLINE」を選択します。今回はボタンとテキストのリンクで飛ばすものも作りたいので、大きめのテキストが入る「HEADLINE」を用意してみましょう。

まずは下準備をします。飛ばしたい場所のSectionのSETTINGタブに行き、右下の「GET CSS INFO」と出ている「#」をクリックします。そうすると上に「Title:」、下に「CSS ID Selector:」がある画面が出てきます。

「Title:」は「Section」などの単純な名前になっていると思いますが、これをユニークな名前に変更します。飛ばすときにこの名前を使うため、他の名前とかぶっていると他のSectionに飛んでしまったりして不具合の原因になるので、例えば購入の所に飛ばすのであれば「PurchaseSection」のような名前にします。入力したらコピーして「UPDATE」をクリックします。「CSS ID Selector:」の「#section–89682」もコピーして控えておきます。

Step2. 「BUTTON」を設定する

次にボタンのSETTINGSタブから「EDIT ACTION」の「SET ACTION」に行きます。スクロールに関しては2通りのやり方があり、「SCROLL TO ROW / SECTION ON PAGE」と「GO TO WEBSITE URL」で設定できます。

• SCROLL TO ROW / SECTION ON PAGE：選択肢がたくさんあるときに例えば「p」を押すと「Purchase」が出てきたりします。「PurchaseSection (section)」を選択するとPurchaseのSectionに飛ぶようになります。

• GO TO WEBSITE URL：SETTINGSタブに行き、「EDIT ACTION」の「SET ACTION」から「GO TO WEBSITE URL」を選択して、先ほどの「PurchaseSection」という名前をコピーします。ここからが重要です。「#scroll」と全部小文字で入れて、「-」を入れた後に「セクション名」と書いてある日本語の部分を先ほどコピーした「PurchaseSection」にします。これを全部選択してコピーしておきます。ここで「GO TO WEBSITE URL」に貼り付けます。設定した後は結局両方とも同じ挙動になります。

Step3. 「HEADLINE」を設定する

テキストの所も全部テキストを選択してもいいですし、一部だけ（下の図の例の場合は「Headline」のみ）ということもできるのでリンクを作ってください。そうしたら「#」の所に先ほどコピーしたものを入れて「#scroll-PurchaseSection」という名前にします。

ちょっとお見せしたいものがあるので、もう一つ作っていきます。「CSS ID Selector:」の所の「#section–89682」はページ内のジャンプで使えます。

例えば「#」の所に入れて「#section–89682」にすると挙動が変わるので、この2つの違いをよく見ておいてください。上はスクロールあり、下はスクロールなしでジャンプしてくれます。セーブしてプレビューで見ていきます。

新しく作ったボタンをクリックしてみます。「Click to Sign Up」のボタンはどちらも挙動が一緒だと思います。次はテキストです。

• 上の「Headline」はスクロールありのほうです。クリックするとスクロールしました。
• 下の「Headline」は「CSS ID Selector:」を直接貼り付けたものです。これはClickFunnelsのヘルプにも何も書いていないのですが、クリックするとスクロールではなく時間をかけずに一瞬で飛んでしまうのがわかると思います。これはお好みになるのですが、どちらがいいのかを試してみてください。

ちなみに今のやり方はボタンのほうでもできて、「SET ACTION」で「GO TO WEBSITE URL」に直接「CSS ID Selector:」の名前を入れます。そうするとボタンの挙動がスクロールではなくなります。

ということで、細かい差異はあるのですが、私はスクロールのほうがページ内でジャンプしたことがわかりやすいので良いのではないかと思っています。いろいろ試して使ってみてください。今回は以上です。

やり方を動画で見る

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

今回はClickFunnelsでクリックするとポップアップして出てくるビデオを設置していきます。

Step1. 「VIDEO POPUP」を挿入する

最初にお見せすると、ここに埋め込んである画像をクリックするとビデオがポップアップで出てくるのですが、これを作っていきます。

「ADD NEW ELEMENT」をクリックします。「video」で検索して「VIDEO POPUP」を選択するとダミーの画像が入るので設定していきます。

Step2. SETTINGSタブを設定する

• TOP MARGIN：エレメントの上の余白を調節できます。
• THUMBNAIL URL：見ていただいたらわかると思うのですが、この下はYouTubeの再生アイコンのような画像が入っています。今はダミーの「Watch Video」になっていますが、これはご自身で画像を用意してもいいと思いますし、私は「SEARCH」から取ってきました。もしかしたら気に入ったものがないかもしれないので、「Unsplash」などからダウンロードしてご自身で加工したほうがいいかもしれません。サムネイルはいろいろと試してみてください。

• VIDEO URL：普通のビデオのエレメントだとVimeoなど他のプラットフォームを選べるのですが、今回はたぶんYouTubeだけだと思います。もしかしたらVimeoもできるかもしれないので、Vimeoでやってみてもいいと思います。
• ALT TEXT：この画像が表示できないときに代わりのテキストを表示するというもので、HTMLに詳しい人はたぶんわかると思います。
• TITLE：動画のタイトルなので入力してみてください。
• 「THUMBNAIL WIDTH」と「THUMBNAIL HEIGHT」：大きすぎるサムネイルを入れてしまった場合でもピクセル数を指定できるので、もともと大きいサイズの画像でも「THUMBNAIL HEIGHT」を「400」に指定すると小さくなります。

Step3. THEMESタブを設定する

THEMESタブはClickFunnelsがあらかじめプリセットとしてデザインを登録してくれているので、気に入ったものを選んでみてください。この下で作った画像は黒枠のデザインです。クリックしないとポップアップしないので、他のエレメントで「クリックでポップアップ」という文字を表示しておいたほうがいいかもしれません。

Step4. ADVANCEDタブを設定する

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

• ALIGN：左右の位置を設定できます。
• RADIUS：枠を「Circle」で円形にするのか「Round Corners」で角を丸くするのかが選択できます。
• SHADOW：今はもともとシャドウがかかっているテーマを選んでいるのですが、枠のドロップシャドウを付けることができます。
• OPACITY：透明度の設定ができます。今は「Full Visible」なので透明度はなしです。下に行くにつれてどんどん薄くなっていきます。
• GREY SCALE FX：下のエレメントを見たほうがわかりやすいかもしれません。ちょっとおしゃれにしたいときなどは「Full Color」を「Black & White」にすればわざわざ画像をアップロードし直すことなくグレースケールにすることができます。

ANIMATIONタブは大きく分けて2種類のディレイを入れる設定ができます。上のほうは1秒以上の比較的大きなディレイを入れることができ、下のほうはミリセカンド単位の小さなディレイを入れることができます。

上のほうは例えば60分のウェビナーで30分のところからピッチが入るときにエレメントを出したいという場合に、「TIMED DELAY」で「Fade In」を選んで「MINUTES」を「30」、「SECONDS」を「15」に指定すると、ページの読み込みから30分15秒遅らせてフェードインで表示してくれます。

「ANIMATION」は2種類あり、「On Page Load」はミリセカンド単位のディレイをページの読み込みから起算して入れる機能です。「STYLE」に関しても他にいろいろあるので試してみてください。「DELAY (MS)」はデフォルトで500ミリセカンドが指定されていて、これも調整することができます。「On Page Scroll (becomes visible)」は長いセールスページなどでページをスクロールしていってエレメントが表示される場所に来た時点から起算してディレイを出すという機能です。これも先ほどと同様に「STYLE」を選んで「DELAY (MS)」を指定します。今回は以上です。

やり方を動画で見る

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

今回はClickFunnelsでドロップダウンリストを作っていきます。

Step1. 「SELECT BOX」を挿入する

ドロップダウンリストは「ドロップダウンメニュー」などいろいろな呼び方がありますが、Custom Typeで作ることもできます。下のように国を選択する「Select Country」はデフォルトで用意されているものです。

まずは「ADD NEW ELEMENT」をクリックします。「select」で検索して「SELECT BOX」を選択します。

Step2. SETTINGSタブを設定する

• TOP MARGIN：エレメントの上の余白を調整できます。
• INPUT TYPE：今回一番大事なのは「INPUT TYPE」で、何を選択させるかを指定できます。先ほど「Select Country」でお見せしたのは「All Countries」です。あとは英語圏のサービスなので「US & Canada」などがあるのですが、職業を選択するのは「INPUT TYPE」で「Custom Options」を選択して作りました。「INPUT NAME」は例えばClickFunnels側でお客さんが何を選んだのかという情報が残るので、それが何の入力欄だったのかを書くための項目です。今回は「職業」にしておきました。
  • 「VALUE:」：例えば「職業」が「lawyer」というふうに情報として残す文字列です。
  • 「TEXT:」はその「lawyer」というVALUEを選ばせるときに表示するユーザー向けのラベル（「弁護士」）のようなものです。
  • 選択肢はいくつでも追加できるのでやってみてください。
• REQUIRED：このボックスを必須アイテムにするかどうかを設定するもので、デフォルトでは「Not Required」になっているのですが「Required」にしてもいいと思います。
• FONT FAMILY：フォントを選択することができます。
• FONT SIZE：ボックス内のテキストの大きさを選択できます。

Step3. THEMESタブを設定する

THEMESタブはClickFunnelsがデフォルトで作ってくれたデザインのプリセットのようなもので、例えば3Dっぽいものやボックスの周りにインナーシャドウがかかっているもの、ボックスの下にあるアンダーラインが強調されているものなどがあります。

Step4. ADVANCEDタブを設定する

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

• FONT WEIGHT：フォントの太さを選択できます。今回はすでにTHEMESタブで選択してしまっているので、太字の変化がわかりにくいかもしれません。
• ICON：ドロップダウンリストのアイコンを細かく変えることができるので、好みのものを探してみてください。
• CORNERS：ボックスの角の曲率を選択することができます。数値を大きくするほど丸いデザインになっていきます。
• BG COLOR：ドロップダウンリストのバックグラウンドカラーを選択できます。

ANIMATIONタブに関しては他のエレメントで説明している部分もあるので重複するのですが、もう一回説明しておきます。これはページの読み込んだりスクロールしてきてからエレメントを少し遅れて表示させるディレイを設定できます。上のほうと下のほうで分かれていて、上のほうは1秒以上の比較的大きなディレイを入れることができ、下のほうはミリセカンド単位の1秒より細かいディレイを入れることができます。JavaScriptでいうLazy Loadingのような考え方になると思います。

上の「TIMED DELAY」はスタイルを選択できます。どちらでもいいのでいろいろと試してみてください。「MINUTES」と「SECONDS」で時間を指定できます。例えば60分のウェビナーで30分ぐらいのところからピッチを挟むという場合に、「MINUTES」を「30」、「SECONDS」を「15」と入力して30分15秒後に指定したりできます。ただしこれは動画などを再生し始めてからではなく、ページを読み込んでから30分15秒ということなので注意してください。また、例えば120分のウェビナーで90分後に指定するなど、60分以上に指定することもできるので覚えておいてください。

下の「ANIMATION」では「TYPE」を選択します。「On Page Load」と「On Page Scroll (becomes visible)」があり、「On Page Load」はディレイの起算点がページがロードされた時点になります。「STYLE」は先ほどよりもバリエーションがあるので試してみてください。「DELAY (MS)」の「MS」はミリセカンドのことで、デフォルトは500ミリセカンド（0.5秒）です。「On Page Scroll (becomes visible)」は長いセールスページなどでページをスクロールしていってエレメントの場所に来た時点から起算してディレイを出すという機能です。今回は以上です。

やり方を動画で見る

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

今回はClickFunnelsで複数行の入力フォームを作っていきます。だいたいこういう名前やEメールアドレスのフィールドは1行ですが、これを複数行入れるようなフォームがClickFunnelsに用意されているので説明していきます。

Step1. 「TEXT AREA」を挿入する

「ADD NEW ELEMENT」をクリックします。こういう場合は検索するとすごく楽です。今回は「TEXT AREA」というエレメントなので、「area」で検索します。「TEXT AREA」を選択して設定していきます。

Step2. SETTINGSタブの「INPUT TYPE」を設定する

今回一番大事なのが「INPUT TYPE」です。入力フォームを見ると名前の所は「NAME」、メールの所は「EMAIL」というふうに「INPUT TYPE」が設定されていますが、この項目は何を入力してもらうのかをClickFunnelsに教えることができます。「Not Set」のままでもいいのですが、これは何の項目かを入力していきます。

「INPUT TYPE」で「Custom Type」を選択すると「CUSTOM TYPE」が出てきて入力することができます。今回はお客さんのビジネスの状況などを入力してもらうフォームにしてみます。例えば「STATUS」という名前を付けてみます。

これは他の「CUSTOM TYPE」の入力フォームの動画でも出しているので見てほしいのですが、ここで入力した「CUSTOM TYPE」に関しては、後でオプトインした人についてClickFunnelsからコンタクトインフォをさかのぼっていって、名前やEメールやオプトインの日付などがある所と同列で「STATUS」という項目が新しくできます。その中にここで入力してもらった内容が入っているという感じです。

このオプトインページをConvertKitやMailChimpと連携させると思いますが、MailChimpであればMailChimpにも名前やEメールと同列に全く同じ「STATUS」というフィールドを作っておくと、そちらにもClickFunnelsが情報を渡してくれます。MailChimpの「STATUS」というフィールドに追加してくれて、中身が何かも教えてくれます。

Step3. SETTINGSタブのその他の項目を設定する

• TOP MARGIN：エレメントの上の余白を調整することができます。
• PLACEHOLDER TEXT：「Enter Your Info Here…」と書いてありますが、今回はここに「あなたのビジネスの状況を教えてください。収益、労働時間、現在の課題など。」という文言を入力しておきます。そうするとお客さんがオプトインするときにここに入力してくれると思います。
• REQUIRED：この入力フォームの記入を必須にするかどうかを設定できます。デフォルトだと「Not Required」になっているので「Required」にしておきます。
• FONT FAMILY：フォントを選択できます。日本語のフォントがあまりないので、日本語を入力してもあまり変わらなかったりします。
• FONT SIZE：フォーム内のフォントの大きさを設定できます。

Step4. THEMESタブを設定する

ClickFunnelsがプリセットのデザインをたくさん用意してくれているので、これを使うといいと思います。入力カーソルを合わせたりすると文字が変わったりするかもしれません。こういうふうに自分でデザインせずにプリセットの中から選ぶという方法もあります。

Step5. ADVANCEDタブを設定する

最初にSTYLEタブです。

• TEXT ALIGN：左に寄っているテキストを中央揃えや右揃えにできます。
• FONT WEIGHT：文字の太さです。「Bold」で太くなります。
• CORNERS：入力フィールドの角の丸みです。数値が大きいほど丸くなります。
• HEIGHT：入力フィールドの長さです。これを調整しておくとお客さんがだいたいどのくらいの量を書けばいいのかをあなたが思うとおりにやってくれるので、これもいろいろ設定してみてください。

• BG COLOR：入力フォームの背景の色です。あまり暗いと見にくいので「White」でいいと思います。

次はANIMATIONタブです。これは他のエレメントでも共通して話していることですが、このエレメントをページの読み込みからどのくらい遅らせて表示するかというディレイを入れることができます。大きく上と下に分かれていて、上のほうは1秒以上の比較的大きなディレイ、下のほうは1秒未満、ミリセカンド単位の比較的小さなディレイを入れることができます。

上のほうから見ていきます。「TIMED DELAY」はディレイで表示されるときの効果を選択できます。「MINUTES」と「SECONDS」はディレイの時間を「分」と「秒」で指定できます。よく使うのは例えば60分のウェビナーに対して30分のところからセールスが始まったら決済カートなどを出すような場合で、30分15秒というふうに指定したりします。オプトインページではあまり使わないという感じがします。

「ANIMATION」は上と何が違うかというと、こちらはJavaScriptでいうLazy Loadingに近い考え方だと思います。「TYPE」は2種類あります。「On Page Load」はページの読み込みがどのくらいディレイするかの起算点になっています。「STYLE」で他のものも選択できます。「DELAY (MS)」はデフォルトで500ミリセカンドが指定されています。

「On Page Scroll (becomes visible)」は長いページなどでスクロールしてきてこのエレメントが表示されるであろう場所に来たときから起算してディレイを出すという機能です。これが「On Page Load」との違いです。これに関しても「STYLE」を選択することができ、「DELAY (MS)」の時間も指定できます。今回は以上です。ぜひ活用してみてください。

やり方を動画で見る

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