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. ”知っているつもり”の拡張子、jpg gif png。画像形式による違いと特徴、…
  2. Twitterのシェア数表示を復活!「widgetoon.js & count.…
  3. WordPress初心者にオイシイ、簡単記事装飾。TCDテーマ「クイックタグ」機…
  4. あっという間に仕事効率化。ブログにも使えるMac定型文ツール「Dash」の設定方…
  5. もっとストレスフリーに・・Todoistの連携ワザで高速タスク登録!

関連記事

  1. child-theme-mechanism_ecmg-ps

    ワードプレス

    WordPressで子テーマを作る際に知っておくべき仕組みと注意点

    知っとかないと、きっと困る。WordPressでカスタマイズをする…

  2. unveil-lazy-load_ec

    ワードプレス

    設定不要!WordPressプラグイン「Unveil Lazy Load」でページ読込スピードアップ…

    簡単装備で速度をブースト!プラグインをインストールするだけで、ペー…

  3. facebook-page-plugin_ecmg-ps
  4. mergely-ecmg

    ワードプレス

    「違い」を調べる神ツール。テキストファイルの差分比較、合併ができるMergelyの使い方

    神のツールを手に入れた男。遠い昔の話。正直者の男の目の前に、ある2…

  5. like-button-card_ecmg-ps
  6. meta-seo-inspector_ecmg

    マーケティング

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

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

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

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

レク.サウンドラボ

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

特集記事

  1. display-speed_ec
  2. adjust-the-button_ecmg
  3. valuable-content-from-image_ec
  4. extension-tools-for-bloggers_ec
  5. tcd-theme-selection_ecmg-ps
  6. retina_ecmg
  7. business-books_ecmg
  8. todoist-extension_ecmg

ピックアップ記事

  1. gif-animation_ec
  2. todoist-class_ecrt
  3. media-setting_ec
  4. chrome-font_ecmg
  5. tcd-theme-options_ecmg
  6. like-button-card_ecmg-ps
  7. blog-theme-mag_ecmg-ps
  8. annotation-image_ecmg

強みを見つけて、活かしていこう。

business-books

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

todoist

掘り出し記事

  1. browzer-extension_ec
  2. meta-seo-inspector_ecmg
  3. facebook-fast-display_ecmg

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

tcd-mag

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

retina-os-solution

ピックアップ記事

  1. todoist-routine_ecrt
  2. jpg-gif-png_ecmg
  3. widgetoon-js-count-jsoon_ecmg

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

gif-animation

とっておきのWordPressテーマ。

tcd-theme-selection

最近の記事

  1. customized-theme-update_ecmg-1-ps
  2. mergely-ecmg
  3. child-theme-mechanism_ecmg-ps

Requ.log | Blogger おすすめ書籍

「言葉にできる」は武器になる。 コンテンツの秘密-ぼくがジブリで考えたこと
プロフェッショナルは「ストーリー」で伝える 現代広告の心理技術101

Requ.log | おすすめエッセイ

言葉の贈り物 今日の人生

Requ.log | おすすめ物語

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

Requ.log | WordPress Theme

WordPressテーマ「MAG(TCD036)」

思考・価値感系ピックアップ記事

  1. blog-contents_ecrt
  2. restriction_ecmg-ps
  3. reset-button_ecrt
  1. display-speed_ec

    ワードプレス

    目指せ軽量化!今から始める、WordPressサイトの表示スピード改善計画
  2. retina_ecmg

    ワードプレス

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

    ワードプレス

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

    ワードプレス

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

    ワードプレス

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