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
   'dream', // Pre 1.5 Android
   'CUPCAKE', // 1.5+ Android
   'BlackBerry', // BlackBerry
   'BB10', // BlackBerry10
   'webOS', // Palm Pre Experimental
   'incognito', // Other iPhone browser
   'webmate' // Other iPhone browser
 );

 $pattern = '/' . implode( '|', $ua ) . '/i';
 $match   = preg_match( $pattern, $_SERVER['HTTP_USER_AGENT'] );

 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['single_ad_code1'] || $options['single_ad_image1'] || $options['single_ad_code2'] || $options['single_ad_image2'] ) { ?>
・
・//省略
・
 </div><!-- END #single_banner_area -->
 <?php }; ?>

<!-- banner1 -->
 <?php if(is_mobile()) { ?>

 <?php } else { ?>
 <?php if( $options['single_ad_code1'] || $options['single_ad_image1'] || $options['single_ad_code2'] || $options['single_ad_image2'] ) { ?>
・
・//省略
・
 </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にしろ、自分が選んで設置する広告にしろ、そもそも訪問者の潜在的なニーズに応えるものであるはず

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

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

Requ.log | レク.ログ

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

ピックアップ記事

  1. 「10分で終わらせてくるっ!」WordPress子テーマの作り方を2ステップで簡…
  2. もっとストレスフリーに・・Todoistの連携ワザで高速タスク登録!
  3. サラリと終える開発者登録。FacebookのApp ID(アプリID)とApp …
  4. WordPress初心者にオイシイ、簡単記事装飾。TCDテーマ「クイックタグ」機…
  5. 瞬間奥義「非同期設定」。Facebookのいいねボタン、ページプラグインたちの読…

関連記事

  1. widgetoon-js-count-jsoon_ecmg

    マーケティング

    Twitterのシェア数表示を復活!「widgetoon.js & count.jsoon」の登録方…

    簡単登録で、後はおまかせ!Twitterは以前仕様変更があり、公式…

  2. retina_ecmg
  3. feedly-count-problem_ecmg

    ワードプレス

    feedlyのフォロワー数が表示されないっ!?SNS Count Cacheのキャッシュ進捗「部分的…

    怪奇現象と、ある研究者の記録。私は街はずれの湖のさらに奥にある…

  4. facebook-fast-display_ecmg

    ワードプレス

    瞬間奥義「非同期設定」。Facebookのいいねボタン、ページプラグインたちの読込み遅延を斬るっ!

    余計な読込み遅延を解消セヨ。えぇー今回の任務は「ぺいじ」の読込…

  5. theme-change_ecrt

    ワードプレス

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

    TCDテーマからTCDテーマへ!魅了されてしまった。ついに乗り換え…

  6. blog-contents_ecrt

    思考志向 - シコウシコウ

    ブログにおける「価値あるコンテンツ」とは?三大要素と”オリジナリティー”の正…

    いまだから、考えるべきこと。音楽制作をしていると、"自分の発するも…

スポンサーリンク
高速・安定レンタルサーバー
高速・高機能・高安定レンタルサーバー【エックスサーバー】 高速・高機能・高安定レンタルサーバー【エックスサーバー】

Requ.Sound Lab. | レク.サウンドラボ

レク.サウンドラボ

音に、景色と”振る舞い”を。

特集記事

  1. retina_ecmg
  2. theme-change_ecrt
  3. improvement-flow_ecmg
  4. original-share-button_ecmg
  5. business-books_ecmg
  6. tcd-theme-user-review_ecmg
  7. display-speed_ec
  8. todoist-extension_ecmg
  9. tcd-theme-selection_ecmg
  10. todoist_ec

ピックアップ記事

  1. media-setting_ec
  2. original-share-button_ecmg
  3. switch-by-the-device_ecmg
  4. tcd-css-customize_ecmg
  5. facebook-page-plugin_ecmg
  6. reset-button_ecrt
  7. restriction_ecrt
  8. tcd-theme-widget_ecmg
  9. todoist-routine_ecrt
  10. todoist-basic_ec

強みを見つけて、活かしていくために。

business-books

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

todoist

おすすめ記事

  1. 【Retinaディスプレイ対応3】ねえ…どうする…
  2. 瞬間転送。写真もURLもポンっ!スマホとパソコン間のデータ移…
  3. 【Retinaディスプレイ対応1】Macで綺麗に。Windo…
  4. “WEBサイズマスター”へ。Chro…
  5. ”ブログにおいしい”、注釈画像の作り方。矢印や枠線、文字を追…

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

retina-os-solution

ブログクオリティー底上げ10ツール

extools-for-bloggers

最近の記事

  1. 「私の名前はページプラグイン。」Facebookページのいい…
  2. 瞬間奥義「非同期設定」。Facebookのいいねボタン、ペー…
  3. feedlyのフォロワー数が表示されないっ!?SNS Cou…
  4. カッコ美しい、オリジナルシェアボタン。サイトデザインに合わせ…
  5. 【実例集】細部の余白まで美しく。オリジナルシェアボタンのデザ…

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

gif-animation

とっておきのWordPressテーマ。

tcd-theme-selection

Requ.log | おすすめビジネス書

コンテンツの秘密-ぼくがジブリで考えたこと 「言葉にできる」は武器になる。
プロフェッショナルは「ストーリー」で伝える 日本人の知らなかったフリーエージェント起業術

Requ.log | おすすめ物語

モモ マリコ/マリキータ
なんくるない たったひとつの冴えたやりかた

Requ.log | WordPress Theme

WordPressテーマ「MAG(TCD036)」

Requ.log | STORY

  1. 「あの時、気づけなかった。」苦しい時に思い出して奮い立つ、人…
  2. 心が折れそうに辛いとき。一歩前へ踏み出し紡がれた、今へ続くス…
  3. 大切な人の最後の1年
  1. valuable-content-from-image_ec

    ワードプレス

    『伝わりやすいブログ』を作るには?画像で届ける価値あるコンテンツ
  2. retina_ecmg

    ワードプレス

    【保存版】知ったら戻れない、美しさの極みへ。WordPress画像のRetina…
  3. tcd-theme-user-review_ecmg

    ワードプレス

    TCDテーマ導入前に知っておきたい、2つの注目機能とユーザー目線レビュー
  4. todoist-extension_ecmg

    マネジメント

    いつでもどこでも即タスク化。Todoistの便利すぎる拡張機能4選
  5. adjust-the-button_ecmg

    ワードプレス

    【実例集】細部の余白まで美しく。オリジナルシェアボタンのデザイン変更と調整方法
PAGE TOP