レスポンシブデザインとは？ランディングページにおけるメリット・デメリット
スマホ向けランディングページ制作依頼の増加に伴って、レスポンシブデザインも取り入れるべきか？という質問も増えてきました。PCやスマホ、タブレットの画面サイズごとに合わせて表示させるレスポンシブデザインは、ランディングページにとってメリットとなるのでしょうか？パッとイメージしにくいのではないかと思います。答えから言うと、レスポンシブデザインとLPは相性が良いとはあまり言えないのが現状です。
今回は、ランディングページにレスポンシブデザインを導入した際のメリットとデメリットについて解説していきます。メリットとデメリットを知った上で、あなたのランディングページへ導入するかどうかの参考にしてみてください。
そもそもレスポンシブデザインとは？
レスポンシブデザインとはPCやスマホ、タブレット端末など、画面のサイズに応じてサイトの表示を変えるサイトをデザインすることです。サイトへアクセスした端末の画面サイズに応じて、テキストサイズやレイアウトを変更できるようにサイトを作りこみます。
レスポンシブデザインが生まれた背景
ランディングページに限らず、昔はPC向けサイトがメインでした。スマホユーザーが世界的に急増したため、スマホによるアクセスの流入も急増。スマホ対応が当たり前になってきました。PCサイトをスマホで拡大しながら見るのは面倒ですよね。スマホユーザーのユーザビリティの向上を背景にレスポンシブデザインが導入されるようになりました。
レスポンシブデザイン導入そのもののメリット
レスポンシブデザインを導入することによって、PC用やスマホ用など複数のページを用意する必要がなくなります。サイトの管理運用、修正などを行いやすくなるという利点があります。Googleがレスポンシブデザインに対応したサイトを上位表示させるようアルゴリズムを変更したので、SEOの観点で有利になる点もメリットです。
ランディングページにおけるメリット
①ひとつのランディングページでPCやスマホなどの異なる端末のユーザーに見てもらうことができる
ランディングページにレスポンシブデザインを導入するメリットは、ひとつのランディングページを見てもらえる端末ユーザーの範囲を広げられることです。ひとつのランディングページで複数の端末に対応できることから、複数のランディングページを用意する必要はなくなります。修正作業が必要な場合も少なく済みます。
②画面サイズごとに適したファーストビューを見せて商品を訴求することができる
レスポンシブデザインにすることで、端末の画面サイズごとに最適なファーストビューを表示させることができます。
PC向けのランディングページをスマホで拡大しながら読む、というようなユーザーはそうそういないでしょう。読みづらいページにアクセスした時にはファーストビューすら見てもらえずに離脱してしまいます。
異なる端末でも商品の訴求などをファーストビューの中にしっかりと表示させることができます。そのため「端末が異なった場合には全く見てもらえない」と言ったようなことは少なくなるでしょう。
ランディングページにおけるデメリット
①ページの表示が遅くなり、離脱率の増加につながる
一般的にレスポンシブデザインのサイトは表示が遅くなる傾向になります。端末ごとに異なるサイズの画像を用意するのが一般的だからです。
スマホでページを見た場合はスマホ向けに用意された画像しか表示されていません。しかし表示されていないだけで、実は他の端末用に用意してある画像を読み込んでいます。読み込んだ上で、表示をさせていないだけなのです。
スマホの通信環境では無駄な読み込みが表示時間に影響してきます。ページの表示時間はユーザーの離脱にも影響します。表示時間が長くなるほどユーザーは離れてしまうのです。表示時間が長くなる傾向になるレスポンシブデザインに対応したサイトはランディングページとの相性はあまりよくないと言えます。
②デザインやレイアウトなどに制約があり、コンバージョン低下につながる
ランディングページをレスポンシブデザインにする場合、スマホへの表示も考慮する必要があります。スマホサイトはシンプルな１カラム構成が基本です。端末に応じたレイアウトの変化が必要なので、凝ったデザインなどは難しく、全体的にシンプルな構成になります。
レスポンシブデザインではデザインやセールスコピーの量に制約が出てくるため、全体として自由度は下がります。PCやスマホの端末ごとの特徴を十分に発揮したレイアウトやデザインができなくなるので、訴求力の低下やコンバージョンの低下に繋がってしまうのです。
③ランディングページのテスト・最適化が難しい
レスポンシブデザインでは、完成後のランディングページのテスト改善が難しくなるというデメリットもあります。
例えば完成したランディングページのコンバージョンが低い場合、
「どの端末表示のコンバージョンが低いのか？、なぜ低いのか？、どこの端末表示を変える必要があるのか？」を分析する必要があります。
端末ごとにランディングページを作ってあれば考える必要がないのですが、レスポンシブデザインを適用した場合には、分析や仮説を立てる作業が比較的大変です。仮説を立てたとしても、デザインやレイアウトの制限があるので改善自体が難しいこともあります。
PCとスマホではユーザーの属性が大きく異なります。本来なら端末ごとのユーザー属性に適したデザインなどにするのが望ましいです。デザインの制限、テストが難しい点からランディングページの最適化が難しいと言えます。
まとめ
いかがでしょうか。
レスポンシブデザインをランディングページに取り入れると、端末ごとにランディングページを用意しなくても最適なファーストビューを表示できます。1つのランディングページで多くの端末のユーザーに見てもらえることがメリットとなります。
ランディングページのABテストや最適化が難しくなるデメリットがあります。ランディングページを修正するにもデザイン上の制約があります。テスト改善を繰り返してコンバージョンを高めようとするランディングページとは相性があまり良くないかもしれません。
ランディングページ完成までの流れ
コメント..