ClickFunnels（クリックファネル）は、オンラインマーケティングのためのソフトウェアツールで、ビジネスオーナーやマーケターが、簡単にセールスファネルを作成し、自社の商品やサービスを販売することができるプラットフォームです。ClickFunnelsは、セールスファネルを最適化するためのテンプレートや分析ツールも提供しています。これにより、ビジネスオーナーやマーケターは、自分たちの製品やサービスを最大限に宣伝し、売上を増やすことができます。
この記事ではクリックファネルの基本的な使い方、カスタマイズ方法についてお話しします。クリックファネルのカスタマイズは、自社の商品やサービスを顧客に最も魅力的に宣伝し、販売するために必要な独自性やブランドイメージを打ち出すことができる点で必要不可欠です。カスタマイズにより、効果的なマーケティング戦略を構築し、顧客の獲得と売上の増加につなげることができます。ぜひ最後までご覧ください。
今回お届けするノウハウはこちら
クリックファネルのカスタマイズ方法とは！？そのやり方を徹底解説
クリックファネルの基本的なカスタマイズとして次の3つのポイントがあります。
- テキストのカスタマイズについて
- 画像のカスタマイズについて
- ボタンの役割とカスタマイズについて
それぞれ詳しくご紹介していきます。
テキストのカスタマイズについて
テキストのカスタマイズに関しては、
- 文字の大きさを変える
- 文字の色を変える
- 太字と使い分ける
- スマホ表示を調整する
という項目に分けてご紹介していきます。それでは実際の画面で一緒に取り組みましょう。
文字の大きさを変える方法
分かりやすいようにいつものページで進めたいと思います。今はClickFunnelsの中の編集画面です。英語だと少々イメージしづらいので『今すぐ登録しましょう！』と日本語に直してみました。
仮にここの文字をもう少し大きくしたいとします。カーソルを移動して歯車をクリックすると右側からツールボックスが出てきます。そこで”FONT SIZE”を選んで下さい。スライダーを移動してフォントサイズを大きくするにつれて、画面内も大きくなります。「今すぐ登録しましょう！」の文字が強調されます。少々大きすぎたので、横幅的に一行で収まるくらいのサイズへと調整しましょう。これが文字の大きさを変える方法です。
文字の色を変える方法
次に文字の色も変えてみましょう。この”TEXT COLOR”を使います。現在は白い色になってますが、クリックするとカラーパレットが表示されます。では少し明るい青にしてみましょう。もっと明るくしてみましょう。このように色選択の欄を押すとテキストカラーを選ぶことができます。自由自在にお好みの色へ変更できますのでご利用ください。
太字と使い分ける方法
1つ下に”BOLD COLOR”という設定項目があります。これは何かと言うと、『太字の色を変える』という設定なのです。しかし、今太字がないので1回太字に設定してお見せいたします。該当するテキストエリアをクリックし、もう1回クリックするとビームカーソルになり点滅し始めました。この登録という文字を太字にしたいと思います。ではなくどうやら最初から全部太字になっていたようです。失礼しました。では改めて、逆に全て太字解除いたします。続いて登録の2文字だけを太字にします。選択して太字ボタンを押します。
次にフォーカスを外すために何もないところを1度クリックして下さい。引き続きすぐ上の歯車をクリックして下さい。今”TEXT COLOR”も”BOLD COLOR”も同一のエメラルドグリーンになってますが、太字部分だけを赤色にしてみます。”BOLD COLOR”の設定枠をクリックして赤色を選びます。すると1つのテキスト行の中に赤色とエメラルドグリーンの2色を混在させることができました。普通の文字はエメラルドグリーンで太字箇所のみが赤色と、こんな具合に目立たせる事ができます。
スマホ表示を調整する方法
次にスマホ表示を確認します。何もないところをクリックして設定を閉じます。左上のデスクトップアイコンの横にモバイルアイコンがあるのでクリックしましょう。今、先頭に余計な物が入っていますが無視して頂いて、先程の色を変えた部分をご覧下さい。ここが2行になっていますよね。これではスマホユーザーには少々見辛いと思いますので調整しましょう。歯車を押してください。
しかしここで単に”FONT SIZE”を変えてしまうとパソコン表示も変わってしまうんです。そこで、スマホのフォントサイズだけを変えたい場合には、1つ下の”MOBILE SIZE”を変更してください。“EDIT MOBILE SIZE”をクリックして、更にもう1回クリックするとこのようなメニューが展開されます。何pxにするのか選択できますので実際の表示を確認しながら設定します。要はスマホの横幅に合うように文字サイズを小さくしたのです。再び関係ないところ押した後、左上でスマホ表示からパソコン表示へ切り替えます。
ここのポイントは、パソコンの表示はそのままに、スマホ画面向けとしてスマホの横幅にあった大きさに設定したというわけです。これでお客様がパソコンから見ても、スマホから見ても、綺麗に整っている見やすいテキスト表示にすることができました。最近はパソコンやスマホの両方から見られることが多くなっているので、どちらにも優しいデザインを心がける事が重要です。
画像のカスタマイズについて
続いては画像のカスタマイズについてお話しします。画像のカスタマイズには大きく分けて5つのポイントがあります。
- 画像の大きさを指定する
- 画像にURLを設定する方法
- 写真に枠線を付けておしゃれにする
- 加工不要！画像を丸でくり抜く方法
- 知っておくと便利GREY SCALEの活用方法
それぞれ実際の画面で説明をしていきます。
画像の大きさを指定する
これはクリックパネルの内部の画面です。一緒に設定をしていきましょう。では早速この画像の下に新たに画像を追加したいと思います。プラスマークを押して”IМАGЕ”を選び、画像を挿入しましょう。画像エリアを追加したら歯車マークを押してください。右側の設定欄で挿入したい画像を指定しましょう。写真マークを押し、一覧から画像を選んでいきます。
丁度アイコン画像があるのでこれを選択します。”ADD IMAGE”を押せば画像が入ります。今丁度いい大きさだとは思うのですが、ここでは画像の横幅を設定してみましょう。ちょっと大きすぎるかなと思った場合は、この”IMAGE WIDTH”を調整してください。例えば『150』と入力すると、ちょうど可愛い感じに小さくなりました。これで画像サイズの調整は完了です。
画像にURLを設定する方法
他にも、この画像を押すとどこかのサイトに飛ぶようにしたいという場合があるかもしれません。
その場合は、この”LINK URL”の欄にリンク先を指定してください。するとお客様がこの画像を押すだけで違うサイトに飛ぶように設定する事ができます。
写真に枠線を付けておしゃれにする
この画像へ枠線を付けることもできます。これに関してはすでに違う写真へ枠線を付けていますが、折角なのでもう一回ご説明いたします。”SETTINGS”を押し、真ん中タブの”THEMES”を押してください。
初期の状態では1番上が選択されているはずです。こんな感じでペラっとした普通の画像1枚の状態ですね。1つ下を1回押すだけで枠線付きのスタイルに変更されます。凄い便利ですよね。黒い枠線や、白いもの、影がある枠線などいろんな枠線のスタイルが用意されています。これはグレーになりましたね。このようにテーマを選ぶ事により、簡単にオシャレな枠線を設定することができるのです。自分で画像の加工をしなくとも済むため非常に便利です。
加工不要！画像を丸でくり抜く方法
そして、これもまたClickFunnelsのすごいところなのですが、画像を丸く抜くこともできるのです。例えば四角い画像を丸く表示したい場合、通常ではあらかじめ他のフォトレタッチソフトで丸く加工した上でアップロードする必要があります。ところがClickFunnelsは内部操作だけで可能です。それはどこで設定するのかというと、”ADVANCED”をクリックしてください。そして、”RADIUS”という項目が角の丸さを示すものなのでこれを選択してください。ここの設定は今”None”になっているのでクリックして変更してください。選択肢の中に”Circle”が見つかると思います。これを選択するとあっという間に丸くなりました。こんな感じで一気に加工することができます。ちなみに正方形の画像を使うと真ん丸に切り抜かれます。
先程の画像をご覧下さい。これを真ん丸にしてみたいと思います。歯車を押します。”ADVANCED”へ移り”RADIUS”を”Circle”へ変更します。すると真ん丸く可愛い感じに切り抜かれましたね。
知っておくと便利GREY SCALEの活用方法
そしてもうひとつご活用いただきたいものがあります。画像に関しての話なのですが、例えばこれをご覧下さい。分かりやすく大きく表示させます。これは画像です。見た目上、動画に見せかけている画像なのですが、まだ再生していない動画としてグレーアウト表示させたいと思います。その方法をお教えします。
歯車を押して”ADVANCED”へ入ってください。すると最下部に”GREY SCALE FX”という項目があります。これは何かご説明します。今”Full Color”が選択されているのですが、”Black & White”へ切り替えます。すると画像がモノクロになり、まだ未再生の動画だと錯覚させることができます。これはライブローンチなど、動画を1度に1話〜4話まで見せるような時に使うと非常に効果的です。
ボタンの役割とカスタマイズ
ボタンには色んな仕掛けができます。
- ボタンにリンクを設定する
- ボタンにテキストを表示させる
- ボタンの色を指定する
- THEMEを使った一発でボタンをかっこよくする方法
- 知っておくと便利！”BUTTON EFFECT”でボタンで目立たせる
実際の画面を交えて詳しく説明をしていきます。
ボタンにリンクを設定する
これは先ほどから使用しているClickFunnelsのページです。内部に画面がありますね。先ずは1つボタンを追加しましょう。既にボタンがありますが、プラスを押してその下へボタンを追加します。初期設定ではこのようなブルーのボタンが追加されます。
まずはこのボタンを押した場合、どこへ移動するのかという指定をしましょう。この歯車を押します。この”SET ACTION”を押しましょう。このボタンを押して『次のページに行く』という場合には、こちらの”GO TO NEXT STEP IN FUNNEL”というボタンを押せば自動的にファネルとして組み立てている次ページへ飛ばす事ができます。もし任意のURL、ホームページ等へ飛ばしたい場合はこの欄にURLを指定すれば外部のサイトへ飛ばすことも出来ます。また、このページは現在『オプトインページ』というメールを収集して次のページに行く設定になってます。それを指定したい場合は”SUBMIT ORDER”を選んでください。完了したらいつも通り関係ないところをクリックするのですが、先程の設定ダイアログ内をクリックすればそのまま設定を続行できます。
ボタンにテキストを表示させる
今度はボタンの名前(表示)を変えたいと思います。標準の状態では英語になってます。『参加する！』というようにもちろん日本語も指定できます。『登録する！！』などもよく使います。更にサブテキストを入れることもできます。それでは”SUB TEXT”欄へサブテキストを入力しましょう。ここでは『登録いただくと次のページでダウンロードできます』と日本語で入力しました。こんなふうに補足説明を入れると、お客様もボタンを押しやすくなります。
ボタンの色を指定する
次にボタンの色を変えましょう。ボタンの色は下へスクロールして”BG COLOR”に変更します。色指定欄をクリックして、オレンジを選択しましょう。上のボタンと同じ色になりましたね。色が被っているので赤色にしておきましょう。このような感じでボタン色も自由に変更できます。細かい色指定も可能です。もう少し濃淡を変えたいなどや好きな色へ変更したい場合は場合はここで指定してください。
THEMEを使った一発でボタンをかっこよくする方法
そして、ボタンの色やデザインは予めテーマが用意されているんです。”THEMES”タブを押して一覧を出します。試しにどれか押してみてください。丸っこいボタンやカチッとしたボタン、3Dで立体感のあるボタンがあります。この”Orange Dark Button”は文字にも立体感が現れましたね。このようにテーマを選択することでもボタンを様々に変更できます。
知っておくと便利！”BUTTON EFFECT”でボタンで目立たせる
そして販売に特化したページでよくやっているのが、ボタンに動く仕掛けを付けることです。これも難しい手順を踏まずに簡単に設定できますから覚えておきましょう。”ADVANCED”をクリックしてください。最下部から2番目に”BUTTON EFFECT”という設定項目があります。初期設定は”No Effect”つまり、何の動的な効果もなく仕掛け設定されていないという状態ですので変更してみましょう。クリックするとプルダウンメニューが現れます。よく使うのは”Bounce”や”Rocking”です。バウンスを選択するとこのようにピョンピョン跳ねるようになりますね。ロッキングっていうのはボタンがゆらゆら動いて見つけやすくなります。
ありがちな例として、ホームページやLPを作っていらっしゃる方の中に、「どこがボタンか分からなくて押せない」と仰る方がいます。そういう方は、このようにボタンに動く効果を与えると良いでしょう。するとお客様にこれを押すのだと明確に伝えられるはずです。このような仕掛けも上手に活用してみてください。
クリックファネルのカスタマイズまとめ
今回はクリックファネルのカスタマイズ方法をお話しさせていただきました。今回ご紹介したもの以外にもカスタマイズ方法はたくさんありますが、ひとまずは基本的なカスタマイズを駆使して、オリジナルのLPを作っていただけたらと思います。まずはいろいろ試してみて、ご自分のビジネスに合った形式や感覚にあった模様を探して行っていただき、試行錯誤を重ねることでどんどん良いLPになっていくと思います。ぜひ手を動かしてビジネスのブランディングに繋げてみてください。最後までご覧いただき、ありがとうございました。