switch-by-the-device_ecmg

マーケティング

忘れたくないユーザビリティー。収益化と両立しよう。TCDテーマでスマホとパソコンの広告表示を切り替える

スマートフォンで調べもの。プレゼントは何がいいかな?おっ、このサイトは参考になりそう!・・アレ?なんか、違うページに飛んじゃった・・・?


そのつもりじゃないのに」広告をタップしてしまう。「ついうっかり」じゃなくて、罠のような広告ゾーンの網に引っかかり、行きたくもないページに飛ばされる・・・そんな目にあった訪問者が、元のページに戻ってくるでしょうか・・・

私なら、戻りません。

switch-by-the-device_ins1

意図せずに広告だらけになることも・・

画面をタッチしながらスクロールする狭い画面。「広告ばっかりな瞬間」があると、ちょっと残念な気分になりますよね。Google AdSense、アフィリエイト広告。収益化も同時に考慮したい。でもそんな運営者目線ばかりでいると、ついマヒしてしまいがちです。

これは印象だけでなく、ユーザビリティーを損なうことになる。長い目でみると・・結果的に逆効果になりうる問題。大いにありうる大問題。敏感なあなたならもう気づいてるでしょう?

・・・でも意図せず、スマホ表示では「広告でイッパイ状態」になってしまってることもある。コレをなんとかしたいんですよね。例えば、PCで見たとき。 

switch-by-the-device_01

問題ないですね。記事下に並べる広告は収益効果が高いと言われています。コンテンツの邪魔もしない。いわゆる「ダブルレクタングル」というフォーメーションですね。響きもかっこいいです。強そう。「フラットツー」とかじゃなくてよかった。じゃあ、スマホ表示では? 

switch-by-the-device_02

同じ記事下部分です。スクロールしていくと・・・

switch-by-the-device_03

おうっ、、、

縦に並んじゃうんですね。画面いっぱいの広告表示・・・これはマズいです。これ以上スクロールするには、広告部分を触わらないといけない。スマホに慣れたユーザーだけが繰り出せる秘技、やんわりタッチ! & 音速リリース!でタップしないとスクロールできません。

無意識にもストレスになるシーン。なんとかしましょう。大丈夫。初心者でも大丈夫。スマホとパソコンで表示を切り替える方法を紹介します。ほなレッツラ・ユーザビリティー。

作業目標

【PC】記事下でダブルレクタングル表示

【スマホ】PC表示とは関係なく表示設定

 【PC表示】カスタマイズ後

switch-by-the-device_01

 【スマホ表示】デフォルト | カスタマイズ後

switch-by-the-device_03

switch-by-the-device_09

記事下ダブルレクタングル広告に限らず、その他の配置にも応用できるようになります。
作業順

1.「テーマオプション」に広告バナーコードを貼る

2. ふたつの重要ファイルをバックアップ

3.【切り替えの “じゅもん” A】を確認

4.【切り替えの “じゅもん” B】を追記

5.「スマホ用ウィジェット」で広告配置

作業、けっこー多いッスね。脇汗スゴいッス

大丈夫。細かく切り分けてるだけ。目の前の作業は常にひとつ。恐れるな。あなたの価値あるコンテンツを無駄にしてはいけない。カスタマイズはゲームである!・・楽しみましょう。

1.「テーマオプション」に広告バナーコードを貼る

そのまんまです。管理画面「外観」⇒「テーマオプション」内へ。記事ページの広告設定欄に、表示したい広告バナーコードを貼り付けます。

switch-by-the-device_06

switch-by-the-device_01

これだけで広告表示完了!楽勝!なんですが、問題はスマホ表示。切り替え作業に移ります。

テーマによって違う部分もあると思いますが、やり方は同じ。【MAG】を例に進めます。

2. ふたつの重要ファイルをバックアップ

switch-by-the-device_ins2

サーバーから現状の「single.php」と「functions.php」をファイルごと直接ダウンロードしておきましょう。もちろん、予期せぬ不具合が起こったとき、元の状態に戻すためです

し、しんぐる・・?ヨミカタもワカラナーァイ

という人はWordPress管理画面「外観」⇒「テーマの編集」⇒右カラムから「個別投稿(single.php)」、「テーマのための関数(functions.php)」にそれぞれ入ります。

内容を全選択コピーして、テキストエディタに貼り付けてバックアップしておきましょう。

switch-by-the-device_04

switch-by-the-device_05

ちなみに、「single.php」は「記事ページを構成しているファイル」、「functions.php」は「テーマを支配する頭脳」のようなものです。だから・・・

絶・対・に!それぞれしっかり分けて、バックアップしてください。

なおWindowsデフォルトの「メモ帳」は、改行コードが変更されてしまうなど不具合の原因になることが多いので、バックアップのための利用は避けましょう。

テキストエディタは、Windowsなら「サクラエディタ」、Macなら「CotEditor」あたりが無料でおすすめです。
カスタマイズは「いつでも元に戻せるようにしておく」ことが基本です。慎重に、自己責任の上で行ってください。

 安心してカスタマイズするために。

「10分で終わらせてくるっ!」WordPress子テーマの作り方を2ステップで簡単解説!

3.【切り替えの “じゅもん” A】を確認

switch-by-the-device_ins3

ここですることは確認だけ。「functions.php」の中に下のような記述があるか探します。

function is_mobile(){
$useragents = array(
'iPhone', // iPhone
'iPod', // iPod touch
'Android.*Mobile', // 1.5+ Android *** Only mobile
'Windows.*Phone', // *** Windows Phone
'dream', // Pre 1.5 Android
'CUPCAKE', // 1.5+ Android
'blackberry9500', // Storm
'blackberry9530', // Storm
'blackberry9520', // Storm v2
'blackberry9550', // Storm v2
'blackberry9800', // Torch
'webOS', // Palm Pre Experimental
'incognito', // Other iPhone browser
'webmate' // Other iPhone browser
);
$pattern = '/'.implode('|', $useragents).'/i';
return preg_match($pattern, $_SERVER['HTTP_USER_AGENT']);
}

デバイスの名前がチラホラと書いてあるので、なんとなく想像できますね。これは、デバイスごとの表示を切り替えるために必要な記述のひとつです。あ、【切り替えの “じゅもん” A】です。

これは既に、TCDテーマではほとんどのテーマに記述されているとのこと。
(※TCD公式「TCD LABO」情報 より)なので、ここでは記述があることの確認だけでOKです。

ただし、この長ーい記述がまるっと一緒である確証はありません。例えば「MAG」の場合 

// ユーザーエージェントを判定するための関数---------------------------------------------------------------
function is_mobile() {

 $match = 0;

 $ua = array(
   'iPhone', // iPhone
   'iPod', // iPod touch
   'Android.*Mobile', // 1.5+ Android *** Only mobile
   'Windows.*Phone', // *** Windows Phone
・
・(省略)
・

 if ( $match === 1 ) {
   return TRUE;
 } else {
   return FALSE;
 }

}

一緒の部分も多いですが、違う記述も多い。「全選択コピー⇒検索⇒ヒット!」とはいかないわけです。なので、検索ワードとしては「ユーザーエージェント」「function is_mobile()」「USER_AGENT」「iPhone」などが適していると思います。

まーとにかく似た記述を発見すればOK。目をこらしてオラァーッッ!、とスクロールして気合で発見する、体育会系的なのも全然アリです。私はラクしたいので検索します。

「MAGの記述例」ではなく、一つ目に挙げた記述を追記してください

なお、「functions.php」に不備があると、WordPress管理画面もサイト表示も画面が真っ白!になります

その場合は当然、管理画面からは元に戻せなくなるので、FTPソフトでのファイルアップロード方法を知ってから、記述を追記するようにしてください。

 FTPソフトについてはこちらが参考になります

初心者におすすめの無料FTPソフトベスト3

4.【切り替えの “じゅもん” B】を追記

switch-by-the-device_ins4

いきなりですが【切り替えの “じゅもん” B】を紹介します。 “じゅもん” の意味をざっくり理解しときましょう。

<?php if(is_mobile()) { ?>
    //スマホで表示したい内容
<?php } else { ?>
    //PC・タブレットで表示したい内容
<?php }; ?>

「if(もしモバイルなら)」⇒「スマホで表示したい内容」。

「else(そうでなければ)」⇒「PC・タブレットで表示したい内容」。

ちょっと腰がひけそうになるかもしれませんが、意味がわかれば大丈夫ですね。注釈にあるとおり、それぞれのデバイスで表示したい内容を、書いてある場所に入れ込むだけでOK

スマホでの広告表示を解除する

で、今回はPCで表示されている広告をスマホでは表示させないようにします。つまり・・

<?php if(is_mobile()) { ?>

<?php } else { ?>
    //テーマオプションで設定した広告を呼び出すコード
<?php }; ?>

上のように、「スマホで表示したい内容」の部分には何も入れず、「PC・タブレットで表示したい内容」に、テーマオプションで設定した広告を呼び出すコードを入れる、ということ。

例えばMAGでは、「個別投稿(single.php)」内にある記事下広告呼び出しコードは、デフォルトでこんなかんじなので 

 <!-- banner1 -->
 <?php if( $options・・・(省略)
・
・(省略)
・
 </div><!-- END #single_banner_area -->
 <?php }; ?>

 <?php if(is_mobile()) { ?>

 <?php } else { ?>
<!-- banner1 -->
 <?php if( $options・・・(省略)
・
・(省略)
・
 </div><!-- END #single_banner_area -->
 <?php }; ?>
 <?php }; ?>

こうする、ということになります。ゴチャゴチャしてますが、落ち着いてよく見てみると、ハイライトされている部分が、【切り替えの “じゅもん” B】になっていることが分かります。

スマホで表示したい内容」部分には何も入れ込まず、「PC・タブレットで表示したい内容」部分にデフォルトの記述を全部入れ込んだだけの形になっていますね。つまり作業的には、ハイライト部分(【切り替えの “じゅもん” B】)の記述を追記しただけ

この機会に把握しちゃいましょう。もう一度【”じゅもん” B】だけを見てみます。

<?php if(is_mobile()) { ?>

<?php } else { ?>
    //テーマオプションで設定した広告を呼び出すコード
<?php }; ?>

さっきの記述、ちゃんとこの形になってますよね。途中のゴチャゴチャした記述の意味がわからなくても、条件分岐自体は、たったこれだけのことで実現されるんです。PHPという言語ですが、このくらいならガッツリ勉強しなくても感覚で出来てしまうんですね。ウレシイデスネ。

実際のサイト表示を確認

じゃあ早速、スマートフォン・パソコンの環境で、それぞれサイト表示を確認してみます。

 デフォルト | カスタマイズ後

switch-by-the-device_03

switch-by-the-device_07

はいオッケー。PCではちゃんと表示されてる?

switch-by-the-device_01

はいオッケー。

5.「スマホ用ウィジェット」で広告配置

さて、これで「スマホの世界じゃ広告だらけ」状態を回避できました。でも、「スマホの世界じゃ広告無ッシング」状態もちょっと寂しい。

そんな問題は「オリジナルウィジェット」を使って即・解決してやります

switch-by-the-device_08

switch-by-the-device_09

はい大成功ー。

広告は訪問者の潜在的なニーズに応えるもの

switch-by-the-device_ins5

収益化によく利用されている、Google AdSense広告。「そもそもスマートフォン表示では、1画面内に2つ見えてる瞬間があるとダメ!」という話も耳にします。ただし、執筆現在の規約では公式記述として見つかりません。(見つけたらぜひ教えてください!)

【参考】広告の配置に関するポリシー – AdSense ヘルプ 

じゃあOKになった!?というわけでもないでしょう。・・・これは個人的な想像ですが、あらゆる画面サイズのデバイスが市場に出回ったため、一貫した規約として挙げるのが難しくなっているだけではないでしょうか。

つまり根本的な考えは変わらない。ユーザビリティー重視の考えが無くなるはずはありません

switch-by-the-device_ins7

少なくとも、禁止・許可関係なく、広告をタップする時。それは訪問者が「興味を持って意図的にタップする時」であるべきです。当然ですが。自動的に判別表示されるAdSenseにしろ、自分が選んで設置する広告にしろ、そもそも訪問者の潜在的なニーズに応えるものであるはず

情報を発信する側、提供する側として、ユーザビリティーはいつも頭に入れておきたい。そのためのカスタマイズには価値がある。だからこそ、挑戦してみたくなりますよね。

関連記事

MAGのデザインをフル活用。PCとスマホの広告設置枠を自由に増やす、減らす、好きな場所へ移動する!

スポンサーリンク

記事が気に入ったら
Requ.logを "いいね!"
Facebookで更新情報をお届け。

Requ.log | レク.ログ

スポンサーリンク
スポンサーリンク

ピックアップ記事

  1. サイトデザインに合わせよう。TCDテーマ記事下にカード型「いいね!ボタン」をセン…
  2. 「私の名前はページプラグイン。」Facebookページのいいね!ボタンをWord…
  3. 瞬間奥義「非同期設定」。Facebookのいいねボタン、ページプラグインたちの読…
  4. 【応用編】スケジュール・タスク管理の大黒柱。万能ツールTodoistの使い方を徹…
  5. もっとストレスフリーに・・Todoistの連携ワザで高速タスク登録!

関連記事

  1. enlarge-image-ecmg
  2. ad-placement-in-mag_ecmg
  3. retina-os-solution_ecmg

    ワードプレス

    【Retinaディスプレイ対応1】Macで綺麗に。Windowsでサクサク。ブログ画像をOSごとに適…

    簡単に、美しく。ページ表示速度の観点で考えると、画像においてはでき…

  4. original-share-button_ecmg-ps
  5. meta-seo-inspector_ecmg

    マーケティング

    基本的なSEOチェックに。DescriptionやOGPを確認できるChrome拡張META SEO…

    せっかく設定したなら、チェックしよう。メタタイトル、メタディスクリ…

  6. tcd-theme-options_ecmg

    ワードプレス

    理想のWEBサイトを直感デザイン。「TCDテーマオプション」の使い方

    サイトレイアウトは、直感的に、簡単に。WEBサイトを立上げると、最…

【Requ.log記事】魅力的なブログを、今すぐ作る。
tcd-mag
【Requ.log記事】魅力を活かす、カスタマイズまとめ。
tcd-mag

特集記事

  1. adjust-the-button_ecmg
  2. theme-change_ecrt
  3. tcd-mag_ecmg-ps
  4. todoist-tips_ecmg
  5. todoist_ec
  6. todoist-extension_ecmg

タスク管理で、自己管理。

todoist

人気記事

  1. compress-jpeg-png-images-ecmg
  2. child-theme-mechanism_ecmg-ps
  3. chrome-font_ecmg-1
  4. screenpresso-initial-setting_ec
  5. child-theme_ecmg
  6. media-setting_ec

魅力的なブログを、今すぐ作る。

tcd-mag

ピックアップ記事

  1. spark-tutorial-ecmg
  2. original-share-button_ecmg-ps
  3. chrome-full-screen-capture-ecmg
  4. todoist-productivity_ecmg
  5. dash_ecmg
  6. enlarge-image-ecmg

ブログのRetina対応、始めませんか?

retina-os-solution

掘り出し記事

  1. favicon-generator_ecmg
  2. feedly-count-problem_ecmg
  3. mergely-ecmg
  4. insert-card-link_ecmg
  5. mailbox-goodbye-newapp_ec
  6. retina-weight-saving_ecmg

ゆっくり、フシギなGIFアニメ。

gif-animation

最近の記事

  1. firefox-full-screen-capture-ecmg
  2. chrome-full-screen-capture-ecmg
  3. enlarge-image-ecmg
  4. spark-tutorial-ecmg

とっておきのWordPressテーマ。

tcd-theme-selection

ピックアップ記事

  1. todoist-advanced_ec
  2. facebook-page-plugin_ecmg-ps
  3. media-setting_ec
  4. original-share-button_ecmg-ps
  5. widgetoon-js-count-jsoon_ecmg
  6. chrome-font_ecmg-1

CATEGORIES

Requ.log | Recommend

WordPressテーマ「MAG(TCD036)」
WordPressテーマ「Bloom(TCD053)」

特集記事

  1. tcd-theme-user-review_ecmg
  2. adjust-the-button_ecmg
  3. valuable-content-from-image_ec
  4. tcd-mag_ecmg-ps
  5. todoist-extension_ecmg
  6. retina_ecmg

人気記事

  1. child-theme_ecmg
  2. jpg-gif-png_ecmg
  3. todoist-basic_ec-ps
  4. screenpresso-initial-setting_ec
  5. chrome-font_ecmg-1
  6. child-theme-mechanism_ecmg-ps
  7. media-setting_ec

最近の記事

  1. firefox-full-screen-capture-ecmg
  2. chrome-full-screen-capture-ecmg
  3. enlarge-image-ecmg
  4. spark-tutorial-ecmg
  1. tcd-theme-selection_ecmg-ps

    ワードプレス

    【目的別】とっておきのWordPressテーマ比較。TCDテーマのおすすめメンバ…
  2. todoist-tips_ecmg

    マネジメント

    【小技特集】もっと使いこなす!おすすめタスク管理ツールTodoistの活用法12…
  3. tcd-mag_ecmg-ps

    ワードプレス

    魅力的なブログで収益化。ワードプレステーマTCD【MAG】の有効的な活用方法とカ…
  4. theme-change_ecrt

    ワードプレス

    【徹底検証】乗り換えたいでしょ?WordPressTCDテーマの変更方法と注意点…
  5. todoist_ec

    マネジメント

    【フリーランス必見】確実に納期を守るために。タスク管理ツールTodoistで予定…
PAGE TOP