ECサイトを構築/運営していく中で必ず必要になるのがランディングページ（以下LP）です。以前の記事でも少し解説をしましたが、これまでLP構築はデバイス毎にサイトを構築する必要がありました。

しかしエンドユーザーのアクセス端末が多岐にわたり、それぞれの端末に合わせたLP構築対応は不可能になってきています。今回は実際にレスポンシブWebデザインでLPを構築された事例を参考に考察していきます。

サイト名	クレドヌーボー
URL	http://shampoo.56-shop.com/
QRコード

レスポンシブWebデザインでは1ソースで全デバイスのサイト構築が可能です。また、画像などの素材も基本的に同じ素材を使います。

これまでLP構築の際にはデバイス毎に画像を用意しLPを構築する必要がありましたがレスポンシブWebデザインで構築すれば、その必要がありません。要するにこれまでのサイト構築の手間を大幅に軽減することができます。

ポイントはスマホでもPCの素材（画像等）を流用するため、スマホでもストレスなく読める文字の大きさで画像を作る点です。

PCサイトを基準にサイトを構築するとPCでは読める文字もスマホでは画像自体が小さくなってしまうため読めなくなってしまいます。

これまで多くのLPは画像で構築されているケースが非常に多いように思います。しかしレスポンシブWebデザインではあらゆる端末に対応できる為、テキストも端末の特徴にあわせたリキッドな表示の仕方をしなくてはなりません。

今回のクレドヌーボー様もできるだけ画像を使わずにテキストでサイトを構築しています。

これまでは画像で構築していたサイトもテキストにすることによりスマホなどのモバイル端末でアクセスした際も文字が潰れない上、表示速度の問題も解決してくれます。

前述ではいかにコンテンツを共通化させレスポンシブWebデザインでLPを構築するかを解説してきました。

しかしランディングページの場合、1枚のページの中でユーザーに伝えたい内容を全て表現し、コンバージョンしなければなりません。

どうしてもデバイス毎にサイトのレイアウトを変更したりデバイスの特性に合わせた表示のしたいという方が多いですが、レスポンシブWebデザインはデバイス毎の表示切替も可能です。

今回の事例のクレドヌーボー様も端末に合わせてコンテンツを用意し表示の切り替えをしています。

今回のLPはレスポンシブwebサイトのポイントを押さえ、且つ非常にクオリティの高いサイトだと感じました。

サイト全体をレスポンシブ化することに悩まれている方はまずはキャンペーンサイトやPPC広告/アフィリエイト広告などのリンク先としてレスポンシブWebデザインでサイトを構築するのも1つの方法ではないでしょうか。

aishipR 岡村直寿