iOS向けAudience Networkの広告レイアウトのガイド

広告が画面上に表示される際に、ナビゲーションバー、タブバー、ツールバー、その他の上位ビューで広告の一部が隠されたままになるのは、ユーザーエクスペリエンスとして最適とは言えません。左下の例は、iPhone Xの画面上部に表示され、上端が部分的に隠されている広告を示しています。右の例では、iPhone Xの画面上端と広告ビューの間のスペースが正しく配分され、より良いデザインになっています。

iOS 11以降は、safeAreaLayoutGuideという新しいレイアウトガイドを導入しました。これを利用して、画面にレンダリングしたい広告を含むアプリコンテンツを描画するための安全な領域を定義できます。この安全な領域は、上の例のように緑色の線で囲まれたボックスによって定義されます。この新しいレイアウトガイドを使用して、アプリにネイティブ広告を表示する技術的な実装手順を確認しましょう。同じ方法をバナー広告の表示にも応用できます。

アプリのネイティブ広告をデザインする際は、ネイティブ広告に関するガイドに従ってください。

前提条件

ネイティブ広告ネイティブバナー広告、またはバナー広告のサンプルを必ず完了しておいてください。


iOS 11以降: 安全領域のレイアウトガイド

旧バージョンのiOS: 上部および下部のレイアウトガイド


iOS 11以降: 安全領域のレイアウトガイド

  1. アプリにXcode 9以降のInterface Builderを使用し、iOS 11以降をターゲットにする場合は、安全領域のレイアウトガイドを有効にする必要があります。Interface Builderを開いて対象のビューコントローラーシーンをクリックしてください。右側にInterface Builderドキュメントのオプションが表示されます。[安全領域のレイアウトガイドを使用する]をオンにします。

  2. [ビューコントローラーシーン]から[広告UIビュー]を選択し、[サイズインスペクター]にブラウズします。安全なレイアウトの上下左右にスペースを追加し、次に示すように最適なスペース配分値を指定してください。

  3. アプリを作成して実行すると、画面上の丸みのついた角、センサー、ステータスバーの間に最適なスペースが配分された広告が、画面に表示されます。

旧バージョンのiOS: 上部および下部のレイアウトガイド

  1. iOS 11より前のiOSバージョンをサポートするには、安全領域の問題に対処するために上部と下部のレイアウトガイドをご利用ください。ビューコントローラーシーンには、以下に示すように、上部と下部のレイアウトガイドが含まれるようにしてください。

  2. [ビューコントローラーシーン]から[広告UIビュー]を選択し、[サイズインスペクター]にブラウズします。上部と下部のレイアウトの上下にスペースを追加し、次に示すように最適なスペース配分値を指定してください。

ネイティブ広告のポリシーへの準拠

開発者は、高品質の製品を開発するために、ネイティブ広告またはネイティブバナー広告のレイアウトを実装する際にMeta Audience Networkポリシーに従う必要があります。クリックによる完全なコントロールを常にユーザーに提供しなければなりません。特に、広告のクリック可能エレメントについては、広告のタイトル、URL、コールトゥアクション、および画像アセットのみクリックできることを保証する必要があります。さらに、タイトルテキスト内の空白や画像ビューはクリック不可にする必要があります。

クリック可能エレメントの悪い例

ネイティブ広告またはネイティブバナー広告のレイアウトを作成するときは、広告タイトル、広告本文、広告ソーシャルコンテキスト、広告スポンサーラベルにwhite spaceが挿入されること防ぐため、UILabelに固定の幅や高さを使わないようにします。以下は絶対に避けるべき悪い例です。

クリック可能エレメントの良い例

質の高いネイティブ広告を作成するには、ネイティブ広告またはネイティブバナー広告のダイナミック制約レイアウトを作成してください。例えば、ストーリーボードの自動レイアウトを利用している場合は、Trailing Space = xの代わりにTrailing Space >= xを、Width = yの代わりにWidth <= yを使うことができます。以下は、Meta Audience Networkポリシーを遵守した場合にどのようなレイアウトになるかを示す例です。

次のステップ

その他の情報

スタートガイド

Audience Networkの利用を開始するためのテクニカルガイド

APIリファレンス

iOS用Facebook SDKのリファレンス