モバイル最適化手法
公開日: 更新日:
モバイル デバイス向けにページを最適化することは、特にスマートフォンやタブレットからサイトにアクセスする訪問者が増えるにつれて、シームレスなユーザー エクスペリエンスを提供するために非常に重要です。この記事では、ClickFunnels でモバイル フレンドリーなページをデザインし、コンテンツの応答性が高く、視覚的に魅力的で、読み込みが速いようにするための効果的なテクニックを検討します。
-
アクティブなClickFunnelsアカウント
-
ワークスペースで作成されたページ
ClickFunnels がモバイルとデスクトップを切り替える基準
Section titled “ClickFunnels がモバイルとデスクトップを切り替える基準”ClickFunnels は、幅770px以下の画面をモバイル、幅771px以上の画面をデスクトップとして扱います。この基準により、デスクトップのみ・モバイルのみの表示設定、フォントサイズやパディングなどのモバイル固有のプロパティ、行内の列が積み重なるタイミングが決まります。
設定パネルでデスクトップとモバイルで別々の値を持つ設定の場合は、デバイスアイコンにカーソルを合わせると、編集中の値が適用される画面幅を確認できます。
タブレットなど、770pxの境界よりわずかに狭い画面での見え方を確認するには、エディターの上部バーにある タブレットビュー アイコンを使用します。幅750pxのキャンバスにモバイルビューと同じモバイルの値でページが表示されるため、ここでモバイルの値を変更すると、モバイルビューでも変更されます。
デスクトップのみセクションとモバイルのみセクションの使用
Section titled “デスクトップのみセクションとモバイルのみセクションの使用”ClickFunnelsでは、 セクション、 行、 および要素 を デスクトップのみ または モバイルのみとして設定できます。この機能は、次のようなデバイス固有のレイアウトを作成する場合に特に便利です。
-
デスクトップ用の複雑な複数列レイアウト。
-
モバイルデバイス用の簡略化された積み重ねレイアウト。
デスクトップとモバイルのみの設定の使用方法
Section titled “デスクトップとモバイルのみの設定の使用方法”-
セクション、行、または要素を デスクトップのみ に設定して、幅770px以下の画面で非表示にします。
-
セクション、行、または要素を モバイルのみ に設定して、モバイルデバイスでのみ表示します。
モバイル固有のプロパティの使用
Section titled “モバイル固有のプロパティの使用”ClickFunnels エディターの特定のコンテナには、モバイル カスタマイズ用に特別に設計されたプロパティが含まれています。これらのプロパティを使用すると、小さな画面に効果的にフィットするようにコンテンツを調整できます。例としては、次のようなものがあります。
-
フォントサイズ: テキスト要素のフォントサイズを調整して、モバイルでの読みやすさを確保します。
-
アイコンサイズ: アイコンのサイズをカスタマイズして、小さなレイアウトに比例させます。
-
パディング： 必要に応じて、デスクトップとモバイル デバイスの両方のコンテナーの間隔 (セクション、行、列など) を調整します。
-
アラインメント： デスクトップとモバイルデバイスの両方のコンテンツの配置を左、中央、または右に調整します。
レスポンシブレイアウトでのフレックスコンテナの使用
Section titled “レスポンシブレイアウトでのフレックスコンテナの使用”Flex Container は、レスポンシブ レイアウトを作成するための強力なツールです。従来の行とは異なり、フレックス コンテナを使用すると、子要素の配置、間隔、折り返しを動的に制御できるため、モバイル最適化に最適です。
Flex コンテナで最適化する方法
Section titled “Flex コンテナで最適化する方法”-
フレックス方向の変更: 読みやすくするために、デスクトップの水平行配置からモバイルの垂直列配置に切り替えます。
-
折り返しを有効にする: スペースが限られている場合に、子要素が次の行に折り返されることを許可します。
-
コンテンツの並べ替え: [行の反転 ] または [列の反転 ] プロパティを使用して、モバイル上の子要素の順序を並べ替えます。
Flex Containers は、さまざまな画面サイズにシームレスに適応できるため、重複コンテンツの必要性が減ります。
詳細情報: Flex: Add Flex Layout Using Flex Container.
カスタム CSS の使用
Section titled “カスタム CSS の使用”セクションを複製したり、Flex コンテナを使用したりしてもデザイン要件を満たさない場合は、カスタム CSS をコンテンツに適用して、正確なモバイル レイアウトを実現できます。CSS を使用すると、ページの外観を微調整し、画面サイズに基づいてレイアウトを直接調整できます。
モバイル最適化のためのCSSの例
Section titled “モバイル最適化のためのCSSの例”-
コンテンツを非表示または表示する: メディア クエリを使用して、モバイル上の特定の要素を非表示または表示します。エディターのモバイル設定に合わせるには、モバイルには
@media (max-width: 770px)、デスクトップには@media (min-width: 771px)を使用します。 -
フォントと間隔を調整する: フォント サイズ、パディング、余白を変更して、すっきりとしたレスポンシブなデザインを作成します。
-
カスタム レイアウト: カスタム ポジショニングまたはフレックスボックス ルールを適用して、高度なモバイル レイアウトを実現します。