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. 「私の名前はページプラグイン。」Facebookページのいいね!ボタンをWord…
  2. 理想のWEBサイトを直感デザイン。TCD『テーマオプション』の使い方
  3. もっとストレスフリーに・・Todoistの連携ワザで高速タスク登録!
  4. アレ?Chromeの表示文字、汚なくなった!? キレイなフォントを1分で取り戻そ…
  5. サイトを彩る直感設定。WordPressTCDテーマ「オリジナルウィジェット…

関連記事

  1. description-video_ec
  2. retina-text-widget_ecrt
  3. tcd-theme-options_ecmg

    ワードプレス

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

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

  4. retina-logo_ec

    ワードプレス

    【Retinaディスプレイ対応4】サイトの顔も綺麗に。TCDテーマなら3ステップで完了する、ロゴ画像…

    サイトロゴは、サイトの顔。このサイトでは最上部にロゴを配置していま…

  5. retina-slider_ec

    ワードプレス

    【Retinaディスプレイ対応5】もっと美しくワガママに。スライダー画像さえも綺麗に表示させてしまう…

    スライダー嬢も、綺麗に。このサイトのトップページには、スライダーが…

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

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

レク.サウンドラボ

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

特集記事

  1. tcd-theme-user-review_ecmg
  2. theme-change_ecrt
  3. todoist-extension_ecmg
  4. display-speed_ec
  5. todoist_ec
  6. retina_ecmg
  7. extension-tools-for-bloggers_ec
  8. business-books_ecmg
  9. todoist-tips_ecmg
  10. adjust-the-button_ecmg

ピックアップ記事

  1. phrase-express_ecmg
  2. todoist-productivity_ecmg
  3. tcd-css-customize_ecmg
  4. chrome-font_ecmg
  5. todoist-routine_ecrt
  6. todoist-constitution_ec
  7. like-button-card_ecmg
  8. media-setting_ec
  9. todoist-class_ecrt
  10. sns-count-cache_ecmg

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

business-books

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

todoist

おすすめ記事

  1. 小規模チーム、家族間の疎通に。Todoistで始める気軽なタ…
  2. 瞬間奥義「非同期設定」。Facebookのいいねボタン、ペー…
  3. メディア問題さん、さようなら。画像サイズを気ままに追加するプ…
  4. タスクを完了させたくなる!? モチベーションアップに役立つT…
  5. ”ブログにおいしい”、注釈画像の作り方。矢印や枠線、文字を追…

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

tcd-mag

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

retina-os-solution

最近の記事

  1. 【使用者レビュー】WordPress初心者にこそおすすめのブ…
  2. 【小技特集】もっと使いこなす!おすすめタスク管理ツールTod…
  3. タスクに、日時や曜日が勝手に反映される・・!?Todoist…
  4. 魅力的なブログで収益化。ワードプレステーマTCD【MAG】の…
  5. MAGのデザインをフル活用。PCとスマホの広告設置枠を自由に…

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

gif-animation

とっておきのWordPressテーマ。

tcd-theme-selection

特集記事

  1. 目指せ軽量化!今から始める、WordPressサイトの表示ス…
  2. 【小技特集】もっと使いこなす!おすすめタスク管理ツールTod…
  3. TCDテーマ導入前に知っておきたい、2つの注目機能とユーザー…
  4. 【作業順まとめ】ブログを彩る!記事作りが捗る!クオリティー底…
  5. 魅力的なブログで収益化。ワードプレステーマTCD【MAG】の…

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

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

Requ.log | おすすめ物語

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

Requ.log | WordPress Theme

WordPressテーマ「MAG(TCD036)」
  1. tcd-theme-selection_ecmg

    ワードプレス

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

    マネジメント

    いつでもどこでも即タスク化。Todoistの便利すぎる拡張機能4選
  3. business-books_ecmg

    マーケティング

    【厳選6冊】起業したくなったら読んでおきたいビジネス書。自分の強みを見つけて活か…
  4. adjust-the-button_ecmg

    ワードプレス

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

    ワードプレス

    【保存版】知ったら戻れない、美しさの極みへ。WordPress画像のRetina…
PAGE TOP