レスポンシブ ウェブ デザイン導入を機にサイトもリニューアル - マルチ スクリーン事例シリーズ vol.1
Posted:
Tuesday, March 18, 2014
本日より計 3 回にわたってお届けする「マルチスクリーン事例シリーズ」では、ご自身のウェブサイトに合った方法でマルチスクリーン対応をしたサイト運営者様に、対応のきっかけや具体的な対策、対応後の効果などをご紹介いただきます。
第 1 回目は、あらゆる画面サイズに対応できるレスポンシブ ウェブ デザイン(以下、RWD)に魅力を感じ、ウェブサイトを RWD に再構築したりょうたろう氏にお話を伺いました。サイトも同時にリニューアルしたことでタブレット経由の収益性が 11% も向上したそうです。
ここだけチェック√
- サイトについて
- 「京都観光研究所」
- 京都観光専門サイト(2005 年オープン)
- 150 ヶ所以上の名所・穴場情報を地図や写真で詳しく紹介し、初めての京都旅行で利用する人から、リピーターにも大好評
- トラベル・ローカル系
- 対応方法: レスポンシブ ウェブ デザイン
- 効果: タブレット経由の収益性が 11% 向上
モバイルからのトラフィック増加が顕著になり、
マルチ スクリーン対応を決断
Google アナリティクスを見てみると、モバイル(特にスマートフォン)からの流入が増えてきていることが顕著になってきたことをきっかけにマルチ スクリーン対応をしようと思いました。
サイト トラフィックの構成(PC : スマートフォン : タブレット)
2011 年 = 88% : 11% : 1%
2012 年 = 74% : 21% : 5%
2013 年 = 54% : 40% : 6%
以前は、動的配信で PC 用、スマートフォン用、タブレット用とデバイスごとに出し分けていたのですが、キャッシュの問題があり、うまく表示が切り替わらないことがありました。せっかく動的配信にしていても、デバイスに合わせて表示されないのではユーザー エクスペリエンスを損ねてしまいます。そのため、RWD を採用することに決めました。また「熱血!AdSense 部」レスポンシブ ウェブ デザインのオンライン セミナーに参加したことも導入を決意するきっかけとなりました。
マルチ スクリーン対応を機にサイトもリニューアル
サイトは WordPress テーマを活用し、Bootstrap3 をベースに作成しています。RWD への構築方法は、オンライン サービスを活用し、自分自身で勉強しながら学びました。勉強自体は 1 日程でしたが、HTML タグ・データ・ CSS が混在しており、この機会にサイト リニューアルも一緒にし、結果的に 3 ヶ月程かかりました。データとデザインの分離をうまく行うことができたので、今後、ウェアラブル デバイスへの対応もうまくできるのではないかと思います。
タブレット経由の収益性が 11% 向上
タブレットとスマートフォンの収益性を比較すると、スマートフォンと比べてタブレットの方がクリック率が高く、RPM は約 4 倍もありました。
Google アナリティクスでユーザーのサイトでの滞在時間を見てみると、タブレットは他のデバイスに比べて滞在時間が長い傾向があります。タブレットは、PC よりくつろいだ環境で使われ、スマートフォンより一度に見られる情報量が多いため、訪問者はじっくりとサイトに滞在するのかもしれません。
ユーザーを考慮すると、マルチ スクリーン対応は重要
収益ではなく、ユーザーが快適にウェブサイトを見られるか、ということを 1 番に考えると、マルチスクリーン対応は重要だと思います。私も実際にマルチ スクリーン対応を始めるまでは、「難しそう」「面倒くさそう」と正直思っていました。しかし、AdSense Japan コミュニティでの企画や、様々なツールを活用すると意外と簡単でした。今は勉強するツールやサービスも充実しているので、ぜひ活用してほしいです!
================

次回はウェブサイトを RWD に再構築したことでクリック率が 35 % 向上、さらにユーザーのページ滞在時間が 23%も改善した竹中氏の事例をご紹介する予定です。
次回もお楽しみに!
[関連記事]
マルチスクリーン対応サイトへの最適化と収益化
マルチスクリーン対応オンラインセミナーを開催しました
Posted by 藤田 舞子 - AdSense チーム
2014 年 3 月 18 日