アフィリエイトサイトのスマホ対策について(レスポンシブデザイン?別テンプレートを用意すべき?)

WEBサイトまたはブログを運営している人であれば、レスポンシブデザインという言葉を聞いたことはあるはずです。

今ではかなりポピュラーになってきたこのレスポンシブデザイン。ご存知の通り、一つのテンプレートでパソコン画面からスマホ画面までを対応しようとするもので、サイト運営者としては一つのテンプレートで賄えるということで「管理が楽」という意味では非常に便利なものです。

しかしレスポンシブデザインについて、こういった「管理が楽」という視点でしか語られることはありません。というわけで当ブログではやはり「アフィリエイト」という使い方による視点で考えてみたいと思います。

そもそもレスポンシブデザインとは

レスポンシブデザインとはどういうものなのか?わかりやすい説明文を引用します。

Webデザインの手法の一つで、様々な種類の機器や画面サイズに単一のファイルで対応すること。
(中略)
表示された機器の種類やサイズに応じて表示内容が最適な状態に変化するよう設定された単一のファイルを制作し、すべての機器に同じように送信する。複数のファイルを用意する場合に比べ、デザインや機能の自由度は下がるが、すべての機器に同じ内容を表示でき、更新作業の簡略化や更新漏れの防止が期待できる。検索エンジンやアクセス解析に内容が重複した複数の異なるURLが出現することも避けられる。
引用元:IT用語辞典 e-Words

ページを見る側のブラウザ(エクスプローラー、Chrome、Safari、等)のウインドウサイズ(横幅)によって見え方が異なるような仕掛けを施したデザインですね。

当ブログを例に上げます。
PCから見るとこんな感じ。
ds
右サイドバーの2カラム。よくあるパターンですね。
これがスマホだとこのように見えます。
ds2
サイドバーが無くなって1カラムになり、スマホに最適化されています。同じテンプレートなのですがサイドバーはメインカラムの下部に移動しています。

他にはどんなやり方が?レスポンシブデザイン以外のスマホ対応方法

パソコン向けに作ったWEBサイトのスマホ向けの対策としては、スマホ用のテンプレート(WordPressでいうところの「テーマ」です)を別で準備するという方法があります。こうして準備したそれぞれのテンプレートを、閲覧者側の環境(スマホか?パソコンか?)を判断し自動で出し分けるというのがポピュラーです。

ブログサービス別で見ると、例えばFC2ブログやlivedoorブログであればパソコン用とスマホ用のテンプレートをそれぞれ別で設定することができます。FC2ブログはさらにHTMLソースを自由にいじることができます。
またWordPressであれば、スマホ用のテンプレートを設定するためのプラグインが無料であります。

訪問者視点で考えるレスポンシブデザイン

まずは訪問者の視点で考えてみます。
そのページを訪れた人からすると、レスポンシブとかスマホ専用テンプレートとか関係ありません。少なくともスマホから見ている分には、普通の人はその違いにはなかなか気づかないはずです。

パソコン向けの画面をスマホで見せられて、画面を拡大縮小しなければならないような「対策せず」のサイトと比べれば、読みやすいようにスマホ対策をしてくれているだけで御の字でしょう。

ではパソコンから見るとどうなのか?
この場合、普通に表示する分には問題ないのですが、レスポンシブデザインはWEBブラウザの横幅で表示方法を変えてくれるので、ブラウザの横幅が狭い場合は見え方が変わってきます(作り方にもよりますが、だいたいサイドバーがメイン部分の下部に行くことが多い)。

レスポンシブデザインのページを開いてブラウザの横幅を広げたり閉じたりすると見え方が変わりますよね?アレです。

アフィリエイター視点で考えるレスポンシブデザイン

実はこの部分が、訪問者にとっては気にならなくてもアフィリエイト用途の場合に気をつけなければならない部分なのです。サイドバーにアフィリエイト広告を入れることはよくありますが、これがレスポンシブデザインの都合でページ下部にいってしまった場合、間違いなくクリック率は格段に下がります。

ここを意識して広告を張らないと、スマホからのアクセス数に影響が出るでしょう。レスポンシブデザインだから確認もパソコンからだけでいいと思わず、スマホからもきちんと自身のブログを確認するのが重要です。

そしてもう一つ。
貼り付けるアフィリエイト広告が、パソコン専用でスマホ非対応の場合。例えばせっかくクリックしてくれたのにリンク先の商材はスマホから閲覧・ダウンロード出来ないとなると意味がありません。閲覧者に対しても失礼ですし機会損失と言えるでしょう(そこにスマホ用広告を貼っていれば…という意味で)。

レスポンシブデザインの場合は基本的に、パソコンもスマホも同じ広告タグを使います。ですのでどちらからでもクリックでしる広告を貼りましょう。

※スマホとパソコンでそれぞれの広告を条件分岐で出し分ける方法も、あるにはあります。こちらの記事参照。
スマホからのアクセスを無駄にしない!WordPressブログで広告の表示内容をPCとモバイルで条件分岐する簡単な方法

アフィリエイトブログにおいてはスマホ対応をどうすべきか?管理人の場合…

いろいろ書きましたが、一番言いたいことは「レスポンシブデザインはサイド管理者にとって便利なもの」であるという点です。訪問者にとってはどちらでもないのです。

レスポンシブにすることでスマホ用のテンプレートを用意したり管理する必要が無いというのは楽チンです。なので前述した「スマホとパソコンで広告を出し分けるタグ」を使うというのは手間がかかるという意味で矛盾してるんですよね。

というわけで私は、アフィリエイト用ブログではほとんどWordPressなのですが、レスポンシブデザインのテンプレートは使っていません。WordPressの無料プラグイン「Any Mobile Theme Switcher」でデバイス別の使用テーマ設定を行っています。

このプラグインでスマホからのアクセスに対してはスマホ用のテンプレートを設定するのですが、タブレット端末からのアクセスはスマホではなくPC向けテンプレートを設定しています。

※プラグインによっては「iOSやAndroidの場合はスマホテーマ」と決まっているものもあり、その場合iPadでもスマホテンプレートを表示されてしまうんです。これすごく見にくいです。

その点今回紹介している「Any Mobile Theme Switcher」であれば、iPadやAndroidタブレットの場合を個別に設定できるので、そこが重宝する理由です。

パソコン用とスマホ用でそれぞれのテンプレートを用意し、それぞれに最適な広告を最適な位置に貼る。管理面においては面倒かもしれませんが、実際にきちんとこうして管理することでユーザビリティも上がりますし機会損失も防げるはずです。

…と言いつつ当ブログはレスポンシブデザインなんですよね。2015年2月時点での話なのでいつ変わるかわかりませんが、当ブログはGoogleアドセンスを貼っているだけで、あまりここで稼ごうとしてないのでいいんです。

というわけで皆さんも、稼ぎ頭であるメインサイトについては、それぞれのテンプレートを用意してしっかり管理することをオススメします。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

post date*

日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)