今回はClickFunnelsでモバイルビューを最適化していきます。各Funnelのページを作り終えた後にモバイルの表示に最適化したい場合について解説します。
今回お届けするノウハウはこちら
モバイルビューでできること
モバイルビューでできることが3つあります。
- モバイルを触るとデスクトップも変化
- モバイル・フォントサイズが選べる
- モバイル/デスクトップ・オンリーも活用
1つ目は注意点です。例えばモバイルビューでエレメントの位置や順番を入れ替えたりするとデスクトップ版も変化してしまうので、それだけ注意してください。
あとはフォントサイズがだいぶ変わってくるので、デスクトップ版だと改行などがきれいに見えていたものがモバイル版になると崩れたりすることがあるので、それを防止するためにモバイル版の専用のフォントサイズが選べます。
フォントサイズを変えてもモバイル版に合わないものが出てきた場合は、モバイル版の方を触ってしまうとデスクトップのほうが変化してしまうということがあります。これを解消する方法があって、「これはモバイル版のみで表示してください」「これはデスクトップ版のみで表示してください」というモバイル/デスクトップ・オンリーの表示もできるので、それぞれに合わせてセクションを用意して「見せる」「見せない」という振り分けをしていくことができます。
Step1. モバイルビューをチェックする
- モバイルビューをチェックする
では、見ていきましょう。まずはページエディタに入ります。モバイル版は左上の「MOBILE」をクリックします。
そうすると縦長になってモバイル版の表示になります。デスクトップ版と比べると変なところで文字が改行されていたりします。
また、「Online Course Creation」と書いてあるセクションのところがデスクトップ版と比べると写真の縦サイズに対して横サイズが合っていないので、写真の左側だけが表示されているという状況になってしまいます。
そして、テスティモニアルのところがデスクトップ版ではちゃんと縦サイズも横サイズに合わせた感じになっているので尺が足りていますが、モバイル版では画像の縦サイズが足りないのでこの辺が白地のまま画像の背景が無くなっているために白い文字が見えなくなってしまっています。こういうものに対応するためにモバイルビューを最適化していきます。
Step2. モバイルビューを最適化する
- モバイルビューを最適化する
モバイルを触るとデスクトップが変化するので、まずはオレンジの部分とグレーの部分の文字を入れ替えてみます。そうするとデスクトップ版でも同じようにオレンジが下になっています。そしてこれを戻します。うまく戻らないときがありますが、あとでここからエグジットするときに保存しなければいいのでこのまま続けます。
では、モバイル用のテキストサイズがあるので最適なものを選んでいきましょう。フォントサイズによっては一文字だけ最後の行に残ってしまうことがあります。かといって、あまり小さくすると見にくくなってしまうので適度に調整しましょう。「FONT SIZE」はデスクトップ版のフォントサイズです。改行の位置がきれいなほうがいいので、「MOBILE SIZE」をちょっとだけ小さくすれば見栄えが良さそうです。これ以上やると大変なのでこのぐらいにしておきます。
Step3. モバイル/デスクトップ・オンリーの設定をする
- モバイル/デスクトップ・オンリーの設定をする
次はデスクトップ・オンリーのものをやっていきましょう。例えばこれは画像の修正が必要になってしまうので、ここはデスクトップとモバイルで分けようと思います。デスクトップとモバイルの表示を分けたいときはまず該当するセクションをクローンします。
では、下のほうをモバイル専用にしていきましょう。今は画像が入っているので、まずは画像を消して黄色のバックグラウンドにしましょう。そして、これをモバイル・オンリーのセクションに変えます。
では、見てみましょう。デスクトップのほうには出ていません。こっちはセッティングでデスクトップ・オンリーのセクションにしましょう。モバイルビューに戻ってみると、先ほどの画像が切れてしまっていたものが無くなっています。ここはもうモバイルビュー専用のセクションになっているので、要らないものを消したりすることができます。こんな感じでモバイルビューを整えていきます。以上です。
