ECサイトにはレスポンシブデザインを使うべきではないのか？という議論は、ネットを中心にくすぶり続けています。

その真偽のほどは一体どうなのでしょうか。今回は、レスポンシブデザインのメリット・デメリットをはじめ、ECサイト制作をレスポンシブデザインで行うことがNGとされる理由についてもわかりやすくお伝えしていきます。自社のECサイトをレスポンシブデザインにすべきか否か悩んでいるという方はぜひ参考にしてください。

WEBコンサルタントのご紹介

弊社は、上場企業も含め50社以上のECサイト制作に携わってきました。
ECサイトは、一から構築すると莫大な費用がかかってしまいますが、弊社はWordPressを使用し、最小限に費用を抑えたECサイトの構築が得意です。ECサイトの制作で費用が気になるという方は、お気軽にご相談ください！

ZERO式ECサイト制作はこちら

レスポンシブデザインとは？

レスポンシブデザインとは、閲覧するデバイスに応じて自動的にWebサイトが見やすいサイズに切り替わるデザインです。1つのHTMLファイルで制作・管理ができ、運営サイドの作業の効率化にも役立つとあって、さまざまなホームページで採用されています。

スマートフォンユーザーが大勢を占めている昨今、スマホ専用デザインを採用するかオールラウンダーのレスポンシブデザインを採用するかは、サイトを制作する際に必ずと言っていいほど迫られる選択となっています。

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

さまざまなWebサイトで採用されているだけあって、レスポンシブデザインには以下の4つのメリットがあります。

・修正や改修に手間がかからない
・デザインの作業工数が少ない
・管理しやすい

それでは各項目について詳しくご説明していきましょう。

修正や改修に手間がかからない

先ほどもお伝えしたように、レスポンシブデザインなら制作から公開後の修正・更新などの運用作業までをたった1つのHTMLファイルで行うことができます。時短になって業務の効率化が図れるだけでなく、操作が1度で済むことから修正漏れを低減させることも可能。運用にかかる工数を抑えられるのは大きな魅力です。

デザインの作業工数が少ない

レスポンシブデザインは、管理運用に手間がかからないだけでなく、デザイン工程でも手間を減らすことができます。基本的にはPC用に作成したデザインをもとにしてリサイズするだけなので、わざわざ他のデバイス用に別途デザインを施すのに比べたら工数が少なく済むのは当然です。

管理しやすい

レスポンシブデザイン使用するURLが1つで済むため、サイト管理が非常に楽です。トップページ・商品ページをはじめ、商品カテゴリ・お問い合わせ・会社情報など、他種類のホームページと比べてページ数が多くなるECサイトにとって、複数のURLを保持してそれぞれに管理するのは大変ですが、レスポンシブならページ数がどれだけ増えても1デザインで管理可能です。また、スマホで閲覧しているユーザーをPC版に飛ばしてしまって不便を感じさせるというミスもありません。

Google推奨

SEO対策を考えれば、絶対に無視できないのがGoogle基準ですが、Googleはレスポンシブデザイン推奨を公言しています。その理由としては、PC版とスマホ版デザインをを同一ファイルで作成すると、Googleのクローラが巡回する際の工数を減らすことができ効率的であることと、クローラが持ち帰ってインデックスする容量自体も少なく済むためです。

こうした背景からレスポンシブデザインはSEO的に有利と言われていますが、レスポンシブでなくても上位表示されているECサイトはいくらでも存在するので、SEOという観点ではさほど重要要素とは考えられていません。

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

レスポンシブデザインには便利なメリットがありますが、その反面デメリットも存在します。主なデメリットとしては以下の3つが挙げられます。

・デザインに制約が生じる
・スマホ特有の操作方法に対応しなければならない
・構築工数がかかる

それでは各項目を詳しくご説明していきましょう。

デザインに制約が生じる

レスポンシブデザイン最大のデメリットと言えるのが、デザインの自由度の低さです。Webサイトは、閲覧するデバイスそれぞれの持ち味を活かしたデザインによって魅力を発揮するという側面があり、PC版のデザインをリサイズするだけでスマホに適応させてしまえば、単調かつ無難などこにでもある見た目となってしまい、自社の個性を出すことができないこともあります。

スマホ特有の操作方法に対応しなければならない

見た目の問題だけでなく、PCとスマホではユーザーの操作にもかなり違いがあります。スマホにはタップ・フリック・スワイプなどスマホ特有の操作方法があり、PC版の複雑なデザインをそのまま反映させた場合、操作性も高めることはなかなか難しいものです。単純なデザインなら問題ないケースもありますが、デザインにある程度個性を持たせたいECサイトですと、レスポンシブデザインでは操作性が落ちてしまうことが想定されます。

構築工数がかかる

レスポンシブデザインの大きなメリットはデザインが1つで済み工数が減ることですが、その一方でシステム構築には時間と手間がかかってしまいます。各デバイスに応じて見せ方を調整しなければならないため当然のことですが、構築の工数が増えることで『デザインにかかる工数が減る』というメリットは相殺されてしまうと思っておいた方が良いでしょう。

レスポンシブデザインだけでは、100％スマホに最適化されたデザインというのは難しいです。そのため、ユーザー満足度を追求するのであればスマホ用にデザインを制作することをおすすめします。
Googleはレスポンシブデザインを推奨していますが、スマホサイトの適切なSEO対策を行うことによって十分に上位表示を狙うことができます。

ECサイトがレスポンシブがNGと言われる理由

レスポンシブデザインのメリット・デメリットをご紹介した時点で1つ言えることは、レスポンシブデザインで顧客満足度の高いECサイトを作るには限界があるということです。ここでは、その理由を具体的に解説していきます。

レスポンシブデザインだけでは使いやすさを求めることが難しい

そもそもPCとスマホの画面はかなり異なるもので、それぞれに見やすいサイズやレイアウト、適した画像などが違います。

レスポンシブデザインは基本的にPCサイズ用デザインをスマホにも転用するので、見やすさという意味でも使いやすさという意味でも、どうしても専用デザインよりも見劣りしてしまいます。

スマホユーザーが圧倒的多数となっている今、スマホ画面で使いづらいとなると、現実問題ユーザーからの支持を得にくくなってしまうでしょう。

決済手段の違い

意外と盲点となっているのが、PCとスマホの決済方法の違いです。PCの場合には、口座番号や口座名義人などの個人情報入力が不可欠です、一方のスマホはボタン1つで決済が完了するのが一般的。近頃ではLINE PayやApple Payといった便利なスマホ決済が台頭し、その簡便性は急速に世間に定着しています。こうなるとスマホ版のECサイトには決済画面の制作自体が不要となるケースも想定できるため、PC版とスマホ版ではもともとの制作上の方法論が違ってくるのです。

物理的にレスポンシブの対応ができない

ECサイトを運用する上で欠かせないのがプラットフォーム。プラットフォームとは、サーバ・CMS・ASPといったツールを動かすための基礎となるシステムです。場合によっては、このプラットフォームがレスポンシブデザインに対応していないこともあるので、良い悪いという以前に物理的にレスポンシブを採用できないケースが考えられます。

あえてレスポンシブデザインにしないという選択も必要

ここまでご説明したレスポンシブデザインの特徴から判断すると、よほど合理的な理由がない限り、ECサイトを制作する際にはPC版とは別にスマホ専用デザインを制作することも選択肢に入れるのが賢明です。

レスポンシブデザインか否かがCVRを左右するということではないですが、ユーザーの使い勝手に関わる問題であるため、もしもレスポンシブデザインを採用してスマホ画面が使い辛くなった場合に、ユーザーが離脱する可能性は否定できません。

もちろん、企業・店舗によってはレスポンシブルデザインでもユーザーに不利益を与えず済む場合もあります。まずは自社のECサイトが、レスポンシブデザインで良いのかどうかを見極めることが重要です。

レスポンシブデザインで制作してるECサイト

ECサイトはできればレスポンシブデザインよりもPC版スマホ版と分けてデザインを用意した方が何かとうまくいくというのが弊社の持論ですが、レスポンシブデザインで制作しうまく機能しているECサイトも存在しますので、以下に5例ご紹介します。レスポンシブでもOKなECサイトの特徴に注目してご覧ください。

GAP

ゆとりを持ったデザインのPC版に対し、スマホ版はそれを縮小しただけであるのが特徴のECサイトです。基本デザインは両者全く変わりません。もともとシンプルなレイアウトで商品を見やすく作ってあるため、小さくリサイズされても支障がないだけでなく、情報量が変わらないこともユーザーに不便を与えずに済む点です。レスポンシブのメリットを最大限活かしたもともとのデザインが成功の秘訣と言えます。

ニトリ

スマホ向けデザインになると自動的に情報量が減るようになっているレスポンシブデザインです。商品に狙いをつけてアクセスしてくるユーザーも多いため、検索しようとした時に文字の入力欄が拡大される仕掛けは大変有用であるほか、情報量の少なさをカバーしているとも言えます。大手人気家具会社なのでユーザーが商品を認知している可能性も高く、検索前提で情報量の少なさが通用しているとも言えます。

SONY

スマホ向けに切り替わると、サイズの縮小やレイアウトの変更が起こるレスポンシブデザインの王道と言えるECサイトです。スマホユーザーの使い勝手を十分に配慮したデザイン変化がなされており、顧客満足度の高いサイトとなっています。スマホの小さな画面でもしっかりと内容を把握できる見出しデザインで、商品にまつわるためになるコンテンツも多数掲載しています。

Neiman Marcus

そもそものデザインが非常にシンプルで余裕のあるサイズ感なので、スマホ向けに切り替わっても違和感なく見やすいサイトとなっています。単純な作りであることから、タップやスワイプなどスマホ特有の動きがしやすく、操作性の高さも際立っています。ヘッダのグローバルナビゲーションも間違えにくいよう明確に仕分けされ、英語のサイトながら日本人にも迷い少なく使える仕上がりとなっています。

SKINNY TIES

余白の多いおしゃれなレスポンシブデザインを採用しているECサイトです。シンプルな分、グローバルナビゲーションのタブごとに画像つきでメニュー内容が現れたり、カラー・柄別にネクタイ画像を並べてカテゴリタブ代わりにしていたり、ヘッダーのお得情報が触れると変色したりと、目で楽しませる仕掛けが豊富で、シンプルながら個性を出した画面作りが印象的です。

まとめ：ユーザーに適したECサイトを心がけよう

今回はレスポンシブデザインとECサイトの相性について解説してきました。レスポンシブデザインは1つのファイルでサイトを制作し、なおかつ1つのURLでサイトの運用管理ができて非常に便利ではありますが、PC向けのデザインをスマホ向けにリサイズすることで、少々がっかりな見た目になってしまうこともあります。

また、スマホユーザーにとって操作性が悪くなるケースも見られるため、ユーザーファーストでありたいとお考えのECサイト運営者の方は、自社のサイトはレスポンシブデザインで本当に良いのか、よく検討してから決定されることを強くおすすめします。

WEBコンサルタントのご紹介

弊社は、上場企業も含め50社以上のECサイト制作に携わってきました。
ECサイトは、一から構築すると莫大な費用がかかってしまいますが、弊社はWordPressを使用し、最小限に費用を抑えたECサイトの構築が得意です。ECサイトの制作で費用が気になるという方は、お気軽にご相談ください！

ZERO式ECサイト制作はこちら