5-2これさえ見れば全て分かる!クリックファネルで使うエレメンツ全てを徹底解説

執筆者 | クリックファネルの基礎

「クリックファネル」とは、ウェブサイトやアプリなどのデジタルプロパティにおいて、ユーザーがあるコール・トゥ・アクション(CTA)をクリックしてから、最終的にコンバージョン(目的達成)をするまでの一連のステップのことを指します。具体的には、例えばECサイトで商品を購入する場合、ユーザーが商品ページの「購入する」ボタンをクリックした後、ログイン画面や決済方法選択画面、確認画面などを経て、最終的に注文が確定するまでのステップがクリックファネルにあたります。クリックファネルを分析することで、ユーザーがどのステップで離脱してしまったのかを把握することができ、改善点を見つけることができます。また、どのステップでユーザーにとって障害があるのかも分かるため、そのステップを改善することでコンバージョン率を上げることができます。

この記事では、クリックファネルで使うエレメンツ全部を解説をします。エレメンツを追加削除する方法や、これだけ知っておけばOKというよく使うエレメンツ、そして知っておくと活用できるエレメンツについて全てお話しします。クリックファネルは、ユーザーの行動を理解するための重要な指標であり、コンバージョン率の向上やサイト改善につながるため、ウェブサイトやアプリの運営において非常に重要な要素となっています。あなたのビジネスが成功するかどうかは、クリックファネルを適切に使いこなせるかどうかにかかっているといっても過言ではありません。この記事さえ読めば、クリックファネルのエレメンツに関して全て理解できるようになっているのでぜひ最後までご覧ください。

クリックファネルのエレメンツってどう使うの?使用方法を分かりやすく紹介!

  • エレメンツを追加・削除する方法
  • これだけ知っていればOK!よく使うエレメンツ
  • 知っておくと活用できるエレメンツ

エレメンツを追加・削除する方法

まず最初にエレメンツを追加・削除する方法を解説したいと思います。

今、実際のClickFunnelsのページ内をお見せしています。このページはオプトページというメールアドレスを取得するページです。例えば、商品の購入や登録など、特定のアクションを促すことが目的となります。オプトページは、訪問者に対して誘導的なコピー、目立つコール・トゥ・アクション(CTA)ボタン、魅力的なデザインなどを使って、訪問者が望むアクションを促すように設計されています。それでは早速エレメンツを追加してみます。

エレメンツの追加はROWの中で行います。先程まで説明していた外枠の中の話になり、このオレンジ色の部分が該当します。まだ何も入ってない場合は「ADD NEW ELEMENT」を押して下さい。あるいは既にROWの中にエレメンツが入っている場合は、最後のエレメンツの後ろのプラスマークを押せば新しく追加できます。

今回は、「Click Here To Access!」のプラスを押します。すると右側からツールボックスが出てきました。ここに並んでいるのがエレメンツになります。色んな種類がありますがこの中から何か1つを選びます。ここではこのボタンの下へ注意書きの文章を入れてみたいと思います。テキストを入れるので「PARAGRAPH」のボタンを押します。

今は黒い文字で背景色と似ているため少し見辛くなっていますが、ボタンの下に1つエレメンツが追加されました。もしこの追加したエレメンツが不要だという時は、カーソルを上に持っていきエレメンツの枠を表示させましょう。「SETTINGS」の2つ隣にゴミ箱ボタンがありますので、そこをクリックすればエレメンツが削除されます。また『本当に削除して良いのか』と確認ダイアログが表示されるので、OKを押せば完了です。これでエレメンツの追加と削除ができるようになりました。

これだけ知っていればOK!よく使うエレメンツ

次に、これだけ知っていればOK!よく使うエレメンツをご紹介いたします。

後に実際の画面を交えてご紹介しますが、実はClickFunnelsの中で使えるエレメンツの種類はここに列挙されている以外にもこんなにたくさんあるんです。今回のこのオンラインコースの中で学んでいただく上で、必須だといえるのはここに列挙したもののみだとお考え下さい。とりあえずこれだけ覚えておけばOK!というものです。余力のある方のみ、他のエレメンツも見ていただくことにより全体を把握できて良いのではないでしょうか。

それではこれから具体的な説明に入らせて頂きます。実際の画面でエレメンツを確認してみます。まずClickFunnelsの編集画面を開きます。ページ上部は藍色で少し見辛いので下へスクロールして追加しましょう。追加したい場所の上のパーツ(エレメンツ)へカーソルを重ねます。オレンジ色のプラスマークが表示されるので押してみて下さい。するとツールボックスが出てくると思います。上から見ていきましょう。

HEADLINEの使い方

HEADLINE」というのは、いうなればこのページの見出しだとお考え下さい。文字的にはテキスト要素に分類されます。実際にこれを押すと大きな文字が挿入されました。ここでは『タイトル』と名付けました。尚、このテキストの大きさや色は後から変えられるので、さしあたって今は仮に入力した格好です。

SUB-HEADLINEの使い方

次のパーツを入れてみましょう。次は「SUB-HEADLINE」です。これも似たようなものですが、先程よりやや文字が小さいです。しかしながら、これを大きくすれば先程と同じようになるので厳密にはあまり違いはありません。ですが、ページを作成する上で『見出し』や『サブ見出し』という要素を入れることは大切ですから、両者を上手に使い分けて下さい。

PARAGRAPHの使い方

再びプラスを押して今度は「PARAGRAPH」を入れます。PARAGRAPHはテキストという意味です。こんな感じで文字が入りました。標準だと文字は小さいのですが、これもまた大きくしたり太くしたりする事も可能です。また詳細は後のレッスンで説明いたします。

IMAGEの使い方

再びプラスを押しましょう。次によく使うのはこの「IMAGE」という画像を入れるエレメンツです。押してみると「Demo Image」が挿入されました。このイメージの変え方を説明します。まずこの歯車を押して下さい。次に「IMAGE」欄の写真ボタンを押して下さい。写真ボタンを押すと画面が切り替わりますのでここで使いたい写真を選択します。ここでは元々用意されている画像が表示されていますね。

一方で、もしあなたがオリジナルの画像を使いたい場合は、上部の「DRAG AND DROP」エリアへ使いたい写真を直接ドラッグアンドドロップするか、もしくは「UPLOAD」ボタンを押してあなたのパソコンからアップロードしてください。今回は既にアップロード済みのこの画像を使います。使いたい画像を選び「ADD IMAGE」を押します。これで先程の画像が挿入されましたね。

引き続き歯車を押して設定をします。画像のサイズを変更するために横幅を300pxにしてみます。ご覧の通り小さくなりました。他の設定も右側で行えますのでご自分で確認しながら丁度良いサイズに変えて頂けたらと思います。例えば、写真の枠組みもテーマから選ぶことで簡単に変更できます。写真の枠組みを変えてみるだけでも伝わってくる印象が結構変わったりします。このようにClickFunnelsには元々素晴らしい機能が備わっていて、色々なことが簡単にできますから是非とも触ってみてください。

VIDEOの使い方

ではエレメントの説明へ戻ります。プラスマークを押してこの「VIDEO」を選択して下さい。これはビデオを挿入するボタンです。ここでいうビデオというのは動画のことです。押しましょう。するとご覧のように動画が入りました。さらに動画を入れる方法を説明します。設定を押し、例として「VIDEO TYPE」からYouTubeを選択して下さい。そして「YOUTUBE URL」欄にYouTubeの動画URLを入れるだけでここへ簡単に動画を組み込むことができます。

非常に簡単ですよね。これだけでページへ動画を組み込むことができます。ちなみに、この後よく使う設定は動画サイズです。今の状態のままでは少し動画サイズが大きすぎると感じる方もいらっしゃるでしょう。その場合には「ADVANCED」を確認してみて下さい。幅がフルウィッズになっているため大きくなっています。ハーフウィッズを選択すれば小さくできます。このように用途に合わせて調整していただけたらと思います。

BUTTONの使い方

次によく使うのはボタンです。再度プラスを押しましょう。下へスクロールすると「BUTTON」があります。これを押すとページ内へボタンが挿入されます。ここでもまた色を変えるために設定を押しましょう。ボタンのリンク先に関しては「SET ACTION」を押してURL欄へ入力して下さい。あなたのホームページのURL等をここへ入力しておくと、ボタンが押された際にそこへ飛ぶ設定ができます。

関係ないところをクリックしてフォーカスを外します。色を変えましょう。色は最下部にある「BG COLOR」で設定します。ここを押してまた黄色を指定します。ちょっと目がチカチカするのでオレンジに変えてみるなど、好きな色を選ぶことができます。実際にオレンジにしてみました。このボタンの名前が初期では「Click to Sign Up」となっていますが『押してください』とか『購入する!!!』、あるいは私がよく使う『参加する!!!』などに変えるとお客さまにとっても分かりやすく押しやすいボタンになります。

また、「ADVANCED」をクリックし1番下までスクロールさせると「BUTTON EFFECT」という設定項目があります。これは何かというとボタンに動的なエフェクトをかけることが出来るのです。例えば「Bounce」を指定すればぴょんぴょんと跳ねる動作を与えられます。こんな効果も簡単に設定することができます。

更に、再び歯車を押して「THEMES」タブを選べば、ボタンを好きな大きさや色に変えることもできます。この丸いボタンが可愛いですよね。ここで丸いボタンを選んだ上で「SETTINGS」内の1番下「BG COLOR」からオレンジ色を選べば自分好みの丸いオレンジ色のボタンになりました。こんなこともできるのです。

COUNT DOWNの使い方

それでは次のパーツに移りましょう。プラスマークを押します。この次によく使うのはこの「COUNT DOWN」です。押してみましょう。すると時計のようなカウンターが現れました。ここで歯車を押します。ここで重要なのはデザインだと思います。真ん中の「THEMES」タブを押してください。すると標準で好きなデザインを選ぶことができるんです。私は黄色が好きなのでこれを選択します。ご覧の通り黄色いデザインに変わりました。試しにこっちの四角い黄色を選んでみます。白抜きの黄色が一番良さそうなのでこれに変えました。

次に「SETTINGS」へ行きます。今、DAYS, HOURS, MINUTES, SECONDSと並んでいますが、これは『あと何日何時間何分何秒です』という意味です。例えば『後何日もない』とか、『後2時間』と表示したいといったケースもあるでしょう。そのような場合は、この「SHOW DAYS」にチェックが入っているため4つの表示なのですが、このチェックを外す事によりDAYSが非表示となり、HOURS以下を表示するといったことが可能です。逆にYEARSを表示させ『後何年』という形式にすることもできます。全部押すとこのようになりますし、『後何年何ヶ月』というカウントダウンを作ることも可能です。

この切り替えもボタン1つで簡単に出来ますので是非やってみてください。続いて、カウントダウンの期日の設定も日付時刻単位でも厳密に設定できます。ただし注意点があります。ご覧の通りここの初期設定は海外の時間(EST/東部標準時)に設定されているんです。ですから、日本との時差を考慮して設定しなければならないので少々注意が必要です。

この「END DATE」という項目がありますね。日本式に2022年の5月25日と入力されているように見えるのですが、これを設定しようとクリックすると2093年に切り替わってしまう内部の不具合があります(日米間の日付並び順の問題?)そこで回避策として1度『仮』に2093年にしてから、改めて今の2022年を押すことにより正しく入力されますのでご注意下さい。

MINUTE TIMERの使い方

では次のパートに移りましょう。プラスマークを押して下へスクロールします。カウントダウンとよく同じように使われるのが「MINUTE TIMER」です。『後15分で締め切りです』といった使い方をします。これを押すと同じようにカウンターが出てきます。「SETTINGS」を押して「THEMES」でまずテーマを変えましょう。ここでは赤にします。「SETTINGS」を開くと、『後1時間』とか『30分後』など指定できます。ここでは『15分後』に設定しました。そしてここをご覧下さい「EXPIRE ACTION」とは何かというと、15分経過後に自動的に他のページへリダイレクトするというするという設定です。今この欄には初期設定の「Redirect URL」が入力されていますが、実際に任意のURLを入力することにより15分のカウントダウン終了の後、指定のURLへ飛ばすことができます。リダイレクト先ページがない方は「Show & Hide」と設定することが可能です。こうすると15分経過後にカウントダウンのこのカウンターが消えるだけという挙動も設定できますので是非変更してみてください。

DAY TIMERの使い方

さあ次へ行きましょう。もう1回プラスマークを押して下へスクロールすると「DAY TIMER」があります。これもよく使います。似たようなものですからさっそく設定をしてみましょう。「DAY TIMER」は、今日の何時に終わるのかという設定です。ただしですねこれも注意しなくてはいけません。先程同様海外時間(EST)になっていますから、試しに1度設定してプレビュー表示させると正確な時間が分かるかと思います。

DIVIDERの使い方

ではプラス押します。次に活用していただきたいのはこの「DIVIDER」です。押してください。これは分割するという意味でページ上では水平線の役割をします。ホームページのパーツとしてもよく使われるものです。区切りの部分に挿入される事が多いものです。例えばこのページを例にすると、ページ上部から下へスクロールしていくと、見た目的には枠がないためダラダラ続いているように見えてしまいます。そこでこのように要素間に分割線を挿入することにより、見た目がスッキリし区別をつきやすくさせる効果があります。

PROGRESS BARの使い方

プラスを押します。最後にこの「PROGRESS BAR」をご紹介します。これは販売ページなどでよく使われるものです。押してみましょう。『プログレスバー』というのは、読み込み中のローディング演出をするもので、お客様の手をちょっと止めさせたい部分で使われることが多いです。では具体的にどんな箇所かというと、アップセルのページなどが挙げられるでしょう。お客様が商品を購入した後、ページ内でちょっと待ってくださいと呼び止める時に使うのです。これにはデザインも凄く多く用意されています。「SETTINGS」を押して「THEMES」を押してください。

アニメーション効果のあるものも存在し、ストライプが動いているような演出も可能です。私は個人的に気に入っているのでこれを選択します。クリックするとこのように『今読み込み中です』という雰囲気に変わりましたね。SETTINGS内ではプログレスバー上に表示する文字を設定できます。日本語だと少々格好悪いのですが『ちょっと待ってください』とか『読み込み中…』などと入力すると、「まだ読み込んでるのかな?待ってようかな?」という気分にさせることができます。

そこから「ADVANCED」を開いて下さい。1番上に「PERCENT WIDTH」という項目があります。これは何かというと『今どのくらいの読み込みなのか』という進捗率の表示を設定できます。今は「75 Percent」ですが、「90 Percent」にするともっと進んだように見せることができます。逆に「33 Percent」だと「まだまだ読み込みに時間かかるな」と思わせることが可能です。こんな感じで「PROGRESS BAR」には色々な活用法があり、購入を促すサイトへ利用できるパーツなのです。

以上、ここまで【これだけ知ってればOK!というエレメンツ】をご紹介させていただきました。

知っておくと活用できるエレメンツ

この後、これだけある他のエレメンツをさっと解説させていただきます。実際の画面でお見せします。

プラスで追加して、まずは「BULLET LIST」を入れましょう。バレットリストを挿入すると、このような箇条書きのリストを使うことができます。ページをまとめるのに非常に使いやすいですね。一度に複数の内容をまとめて伝える際に重宝しています。

そして次にこちらの「QUOTE」です。QUOTEは引用に使います。他人の発言や他サイトの記事から引用するときに使います。クオテーション内にどこからかコピペしてくるという使い方をするわけです。この部分は引用ですと明示することが可能です。

次に「IMAGE POPUP」をやってみましょう。IMAGE POPUPを入れても普通のイメージと変わりないように見えますが、実際に画像を入れてみます。サムネイル(THUMBNAIL)というのは、小さい画像とフルサイズの画像を選ぶことができます。今回は両方とも同じ海の画像を選択しました。サムネイルのウィッズを200に設定するとすごく小さく表示されますね。フルサイズはそのままにしましょう。

どんな表示になるのかご覧ください。”PREVIEW”を押します。先ほど挿入した画像はこれですね。これがポップアップ動作になるのです。ご覧のようにクリックすると拡大表示されましたね。そして、右上に閉じるための小さいペケが付いています。このようにTHUMBNAILとは縮小画像をクリックによって拡大表示させる機能なのです。普通に挿入しただけの画像はクリックしても何も起きませんが、こちらのようにクリックして大きい画像を見せたい時にお使い下さい。

ClickFunnelsに戻ってきました。次にこちらの「VIDEO POPUP」も見てみましょう。これも単なるビデオの挿入と同じように見えますが、歯車で設定してみましょう。今設定をしました。実際の画面でご覧いただきます。これにサムネイルとして小さい画像を設定してあります。これを押しますとこのように大きいサイズで動画を見ることができます。これが「VIDEO POPUP」です。

では次へ行きましょう。プラスマークを押して次によく使うのは「AUDIO PLAYER」です。これはMP3などのオーディオファイルを追加する事ができるんです。動画ではなく音声を流したい時などによく使います。

次は「FACEBOOK OPTIN」ですが、これは何かというとこんなボタンが出ます。これは何かというとお客様がfacebookの情報を使って登録できるボタンなのです。最近はSNSのアカウントで登録するケースが増えてきているので、そうしたニーズに応える際に便利なエレメンツとなっています。

次は「INPUTBOX」です。オプトインなどに使われます。

これは”SELECT BOX”です。入れてみましょう。これはその名の通りで、よくある『都道府県一覧を選択』とか『日程を4箇所から選ぶ』という場合の選択肢に使われます。

次に”TEXT AREA”です。これも入れてみます。これでお客様がご意見などを入力するためのボックスを追加できます。

次は隣の”CHECKBOX HEADLINE”です。入れてみましょう。これはお客様に同意を求める場面などのチェックボックスを設置することができます。

次にこれは”SMS SIGN UP”です。これはあまり日本では使わないのですが、SMSでお知らせテキストを携帯に送りますかという処理を行えるボックスです。

はい次に行きましょう。”BILLING ADD”、これはオーダーカートの時に使うのですがご住所をお聞きするときに使います。このように住所入力フォームが現れました。オプトインの時に住所も聞く必要がある場合にこれを使います。プラスマークを押して、次に”SHIPPING ADD.”です。”BILLING ADD”とよく似ていますが、あれは請求書の送り先という意味です。これはSHIPPINGなので送付先住所という意味です。商品送付先と請求書送付先が別の場合、このように使い分けます。

次に”SURVEY”ですね。作るのが少し難しいのですが、このようなアンケートを取ることができます。この内部ですね非常に多くの分岐を持たせることができます。『Yesの場合はこちら』といった回答ページを用意しておけばアンケートを取ることができます。

こちら2つは先程ご案内したので、次は下のアイコンについてです。これは本当によく使います。便利なので私もよく使っています。歯車を押して「ADVANCED」へ行っていただくと、アイコンを選ぶことができるんです。クリックするとClickFunnels内に用意されているアイコン一覧が現れます。例えばこの下向きの矢印は、ページ内に画像を挿入するのではなくアイコンとして追加されます。色も変えることができます。『ここまで来た人はこちら』という具合に、画像ではなく誘導用のアイコンとして挿入できるので大変便利です。

プラスマークを押します。次はアイコンの隣の「IMAGE FEATURE」を押してみます。ご覧下さい。これは『画像とセットの文章』とお考えください。画像を「ROW」を使って作っても良いのですが、こんな感じで最初からセットの物を作成できるという訳です。

これは「NAVIGATION」で、ヘッダやフッタによく使われます。押してみます。こんな感じで3つのリンク先を設定することができます。リンク先の設定は歯車から行います。ここにURLを入れると、リンク先とリンクのタイトルを変えることができます。

プラスマークを押します。次は「FAQ」です。これは質問に回答するという意味がありますが、こんなセットも用意されています。

「IMAGE LIST」を押して下さい。イメージリストは箇条書きともよく似ていますが、矢印が書いてあったりしてこんな感じの使い方ができます。

次に「PRICING TABLE」、これはセールスページとかにとても使いやすいものとなっています。追加すると『この金額はこちら』という形で表示させることができます。具体的な使い方としては、例えばROWを3つぐらい追加して、先ほどのプライシングテーブルをROW内へ挿入します。次にこれをコピーします。コピーは「CLONE」ボタンです。2つコピーして1つずつ並べ直します。こんな感じで使います。素敵な価格表ができたと思いませんか。これが「PRICING TABLE」を使った価格表示の事例になります。

次に「SOCIAL SHARE」です。これは『facebookに今シェアする』とかそんなSNSに関する設定ができます。今はSNSを使ってお客様に拡散して頂くことが、ビジネスを成功させるうえで必要不可欠となってきている為、SNSでたくさん広めて欲しいという方はぜひ取り入れてみてください。

続いて「PRIVACY NOTICE」です。これを設定すると左下からピョンとプライバシー注意のお知らせができます。けれど実際にはあまり使うこともないでしょう。

そして「FB COMMENTS」です。これは面白い機能です。これを導入しておくと、お客様が自分のfacebookアカウントのアイコンを使い『誰々さんのご意見』のような投稿をアップロードするページが作れます。

これは「TEXT BLOCK」です。これは見た目は単なるテキストと似ているのですが、何が違うのかというと専用のテキストエディタで編集ができます。テキストにエフェクトを加えたいとか、複数の色を使いたいという場合にこの機能を使って頂ければ良いと思います。

そして最後は「CUSTOM JS/HTML」になります。これは何かといいますと、ここにHTMLタグやJAVAスクリプトを入力できます。他に外部のCSSスタイル等を仕込みたい時にはここを使いましょう。より上級者向けのページを作りたい人向けの機能となっています。

以上【知っておくと活用できるエレメンツ】全てを解説させていただきました。

クリックファネルのエレメントまとめ

実は他にも会員サイトでしか使えないエレメンツや、オーダーページにしか出てこないエレメンツはありますが、基本は今回ご紹介したエレメントを知っていただければ十分だと思います。一番良いのは実際に触ってみることです。SETTINGS等をいじっても壊れませんから、実際にご自分で使ってみることをおすすめします。

クリックファネルのエレメントを使ってみることで、ユーザーがウェブサイトやアプリケーション内でどのような行動をとっているかをより正確に把握することができます。クリックファネルは、ユーザーがウェブサイトやアプリケーション内でどのような行動をとっているかを追跡するためのツールであり、これにより、ユーザーがどのエレメントに最も興味を持っているかを把握することができます。これにより、ウェブサイトやアプリケーションの改善点を特定し、ユーザーのニーズに合わせた改善を行うことができます。ぜひご自身のビジネスに合った設計を目指して、いろいろ試してみてください。最後までご覧いただきありがとうございました。