動的配信で多様な端末サイズに対応 - マルチスクリーン事例シリーズ vol.4
Posted:
Monday, March 31, 2014
「マルチスクリーン 事例シリーズ」最終回の第 4 回目は、動的配信でマルチスクリーン対応し、RPM が 20% 向上したアットトリップの高橋氏にお話を伺いました。
ここだけチェック√
2 年程前から徐々にモバイルからのトラフィックが伸び始め、2013 年 1 月には PC とモバイルからのアクセスが同じくらいになり、その頃からモバイル端末からのアクセスの収益化に真剣に取り組もうと思い、マルチスクリーン対応に踏み切りました。現在は全体の 60% がモバイルからのトラフィックによるものです。
スマートフォンやタブレット端末など様々なデバイスに応じて、最適なレイアウトをデザインできる動的配信でマルチスクリーン対応しました。私のサイトは画像イメージが多いので、画像イメージの大きさをカスタマイズできるところが動的配信の魅力です。JavaScript とプラグインで対応しました。
モバイル デバイスの種類によって横幅がバラバラという点に苦労しました。そのため、CSS で機種ごとにサイズを指定して対応しています。
モバイル デバイスをよく使用している家族の意見を取り入れながら、デザインを変更しています。実際に使っている様子を横から観察し、目線の動きや指の使い方に特に注目しました。ユーザーの動きを観察した結果、多くの情報をワンカラムで見れるようなレイアウトにしています。
マルチスクリーンに対応して、RPM が 20% 程向上しました。ページ滞在時間も 15 秒増加し、ウェブサイトからの離脱率も 10% 程改善されました。
ページ読み込みスピードの改善については PageSpeed Insights を活用しました。画像の多いサイトでは画像サイズを小さくしたり、サーバーの最適化（キャッシュ読み込みのタイミング）等で工夫しています。またモバイルからのトラフィックは、滞在時間が短くなる傾向があり、またページの読み込みに時間がかかってしまうウェブサイトだとすぐに離脱してしまうので、ページスピードの改善には力を入れています。モバイルの普及はこれからも加速していくことを実感しています。この波に置いていかれないように、ビジネス チャンスを掴んでいきたいです。
================
動的配信では、デバイスに応じて動的にコンテンツを配信ウェブ サーバーがユーザーがどのデバイスからアクセスしているかを検出し、そのデバイスに応じて同じ URL でありながら、表示する画面に合わせてページを表示することが可能です。画像が多く、画像の大きさをカスタマイズできることに魅力を感じ、動的配信の手法でマルチスクリーン対応されたアットトリップの事例紹介はいかがでしたか？
4 回にわたってお届けした「マルチスクリーン事例シリーズ」は参考になりましたか？Vol.1 〜 Vol.3 を見逃した方は、下記からぜひ他の体験談もご覧ください。
Posted by 藤田 舞子 - AdSense チーム
2014 年 4 月 1 日
ここだけチェック√
- サイトについて：
- 「アットトリップ」
- ネット上で今盛り上がっている面白ネタの紹介サイト
- 月間 100 万 PV
- ニュース系
- 対応方法： デバイスに応じて動的に配信（動的配信）
- 効果: RPM +20 %、ページ滞在時間 +15 秒、離脱率 -10%
2013 年には PC とモバイルからのアクセスが同じに
2 年程前から徐々にモバイルからのトラフィックが伸び始め、2013 年 1 月には PC とモバイルからのアクセスが同じくらいになり、その頃からモバイル端末からのアクセスの収益化に真剣に取り組もうと思い、マルチスクリーン対応に踏み切りました。現在は全体の 60% がモバイルからのトラフィックによるものです。
画像の大きさをカスタマイズできる動的配信
スマートフォンやタブレット端末など様々なデバイスに応じて、最適なレイアウトをデザインできる動的配信でマルチスクリーン対応しました。私のサイトは画像イメージが多いので、画像イメージの大きさをカスタマイズできるところが動的配信の魅力です。JavaScript とプラグインで対応しました。
ワンカラム レイアウトで統一
モバイル デバイスの種類によって横幅がバラバラという点に苦労しました。そのため、CSS で機種ごとにサイズを指定して対応しています。
ユーザーの目線の動き・指の使い方に注目
モバイル デバイスをよく使用している家族の意見を取り入れながら、デザインを変更しています。実際に使っている様子を横から観察し、目線の動きや指の使い方に特に注目しました。ユーザーの動きを観察した結果、多くの情報をワンカラムで見れるようなレイアウトにしています。
サイトの読み込みスピードにこだわり
マルチスクリーンに対応して、RPM が 20% 程向上しました。ページ滞在時間も 15 秒増加し、ウェブサイトからの離脱率も 10% 程改善されました。
ページ読み込みスピードの改善については PageSpeed Insights を活用しました。画像の多いサイトでは画像サイズを小さくしたり、サーバーの最適化（キャッシュ読み込みのタイミング）等で工夫しています。またモバイルからのトラフィックは、滞在時間が短くなる傾向があり、またページの読み込みに時間がかかってしまうウェブサイトだとすぐに離脱してしまうので、ページスピードの改善には力を入れています。モバイルの普及はこれからも加速していくことを実感しています。この波に置いていかれないように、ビジネス チャンスを掴んでいきたいです。
================
動的配信では、デバイスに応じて動的にコンテンツを配信ウェブ サーバーがユーザーがどのデバイスからアクセスしているかを検出し、そのデバイスに応じて同じ URL でありながら、表示する画面に合わせてページを表示することが可能です。画像が多く、画像の大きさをカスタマイズできることに魅力を感じ、動的配信の手法でマルチスクリーン対応されたアットトリップの事例紹介はいかがでしたか？4 回にわたってお届けした「マルチスクリーン事例シリーズ」は参考になりましたか？Vol.1 〜 Vol.3 を見逃した方は、下記からぜひ他の体験談もご覧ください。
- 「動的配信で多様な端末サイズに対応」vol.1
- 「ユーザー エクスペリエンスの改善でクリック率 +62%、滞在時間 +23%」vol.2
- 「レスポンシブ ウェブ デザインに再構築後、ユーザー数が 5 倍に」vol.3
Posted by 藤田 舞子 - AdSense チーム
2014 年 4 月 1 日
.png)
.png)
.png)
