インフィード広告は、記事一覧や関連記事の間に自然に表示されるタイプの広告です。
コンテンツに溶け込みやすく、クリック率アップにつながりやすいのが魅力です。
ただ、いざAdSenseでインフィード広告を作ろうとすると
「自動スタイルと手動スタイルの違いがよくわからない」
「AFFINGERではどこに貼ればいいの？」
と迷う方も多いと思います。
私も最初は同じように手こずりましたが、一度流れを理解してしまえばそこまで難しいものではありません。
この記事では、
- インフィード広告の仕組み
- 自動スタイルと手動スタイルの実際の違い
- AFFINGERでの設置手順
- 場合によってはレスポンシブ広告も使えるという柔軟な考え方
について、初心者向けにわかりやすく解説します。
この記事を書いた専門家
2017年よりWordPressを使ったサイト作成を開始。
今まで購入したWordPress有料テーマは「AFFINGER・SWELL・SANGO・STORK・JIN・THE THOR 」の計6つ。
テーマを弄り倒し、マニュアルにも載っていないような組み合わせを見つけることによろこびを感じている。
企業向けホームページ制作も請け負っています（※WordPress使用）
インフィード広告とは？
インフィード広告とは、記事カードや関連記事リストの中に自然に差し込まれる広告です。
「記事の流れの中」に配置されるため、従来のバナー広告よりも違和感が少なく、クリック率の向上が期待できます。
ニュースサイトやブログで、記事一覧の中にさりげなく混ざっている広告を見たことがある方も多いと思います。
あれがインフィード広告です。
AFFINGERのようにカード型レイアウトを多用するテーマでは特に相性が良く、導入する価値が高い広告形式です。
自動スタイルと手動スタイルの違い
AdSenseでインフィード広告を作成するときには「自動スタイル」と「手動スタイル」の2つの入り口があります。
自動スタイル
自動スタイルは、サイトURLを入力するとプレビュー画面が開きます。
ここで自分のサイトの 記事カードやサイドバーのリスト部分 をクリックすると、そのデザインに合わせた広告スタイルが自動生成されます。
- TOPページの記事一覧にカード型を使っているなら、その部分をクリック → カード型広告が作成される
- サイドバーのリストをクリックすれば、リスト型に合わせた広告が作成される
気に入ったレイアウトができたら「次へ」を押すと、手動スタイルと同じ編集画面に移動します。
つまり「自動スタイル＝土台を作る入り口」「手動スタイル＝ゼロから作る入り口」で、最終的には同じ画面に行きます。
自動スタイルでの作成手順（AdSense管理画面）
ここからは実際の管理画面での流れを紹介します。
- AdSenseにログイン
Google AdSenseの管理画面にログインします。
→ https://adsense.google.com/adsense/signup?hl=ja
- 広告ユニットを作成
左メニューから「広告」→「広告ユニットごと」を選び、「インフィード広告」をクリックします。
- URLを入力して自動生成
自分のサイトURLを入力し「ページをスキャン」すると、Googleがページ構造をスキャンし、適した広告レイアウトを自動で提案してくれます。
- プレビューを確認
カード型内部リンクやサイドバーの新着記事などをクリックすると、そのレイアウトとスタイルに合った広告スタイルが作成されます。
問題なければ「次へ」をクリック
- 広告コードを取得
「広告ユニット名」を入力し「保存してコードを取得」をクリック
自動スタイルは、難しい設定をしなくてもサイトに溶け込む広告を設置できるのが魅力です。
「まずはインフィード広告を試したい」という初心者にぴったりの方法です。
手動スタイルでの作成手順
次に「手動スタイル」でインフィード広告を作成する方法です。
こちらは色やサイズを細かく設定できるので、サイトデザインを統一したい場合に便利です。
- AdSense管理画面にアクセス
「広告」→「広告ユニットごと」→「インフィード広告」を選択します。
- 手動設定に切り替え
「自動」ではなく「手動」をチェックし、スタイルを選択します。
- デザインを調整
以下の項目が調整可能です。- 広告ユニット名（広告を管理するために必要）
- グローバル オプション
- イメージ
- 見出し
- 説明
- URL
- ボタン
- プレビューで確認
設定内容が右側に反映されるので違和感がないか確認
- 広告コードをコピー
デザインが決まったら「保存してコードを取得」をクリックしてコピーします。
AFFINGERでの設置方法
インフィード広告のコードを取得したら、AFFINGERでの設置に移ります。
ウィジェットにコードを貼り付け
- WordPress管理画面で「外観」→「ウィジェット」を開く
- 「00_AFFINGERカスタムHTML」を「広告・Google AdSense ・インフィード」というウィジェットエリアに追加する
- コピーしておいた広告コードを貼り付けて保存します。
※タイトルを入れる場合は「タイトルを出力しない」にチェックを入れる。
これで記事一覧にインフィード広告が差し込まれます。
表示間隔の設定
次に、AFFINGER管理で広告の表示間隔を設定します。
「AFFINGER管理」→「Google・広告 / AMP」→「インフィード広告の設定」で 1〜9 の数字を入力すればOKです。
例：3を選ぶと「記事カード3つごと」に広告が表示されます。
インフィード広告のメリットと注意点
AFFINGERでは、基本的に インフィード広告のコードは1つだけ ウィジェットに設定します。
そのため、TOPページとサイドバーなどデザインが大きく異なる場所に同じ広告コードを表示すると、どちらかがサイトデザインに合わないケースがあります。
- TOPページの記事一覧（カード型）にはインフィード広告が最適
- サイドバーや関連記事（リスト型）のようにスタイルが違いすぎる場合は、レスポンシブ広告の方が自然に馴染むこともある
理屈的には、インフィード広告用のウィジェットにレスポンシブ広告コードを入れることも可能ですが、必ずしも内部リンクのスタイルにピッタリ合う保証はありません。
なので基本はインフィード広告を使い、どうしても違和感が出る場所はレスポンシブ広告を検討する、という柔軟な考え方で良いと思います。
まとめ
インフィード広告は、記事一覧や関連記事にスッと溶け込む広告です。
だからこそ「クリックされやすい」っていうのが一番の強みなんですよね。
最初は難しく考えなくて大丈夫。
まずは 自動スタイル を使って、サクッと設置してみてください。
「お、ちゃんと出た！」となれば成功です。
慣れてきたら、必要に応じて 手動スタイル で細部を整えるのもアリです。
ただし細かいデザイン調整は無理にやらなくても大丈夫。基本はAdSenseが提案してくれるデザインをそのまま活かせばOKです。
また、TOPページとサイドバーのようにデザインが全く違う場所で広告を出したい場合は、インフィード広告だけにこだわらず、レスポンシブ広告を組み合わせるのも一つの手です。
強くおすすめするわけではありませんが、そういう柔軟さを持っておくと安心です。
ちなみにGoogleのヘルプでも「広告とサイトデザインの調和はパフォーマンス改善につながる」と触れられています。
なので、広告コードを貼るだけでなく “広告が浮かない工夫” を少しずつ意識してみるといいと思いますよ。
そのあたりは別の記事でも詳しくまとめる予定なので、合わせてチェックしてみてください。
