こんにちは、下坂栄里子です。
この記事では、作成したページのモバイル（スマホ）表示を個別に最適化する方法を解説します。今はモバイルで見る方の割合が80%にもなるため、パソコンで作った後は必ずこの確認をしてください。
モバイルプレビューに切り替える
編集画面の上にあるスマホのマークを押すと、画面がスマホサイズの表示に切り替わります。左側のファネルステップの一覧が邪魔な場合は、折りたたむことで編集スペースを広く使えます。
要素の歯車マークから、モバイルだけを個別に調整する
モバイルプレビューの状態で、変更したい要素の歯車（設定）マークを押すと、設定パネルにもスマホのマークが表示されます。この状態で調整した内容は、モバイル表示にだけ反映され、パソコン表示には影響しません。
たとえば見出しの文字サイズや、ボタンの文字サイズは「…」（詳細設定）からスマホ用に個別に変更できます。パソコンではちょうど良かった大きさが、スマホでは大きすぎて折り返してしまうことはよくあります。ページ全体を上から下までスクロールしながら確認し、おかしいところを一つずつ直していきましょう。自分の好みで文字をやや大きめにするなど、センスで調整して問題ありません。
パソコンとスマホで違う表現を出し分ける
画像やテキストによっては、パソコンではうまく表示できても、スマホでは違う表現にしたいことがあります。そんなときは、要素を「複製」して2つにし、片方を「デスクトップのみ」、もう片方を「モバイルのみ」に設定します。それぞれの表示設定は、要素の設定パネルから選べます。これで、パソコンとスマホでまったく違う文言や画像を出し分けることができます。
ページ全体の完成度を高める最終チェックについてはこちらの記事もあわせてご覧ください。
まとめ
モバイル表示の割合は約80%。パソコンで作ったら必ずスマホ表示も確認する
編集画面上部のスマホアイコンでモバイルプレビューに切り替えられる
モバイル表示中に要素を調整すると、その変更はスマホ表示にだけ反映される
文字サイズやボタンサイズは、ページ全体をスクロールしながら一つずつ確認・調整する
要素を複製して「デスクトップのみ」「モバイルのみ」に設定すれば、デバイスごとに違う表現も出し分けられる
調整が終わったら必ず保存する
ファネルデザイナー® 下坂栄里子でした。
SNSをやめても、あなたの知識は売れ続けます。
眠っている間に世界中で売れ続ける仕組み「5つのデジタル導線」の作り方を、16分の無料動画で公開中です。
▶︎ 無料動画を視聴する