【CF解説その13】Clickfunnels1.0 でスマホ用ページを作る方法

今回のブログ記事では、Clickfunnels1.0（クリックファネル1.0）を使用してWebサイトを作成する際に「スマホに最適化したサイト（スマホ用ページ、モバイルサイト）」を同時に作成する方法について解説します。

クリックファネルでサイトを作成する際のメリットとして、PC用（デスクトップ用）とスマホ用（モバイル用）とで、それぞれ別のサイトを作ることができるので、スマホにも最適化されたデザインでサイトを作りやすい、という利点があります。

特にクリックファネルを使って作成するランディングページやセールスページは、多くの人に広告やSNSなどで宣伝をすることが必然的に多くなるため、スマホでアクセスする人の割合が8-9割以上となります。

しかし、実際にサイトを作成する側はデスクトップで作成するため、スマホ表示まで気が回らないことが多いです。

でも、せっかく頑張って作成したサイトが、スマホ表示で見づらくて、あまり成果に繋がらなかったら苦労が台無しですよね？

ということで、今回はクリックファネル上で、最初にPC用に作成したページのスマホバージョンを簡単に作成する方法を解説いたします。

前回の記事もぜひご覧ください。

そもそもClickfunnelsって何？という方は以下の記事もご覧ください。

デスクトップ用に作成したサイトをスマホで表示するとどうなるか？

クリックファネル1.0のファネル編集画面の右上にある「PREVIEW（プレビュー）」をクリックし、作成したサイトを実際のブラウザで表示してみましょう。

そうすると、デスクトップ表示であれば何の問題もありませんが、画面の横幅を短くして、スマホのように縦長にすると、以下の画像のように、文字の配列が崩れて表示されてしまいます。

これでは、改行がおかしかったりして、スマホでの表示がいまいちですよね？

かといって、キャッチコピーなどのフォントを小さくすると、今度はデスクトップ（PC）で見た時に文字のサイズが小さくて、インパクトに欠けてしまいます。

だからこそ、1つのサイトでPC、モバイル、どちらにも対応させるのではなく、スマホに最適化したページを作ることを推奨いたします。

サイト編集画面でモバイル表示に切り替える方法

まずは基本の基本ですが、ファネル編集画面のメニュー左上にある、PC表示とスマホ表示の切り替え画面の存在について必ず覚えておいてください。

PCサイトとスマホサイトを分けて作成する方法

ここから、スマホ用のページとして表示される際の文章やデザインとなどを変える方法を解説していきます。

実際にスマホ用のページを作成する為には、PC用に作成したサイトの中の「スマホに最適化したいセクション」を丸ごと複製（クローン）してください。

セクションをクローンすると、当然、同じセクションが２つ生まれます。

そのままではおかしいですよね？

なので、2つの重複するセクションを、それぞれ「デスクトップのみで表示する」「スマホのみで表示する」という設定にするのです。

セクションごとに複製をつくり、それを画面右下に出る「DESK TOP ONLY」または「MOBILE ONLY」に設定してから、それぞれの表示方法に見合った設定をしていくので、考えようによっては手間が増えるかもしれませんが、それぞれに細かく設定できるところがメリットでもあります。

「DESKTOP ONLY（デスクトップのみ）」「 MOBILE ONLY（モバイルのみ）」をそれぞれ設定しよう！

では、まずデスクトップ用の表示にしたいセクションはセクションの右上にある緑色のメニュー内の歯車ボタンを押して、画面右に表示されるメニュー画面を開きましょう。

そこで、画面の下にあるボタンの中から「DESK TOP ONLY（デスクトップのみ）」を選択しましょう。

その次は、スマホ用に複製したセクションでも同じことを繰り返します。

もちろん今度は、「MOBILE ONLY（モバイルのみ）」を選びましょう。

1つの編集画面上に2つのサイトができる

この作業を行うことで、PC表示の編集画面と、スマホ表示の編集画面を分けることができます。

つまり、最初はページ上の文字を変えると、PCとモバイル両方のページの文字が変わったわけですが、このようにサイトを複製し、それぞれPCのみで表示、モバイルのみで表示、と2つのバージョンを1つの編集画面に作成したわけです。

そうすると、PC表示の画面で文章を編集しても、スマホ表示では、その文章は編集されていない、ということになります。

クリックファネル1.0でサイト作成をする際のオススメの手順

なので、クリックファネルを使ったオススメのサイト作成方法としては、

１、まずPCサイトをある程度完成させる

２、セクションをコピーして、それそれデスクトップ用、スマホ用、と振り分ける

３、スマホ用のページをスマホ表示幅に合わせてフォントの大きさや改行を最適化する

４、その後からキャッチコピーなどの文章を変更する場合は、デスクトップとモバイル用ページをそれぞれ編集する必要がある

（二度手間にはなるが、サイトは公開後も常に改善をしていくものなのでそこはしょうがない）

というステップで行うのがオススメです。

ちなみにClickfunnelsの特徴として、１つの文章エレメンツの中にある一部分だけを大きく表示させる方法はありません。

つまり、ELEMENT単位でフォントの大きさが全て決まっているのです。

したがって、文章中の一節だけを大きく表示したければ、それぞれの行ごとにELEMENTを作ってそれらを繋げるしかない、ということは知っておいてください。

ポップアップもスマホ最適化するのを忘れずに！

本題に戻りますが、POP UPも同様にMOBILEに最適化させなければいけません。

こちらもMOBILEでの表示を見ながらフォントなどを調節していきましょう。

方法は先ほどと同様で、セクションごとに「CLONE」を押して複製を作り、それを「DESK TOP ONLY」または「MOBILE ONLY」に設定してから、それぞれの表示方法に見合った設定をしていきます。

ボタンなどの大きさなどもスマホ用に設定することもできますので、MOBILE表示を見ながら中に入れる文字との兼ね合いを微調整して下さい。

あなたのサイトはPCとスマホ、どちらからのアクセスが多い？

ちなみに、弊社のこの公式サイトは、なぜか「デスクトップからのアクセスの方がスマホより多い」です。（今後また変わる可能性はありますが。。）

おそらく、PCで仕事中に検索してこのようなブログ記事が出てきて、このサイトにアクセスしていただける方が多いからでしょう。

ただ、このサイトはクリックファネルではなく、ワードプレスで作成をしています。

実際に弊社がクリックファネルでサイトを作成する際は、広告やSNSなどで宣伝するランディングページを作ることがほとんどですので、必然的に9割のアクセスがスマホです。（タブレットも数%はいますが、PC表示でまかなえます。）

そのような場合は、スマホで見ても違和感がない、しっかり文章が読める、メールアドレスの入力や商品購入ができる、ということをチェックしないと、せっかく手に入ったかもしれない売上をミスミス逃していることになるかもしれませんよ？

後回しになりがちなスマホ用ページの作成。。でも絶対に忘れずに！

後回しになりがちなスマホ最適化ですが、非常に大事なことですので、しっかり時間を取って、スマホでの表示を実際に確認しながら、サイトをスマホにも最適化していきましょう！

この記事の解説動画はこちら

それでは次回の記事では、1つだけ、スマホ用サイトをクリックファネルで作成する上での注意点をお伝えしますので必ずそちらの記事も合わせてご覧ください！

次の記事はこちら

ClickFunnels1.0のアカウントを作成して14日間お試しに申し込む方法

現在クリックファネルの公式サイトからはClickfunnels2.0しか申し込むことができませんので、「クリックファネル1.0」に申し込むには、弊社のようなクリックファネル社のアフィリエイトパートナー経由でしか申し込めません。

以下の記事から値段やお申し込み方法をご確認の上、ぜひ導入を検討されてください↓

Clickfunnelsの使い方まとめ記事はこちら