ネイティブ広告向けモバイルランディングページ：コンバージョンに直結するデザインルール

ネイティブ広告のトラフィックは圧倒的にモバイルです。これは、人々がスマートフォンでスクロールするコンテンツフィードから発生するためです。したがって、デスクトップファーストで構築され、その後縮小適応されたプレランディングページは、最初からモバイルファーストで設計されたものよりもパフォーマンスが劣ります。最も重要なデザインルールは、ページの軽量化、親指の届く範囲のCTA配置、シングルカラムレイアウト、そしてネットワークのコンプライアンスレビューがインタースティシャルや強制インタラクションとみなすものを避けることです。

デスクトップファーストで後から適応するアプローチが頻繁に失敗する理由#

デスクトップモニターでプレランディングページを最初に設計するチームは、電話に縮小しても生き残れない前提を組み込む傾向があります。マルチカラムレイアウトは最後の瞬間に読み取れないシングルカラムに圧縮され、ワイドアスペクト比に合わせてトリミングされたヒーロー画像は、狭いアスペクト比で再度トリミングされると焦点を失い、大型画面でバランスよく見えることから決められたCTA配置は、親指が実際に届く範囲ではありません。これらのいずれも、デスクトップレビューで「バグ」として現れることはなく、実際の訪問者がページを表示する方法で見たときにのみ現れます。そのため、最初のドラフトからモバイルファーストで構築し、必要に応じてデスクトップに適応させる方が、逆の順序よりも驚きが少なくなります。

マウスではなく親指のためにデザインする#

精密なタップを必要とする要素はすべて、電話でのコンバージョンを損なうものです。CTAボタンは、確実にヒットできる大きさで、親指が自然に休む位置（画面の中央下部から下部3分の1が、上部に手を伸ばす必要があるボタンよりも効果的）に配置し、他のタップ可能な要素から離して、誤タップが意図しない場所に送らないようにする必要があります。長めのアドバトリアルをスクロールする読者に表示され続けるスティッキーCTAバーは、読者が納得した後にスクロールして戻る必要をなくします。これは、ページが長くなり、フォーマットが短いブリッジページではなく完全なナラティブに傾くほど重要です。

ページの軽量化はコンバージョンレバーであり、単なる技術的懸念ではない#

モバイル接続での読み込み時間が1秒増えるごとに、コンテンツフィードから衝動的にクリックし、遅いページに忍耐を持たない訪問者を失う機会となります。ヒーロー画像を積極的に圧縮し、自動再生動画を避け（これも複数のネットワークでコンプライアンスの精査を引き起こし、読者が同意していないモバイルデータを消費する）、スクロールして初めて表示されるコンテンツを遅延読み込みし、DOMをシンプルに保ちます。これは、ドメインとホスティングの選択にも影響します。遅くて過剰契約の共有サーバーでホストされているページ、または不要なリダイレクトホップを経由するページは、1ピクセルもレンダリングされる前に優れたデザインを台無しにします。優れたホスティングは優れたモバイルデザインの前提条件であり、後で修正できる別の問題ではありません。

レイアウト：シングルカラム、垂直フロー、横方向の驚きはなし#

デスクトップで機能するマルチカラムレイアウトは、モバイルファーストで設計されていない限り、モバイルではうまく折りたたまれないことが一般的です。シングル垂直カラムに固執します：ヒーロー画像または見出しブロック、短い段落のサポートコピー、CTAの前の明確な視覚的な区切り、その後はオファーへの移行または次のコンテンツブロックです。横スクロールは完全に避けます。電話では混乱を招き、意図的に発生することはほとんどありません。

避けるべきこと：ネットワークがフラグするため#

• 本物のユーザーアクションの前にコンテンツをブロックする強制的なインタースティシャルまたはポップアップ。 ほとんどのネイティブネットワークの編集ポリシーでは、これらはユーザーエクスペリエンスの低下とみなされ、クリエイティブ拒否の一般的な原因となります。インタースティシャルパターンに依存する前に、特定のネットワークの最新のドキュメントを確認してください。
• 自動再生の音声または動画。 同じ理由：読者を驚かせ、データを消費し、レビューの注目を集めます。
• 偽のシステムUI要素（偽の「バッテリー残量低下」警告、偽の通知バナー、何も閉じない偽の閉じるボタン）。これらは、技術的なクローキングが行われていない場合でも、コンプライアンスチームがどのように読むかという点で、クローキングの領域に近いものです。なぜなら、読者が見ているものについて欺くからです。
• 開示が埋もれている、またはタップの背後に隠れている。 スポンサーシップおよび広告の開示は、読者の追加の操作なしに表示可能である必要があります。現在のガイダンスの下で「表示可能」が実際に何を意味するかについては、FTCのアドバトリアルおよびネイティブ広告の開示ルールを参照してください。

小さな画面でのタイポグラフィと読みやすさのリズム#

デスクトップモニターで快適な本文テキストは、モバイル用に意図的に設定しない限り、電話では小さすぎることがよくあります。ピンチズームせずに読める十分な大きさのベースフォントサイズ、十分な行間、段落は短く、最大3〜4行で区切ります。長い途切れのない段落は、モバイル読者をページの途中で失う最も速い方法の1つです。視覚的な休止点がなく、進行状況を知らせるものがないためです。長いアドバトリアルコピーは、小見出し、引用文、または数段落ごとに関連画像で区切って、ペーシングを助け、読者にスクロールを続ける理由を与え、最初のテキストの壁で跳ね返らないようにします。

CTA以外のタップターゲット#

プライマリCTAはデザインの注目を集めますが、セカンダリのタップ可能な要素（「詳細を見る」リンク、閉じられる要素の閉じるボタン、ページにナビゲーションがある場合）も同じ親指に優しいサイズと間隔が必要です。技術的には存在するが、確実にタップするには小さすぎる閉じるボタンは、実際には閉じるボタンがまったくないのと同じであり、何かを閉じようとする読者にとっては苛立たしく、操作的であると読み取られます。AppleとGoogleのモバイルデザインガイドラインは、まさにこの理由から最小タップターゲットサイズを指定しており、それらに従うことは、ネイティブプラットフォームアプリ以外でも妥当なベースラインです。

フォーム：フィールドを減らし、ネイティブの入力タイプを使用#

プレランディングページまたはその背後にあるオファーステップで情報を収集する場合、追加のフィールドはそれぞれモバイルでの離脱ポイントになります。モバイルでは、デスクトップよりも入力が遅くエラーが発生しやすいためです。各フィールドに正しい入力タイプ（電話番号には数字キーパッド、メールフィールドにはメールキーボード）を使用して、電話のキーボードが訪問者を助け、一般的なキーボードで文字を探すことを強制しないようにします。プレランディングページ自体で尋ねるのではなく、後続のファネルステップにフィールドを延期できる場合は、そうしてください。

モバイルページに特に影響する地域と言語の詳細#

通貨記号、日付形式、電話番号の形式は地域によって異なり、間違えると小さな画面では大きな画面よりも信頼性が低く見えます。訪問者は、提供内容を読もうとしながら、なじみのない形式を解析する忍耐力が少ないためです。同じプレランディングページテンプレートを複数のジオティアで実行している場合は、すべての地域で1つの地域の慣習をデフォルトにするのではなく、これらの詳細を適切にローカライズしてください。

ネットワークが注入するUIをページの上に処理する#

いくつかのネイティブネットワークは、コンテンツの周りまたは上に独自の要素をレンダリングします。スポンサーラベル、閉じるまたは戻るコントロール、場合によってはネットワーク自体が制御するネイティブスタイルのコメントまたはエンゲージメントウィジェットです。クリーンなプレビュー環境でのみテストするのではなく、そのオーバーレイが存在することを前提にページをデザインします。実際のデバイスでネットワーク独自のUI要素がレンダリングされる場所にCTAや見出しが配置されていると、実質的に読者には見えなくなります。ページの上部近くの正確な垂直位置に依存するレイアウト決定を確定する前に、ページがネットワークの実際のインフィードレンダリング内でどのように見えるかを、スタンドアロンURLとしてだけでなく確認してください。

モバイル重視のネットワークで既に機能しているものを確認する#

一部のネットワークは実際には他のネットワークよりもモバイルに偏っており、それに応じて勝利するプレランディングパターンも異なります。OpenAdLibraryのネイティブ広告スパイツールで現在実行中のクリエイティブとそのトレースされたランディングページをレビューすると、特定のネットワークのオーディエンスの行動を考慮しない一般的なモバイルUXアドバイスを適用するのではなく、現在そのネットワークで実際に生き残っているフォーマットとレイアウトの選択がわかります。MSNネイティブ広告：広告主向けガイドとTaboola広告の仕組みは、どちらもこれらのレイアウト決定に影響を与えるネットワーク固有の配置とオーディエンスの行動をカバーしています。

アクセシビリティは予想以上にコンバージョンと重なる#

テキストと背景の間の十分な色のコントラスト、ズームを必要としない読みやすいフォントサイズ、色だけではなく区別できるCTAボタンは、視覚障害のある訪問者を助けるだけでなく、明るい日光の下で屋外で電話画面を読むすべての訪問者や、古くて暗いディスプレイを使用する訪問者も助けます。基本的なアクセシビリティの実践を、別のコンプライアンスチェックボックスではなく、コンバージョンへの入力として扱います。対象となる人口は、公式に目標とされている人口よりもはるかに大きいためです。

実際に重要なテスト#

モバイルプレランディングページのデザインをリリースする前に、制限された接続を介して実際の電話で読み込みます。デスクトップブラウザのモバイルエミュレータだけでなく。エミュレータはビューポートを正しく再現しますが、実際の読み込み時間、タップターゲットの正確性、または実際のスクロールモーメンタムでのスティッキー要素の動作を再現することはほとんどありません。実際のデバイスでの5分間で、デスクトップベースの反復では完全に見逃される問題が明らかになります。