今回はClickFunnels2.0（クリックファネル2.0）の使い方としてセールスファネルの作成〜スマホ対応について解説していきます。比較的クリックファネル2.0で作るページは、スマホにもしっかりと対応するんですが、ところどころ「このパーツはちょっと大きすぎるな」みたいなところがありますので、一緒にやり方を見ていきましょう。
まず、画面右上の赤枠【スマホのボタン】ですね。これをクリックしてください。クリックしていただきますと、スマホサイズになって表示ができました。そうしますと、もともと設定したパーツですね。これがちょっと大きいなみたいな、横幅がちょっとはみ出てるなみたいなところにお気づきになると思います。
その場合は、変更したいパーツの上にマウスと持ってきて【設定（歯車マーク）】をクリックします。そうしましたら、画面右の「設定メニュー」を見ていただきたいんですが、たとえば、この文字を少しだけスマホ用には小さくしたい場合ですね。その場合は「フォントサイズ」項目ですね。ここを見ていただいて「フォントサイズ」項目の右隣にあるアイコンが今スマホが光っています。
なので、スマホの場合をちょっとフォントサイズを小さくしてみます。カーソルを左に動かしていただいて、ちょっと小さくしてみました。そうしましたら、画面右上にある「スマホのボタン」の左隣にある【ブラウザのボタン】をクリックして大きく戻してみましょう。スマホではないパソコンの場合はこの大きさになって、スマホの場合はしっかりとスマホの表示に適したサイズになりました。
パソコンの場合
スマホの場合
もう一つやってみましょう。こちらもですね、スマホの場合の設定をしますので【スマホのボタン】をクリックします。そうしましたら、設定メニューを下の方にスクロールしていただきまして、ここですね。「タイポグラフィ」項目の「スタイル」にある【・・・】をクリックしていただきます。
そうしましたら、変更できる項目が開き「フォントサイズ」がありますので、右隣のアイコンがスマホが光っているのをちゃんと確認をしてから、カーソルを左に動かしていただき少し小さめにしましょう。これでできました。（フォントサイズの単位は「px（ピクセル）」がおすすめです。）
ボタン設定も同じですね。ボタンも早速やってみましょう。ちょっと「タップして申し込む」の「む」がずれてしまってますので、こちらの紫色のボタンをクリックします。設定画面が開きますので、下の方にスクロールします。「プライマリテキストスタイル」項目にきまして「フォントサイズ」のところですね。他にも、ボタンの文字間隔とかテキストの大きさなどがあります。
それでは、フォントサイズを直していきましょう。カーソルを左右に動かしていただいて、ちょうどいい大きさにしてみてください。フォントサイズと一緒に、行の高さも調整してみましょう。こちらも、カーソルを左右に動かしていただいて、ちょうどいい高さにしてみてください。はい、いい感じにできました。
このように設定していただきますと、スマホで見る方にもパソコンで見る方にもカスタマイズをしっかりとすることができますので、ぜひ対応してみてください。また補足として、どうしてもスマホではこの写真を表示して、パソコンではこっちの違う写真を表示するみたいなこともあるかと思います。
たとえば、これはスマホでもパソコンでもいい画像なんですけれども、スマホの場合は違う画像を使いたいとか、テキストもそうなんですけれども、スマホの場合は違う表示をしたいみたいってこともあると思います。それも合わせて、ちょっと一緒にやっていきましょう。ひとつの例としてですね、わかりやすく、このキャッチコピーですね。キャッチコピーをスマホの場合とパソコンの場合と別々のものを表示させる場合を解説します。
その場合は、キャッチコピーをまず【コピーボタン】をクリックして複製していただきます。同じものが複製されて増えました。スマホの場合は、この太字（リードマグネット）の色を青にしてみます。下に表示されているのがスマホですね。わかりやすく「リードマグネット（スマホ）」と書いておきましょう。今は両方とも表示されてしまっている状態です。スマホ表示にしてもパソコン表示にしても両方とも表示されています。
ですがこれをですね、たとえば、こちら上の表示は「スマホ」ではなく「パソコン」に表示するので、パーツの【設定】をクリックしていただきます。そうしましたら、設定メニューの一番下に「可視性」という項目のところが「全て」になっています。そうすると、全てのデバイスで表示になっていますが、これを今回は【デスクトップのみ（パソコンのみ）】をクリックして表示方法を変えます。
そして、次に下のパーツ「リードマグネット（スマホ）」ですね。下のパーツはスマホのみにしたいと思いますので、パーツの【設定】をクリックしていただいて、設定メニューの一番下「可視性」を【モバイルのみ（スマホのみ）】をクリックしていただきます。そして、ページの関係ないところをクリックしていただきまして設定メニューを閉じます。画面右上にある、黄色いボタン【保存】をクリックして保存しましょう。
そうしますと、パソコンで見た場合はパソコン用のテキストのみ、スマホで見た場合はスマホ用のテキストのみを表示することができました。このようにしていただいて、ある程度は両方兼用で表示させていただくのがいいかと思うんですけれども、どうしてものときはこのようにスマホのみ、デスクトップ（パソコン）のみという機能も使い分けていただくと自分の実現したいページが作れますので、ぜひご活用いただければと思います。
今回は、クリックファネル2.0の使い方としてセールスファネルの作成〜スマホ対応について解説させていただきました。