|
|---|
アップルのWebサイトにRetina対応のiPadでアクセスすると、一昔前のWebサイト（インターレースGIF）のように、ボケた画像がジワっとシャープに切り替わります。通常の画像を表示した後で、Retinaディスプレイの場合には解像度が高い画像へ切り替えているのです。
Retinaディスプレイで表示した通常画像（左）と高解像度画像（右）
それぞれの画像について、低解像度版と高解像度版の2種類を読み込むことになるので、転送データ量が増えてサイトの表示が遅くなってしまいますが、アップルは自社商品のイチオシ機能であるRetinaディスプレイでの表示の美しさを優先させたのでしょう。
このような画像切り替えは、「retina.js」や「retina-replace.js」などのJavaScriptライブラリーを使うと比較的簡単に実装できますが、すでに掲載している画像の高解像度版を用意したり（素材が残っていない場合は作り直しになる）、今後掲載する新しい画像を通常版と高解像度版の2種類ずつ作成したり、運用コストが増加するデメリットが発生します。そのため、画像のRetina対応を制作サイドからマーケティング部門やマネジメント層へ提案しても、なかなかOKが出ないのが実情です。
そこで今回は、WebサイトのRetina（に限らず高解像度のデバイス全般）にいつ対応すべきかを決めるために、Web解析のデータを活用する方法について紹介します。
全体の流れ
以下のような4ステップで進めます。
- 対策コストを見積もる：初期と運用コストを試算する
- ニーズを把握する：Retinaのシェアと売上インパクトをモニタリングし、何%を超えたら対策すべきかを決める
- 対策を実施する：既存画像を再作成し、今後追加する画像の運用ルールを決める
- 効果を検証する：対策前後でRetinaモデルによるサイト利用やコンバージョンが増えたか調べる
1.対策コストを見積もる
Retina対策が必要になる工数やコストを見積もります。
- 初期：主要ページの既存画像の高解像度版作成コスト
- ランニング：実施後に増加する運用コスト
適用範囲や今後の運用における平均画像数を決めれば、時間や費用を細かく算出できるはずです。
2.ニーズを把握する
Retina対応の実施を判断するため、高解像度ディスプレイでどれぐらい表示されているか、シェアを把握します。
データが細かすぎると集計が面倒になるので、デバイス名や画面サイズのような細かいデータではなく、高解像度ブラウザーの割合だけ調べることにします。さらにマネジメント層向けに、売上の割合も示したいところです。
見るべき指標
- 高解像度ブラウザーの割合
- 高解像度ブラウザーからの売上の割合
これらの数字の日々の変化を簡単に確認できるようにします。
実装方法
WebKit系ブラウザー（Safari、Chrome 22以降、Androidの「ブラウザ」など）で利用可能なwindow.devicePixelRatioの値を取得します。見た目のピクセル数と実際のピクセル数が一致するPCなどのデバイスでは、この値は「1」になります。Retinaは「2」、Androidなど一部のデバイスは「1.5」などの数字になることがあります。細かすぎるデータは集計が面倒なので、「1」（低解像度＝通常）とそれ以外（高解像度）の2種類に分別してから、期間を長めに設定したカスタム変数にセットします。
※Retinaなどの高解像度は値が「Hi」に、それ以外は「Lo」になる
レポートのイメージ
漫然と数字の変化を追いかけるのではなく、シェアが何%を超えたら対策を実施するのかのターゲット値をあらかじめ決めておくと、対策実施の決断がスムーズになります。ターゲット値は、ブラウザーのシェアなど、社内ですでに合意できているサポート方針を参考にしたり、Retina対応によって向上するコンバージョンを想定し、増加する売上と1.で算出した対策コストの兼ね合いを考えたりして決めるとよいでしょう。
3.対策を実施する
retina.jsやretina-replace.jsのようなライブラリーを使うか、自前の仕組みを構築して実装します。画像クオリティ、コスト、サイトのロード時間、互換性などのトレードオフになるので、ビジネスやサイトの特性に合わせて、最適と思われる方法を選択します。
4.効果を検証する
1で取得した数字の変化を対策の前後で比較するだけでなく、高解像度ディスプレイでアクセスした場合のユーザー体験が向上する結果として変化する指標の推移を検証します。
見るべき指標
- 高解像度ブラウザーの割合
- 高解像度ブラウザーからの売上の割合
- 高解像度ブラウザーの平均閲覧ページ数
- 高解像度ブラウザーの平均滞在時間
効果が出た場合は、運用を継続します。想定した効果が出ない場合は、新規に追加する画像の対応を減らす、ストップするなどの検討が必要でしょう。
ビジネスへの貢献度が重要
以上、今回は指標だけでなく意志決定までのプロセスにまで踏み込みました。現状とコスト、効果を明確にすれば、マーケティング部門やマネジメント層は費用対効果を判断できるはずです。ビジネスの成果に貢献できるよう、上手に進めてみてください。
著者：清水 誠 （しみず・まこと）
Webアナリスト。1995年国際基督教大学を卒業後、凸版印刷やScient、Razorfishにて大手企業へのWebコンサルティングとIA設計に従事した後、ウェブクルーでは開発・運用プロセス改善、日本アムウェイでは印刷物のデジタル化とCMS・PIM導入、楽天ではアクセス解析の全社展開、ギルト・グループではKPIの再定義とCRMをリード。2011年9月に渡米、マーケティング製品の品質改善に取り組む傍ら、執筆活動も続けている。サンクトガーレン社外CMO、電通レイザーフィッシュ社外フェローも務める。
