• Skip to primary navigation
  • Skip to main content

石崎力也のコンサルティング「いしこん」

年収1000万円以上のネットビジネス経営者を対象にデジタルコンテンツの販売方法とマーケティングオートメーションの導入方法に関する情報を発信するブログ。

  • いしこん 3.0
  • 無料ウェビナー
  • もう1本読む?
    • 個人事業主のためのAIツール活用術|ChatGPTから始めるビジネスの自動化・効率化マスターガイド
    • ネット広告代理店を個人で開業!Facebook広告運用のスキルを身につけて成功する方法|ツールの設定、数値分析、営業、業務効率化まで
    • 【保存版】コンテンツマーケティングのネタ切れを防ぐ!ネタの見つけ方と戦略のコツ
    • 上級者をペルソナに設定し優良顧客だけを集める方法
    • Eメールマーケティングの基礎知識|開封率と成約率の向上、セグメンテーションまで
    • 30代フリーランスが家族と一緒にオランダに移住した体験を話します
    • Webマーケティングのやり方マスター講座|ブランディング戦略、SNS発信、スケジュール管理を解説
    • ネットビジネスの始め方【これでオランダ移住を実現しました】
    • オンラインコース(講座)ビジネスの作り方・やり方
    • 会員制サイトの作り方とサブスクリプションの導入方法
    • 動画広告の作り方マスター講座|種類、活用方法から効果測定のコツまで
    • 短くて成約率の高いVideo Sales Letter(VSL)の作り方
    • エバーグリーンローンチとは?ツールの使い方を詳しく解説!
    • 個人でKindle電子書籍を出版して利益を得る方法
    • Teachable(ティーチャブル)の使い方・操作方法
    • ClickFunnels(クリックファネル)の使い方・操作方法
  • コース一覧
  • お客様の声
  • 石崎力也とは?
  • リソース
  • スクール
  • Show Search
Hide Search
現在の場所:ホーム / ClickFunnels / 2-6 ClickFunnelsでモバイルビューを最適化する

2-6 ClickFunnelsでモバイルビューを最適化する

Last updated on 2021年4月14日 By 石崎 力也

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

今回お届けするノウハウはこちら

  • モバイルビューでできること
  • Step1. モバイルビューをチェックする
  • Step2. モバイルビューを最適化する
  • Step3. モバイル/デスクトップ・オンリーの設定をする
  • やり方を動画で見る

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

やり方を動画で見る

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

カテゴリClickFunnels

About 石崎 力也

石川県金沢市出身。モントリオール在住。専門スキル:競艇、コピーライティング、DRM、アニメーション。このサイトの運営責任者です。2013年3月に六本木と西麻布で会社を設立し、同年11月までに全てのメディア・広告事業を軌道に乗せる。現在は、家族と一緒に、3か月に1度、住む国を変えながら生活をしています。

「デジタルマーケティング完全ガイド」を無料プレゼント0円でダウンロード

石崎力也のコンサルティング「いしこん」

Copyright © 2025 · Rikiya "Sales Funnel" Ishizaki