Inside AdSense
Google AdSense に関する最新情報をお届けする、 公式ブログです。AdSense に関するニュースや活用方法をご紹介します。
レスポンシブ ウェブ デザインに再構築し、ユーザー動向と収益性を大きく改善「なつレゴ」事例 - マルチ スクリーンへの対応第 4 弾
2013/11/18
なつレゴ
は、懐かしいレゴ ブロックの過去の製品レビューや作品の紹介を中心に行っているウェブサイトです。地方のおもちゃ屋さんで売れ残っている昔のレゴ ブロックを見ると、懐かしい気持ちになるという垣下氏自身が、そういった懐かしい気持ちを共感してもらおうと「なつレゴ」を立ち上げました。
2013 年 8 月、
垣下氏は高まるマルチスクリーン需要を受けて、「なつレゴ」をレスポンシブ ウェブ デザイン（以下、RWD）に再構築しました。
垣下氏にマルチ スクリーンに対応した理由、方法、RWD に構築する際のヒントやその効果についてお話を伺いました。
いずれ 50 % を超えるのも時間の問題だと思い、
今すぐにでもマルチスクリーン対応しなければという状況でした。
2008 年にサイトを立ち上げてから 5 年間はずっと PC サイトのみで運営していました。しかし
モバイル ユーザーの割合は年々増加
していき、「なつレゴ」をマルチ スクリーン対応した直前には、スマートフォンやタブレットなど
モバイル デバイスからのトラフィックは 40% を超えて
いました。
AdSense コミュニティでの企画「AdSense の夏休み」
にちょうどいいタイミングで出会いました。
そんな中、AdSense コミュニティ内での企画
「AdSense の夏休み」
がちょうど良いタイミングで実施されました。「AdSense の夏休み」は、自分自身でテーマを見つけ一ヶ月の期間内で目標達成できるようなミッションを実行しましょう、という企画です。複数のサイトを運営していますが、まずは第 1 弾として
最もモバイルからのアクセスが多かったなつレゴをマルチ スクリーンに対応するミッションを設定
しました。
マルチ スクリーンへの対応は、まとまった時間がないととりかかるのが難しい
と感じており、いつかやろうと思いながらもなかなか実行に移せませんでした。しかし「AdSense の夏休み」で「やります」と手を挙げた以上は絶対に達成しなければいけなかったので、いい意味で頑張れたと思います。ちょうどいいタイミングで「AdSense の夏休み」に出会ったと思います。
「なつレゴ」運営
垣下氏
作業効率がよく楽だと思ったので、
迷うことなくマルチ スクリーン対応するなら
レスポンシブ ウェブ デザインと決めていました。
マルチ スクリーン対応をするなら、初めから RWD にしようと決めていました。PC 用、スマートフォン用、タブレット用等、複数のウェブサイトを運用するにはシステム構築の手間もかかります。また、スマートフォンやタブレットといっても、解像度も様々です。そのような中、どの画面に対応するのか？等、様々なデバイスにいちいち対応していかなければいけないとう手間を考えると、
作業効率がよく、楽だと思った
ので、RWD と決めていました。迷いもなかったです。
極力シンプルなデザインで行うことが必要だと思います。
レイアウトをデザインをする際には、様々な画面で表示される際にレイアウトが変わってしまうということを前提として考える必要があります。ゼロから考えたレイアウトは、
PC、スマートフォンやタブレット、それぞれのデバイスで表示される場合を計算しながら、自分が持っているデバイスでその都度確認しながら行いました。
RWD では極力シンプルなデザインで行うことが必要だと思います。
自分自身で実際に確認しながら、
試行錯誤しながらデザインをしました。
以前までは、ページトップに製品のレビューがありその下に画像を置いていました。しかし、スマートフォンなど小さな画面サイズで見てみると、文字ばかりでスクロールしないと画像が見れず、ユーザーがどのようなサイトかわからないという懸念がありました。そこで、思い切ってレビューと画像の配置を逆にし、ファーストビューで画像を先に表示させました。
自分なりに考えた RWD の配置と、その配置を実際に自分自身でデバイスで確認してみるとではコンテンツのわかりやすさや、使いやすさという点から違いがあり、何度も試行錯誤したことが苦労した点
かもしれません。
RWD への再構築は 1 週間程かかりました。
これまで使用していたサーバーの容量が一杯な状況だったため、早く移行する必要がありました。サーバーの移行には 2 週間かかりましたが、RWD への再構築も同時進行で 1 週間程かけて行いました。ちょうどお盆休みの時期で、集中して作業ができました。レイアウトはゼロからデザインしましたが、スタイルシートはレビューや体験談を見ながら、コードがシンプルな既存のフレーム ワークのものを使いました。CSS のコーディングにかける時間を節約して、
その分ページのレイアウトやユーザー エクスペリエンスを改善することに集中
することができました。
また、コンテンツ（データ）とテンプレートを分けて管理しているので、基本的なテンプレートを構築すれば、あとはデータを流しこむだけでページが自動生成されます。全体的にページ数が多く見えますが、実際は 5, 6 パターンのテンプレートで出来ています。
ユーザーの動向や AdSense の収益にも大きな成果が。
やったかいがあったなと思っています。
RWD に再構築した前後の 8 月と 9 月で比較すると、
直帰率、離脱率、PV、収益などで大きな成果
があったと思います。複数あった広告配信サービスも全て AdSense のレスポンシブ 広告ユニットと通常の AdSense 広告のみに変更しました。AdSense の広告が最も収益性が高かったので、広告を AdSense のみにしたことも収益の改善につながりました。
ユーザー エクスペリエンスに関しては RWD にし広告を AdSense のみにしてから、
離脱率が -19% に改善
され、
1 訪問あたりの閲覧ページ数も +22%
になりました。ユーザーが以前よりもサイトを居心地がよいと感じてくれているようです。AdSense 広告ユニットの収益性は
eCPM が 10 倍
、
CTR も 62% 改善
され、
収益も 10 倍
になりました。
AdSense の RWD に対応した新しい広告ユニットの実装は
決して難しくなく、いつも通り貼付けるだけです。
AdSense 広告に関しては、難しくなく、いつも通りに広告枠を用意して貼付けるだけでした。しかし、画面の縦横が切り替わったときに広告のサイズは自動では変わらないというところを、今後改善してほしいと思います。
今後のマルチスクリーン対応も、
全て同じように RWD にしていきたいと思っています。
運営している他のサイトに関しては、モバイルからのトラフィックによって優先順位をつけながら、随時マルチ スクリーン対応をしていかなければいけないと思っております。今回初めてやってみて要領をつかめたという実感があるので、今後のマルチスクリーン対応も全て同じように RWD 対応にしていきたいと思っています。
※LEGO（レゴ）はレゴ グループの登録商標です。
【関連記事】
「マルチスクリーンへの対応」ブログ シリーズ
Posted by Eri Shikamura - Inside AdSense Team
2013 年 11 月 18 日
0 件のコメント :
コメントを投稿
カテゴリー別
システムメンテナンス
+1
AdMob
AdSense 10 周年記念 シリーズ
AdSense API
AdSense Japan コミュニティ
AdSense ご検討中の方向け
AdSenseの開始
AdSenseブートキャンプ
AdWords
Analytics
Blogger
DFP - DoubleClick for Publishers
DFP スタンダード ガイド
Firebase
Google アナリティクス シリーズ
Google+
IMA
YouTube
アップルストア
ウェブサイトオプティマイザー
オンラインセミナー
お支払い
お知らせ
ガイドブック
ゲーム向け AdSense
コンテンツストラテジー
サポート
システムメンテナンス
セミナー
その他の Google 製品
ディスプレイ広告
ドメイン向け AdSense
ヒント
フィード向け AdSense
ブログ
ポリシー
マイクロモーメント
マルチスクリーン
モバイル
モバイル向け AdSense API
よくあるご質問
リセラープログラム
リンクユニット
レポート
関連コンテンツ
検索向けAdSense
広告のフォーマット
最適化
最適化x新しい管理画面
視認性
初心者向け
紹介
新しい管理画面
新しい機能
新しい広告ユニット
成功事例
動画向け AdSense
法人様向けサービス
過去記事一覧
2017
7月
6月
4月
2016
12月
11月
10月
9月
8月
7月
6月
5月
4月
3月
2月
2015
10月
9月
8月
7月
6月
5月
4月
3月
2月
1月
2014
12月
11月
10月
9月
8月
7月
6月
5月
4月
3月
2月
1月
2013
12月
11月
10月
9月
8月
7月
6月
5月
4月
3月
2月
1月
2012
12月
11月
10月
9月
8月
7月
6月
5月
4月
3月
2月
1月
2011
12月
11月
10月
9月
8月
7月
6月
5月
4月
3月
2月
1月
2010
12月
11月
10月
9月
8月
7月
6月
5月
4月
3月
2月
1月
2009
12月
11月
10月
9月
8月
7月
6月
5月
4月
3月
2月
1月
2008
12月
11月
10月
9月
8月
7月
6月
5月
4月
3月
2月
1月
2007
12月
11月
10月
9月
8月
7月
6月
5月
Feed
役立つリンク
AdSense へのお申込みはこちら
AdSense 管理画面にログイン
ヘルプセンター
ヘルプフォーラム
ご意見・ご感想をフォーラムまでお寄せください。
メールで受け取る:
.jpg)
0 件のコメント :
コメントを投稿