サイト構築 公開日:2016.05.12

レスポンシブウェブデザインとスマホECサイト

ここ数年でスマホやタブレットからのアクセスが急増し、Googleもレスポンシブウェブデザインを推奨するようになりました。 以前はPCはそのままPCサイト、スマホからはスマホサイトへ移動させる方法が一般的でしたが、URLが変わって同じようなページがPCとスマホで二重にできてしまうため、現在Googleとしては同じページ上で、スマホ用に見え方だけを変えるレスポンシブウェブデザインを優先して評価するようになっています。

そもそもレスポンシブウェブデザインとは?

レスポンシブウェブデザインとは同じページのコンテンツ(画像やテキスト)をPCやタブレット、スマホなど、それぞれのデバイスからのアクセスによって、それぞれのデバイスに最適な形で表示させるWEBサイトの作り方を指します。
レスポンシブウェブデザインでは、ページの横幅や画像サイズ、文字サイズなどを自動で調整し表示させるように構築を行いますが、同じソースを使ってそれぞれにコンテンツを表示させるため、どちらかのデバイスでは見にくい状態になることもあり、その場合は同じファイル内に別々のコンテンツを記述して、それぞれに表示させる場合もあります。
現在はすべてのサイトがレスポンシブウェブデザインになっているわけではなく、また構築にも専用のスキルが必要なため、普及にはもう少し時間がかかるかと考えられます。
特にECサイトにおいては、ページの見やすさなどでかなり転換率に響くことや、ランディングページ重視のサイト構成になっていたりするので、現状ではまだまだ別々のURLで表示させているサイトがほとんどです。

レスポンシブウェブデザインのメリット

レスポンシブウェブデザインにすることでのメリットは大きく2つあります。

レスポンシブ化のメリット① SEO対策としての評価が高くなる

Googleが推奨していることでもわかるように、今後SEO対策を考える上でレスポンシブウェブデザインは必要不可欠な項目になると考えられます。

レスポンシブ化のメリット② 更新作業が簡略化される

レスポンシブウェブデザインは同じソースを読み込んで表示方法だけを変える仕組みの構築の場合は効率よく更新作業ができます。
ただ、ランディングページなどでデバイスごとに画像を作り込んだりする場合は、レスポンシブウェブデザインは作業的に逆に難解になったりします。

レスポンシブウェブデザインのデメリット

レスポンシブウェブデザインにすることで、実はデメリットも結構あります。

レスポンシブ化のデメリット① ページの容量が重くなる

レスポンシブウェブデザインでは、PCとスマホの両方のコードを1ファイル内に記述するので、見えていなくてもページの中に入っている内容を読み込んでいるので、表示に時間がかかったりすることがあり、離脱の原因になることもあります。

レスポンシブ化のデメリット② 構築に費用と時間がかかる

レスポンシブウェブデザインは特殊な構築方法になるので、まだまだスキルを習得している人が少なく、費用や時間も通常より多くかかってしまいます。

レスポンシブ化のデメリット① ページの完成度が下がる

レスポンシブウェブデザインは基本的には同じ画像やテキストを使って表示させるので、それぞれに作りこんだページに比べると、見劣りしたり、それぞれ細切れに見えて内容が伝わりにくかったりします。
特にしっかりとLPの内容を読み込ませたいECサイトにおいては、離脱の原因になったりすることも多く、転換率に大きく影響するので、採用されていないケースが多いです。

モバイルファーストという考え方

モバイルファーストという考え方

これだけスマホからのアクセスが増えてきている中で、レスポンシブウェブデザインのメリットを考えると積極的に採用することが望まれますが、同じコンテンツを使用するという部分においては、PC、スマホどちらに力を入れて作り込みをするかが重要になってきます。
スマホ用のバナーは文字が大きい方が見やすく、逆にPC用のバナーは文字が大きすぎると見にくくなります。
こだわってそれぞれのコンテンツを作り込んで表示させることも可能ですが、ただこれからはスマホからのアクセスが圧倒的に増えていくので、どちらかと言うと先にスマホに照準を合わせて作り込みを行い、レスポンシブでPCは後付けで作成する企業も増えてきています。

ECサイトにおけるレスポンシブ化は足踏み中?

2016年前半で今のところECサイトにおいては、レスポンシブウェブデザイン対応のサイトはあまり多くなく、スマホ専用ページへのリダイレクトが多いです。
ただ、レスポンシブとリダイレクトのどちらにしても、ECサイトにおいてはそれぞれのデバイスからユーザーに快適に買い物をしてもらえるような環境を作ることが重要です。
せっかくユーザーが購入するつもりでカートに入れたのに、スマホ用のカートページが使いづらくて、購入まで至らなくなるケースは多々あります。
最近はモバイルファーストの観点から、スマホECサイトに注力しているショッピングカートも多く出てきているので、今後の展開も考えて、スマホECに適したショッピングカートを選択した方が売り上げが上がりやすいと予想されます。
また、そういうショッピングカートは定期的にバージョンアップを行っているので、新しい機能などにスピーディに対応してくれる点も評価できます。

Pocket

あわせて読みたい記事