0. はじめに
正直、広告収入を得ているこのLAYER8 BLOGでブラウザの拡張機能による広告ブロックについて書くのはどうかと思ったのだが、調べてみると別のライターがすでに【Opera広告ブロックでブラウジングを早くする方法】、【広告を外してウェブメールを広々見やすくする「Webmail Ad Blocker」 】といった記事を書いている。また、他のサイトに目を移しても、私が毎日見ているASCII.jpでは【Webを快適美麗にするFirefoxアドオン15】という記事でAdblock Plusを紹介している。ASCII.jpも少なからず広告収入を得ているサイトだと思うのだが。まぁこういったアドオンを導入までして広告をブロックしようと思う人間は、そもそも広告をクリックする閲覧者ではないと分かっているのかも知れない。過去にはAdblockという画期的な広告ブロックアドオンが当時唯一対応していたFirefoxからのアクセスを逆にブロックするサイトが現れたりしてニュースにもなったが、今ではAdBlockはFirefoxのみならずSafariやChrome、Operaにも対応している。
さて、そんな状況である現在、WEBデザイナーは「広告がブロックされたときの表示」を意識してサイトデザインを行うことが必要なのではないかと思われる。広告がブロックされるということは、元々のデザインでは表示されていたものが表示されなくなるのである。広告とサイト全体のデザインマッチにも気を配るデザイナであれば、見過ごせない事態であることは間違いない。広告というWEBサイトを構築する要素の一つが無くなることで、デザインが大きく崩れてしまう可能性もある。しかし慌てる必要は無い、デザインを広告に頼っているどうしようもないサイトについては諦めるように言うことしかできないが、広告をデザインの一部として組み込んでいる程度であれば広告の配置を工夫することで広告ブロックによるサイトデザインへの悪影響を抑えることはできるはずだ。以降、この点について私が気づいたことを3点、記していきたい。
1. 広告でないものがブロックされないようにする
これ、まず大事。広告がブロックされるのはまぁ仕方ない。しかし、広告でないものまでブロックされるとデザインに予想以上の影響が及ぶ結果になる。そのために何ができるか、それはHTMLのタグにつけるIdとClass名、また画像やJSのファイルやディレクトリ名、さらにはサイトを公開しているドメインの名前に広告っぽい名前をつけないこと、である。AdBlock用のフィルタとして出回っているものの中には、例えば/image/adというパスに存在するファイルを読み込まないようにしているものが存在する。サイト製作者からすると自分のサイトで使ったadという略称はAnno Dominiのことかも知れないし、Assistant Directorのことかも知れないのだが、そんなことを感知できるほどフィルタは頭がよくない。URLから判断して広告に関係ある確率が高いと考えられるものは、読み込みすらせずにブロックされるのだ。これを知らないと、広告ブロックアドオンによってサイトのデザインを大きく崩されてしまうことになる。
その一例を見てみよう。下の画像は、LAYER8 BLOGの記事ページ全体をキャプチャ（2012/02/20時点）し加工を加えたものだ。画像の中で赤いマスクがかけてある部分は、Adblock Plus 2.0.3をデフォルト設定のまま使った場合にブロックされた要素を示し、青いマスクがかかっている部分はその要素が持っていたマージン部分を表している。
ここで、広告要素とそれ以外の要素の間に必要なマージンを、広告要素側が持っているという点ではこのデザインは優秀であると言える（詳しくは後述）のだが、実は重大な問題が生じている。ページ上部の広告については問題ない、注目すべきはページ下部の赤くマスクされている部分だ。下部でAdblock Plusによりブロックされた要素のうち、右側は確かにGoogleのAdsenseで出している広告なので、ブロックされることに不思議は無いのだが、その左側の要素、これは広告ではない。画像が小さいのとマスクをかけているせいで見にくいが、ここは当該ページに「関連する投稿」を表示している要素なのである。ではなぜブロックされ、表示されなくなっているのか、その答えはこの要素に付けられたクラス名にある。下部でブロックされた２つの要素を囲っているdiv要素には、どちらにも”post_ad”というclass名がついている。おまけに、その2つのdivを更に囲っているdivには”post_ads”というclassが付けられているのだ。これがブロックされた理由である証拠に、別の全く広告と関係ない（当然、Adblock plusでブロックされない）div要素にFirebugを使って”post_ads”というクラス名を付与してやると、ブロックされて表示されなくなったという結果がある。また、使われているフィルタを調べてみると、実際に”post_ad”も”post_ads”もブロック対象に指定されていた。この部分をコーディングした人（私ではない）は、きっと同じようなデザインの要素に別々のクラス名を付けるのが面倒だったのだろう。これは驚くようなことではない、HTMLコーディングをしていれば頻繁に生じる現象である。しかし、そこで簡略化して本来のコンテンツとは関係のないクラス名を付与したことで、広告ブロックの影響を受け、実際には閲覧者にとっても重要な情報となりうる要素が非表示になってしまうという現状があるのだ。
この問題を回避するためには、広告ではない要素のファイル名、パス名、ドメイン名などに広告を匂わせる文字列を含めない、ということが大事である。必要なら、Adblockなどの広告ブロックアドオンで使用される代表的なフィルタを調べ、検閲対象となっている語についてもある程度知る必要があるだろう。上に挙げた事例のように、広告を含んではいるが、広告でないものも含んでいるブロック要素（ややこしいが、ここでの”ブロック要素”はインライン要素と対応する語であって、広告ブロックされる要素ではない）につけるid、class名には特に注意が必要である。
2. 広告周辺の空白に気をつける
ぐだぐだと文章を書いても分かりにくいので、まず最初に事例を紹介しよう。まず1つ目、これは私がたまに見ている「パソコン | マイナビニュース」のページをキャプチャした（2012/02/20時点）ものの一部である。
上のキャプチャ画像自体は、広告ブロックが行われていない状態のものであるが、その上からAdblock Plus 2.0.3を有効化した際にブロックされた要素には赤の、その要素を囲っているdiv要素が持っていた”padding”領域には緑のマスクをかけている。ではこの部分がブロックされて表示されなくなった結果、どうなったかというと、それが下の画像である。
横に並べて表示していないので分かりにくいかも知れないが、よく見てみると1枚目の画像（ブロックされていない）では、広告の上端と、その左に位置するメニュ（「コラム」などとあるやつ）の上端が揃っている。それが、2枚目の画像（ブロックされている）では元々広告の下にあった「人気記事」というコンテンツ、これが広告の代わりに上に来たわけであるが、それの上端は左にあるメニューの上端と揃っていない。なぜこのような現象が生じているかというと、元々広告を囲っていたdivは最初の画像に示したように、下方向のpaddingを10px持っていたのであるが、そのdiv要素自体はブロックされず、中身だけがブロックされて表示されなくなった結果、padding領域が残ってしまい表示されている、というのが理由である。ちなみに、このpadding領域を持って広告を内包していたdiv要素に付けられていたclass名は、”r_ad-300tile1″というものである。一応”ad”という文字列は入っているが、それが名前の途中であったためか、使用していた広告フィルタには引っかからなかったようだ。今回の事例ではデザインが大きく崩れたとは言わないが、ある程度詳しい人が見れば、不自然な印象を受ける結果となっている。
では続いて、2つ目の事例に移ろう。今度はこのテーマに関係する事例を探して見つけた「Google AdSense グーグルアドセンス実践奥義(稼ぐ必殺仕事人!!)」というサイトが対象である。ここはよくある「ネット広告で稼ぐ！」みたいなテーマのサイトで、「Adsense」というキーワードで検索すると結構上位に表示されるサイトである。まずは広告が表示されている部分を画像（2012/02/21時点でキャプチャ）で確認してみよう。
今までと同様、赤でマスクした部分が広告の部分である。上の画像からわかるように、このページではAdsenseによる広告を上部に3つ配置している。Google Adsenseは1ページに配置できる広告の数が3つまでと定められているから、その上限まで表示していることになる。ところで、上の画像ではこれまでの事例と異なり、marginやpaddingの領域というものが色で塗られていない。これはなぜかというと、理由は簡単、marginやpaddingが指定されていないからである。ではどうやって広告周辺の空白（に見える部分）を作り出しているのだろうか。なんと、ここで使われている手法は、左右のサイドバーはbrタグによる改行、一番上のテキスト広告についてはtdの高さ指定(HTML)、である。これを読んで、ある程度WEBデザインに詳しい人なら恐怖で鳥肌が立ったかも知れない。そもそも、このサイトはいわゆるTABLEレイアウトという方法で全体のレイアウトがなされている点からして時代遅れなのであるが、CSSでmarginやpaddingを指定する代わりにbrタグで空白を作り出している、という点でも問題のあるデザインである。では、こうしたコーディングがなされたこのページでは、広告ブロックを受けてどういった表示になったのであろうか。下の画像がそれである。
やはりと言うか、惨めな結果になっている。元々広告が表示されていた部分には不自然な空白が残ってしまっているのが見て取れるだろう。広告がブロックされたところで、brタグは残るし、広告を内包していたtdタグの高さは変わらないのだ
以上、2つの事例を見たが、こういった状態に陥らないようにするための対処方法を簡潔に述べると、次のようになる。つまり、「広告要素と、広告要素がなくなることで表示位置が代わる要素との間に存在するマージン（空白部分）は、ブロックを受けた時に広告と一緒に消えるようにすべし」。広告を内包する要素が消えるか消えないかは、その要素に付けられたid、class名と、広告をブロックする側のフィルタに依存するので難しいところなのだが、ある程度フィルタの中身に精通して、どの要素がブロックされる可能性が高いか、あるいはブロックされにくそうかを把握してコーディングする必要があるだろう。これが実践されている例としては、このblogもあげることができる。前回の記事で示した画像を一部切り取ってもう一度出すと、下のようになるのだが、
記事本分の上に表示されている広告について言えば、広告と記事を隔てるマージンは広告を囲っているdivが持っている。そしてこのdivのclass名は”head_ad”である。これは一般的な広告フィルタで引っかかりやすい文字列である。少なくともAdblock plus 2.0.3のデフォルト設定ではこのdivごとブロックされた。これにより、広告ブロックを受けても、その下にあるコンテンツが広告のなくなった分上に来るだけで、不自然な空白などなくデザイン崩れが生じない状態となっている。
ただし、広告がサイト内で占めていた領域を、あくまで保つという選択肢もないわけではない。例えば、「地域情報ポータルサイト e-まちタウン」では広告ブロックをかけると下のような表示になる。
上の画像で灰色になっている右の箇所は、キャプチャ画像（2012/02/21時点）を加工して塗りつぶしたのではない。広告ブロックしたらこういう風に表示されるのである。この箇所は、広告要素を囲っているdiv要素にwidthとheightが指定されており、中身の要素が空になったとしても元と同じ領域を占有し続けるのである。しかもbackgroundに色が指定されているから、謎の空白にもならない。WEBデザインにおいて、各コンテンツ、リンクの位置というのは閲覧者の行動を左右する上で重要なため、広告の下に存在するコンテンツの位置を元の状態に保つことを優先するならば、この様なデザインにすることも選択としてありなのではないだろうか。
3. 広告に見出しや説明文をつけない
もう一度、「Google AdSense グーグルアドセンス実践奥義(稼ぐ必殺仕事人!!)」というサイトで広告がブロックされた結果を見てみよう。
先程の項目では、広告ブロック後に残った空白のみについて述べたが、ここでは「スポンサーリンク」という広告の上に表示されていた見出しも残ってしまっている。これがあると、「あぁ、ここに広告があったんだな」ということは分かるが、そんな情報は必要ないし、全体のデザインを損なっているだけである。そもそも、Adsenseであれば、サイト内に表示されているリンクが広告であることを付近に明示しなくても分かるよう、デザインを調整することが可能である。だからわざわざ「スポンサーリンク」などと書かなくていいと思う。このように、広告に「広告」と書いて示しているサイトというのは個人サイトを中心に結構多いのであるが、これは広告ブロックを受けた際にデザインを崩す要因として非常に面倒である。可能なら取っ払う、それが嫌なら広告がブロックされた時に周囲の表示も一緒に消えるようにそれらを囲っている要素のid、class名を工夫することが必要だ。あるいは、2.の最後で述べたように、元々の位置を完全に保って残すか、である。
4. ブロックされてもギャップを作らない広告配置
2. の最後で述べた、完全に位置を保ったブロック対策と多少矛盾する内容となるが、サイト全体のデザイン的調和に関わる点として、これを論ずることは必要であろう。今回、この項目のタイトルで使用した「ギャップ」という単語は主に「隙間」という意味で用いているが、これも実例を見たほうが早い。下は私が毎日のように見ている「ASCII.jp」のトップページである。連続して、広告をブロックを受けていないもの、受けたもの、である。
このサイトは右サイドバーの広告表示については完璧で、広告がブロックされても右サイドバーのデザインは崩れていない。またヘッダ部分の広告についても、ただ単に広告が表示されなくなっているだけであり、「崩れている」という表現は当てはまらない。しかし、しかしなのである。広告がブロックされた下の画像では、空白の部分というのがやはり気になってしまうのだ。このASCII.jpのような情報サイトでは、大量の情報を隙間なく詰め込む、というデザインが用いられる。ところが、他の部分で各記事の見出しやメニューをぎっしり詰めて表示しているのに、広告があった部分（今回の場合ではヘッダ右）に空白がぽっかりと空いてしまうと、これは不自然である。特に今回の場合では、一番上のヘッダという位置、そしてWEB広告としては大きめのサイズ、この2つの要因により、目立ったギャップを形成するに至っている。
このようなギャップを作らないようにするためには、広告要素（またはそれを内包する専用の要素）がfloatしていないことが重要である。floatしていないということは、その要素がなくなった場合、下の要素がそのまま上に上がってくる、ということを意味する。普通、WEBサイトというのは上から下へスクロールして閲覧するものであるから、広告以外の要素が上に移動することで広告の占めていた領域を埋めるように配置が動けば、コンテンツの密度分布にそれほど大きな影響を与えずに、全体を表示させることが可能なのである。
5. 最後に
以上、4つの項目について、私が気づいた点を記してきたが、どうもまとまりが悪く、文章も長くなってしまった。これまであまり広告ブロックを見越したコーディングについて書かれたものを私が読んだことがないため、単純なことにも多くの説明が必要と考えたせいだと思う。はっきり言って、「広告ブロックに対処しなければならない」という前提は、WEBデザイナーの負担を増大させるもので、費用対効果の面などからどの程度必要とされるのかも不明である。しかし私のように神経質で凝り性な人間にとっては見過ごせないテーマでもあるとも思うので、今後もWEBサイトにおける広告、またそれを表示するためのデザインの動向には注意を払っていきたい。
