ClickFunnels

今回はClickFunnelsでページに背景を設定していきます。

ClickFunnelsの背景には3種類ある

ページの背景を設定していきます。まず、ページ全体の背景を設定するには、左上の「SETTINGS」から「BACKGROUND」を表示します。

ClickFunnelsの背景には3種類あります。ページ全体、セクション、Rowに設定することができます。

• 画像を指定する場合（BG IMAGE）
• カラーコードを指定する場合（BG COLOR）
• バックグラウンドビデオを指定する場合（BG VIDEO）

それぞれ見ていきましょう。

Step1. 画像を指定する場合

• 画像を指定する場合

画像の場合はタブにいろいろ分かれています。自分がアップロードした画像の他に、「SEARCH」で「Pixabay」や「Unsplash」のものを持ってこれたり、ClickFunnelsがオリジナルで用意しているバックグラウンドのイメージもあります。

今回はバックグラウンドのイメージからオレンジを選択して「ADD IMAGE」をクリックします。これもいろいろ画像のサイズによってどういうふうにスペースにフィットさせるかというものがあるので、いろいろ研究してみてください。基本的にはパターンのような小さい画像であれば「Repeat」などで繰り返しにすればきれいにできますし、そうでない場合は幅を100%に引き伸ばす「Fill 100% Width」というものもありますが、画像によっては横に伸びてしまってきれいにならないかもしれないので研究してみてください。

ページのバックグラウンドはきれいになっていますが、Rowに白い背景が残ってしまっているところがあります。これはRowのセッティングのバックグラウンドカラーが白で表示されているためです。バックグラウンドカラーの白の透明度を上げることによってきれいになりました。このような感じで進めていきます。

Step2. カラーコードを指定する場合

• カラーコードを指定する場合

次は画像を一旦消してしまいましょう。全セレクトして画像のURLをデリートします。

バックグラウンドカラーのカラーコードを指定して、先ほどのように透明度を出すこともできます。例えばグリーンにして少し透明度を上げたりすることもできます。

Step3. バックグラウンドビデオを指定する場合

• バックグラウンドビデオを指定する場合

YouTube限定ですがバックグラウンドビデオもできるので、YouTubeから動画を持ってくることもできます。URLを入れてもろもろの設定をして、ボリュームに関してもミュートのまま後ろで流すかフェードインでボリュームを入れることもできます。説明がありませんが、その下に「HOURS」「MINUTES」「SECONDS」とあります。これはYouTubeの動画のどのポイントから再生を開始するかが指定できます。例えば1分10秒のところから再生を開始したいという場合は、「MINUTES」に「1」を入れて「SECONDS」に「10」を入れます。

「END ACTION」は動画を再生し終わった後にどうするかを聞いているので、ビデオをそのままループしたり、別のURLにリダイレクトしたり、ポップアップを表示したり、ビデオ自体を非表示にしたりできます。

では、一旦ここをクリアしてバックグラウンドカラーを白に戻しておきましょう。バックグラウンドビデオもオフにします。セクションのRowも同じように「SETTINGS」でバックグラウンドイメージとバックグラウンドカラーを変えることができます。セクションのバックグラウンドを変えた場合は他の場所には反映されないので、このセクションだけの背景になります。ページの背景を変えるのか、セクションごとに設定するのか、それぞれのページで使い分けてみてください。以上です。

やり方を動画で見る

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

今回はClickFunnelsでエレメントを追加していきます。

ClickFunnelsのエレメントとは

ClickFunnelsの中の項目の単位としては、エレメントが一番小さい単位です。次がRow、最後にSectionという感じで次第に大きくなっていきます。今回は一番小さい単位のエレメントです。

Step1. エレメントを追加するには

• エレメントを追加するには

エレメントを追加するにはオレンジのプラスボタンまたは「ADD NEW ELEMENT」のボタンだけが表示されているときもあるので、それをクリックします。するとエレメントを選ぶ画面が出てきます。

注意点が一つあります。エレメントにはいろいろな種類があって、ページによって選べるエレメントが変わることがあります。例えばオートウェビナーファネルであればオートウェビナー専用のカウントダウンタイマーがあったり、決済ページであれば決済専用のエレメントがあったり、決済ページ専用のエレメントはセールスページでは使えなかったりということがあります。したがってページタイプを間違えないように最初にファネルステップを追加した方がいいです。

Step2. ヘッドラインを追加するには

• ヘッドラインを追加するには

テキストの一番大きな単位がヘッドラインで、次がサブヘッドライン、パラグラフと文字の大きさが小さくなっていきますが、今回はヘッドラインを入れてみます。

ヘッドラインのエレメントをドラッグ＆ドロップしてきて、必要な場所でオレンジの枠が出てくるので、「+」が出たところで放すと新しいものが出てきます。

もしエレメントを削除したい場合は、このオレンジのバーがフローティングしているところで「DELETE」を押すと確認が出てくるので、「OK」を押すと消えていきます。以上です。

やり方を動画で見る

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

今回はClickFunnelsでSectionとRowを保存していきます。

ClickFunnelsのSectionとRowとは

まずはページエディタに入ります。ページエディタ内でブルーで見えているものがRow、グリーンで見えているものがSectionです。RowよりもSectionの方が単位としては大きくなります。

例えばテスティモニアルなどに決まった形式があれば、使い回しできるようにSectionやRowをテンプレートとして保存しておくと便利です。

• テスティモニアル
• モジュールの説明
• 分割決済と一括決済の比較表
• ボタン付きのSection　など

今回は分割決済と一括決済の比較表のSectionを保存していきます。

Step1. Sectionに名前を付けて保存する

• Sectionに名前を付けて保存する

SectionのところにあるセーブボタンをクリックするとSectionに名前を付けるところがあります。

今回はオンラインコースクリエーションなので「OCC Price」と名前を付けて「Save section」をクリックします。「Saved as Personal Template」と出たら保存されたということです。

Step2. 保存したSectionを別のFunnelに使用する

• 保存したSectionを別のFunnelに使用する

では、保存したSectionを別のFunnelに貼り付けていきましょう。別のFunnelのセールスページに入って追加します。「ADD NEW SECTION」をクリックします。先ほど追加したものは「MY SECTIONS」というところに入ります。「MY SECTIONS」をクリックします。

今は「OCC PRICE」というのを入れているので、これをドラッグ＆ドロップで入れたいところに持ってきます。「DROP」と出たところで放します。

たまに調子が悪いときがありますが、何回かトライしていただければちゃんと入ります。保存前と同じように分割決済と一括決済の比較表の体裁も反映されています。

今回はSectionで保存しましたが、同じように1つ小さい単位のRowでも同じことができます。今回は以上です。

やり方を動画で見る

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

今回はClickFunnelsでDigital Assetsの配り方をやっていきます。

Digital Assetsの配り方には2種類ある

Digital Assetsの配り方には2種類あります。

• 自動返信Eメールで配る方法
• ページの中に仕込んだダウンロードのボタンやテキストのリンクなどのダウンロードリンクからダウンロードする方法

Step1. 自動返信EメールでDigital Assetsを配る方法

• 自動返信EメールでDigital Assetsを配る方法

自動返信Eメールの場合は、Funnelの中の「Squeeze Page」というのがEメールの登録ページです。「EDIT PAGE」から入ってみると、「名前とEメールアドレスを入力してレポートをゲットしましょう」というものがあるので、今回はこの入力したEメールに届くようにします。

上の「SETTINGS」から「GENERAL」に行って「DIGITAL ASSET」を選択します。既に「asset sample」というDigital Assetsをアップロードしてあるので、これを選択して「SAVE」を押せばできます。

Step2. ダウンロードリンクからDigital Assetsをダウンロードする方法

• ダウンロードリンクからDigital Assetsをダウンロードする方法

ダウンロードリンクのやり方は、例えば「Squeeze Page」からThank You Pageに移ったところでThank You Pageにボタンを出したり、セールスページやオーダーページといって、最後に商品の購入のThank You Pageのところで出したりします。今回は購入後のThank You Pageのところを例にとっていきます。

「EDIT PAGE」からページエディタに入るとダウンロードのリンクがあります。なので、ここにダウンロードリンクを設定していきたいのですが、既にアップロードしてあるDigital AssetsのURLを取りにいきます。

左側の「Digital Assets」に「asset_sample.pdf」があるので、右の点々のところをクリックして「Copy Asset Path」を選択します。これでこのファイルのURLがコピーされました。

先ほどのページに戻って、ここで「SET ACTION」からボタンにアクションをセットしていきます。「GO TO WEBSITE URL」という特定のURLを開いてくれるものがあるので、今回はこれに先ほどコピーしたURLをペーストします。今回は同じウィンドウで開く設定のまま戻ります。これでセーブするとDigital Assetsをこのボタンの中から配れるようになります。以上です。

やり方を動画で見る

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

今回はClickFunnelsでモバイルビューを最適化していきます。各Funnelのページを作り終えた後にモバイルの表示に最適化したい場合について解説します。

モバイルビューでできること

モバイルビューでできることが3つあります。

• モバイルを触るとデスクトップも変化
• モバイル・フォントサイズが選べる
• モバイル/デスクトップ・オンリーも活用

1つ目は注意点です。例えばモバイルビューでエレメントの位置や順番を入れ替えたりするとデスクトップ版も変化してしまうので、それだけ注意してください。

あとはフォントサイズがだいぶ変わってくるので、デスクトップ版だと改行などがきれいに見えていたものがモバイル版になると崩れたりすることがあるので、それを防止するためにモバイル版の専用のフォントサイズが選べます。

フォントサイズを変えてもモバイル版に合わないものが出てきた場合は、モバイル版の方を触ってしまうとデスクトップのほうが変化してしまうということがあります。これを解消する方法があって、「これはモバイル版のみで表示してください」「これはデスクトップ版のみで表示してください」というモバイル/デスクトップ・オンリーの表示もできるので、それぞれに合わせてセクションを用意して「見せる」「見せない」という振り分けをしていくことができます。

Step1. モバイルビューをチェックする

• モバイルビューをチェックする

では、見ていきましょう。まずはページエディタに入ります。モバイル版は左上の「MOBILE」をクリックします。

そうすると縦長になってモバイル版の表示になります。デスクトップ版と比べると変なところで文字が改行されていたりします。

また、「Online Course Creation」と書いてあるセクションのところがデスクトップ版と比べると写真の縦サイズに対して横サイズが合っていないので、写真の左側だけが表示されているという状況になってしまいます。

そして、テスティモニアルのところがデスクトップ版ではちゃんと縦サイズも横サイズに合わせた感じになっているので尺が足りていますが、モバイル版では画像の縦サイズが足りないのでこの辺が白地のまま画像の背景が無くなっているために白い文字が見えなくなってしまっています。こういうものに対応するためにモバイルビューを最適化していきます。

Step2. モバイルビューを最適化する

• モバイルビューを最適化する

モバイルを触るとデスクトップが変化するので、まずはオレンジの部分とグレーの部分の文字を入れ替えてみます。そうするとデスクトップ版でも同じようにオレンジが下になっています。そしてこれを戻します。うまく戻らないときがありますが、あとでここからエグジットするときに保存しなければいいのでこのまま続けます。

では、モバイル用のテキストサイズがあるので最適なものを選んでいきましょう。フォントサイズによっては一文字だけ最後の行に残ってしまうことがあります。かといって、あまり小さくすると見にくくなってしまうので適度に調整しましょう。「FONT SIZE」はデスクトップ版のフォントサイズです。改行の位置がきれいなほうがいいので、「MOBILE SIZE」をちょっとだけ小さくすれば見栄えが良さそうです。これ以上やると大変なのでこのぐらいにしておきます。

Step3. モバイル/デスクトップ・オンリーの設定をする

• モバイル/デスクトップ・オンリーの設定をする

次はデスクトップ・オンリーのものをやっていきましょう。例えばこれは画像の修正が必要になってしまうので、ここはデスクトップとモバイルで分けようと思います。デスクトップとモバイルの表示を分けたいときはまず該当するセクションをクローンします。

では、下のほうをモバイル専用にしていきましょう。今は画像が入っているので、まずは画像を消して黄色のバックグラウンドにしましょう。そして、これをモバイル・オンリーのセクションに変えます。

では、見てみましょう。デスクトップのほうには出ていません。こっちはセッティングでデスクトップ・オンリーのセクションにしましょう。モバイルビューに戻ってみると、先ほどの画像が切れてしまっていたものが無くなっています。ここはもうモバイルビュー専用のセクションになっているので、要らないものを消したりすることができます。こんな感じでモバイルビューを整えていきます。以上です。

やり方を動画で見る

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