FANCOMI Ad-Tech Blog

株式会社ファンコミュニケーションズ nend・新規事業のエンジニア・技術ブログ

ネイティブ広告導入したらどうなるか見えるくん(非公式)を公開しました

こんにちは、y_yamadaです。 今回は手短に。

はじめに

12月1日についにnendからもネイティブ広告がリリースされました。
使い方や導入の仕方はこちらに記事を上げさせていただいています。
nendのネイティブアド導入までの流れ~STEP①新規広告枠を作成~
nendのネイティブアド掲載方法事例~Webサイト編~

ネイティブ広告は、バナー広告やアイコン広告のようにほぼ定型な形や使い方をする広告とは違って、サイトやアプリの雰囲気に溶け込むように自由な形式で利用できる広告です。
いままでも、ページ切り替わりで使えるインタースティシャル広告や、小ささがウリのアイコン広告も、メディアさんの発想次第で意外な使い方ができました。

ですが、ネイティブ広告はアドネットワークから抽選された広告素材(画像、文字)をメディアさんが自由に配置、装飾できるのでRSSフィード風、記事一覧風、自社商品一覧のアクセントに使うなど無限の利用形態が考えられます。

ただ、その反面、HTMLのカスタマイズが必要であったり、画像の大小、並びのバランスなど色々考える必要があるためいざ自分のサイトやアプリにどう組み込むのか想像が難しい面もあります。

そこで今回、アプリ向けにネイティブ広告の配置を気軽に確認できるツール(非公式)を提供することにしました。

年の暮れに押し迫って提供するため、以下の注意点がります。
・iPhoneアプリのみ。
・メディアさんが年末年始の開発に使えるようにApp Storeの申請を待たずに非公式にgithubでコードで提供します。
・完成度は、、、実際に使っていただければ便利さが分かります!

ソースコードは以下にあります。
上にも書きましたが非公式です。ファンコミュニケーションズおよびnend公式ではなく個人アカウントなのでフォロー、サポートはできません。 ネイティブ広告導入したらどうなるか見えるくん(非公式)

CocoaPods対応のライブラリーを使っているので、
git clone
で取得した後に
pod install
でライブラリーを追加してください。

CocoaPodsはiOSアプリ開発で使えるライブラリー管理ツールです。
詳しくはこちらの記事をどうぞ。 iOSライブラリ管理の神ツール「CocoaPods」のインストールと使い方

使っているライブラリーはKatsuma TanakaさんのQBPopupMenuです。ありがとうございます。

使い方

アプリを立ち上げると説明書兼、チュートリアルがあるので雰囲気ご理解いただけると思いますが、実例を交えて説明させていただきます。

目標
ファンコミュニケーションズから出しているアプリ、ゲーマグにネイティブ広告を導入するとどのような雰囲気になるかを確認することをここでは目標にします。

導入したいアプリのスクリーンショットを撮る

ゲーマグのスプラッシュが以下です。オシャレですね。
10_GAMAG_SPLASH

今回、広告導入を試してみるのがこのトップ画面です。スクリーンショットを撮りましょう。iPhoneなら「電源ボタン」を押しながら「ホームボタン」を押すとスクリーンショットを撮れます。
10_GAMAG_SPLASH

次にネイティブ広告導入したらどうなるか見えるくん(非公式)を起動します。
すぐに使えるツールを目指したのでトップページが説明&チュートリアルになっています。
1回使えばすぐになれると思います。
13_nativead_top

画面の何もないところを長押しするとポップアップメニューが現れます。右向き三角をタップすると「リセット」があるのでそれをタップしてください。
14_nativead_reset

リセットするとリセットなので真っ白になります。
ここにさきほど撮ったスクリー
ンショットの画像を当て込みます。「背景(SS)設定」をタップしてスクリーンショットの画像を選択&設定してください。 15_nativead_white

スクリーンショットの画像を当て込んだのでゲーマグと同じ見た目になりました。
雰囲気確認にちょうどよさそうですね。
また画面を長押ししてポップアップメニューを表示させます。
そして、今回目標の広告を挿入します。最初は「バナー風」を選択してみましょう。 16_nativead_menu

そうするとバナー広告のような見た目にカスタマイズしたネイティブ広告が挿入されました。
これは参考例なのでメディアさんが実際にアプリにネイティブ広告を組み込むときには自分のアプリにあったようにカスタマイズすることができます。
ドラッグで移動、ダブルタップで拡大、ピンチで縮小できます。ネイティブ広告を好きなところに置いて雰囲気を確認してみてください。 17_nativead_yoko

同様にポップアップメニューから「ロゴ記事風」を選択するとこういう縦長のネイティブ広告が挿入されます。
これも動かしたり、拡大したり、縮小したりしてよい場所を確認してみてください。
18_nativead_tate

最終的にこういう配置にしてみました。
「PR」の文字があるので広告だということがちゃんとわかりつつ、アプリの雰囲気に合ったいい感じになったのが分かると思います。
19_nativead_fit

まとめ

というような、アプリにネイティブ広告を入れるとどういう雰囲気になるかを確かめることができるネイティブ広告導入したらどうなるか見えるくん(非公式)を公開しました。
使っている画像や文面はnendのものですが、広告を配置するという機能自体は汎用的なのでいろんな場面で使えると思います。i-mobileさん、InMobiさんでも使っていいですよ。

という訳で今年のADN-LABブログもこれで終わりです。
ではでは、来年もHappy hacking!