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

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

やり方を動画で見る

https://www.youtube.com/watch?v=4V4AWvhymPI

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

今回はClickFunnelsで画像つきテキストエリアを作っていきます。

ClickFunnelsのテキストエリアとは

テキストエリアは画像、タイトル、小さい文字の文章の3つが1つになっているというエレメントで、すごく使い勝手がいいので紹介します。それでは同じものを作ってみます。

Step1. 「IMG FEATURE」を挿入する

「ADD NEW ELEMENT」をクリックして「IMG FEATURE」を選択します。そうするとブランクの画像が出てくるので設定していきます。

Step2. SETTINGSタブを設定する

• TOP MARGIN：エレメントの上の余白を調整できます。
• IMAGE：これは大事です。先ほど出した画像は「350 × 250」と書いてあって、これに合わせてもいいのですが、合わせないで入れることもできます。例えば縦長の画像を入れると、その画像の縦横比で表示してくれます。その分、文章のエリアも余白が空いてしまうので、文章の長さと画像の縦横比をうまく調整しながらやったほうがいいです。余白が空いてしまうとやりにくいので、文章の量と画像の比率が合うような感じに調整してみてください。
• ALT TEXT：画像が表示されなかったときにテキストを表示するものです。SEOにも使われるものだと思うのですが、これはわかる方だけ入れてみてください。
• IMAGE WIDTH と IMAGE HEIGHT：イメージの大きさなどを固定できます。これはクロップされるというよりも画像をつぶすような形になるので、例えば「IMAGE WIDTH」を「300」、「IMAGE HEIGHT」を「100」にして縦長の画像を無理やり横長にしようとすると縦横比が崩れて変な感じになります。これはあまりやらないほうがいいと思います。例えば文章の量が少なくて全然ダメな場合は「IMAGE HEIGHT」を調整するというやり方もいいと思います。できれば画像をうまく選んでそれに合わせた文章の量で対応するのが一番いいと思います。

• FONT FAMILY：フォントを選ぶ画面が出てくるので、好きなフォントを選んでください。
• HEADLINE と TEXT：フォントのサイズを選択できます。
• HEADLINE COLOR と TEXT COLOR：色を選択できるので選んでおきます。

Step3. THEMESタブを設定する

THEMESタブにはデザインのプリセットがあります。これは左側の画像のスタイルを選択するプリセットです。右側のテキストには影響しません。いろいろなものがあるので、使い勝手を試してみてください。

Step4. ADVANCEDタブを設定する

次はADVANCEDタブです。

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

• LAYOUT：画像とテキストの順番を入れ替えることができます。
• COLUMN SIZES (%)：画像のサイズを変更できます。先ほどの「IMAGE WIDTH」と「IMAGE HEIGHT」を選択してもいいのですが、これで画像とテキストの比率も変更できるので、テキストの量と画像の大きさを調整してみてください。

• IMAGE RADIUS：画像のクロップの仕方が選択できます。角を丸くしたり、丸く切り抜くこともできます。
• IMAGE BORDER：画像の境界線を設定できます。
• IMAGE SHADOW：画像にシャドウを付けることができます。

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

例えば1秒以上のディレイを入れる場合は、上の「TIMED DELAY」でスタイルを選ぶことができます。これはいろいろと試してみてください。

「MINUTES」と「SECONDS」ではページがロードされてからどのくらいたって表示するかという、ディレイの時間を選べます。よく使うのはウェビナーなどで、例えば60分のウェビナーに対して30分たってからセールスを始めるような場合です。これはページがローディングされてからの時間になります。

「ANIMATION」のほうはミリセカンド単位の設定になるのですが、「TYPE」で「On Page Load」と「On Page Scroll (becomes visible)」が選択できます。「On Page Load」のほうはページがロードされてから起算して、500ミリセカンドなどの比較的小さいディレイを入れることができます。「On Page Scroll (becomes visible)」のほうは長いページをスクロールしていってエレメントの場所まで来たときから起算して、指定したミリセカンドでディレイを表示するという感じです。

「ANIMATION」の短いほうのディレイはJavaScriptでいうLazy Loadingのような考え方です。「On Page Road」を選択すると「STYLE」があるので、いろいろなスタイルを試してみてください。「DELAY (MS)」は「500」になっているのですが、自由に調整してみてください。「On Page Scroll (becomes visible)」も同様です。これは便利なので使ってみてください。今回は以上です。

やり方を動画で見る

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

今回はClickFunnelsでページにQ&Aを作っていきます。

FAQのエレメントを使う

このセールスページにはすでにQ&Aがあるのですが、テキストのエレメントで作っています。ClickFunnelsにはけっこう便利なエレメントがたくさんあるのですが、テキストのエレメントなどで作ってしまいがちです。こういうテキストで作ってしまったものに対してFAQのエレメントで入れ替えていきます。

Step1. 「FAQ」を挿入する

「ADD NEW ELEMENT」をクリックして下のほうにある「FAQ」を選択します。挿入されたらこれを載せ替えていきます。「返金保証はありますか？」の部分は「Q」を抜いて入れ、「A」の部分はそのまま入れます。

Step2. SETTINGSタブを設定する

• TOP MARGIN：他のエレメントと同様に、エレメントの上の余白を調整できます。
• FONT FAMILY：フォントを選択できます。
• QUESTION SIZE：上のヘッダーの「Q」の部分の大きさを変更できます。少し目立つ感じに大きくしてみます。

• TEXT SIZE：元のテキストサイズに合わせてバランスをとってみます。
• QUESTION COLOR：変更できるので、濃い青色にします。
• ANSWER COLOR：変えてもいいのですが、あまり変えると色合いが良くないのでデフォルトに戻しておきます。

Step3. ADVANCEDタブを設定する

次はADVANCEDタブです。

「STYLES」のタブは特に調整できるものがないようです。一瞬バグっぽく見えますが、ちゃんと動いているので問題ありません。

ANIMATIONタブはいろいろなエレメントで説明してきましたが、エレメントを表示する際のディレイを仕込むことができます。上のほうは1秒以上の大きいディレイです。下のほうはJavaScriptでいうLazy Loadingのような感じで、ミリセカンド単位のディレイを仕込むことができます。

「TIMED DELAY」はどういう効果で表示するかが選択できます。「Fade In」と「Fade In With Scale」があるのですが、どちらでもいいと思います。いろいろと試してみてください。

「MINUTES」と「SECONDS」は時間差の設定ができます。例えばよく使うのがウェビナーの途中でセールスを入れたい場合です。1時間のウェビナーに対して30分たってからセールスを挟みたいというときは、30分たつ前にこういうものが表示されていると嫌なので、例えば「MINUTES」を「30」、「SECONDS」を「45」にすると30分45秒に設定することができます。これはエレメント単位ではなくてSectionやRowなどのもっと大きい単位で設定したほうが使いやすいという感じがします。

下の「ANIMATION」は細かいほうのディレイです。「On Page Load」と「On Page Scroll (becomes visible)」の2種類があります。

「On Page Load」はページを読み込んでから指定したミリセカンドで選択した効果が出せます。「DELAY」がミリセカンドになっていて、1000ミリセカンドが1秒なので500ミリセカンドは0.5秒です。この場合はページを表示してから0.5秒たってふわっと出てくるようなイメージです。

「On Page Scroll (becomes visible)」はページのローディングではなくて、例えばエレメントがページの一番下にある場合、そこまでスクロールしていってエレメントの場所に到達した時点から起算して、500ミリセカンドでディレイして出してくれるというものです。

ということで、この後FAQのエレメントを使って全部きれいに入れ替えていこうと思います。やはりFAQのエレメントを使ったほうが見やすいと思います。今回は以上です。

やり方を動画で見る

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

今回はClickFunnelsでプログレスバーを挿入していきます。

Step1. プログレスバーを挿入する

「ADD NEW ELEMENT」をクリックし、「PROGRESS BAR」を挿入していろいろ設定していきます。

• TOP MARGIN：エレメントの上の余白の設定で、これはほとんどのエレメントで共通しています。
• PERCENT：文字の設定です。「PERCENT」と書いてあるのですが、だいたいは文字を入れています。例えば「申し込みはまだ完了していません！」という感じの文字を入れるとすごく効果的だと思います。

• FONT FAMILY：フォントを選択できます。
• BG COLOR：ハイライトされている部分の背景の色を変更できます。

Step2. THEMESタブを設定する

THEMESタブにはプリセットされたデザインがあります。「Animated Stripes」は動きがあっていいと思います。

Step3. ADVANCEDタブを設定する

次はADVANCEDタブです。

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

• PERCENT WIDTH：色が付いている部分の長さを変更できます。「90 Percent」にしてもいいですし、「33 Percent」にしてもいいと思います。
• SIZES：文字の太さと大きさを変更できます。
• TEXT SHADOW：テキストのシャドウを変更できます。
• TEXT STYLE：文字を太文字にしたりイタリックにしたりできます。
• ALIGNMENT：テキストの場所を「Center」「Left」「Right」と変更できます。
• OFFSET COLOR：これも設定したほうがいいです。通常は「White」になっています。今は背景が少し白っぽいので「Transparent White」にしても分かりにくいです。私は「Transparent Black」がいいと思います。

• SHADOW：「TEXT SHADOW」はテキストのシャドウに関しての設定でしたが、これはプログレスバー自体のシャドウのことです。
• CORNERS：角を丸くするもので、数値が大きいほど角が丸くなります。
• BORDER：プログレスバーの周りのボーダーを設定することができます。

ANIMATIONタブはほとんどのエレメントで共通しているのですが、画面をロードしてから少し遅らせてエレメントを表示させたいときに使います。上は長い時間のディレイに使い、下は短い時間のディレイに使うというふうに使い分けます。

「TIMED DELAY」は長い時間のほうで、「Fade In」などの効果が選べます。だいたいはオートウェビナーなどで使うのですが、1時間のウェビナーで30分たってからセールスをしたいという場合は「MINUTES」を「30」に設定します。これはボタンなどを後から表示したいときにも使えます。

「ANIMATION」の「TYPE」は2種類あり、JavaScriptでいうLazy Loadingのような感じです。「On Page Load」はページがロードされてから指定したミリセカンドで選択した効果を出すことができます。「On Page Scroll (becomes visible)」はスクロールしていってエレメントの場所まで来たときから起算して500ミリセカンドをカウントするというものです。

プログレスバーはすごく使い勝手がいいので、アップセルページなどで使ってみてください。今回は以上です。

やり方を動画で見る

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

今回はClickFunnelsで画像つきリストを入れていきます。これは箇条書きのプレートの部分、ドットの部分に画像を入れられるというものです。

Step1. 画像つきリストを追加する

「ADD NEW ELEMENT」をクリックして「image list」で検索し、「IMAGE LIST」を選択します。デフォルトで付いている矢印がありますが、これをカスタマイズできます。普通の箇条書きのような感じで追加していくといいと思います。

Step2. SETTINGSタブを設定する

• TOP MARGIN：エレメントの上の余白を調整できます。
• ICON IMAGE：「32PX」と書いてありますが、当然32ピクセル以上の画像も入れられます。例えば「IconFinder」などを使って「check」で検索した画像を入れてみると、大きすぎて変な表示になると思います。気に入ったアイコンなどがあれば32ピクセルまで縮小してからアップロードして入れてみてください。
• BULLET SPACE：箇条書きの行間を調整できます。
• LEFT MARGIN：エレメントに対して左側の余白を調整できます。
• FONT FAMILY：フォントを変更できます。
• FONT SIZE：フォントのサイズを選択できます。
• MOBILE SIZE：モバイル版のフォントサイズのことです。デフォルトではデスクトップ版とモバイル版のフォントサイズは一緒になっているのですが、「EDIT MOBILE SIZE」をクリックするとリンクが外れるようになっています。例えばリンクを外した状態で「MOBILE SIZE」を小さく設定することもできます。これはモバイルのビューがあるので、ページが完成した後にそれを見ながら調整するのがいいと思います。デスクトップ版と連動するように戻す場合は左のボタンをクリックします。
• COLOR：文字の色を変更できます。アイコンの色に関しては「ICON IMAGE」で規定されてしまっているので変更できません。
• BOLD COLOR：太字部分の色だけを変更できます。

Step3. ADVANCEDタブを設定する

次はADVANCEDタブです。

• ICON SIZE：アイコンを表示するかどうかというものです。アイコンを表示しないというのも意味が分からないのですが、「Show Icon」で表示できます。
• BOTTOM BORDER」はそれぞれの行間にけい線を入れることができます。これもけっこう見やすくなるのでたまに使うといいと思います。

ANIMATIONタブは他のエレメントと同様です。「TIMED DELAY」はページの表示から起算してどのくらい遅らせてエレメントを表示するかというものです。「Fade In」と「Fade In With Scale」の2つがあり、これもどちらがいいのかを試してみてください。

どのくらい遅らせるかは「MINUTES」と「SECONDS」で指定できます。よく使うのは例えばウェビナーページを読み込んでから30分ぐらいのたったところでオファーを出したりするときです。ここはご自身のウェビナーの長さに合わせて調整してください。「分」と「秒」をそれぞれ指定することができます。

「ANIMATION」は上の「TIMED DELAY」と考え方が似ていますが、1秒よりも短いディレイのことを指しています。JavaScriptでいうLazy Loadingのような感じです。これは2種類選ぶことができます。「On Page Load」であればページのローディングから起算してディレイの表示を入れることができるのですが、「DELAY」の所に「MS」と書いてあるのでミリセカンドになっています。

• TIMED DELAY：1秒以上のディレイを指定できる
• ANIMATION：1秒に満たないような細かいディレイを指定できる

「STYLE」に関してもいろいろあるので試して使ってみてください。

「TYPE」には「On Page Scroll (becomes visible)」というものがあります。先ほどの「On Page Load」とは違い、ページをスクロールしてエレメントが表示されるであろう場所まで来たときから起算してディレイを表示するという感じになっています。今回は以上です。

やり方を動画で見る

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