ランディングページをレスポンシブデザインにする場合の注意点
ランディングページにレスポンシブデザインを採用することは、はたして良いアイデアなのでしょうか。 ランディングページの役割とレスポンシブデザインの特徴から、有効性を考えてみましょう。
目次
レスポンシブデザインとは
レスポンシブデザインとは、端末の表示幅に応じてCSSのみを切り替え、各デバイスに応じたWebページを表示する手法のことです。
HTMLソースはひとつで済むので、画像の差し替え作業などの小さい変更が楽に行える点と、デバイスごとのページが存在しないためcanonical等の設定を行わなくて済むというメリットがあります。
実際のページの見え方は、同じURLにアクセスしてもPCの場合、タブレットの場合、スマートフォンの場合のそれぞれで、見え方が異なるようになります。
レスポンシブデザインのデメリット
メリットを見ると優秀そうなレスポンシブデザインですが、デメリットもあります。
最も大きいデメリットは、ページの表示が遅くなることです。
たとえば、PC用、タブレット用、スマートフォン用にそれぞれ画像を用意し、スマートフォンで閲覧した場合、表示されるのはスマートフォン用の画像だけですが、表示されないだけでPC用やタブレット用の画像も読み込みは行われています。
つまり、表示されない画像のために3倍以上の時間をかけて読み込んでいることになります。
これは固定回線のような高速な通信環境であれば問題にはなりませんが、スマートフォンの通信環境では大きな影響があります。特にランディングページのような画像が大量に使われるページでは致命的といえます。
現在ではこの問題を軽減する手法も開発されていますが、HTMLソースは難解になるので、HTMLソースの変更を伴うデザイン修正などは困難になります。
また、レスポンシブでの構築自体が、それぞれ独自のHTMLで構築するよりも難易度、工数が高いため、外注する場合は高額になります。2015年現在の相場感として、レスポンシブで作成する場合の費用感は、別々に作る場合の1.5～2倍程度になっています。
ランディングページに求められること
ECにおけるランディングページの目的は商品の販売（あるいは資料請求など）です。
つまりランディングページはブランド価値の向上やユーザーの態度変容などを期待するものではなく、
ただ購入してもらうためだけに存在しているページ
なのです。
そのため、商品の魅力を最大限にアピールすることと、購入に対するストレスを極力感じさせないことが重要な施策になります。
そしてランディングページには商品の魅力をアピールするために、「画像を多用した視覚的に目立つデサイン、他のページへのリンクがない、縦に長い」といった工夫があります。
また、購入に対するストレスを感じさせないための工夫として、LP一体型の購入フォームなどが導入されています。
ランディングページとレスポンシブデザイン
前述のとおり、レスポンシブデザインでは表示が重くなるという欠点があるため、商品の魅力を最大限に伝える、購入のストレスを感じさせないというランディングページとの相性はあまりよくありません。
レスポンシブデザインはあくまでも表示の最適化であり、ユーザー体験の最適化ではないということを念頭においておく必要があります。
そして購入に影響を与えるのは、表示内容の優劣ではなく、ユーザー体験の優劣です。
ランディングページでのユーザー体験
使用されるデバイスによって、ユーザーの状況をある程度想定することができます。 ユーザーの状況にあわせてランディグページを変えることで、ユーザー体験を最適化することができます。
例えば、PCでランディングページを閲覧しているユーザーは
・回線速度は速め ・時間に余裕がある ・そのため検索による比較/検討を行いやすい
といったことが想定されます。
この想定を基に考えると、
・回線速度が早いので、ある程度リッチな画像を使用 ・時間があるので細かいアピールポイントを網羅 ・検索されやすいので、あらかじめページ内に他社との比較を用意しておく
といった施策が考えられます。
翻ってスマートフォンなどのモバイル端末で閲覧しているユーザーは
・回線速度は遅め ・1スクロールの距離がPCより長い ・ちょっとした空き時間や移動中などに見ている ・あまり詳細な比較/検討は行われにくい ・電話をかけやすい
といったことが想定できます。
これを基にスマートフォンのランディグページの施策を考えると
・画像はリッチさより速さを優先 ・スクロール距離が長いので、メインの訴求点はより目立つようにする ・時間があまりなく、比較もされづらいので、ワンタイムオファーやタイムセールなどの時間を区切ったアプローチ ・電話番号リンクを設置
といった施策が出てくるでしょう。
ランディングページとレスポンシブデザインの現実
これらのランディングページのあるべき施策を、レスポンシブデザインで実現できるか？というと、不可能ではありません。
しかし、そのためには通常より1.5～2倍のコストが必要で、メンテナンス性が低くなるというデメリットを受け入れなければなりません。
また、それによって得られるメリットは、デバイスごとのページがひとつになるという点だけで、多くの場合、ページがひとつになることと商品の売上は関係しません。
Googleはレスポンシブを推奨しているものの、ランキングやインデックスの要素としてレスポンシブであるか否かは関係していません。（2015年現在）
いたずらにレスポンシブデザインを採用すると、ページ製作のハードルが上がり、ランディングページとしての役割も果たせなくなる可能性があるため、注意が必要です。
現時点でのベストプラクティス
2015年時点での最適解は、動的配信かデバイス別リダイレクトです。
いずれもPHPなどの言語でデバイスを判別する方法で、動的配信は同じURLに対して別のHTMLソースを表示させる方法、デバイス別リダイレクトはそれぞれのデバイスに最適化された別のページへとリダイレクトする方法です。
動的配信はシステム側の構築難易度が高いので、デバイス別リダイレクトが採用されることが多くなっています。
