ツール海外製ソフトウェア今回のブログ記事では、Clickfunnels1.0(クリックファネル1.0)を使用してWebサイトを作成する際に「スマホに最適化したサイト(スマホ用ページ、モバイルサイト)」を同時に作成する方法について解説します。クリックファネルでサイトを作成する際のメリットとして、PC用(デスクトップ用)とスマホ用(モバイル用)とで、それぞれ別のサイトを作ることができるので、スマホにも最適化されたデザインでサイトを作りやすい、という利点があります。クリックファネルを使って作成するランディングページやセールスページは、多くの人に広告やSNSなどで宣伝をすることが必然的に多くなるため、スマホでアクセスする人の割合が8-9割以上となります。実際にサイトを作成する側はデスクトップで作成するため、スマホ表示まで気が回らないことが多いです。頑張って作成したサイトが、スマホ表示で見づらくて、あまり成果に繋がらなかったら苦労が台無しですよね?ということで、今回はクリックファネル上で、最初にPC用に作成したページのスマホバージョンを簡単に作成する方法を解説いたします。前回の記事もぜひご覧ください。ポップアップフォーム設定方法そもそもClickfunnelsって何?という方は以下の記事もご覧ください。後回しになりがちなスマホ用ページの作成。Clickfunnelsの使い方まとめ記事はこちら解説動画はこちらデスクトップ用に作成したサイトをスマホで表示するとどうなるか?クリックファネル1.0のファネル編集画面の右上にある「PREVIEW(プレビュー)」をクリックし、作成したサイトを実際のブラウザで表示してみましょう。すると、デスクトップ表示であれば何の問題もありませんが、画面の横幅を短くして、スマホのように縦長にすると、以下の画像のように、文字の配列が崩れて表示されてしまいます。これでは、改行がおかしかったりして、スマホでの表示がいまいちですよね?かといって、キャッチコピーなどのフォントを小さくすると、今度はデスクトップ(PC)で見た時に文字のサイズが小さくて、インパクトに欠けてしまいます。1つのサイトでPC、モバイル、どちらにも対応させるのではなく、スマホに最適化したページを作ることを推奨いたします。サイト編集画面でモバイル表示に切り替える方法まずは基本の基本ですが、ファネル編集画面のメニュー左上にある、PC表示とスマホ表示の切り替え画面の存在について必ず覚えておいてください。PCサイトとスマホサイトを分けて作成する方法ここから、スマホ用のページとして表示される際の文章やデザインとなどを変える方法を解説していきます。実際にスマホ用のページを作成する為には、PC用に作成したサイトの中の「スマホに最適化したいセクション」を丸ごと複製(クローン)してください。セクションをクローンすると、当然、同じセクションが2つ生まれます。そのままではおかしいですよね?なので、2つの重複するセクションを、それぞれ「デスクトップのみで表示する」「スマホのみで表示する」という設定にするのです。ONLY」に設定してから、それぞれの表示方法に見合った設定をしていくので、考えようによっては手間が増えるかもしれませんが、それぞれに細かく設定できるところがメリットでもあります。ONLY(モバイルのみ)」をそれぞれ設定しよう!では、まずデスクトップ用の表示にしたいセクションはセクションの右上にある緑色のメニュー内の歯車ボタンを押して、画面右に表示されるメニュー画面を開きましょう。ONLY(デスクトップのみ)」を選択しましょう。その次は、スマホ用に複製したセクションでも同じことを繰り返します。ONLY(モバイルのみ)」を選びましょう。1つの編集画面上に2つのサイトができるこの作業を行うことで、PC表示の編集画面と、スマホ表示の編集画面を分けることができます。最初はページ上の文字を変えると、PCとモバイル両方のページの文字が変わったわけですが、このようにサイトを複製し、それぞれPCのみで表示、モバイルのみで表示、と2つのバージョンを1つの編集画面に作成したわけです。すると、PC表示の画面で文章を編集しても、スマホ表示では、その文章は編集されていない、ということになります。クリックファネル1.0でサイト作成をする際のオススメの手順なので、クリックファネルを使ったオススメのサイト作成方法としては、1、まずPCサイトをある程度完成させる2、セクションをコピーして、それそれデスクトップ用、スマホ用、と振り分ける3、スマホ用のページをスマホ表示幅に合わせてフォントの大きさや改行を最適化する4、その後からキャッチコピーなどの文章を変更する場合は、デスクトップとモバイル用ページをそれぞれ編集する必要がある(二度手間にはなるが、サイトは公開後も常に改善をしていくものなのでそこはしょうがない)というステップで行うのがオススメです。ちなみにClickfunnelsの特徴として、1つの文章エレメンツの中にある一部分だけを大きく表示させる方法はありません。ELEMENT単位でフォントの大きさが全て決まっているのです。したがって、文章中の一節だけを大きく表示したければ、それぞれの行ごとにELEMENTを作ってそれらを繋げるしかない、ということは知っておいてください。UPも同様にMOBILEに最適化させなければいけません。こちらもMOBILEでの表示を見ながらフォントなどを調節していきましょう。ONLY」に設定してから、それぞれの表示方法に見合った設定をしていきます。ボタンなどの大きさなどもスマホ用に設定することもできますので、MOBILE表示を見ながら中に入れる文字との兼ね合いを微調整して下さい。あなたのサイトはPCとスマホ、どちらからのアクセスが多い?ちなみに、弊社のこの公式サイトは、なぜか「デスクトップからのアクセスの方がスマホより多い」です。(今後また変わる可能性はありますが。)おそらく、PCで仕事中に検索してこのようなブログ記事が出てきて、このサイトにアクセスしていただける方が多いからでしょう。このサイトはクリックファネルではなく、ワードプレスで作成をしています。実際に弊社がクリックファネルでサイトを作成する際は、広告やSNSなどで宣伝するランディングページを作ることがほとんどですので、必然的に9割のアクセスがスマホです。(タブレットも数%はいますが、PC表示でまかなえます。)そのような場合は、スマホで見ても違和感がない、しっかり文章が読める、メールアドレスの入力や商品購入ができる、ということをチェックしないと、せっかく手に入ったかもしれない売上をミスミス逃していることになるかもしれませんよ?後回しになりがちなスマホ用ページの作成。現在クリックファネルの公式サイトからはClickfunnels2.0しか申し込むことができませんので、「クリックファネル1.0」に申し込むには、弊社のようなクリックファネル社のアフィリエイトパートナー経由でしか申し込めません。上記リンク先のページ内の「クリックファネル1.0の14日間お試しページはこちら」と書かれた赤いボタンからクリックファネル1.0にお申し込みいただいた方に動画講座「Clickfunnels1.0マスタークラス」&「すぐに使えるファネルテンプレート」を差し上げております。