ClickFunnels

今回はClickFunnelsでナビゲーションメニューバーを作っていきます。

ナビゲーションメニューバーとは

ナビゲーションメニューバーはClickFunnelsやZapierなどのツール系のホームページによくあるのですが、「Features」「Pricing」「Order Now」のような感じでページのトップに各Sectionのメニューが表示されています。今回はこれを応用して、ページ内に各Sectionの見出しのようなものを表示して、クリックするとこの長いセールスページの一部に飛んでいくようなメニューバーを作っていきます。

Step1. 「NAVIGATION」を挿入する

「ADD NEW ELEMENT」をクリックします。ナビゲーションメニューバーは正式名はナビゲーションメニューです。「NAVIGATION」というエレメントを選択してください。ボタンをクリックしてから設定画面が表示されるまで少しタイムラグがあるので、焦らずに待ってください。

今は3つのメニューが表示されていますが、本当は最大で5つ設定することができ、デフォルトでも5つ設定されています。「Features」「Pricing」「Order Now」「About Us」「Resources」がデフォルトで設定されているのですが、今は3つしか表示されていません。これはADVANCEDタブの「STYLES」で「# OF LINKS」を「5 Links」に変えることで設定した5つを全て出せます。これは後で変えていきます。

Step2. SETTINGSタブを設定する

• TOP MARGIN：エレメントの上の余白を調整できます。
• LINK TEXT：クリックする所に表示されるテキストです。今回は用意したものがあるので、これを全部コピーしていきます。「LINK TEXT」の1つ目に「お客様の声」、2つ目に「価格」、3つ目に「About Me」、4つ目に「今すぐ参加する」をコピーします。そうしたらここに表示されたのがわかると思います。次にここのURLの設定をしていきたいのですが、まず始めに内部リンクでスクロールをかけていくので、そのリンク先を設定します。他のページに飛ばすこともできるので、その場合は「LINK URL」に「http://」というURLを普通に入れていただいたらいいのですが、今回は同じページ内の各セクションに飛ばします。そのためにセクション名をわかりやすいものに変更しておきましょう。
  • お客様の声：「SETTINGS」から右下の「#」をクリックして「Title:」を「Section-Testimonial」に変更します。
  • 価格：価格が書いてあるSectionまで行きます。そうしたらまた「SETTINGS」から右下の「#」をクリックして「Title:」を「Section-Pricing」に変更します。
  • 「About Me」と「今すぐ参加する」：同様に「SETTINGS」から右下の「#」をクリックして「Title:」をそれぞれ「Section-aboutme」と「Section-OrderNow」に変更します。この際は必ず「UPDATE」をクリックしてください。

では、もう一度「SETTINGS」に入ります。1つ目の「お客様の声」についての設定をしていきます。「LINK URL」の入力欄をクリックすると自動的にショートコードを表示してくれるので便利です。ClickFunnelsでスクロールも想定していて、スクロールのショートコードも出してくれます。最初に「Testimonial」という名前を付けたので、「#scroll-Section-Testimonial」を選択します。「LINK TARGET」が「Same Window」になっているので、ページ内でジャンプしてくれると思います。

「価格」は「#scroll-PurchaseSection」、「About Me」は「#scroll-Section-aboutme」、「今すぐ参加する」は「#scroll-Section-OrderNow」を選択します。今回は「Resources」は使わないのでそのままにしておきます。

• FONT SIZE：フォントのサイズを変更できます。4つ出すことを想定して少し大きめに設定しておきます。
• LINK COLOR：リンクのカラーを設定できます。今回は緑にしておきます。

Step3. ADVANCEDタブを設定する

STYLESタブです。

• # OF LINKS：「4 Links」にします。
• TEXT WEIGHT：「Normal」でもいいのですが、「Bold」のほうがしっかりした感じが出るので「Bold」を選択します。
• ALIGN：左右の位置を変更できます。今回は中央でいいと思います。

ANIMATIONタブではディレイの設定ができます。大きく上と下に分かれていて、上のほうは1秒以上の比較的大きなディレイを入れることができ、例えば60分のウェビナーで30分のところでピッチが入ったときに、同時に申し込み関係のフォームを出したりする場合に使えます。下のほうはJavaScriptでいうLazy Loadingのような考え方になると思います。ページを読み込むときにふわっとディレイで表示させるような機能です。

「TIMED DELAY」のほうは1秒以上の大きなディレイでしたね。これは効果を2つから選べます。「Fade In」と「Fade In With Scale」のどちらか好きなほうを選んでください。プレデューでテストできるので、例えば時間を1秒に指定するなどしてどのような感じで表示されるのかを確認してみるといいと思います。

「MINUTES」と「SECONDS」の所は、例えば「MINUTES」を「30」、「SECONDS」を「15」にして30分15秒に指定したりできます。

「ANIMATION」の「TYPE」は「On Page Load」と「On Page Scroll (becomes visible)」の2つがあります。「On Page Load」はページの読み込みから起算してディレイを表示してくれる機能です。「STYLE」は「Fade In」の他にも選択肢があるので試してみてください。「DELAY (MS)」はミリセカンド単位で、デフォルトでは500ミリセカンドになっています。「On Page Scroll (becomes visible)」は長いページなどをスクロールしていってそのエレメントの場所まで来たときから起算してディレイを出すという機能です。「STYLE」と「DELAY (MS)」は先ほどと同様です。

うまくいくかどうか見てみます。セーブしてからプレビューしましょう。「お客様の声」をクリックしてみます。ちゃんと該当箇所に飛びました。「価格」「About Me」「今すぐ参加する」も飛びました。ぜひやってみてください。

やり方を動画で見る

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

今回は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（クリックファネル）の使い方・操作方法の一覧ページに戻る