ECサイトにレスポンシブWebデザインは不向き？レスポンシブが向いているサイトとは

ECサイトはレスポンシブWebデザインには不向きなのか

ECサイトのフルリニューアルにあたりレスポンシブECサイトも検討されているお客様と接する際に良く「レスポンシブWebデザインのECサイト事例が少ないが、ECサイトにはレスポンシブWebデザインが向かないのでは？」というご質問をいただきます。

確かにレスポンシブECサイトは少ないのが現状です。そこで今回は、

• なぜECサイトにレスポンシブWebデザインが少ないのか？
• レスポンシブWebデザインはECサイトに不向きなのか？
• レスポンシブWebデザインが向いているサイトとは？

について、この1年で約100件のレスポンシブECサイト導入を実施してきた結果を踏まえ検証をしてみたいと思います。

レスポンシブWebデザインのメリット・デメリットからレスポンシブ向きサイトを考察

今回レスポンシブWebデザインの比較対称としているのは、PCはPC向け、スマホはスマホ向けというようにデバイス毎にページ制作をする従来型のページ分離構成をしているサイトになります。

そもそもレスポンシブWebデザインは、マルチスクリーン対応の解決策のために出現した技術ですので「マルチスクリーン対応が必要なサイト」がレスポンシブWebデザインの導入メリットがあることは大前提となります。

ですからスマホユーザやPCユーザのみをターゲットとしているWebサイトには、そもそもレスポンシブWebデザインは必要なく、これまでのようにページ分離構成にて、そのターゲットとするデバイスに合わせてサイト構築した方が良いことにもなります。

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

レスポンシブWebデザインを導入することのメリットは、

• サイト制作や更新作業の全体工数が少なくなること（弊社の例では約半分の作業量）
• SEOに強く、自然検索流入の拡大効果が見込めること（弊社例では約1.5倍）
• あらゆるデバイスでのCVRが高まること（弊社例では約1.7倍）
• 最近顕著なデバイス間での引継ぎ利用時の離脱やUX低下を低減できること
• マルチスクリーン利用時のUXが高いこと

などがあります。

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

またレスポンシブWebデザインのデメリットは

• 世の中に未だ参考例が少ないこと
• 経験やノウハウを持つデザイナーやマークアップ技術者、ディレクターが少ないこと
• 導入の際に運用担当者がレスポンシブ用の概念を習得する必要があること
• ワイヤーフレーム作成やサイト構成(テンプレート)を決定するTOPページの制作工程で、知識や経験が少ない方が実施すると工数が掛かる場合があること
• IE8以前のレガシーブラウザへの対応が少々困難であること
• 異なるデバイスの異なる利用方法への対応が困難であること

などがあります。

その他よくデメリットとして議論される「ページの表示速度が遅い」という問題に「レスポンシブはPC版、スマホ版両方のソースコードを読み込むから動作が遅くなるため情報量が多いサイトはPC、スマホで振り分けた方がいい」などの意見もあります。これはスクラッチでレスポンシブWebデザインのサイトを制作し運用をする場合の話です。

aishipRのようなレスポンシブWebサイト専用プラットフォーム上でレスポンシブWebサイトを構築運用する場合は、サーバ技術を組み合わせることで、表示速度を改善し、既にこれらの問題は解消されているため今回は上記デメリットには列記しておりません。

レスポンシブWebデザインは工数がかかる

またレスポンシブWebデザインは「これまで以上に制作の工数が掛かる」「制作や開発時間が長い」という意見もあります。確かに１デバイス向けサイトに比べると少々手間はかかるかもしれませんが、3デバイス分の構築運用と比較すると圧倒的に制作工数は少なくなり、これまでの約半分以下となります。

既にレスポンシブWebサイト構築の経験を積んだディレクターやデザイナーは、１デバイス向けのサイト制作と工数が変わらないという意見もあるため、「これまで以上に制作の工数がかかる」という方の意見の背景には“初めてレスポンシブサイトを作った場合は、未熟で知らないことが多いので”という補足が付くものと思われます。

弊社でレスポンシブECサイトを構築する場合は１デバイス向けECサイト構築する工数と大きく変わりありません。

制作工程で特に工数がかかるのが、ワイヤーフレーム工程、TOPページのデザイン・コーディング工程（テンプレート構築が必要なページ）です。それ以外は特段１デバイス向けとは大きく変わりありません。

また、レスポンシブWebデザインではデザインの制約が多く、「デバイスに合わせた訴求性が出せない」という意見もあります。これらについても、特に“レスポンシブっぽいデザイン”にとらわれることなく、ワイヤーフレーム設計の際に、必要な要素はデバイス毎の特性を出すようにすれば問題ないため、上記デメリットから外しています。

それではレスポンシブWebデザインにすべきサイトは？

前述の事項から考えると、以下を満たすサイトはレスポンシブWebデザインでサイトを構築運用すべきサイトであると言えます。

1. スマホ、タブレット、PCなどマルチスクリーン対応が必須のサイト(レスポンシブWebデザインの本来の目的のため)
2. ページ数が比較的多く、更新頻度が高いサイト（制作更新作業が楽なため）
3. 検索エンジンからの流入を重視するサイト（SEOに強いため）
4. どのようなスクリーンサイズ（デバイス）でも高いCVRが要求されるサイト（マルチスクリーンのUXや訴求力が高いため）
5. 引継ぎ利用が顕著なサイト（引継ぎ利用時のUXが高く離脱が少ないため）
6. レガシーブラウザへの対応があまり必要ないサイト（IE８以前への対応にはコストを要するため）
7. 新しいことを取り入れることに抵抗が少ないサイト運用組織であること（少々学習コストが発生するため）
8. デバイス毎にユーザ利用シーンが大きく異ならないこと(異なるデバイスの異なる利用方法への対応が困難であるため)

これらを考慮すると、レスポンシブWebデザインが向いている具体例としてECサイトはベストマッチではないでしょうか。特にマルチスクリーン対応が必要で、商品点数も多く、静的ページもそれなりに構成する本店ECサイトです。

リアル店舗などとのオムニチャネル展開の中で、スマホとPCの通販利用シーンが完全に異なる場合などは少々考慮をすべきですが、特殊なケースを除き通販サイトはまさにレスポンシブWebデザインが向いているということになります。

なぜレスポンシブWebデザインのECサイトが少ないのか？

私がこの1年で多くのEC事業者様とお話する中から、得たことは「ECサイトにはレスポンシブWebデザインが向かないからレスポンシブECサイトが少ないのではない」ということです。

レスポンシブECサイトが少ない理由の大半は「ECサイトを運用しているプラットフォームの問題」があります。今のプラットフォームではやりたくてもレスポンシブWebデザインが実現できないということです。

ECサイトを運用する場合、その大半が何らかのプラットフォーム（サーバやCMSやショッピングカート等のEC運用システム）上で運用されています。そもそもこのプラットフォームのサーバやCMSやショッピングカート等がレスポンシブWebデザインでのECサイト運用に対応していなければ「出来ない」ことになります。

ECサイトにレスポンシブWebデザインが少ない理由の大半はこれに当たります。なぜなら私が接しているクライアントの中でレスポンシブWebデザインを認知されている運営担当者様の大半が「導入したいが、プラットフォームが対応できない」ということを言っておられるからです。

なぜプラットフォームをスイッチできないのか

それではなぜプラットフォームをスイッチされないのか？

それはECサイト自身で収益を得ているため、固い売上や利益向上の保障がない限り、安易に実績があまり少ない新しい技術を取り入れることに億劫になる担当者や責任者が多いことが上げられます。

他にも

• カスタマイズで自社ECシステム構築されている場合、プラットフォーム自体が減価償却対象となっている。
• 多額の費用を費やした
• 自社用のカスタマイズやシステム連携を施している
• フロント側だけの変更が難しいこと

などで、そもそも現段階でECサイト運用のプラットフォーム変更は無理＝レスポンシブは無理ということになっているEC事業者様も少なくありません。

ECサイトリニューアルのタイミングでも、身軽なASPで運用されている方や減価償却が終わり、システムの見直しでのレスポンシブWebデザイン導入ということが多いのもこれらの背景があります。

ですから「ECサイトにはレスポンシブWebデザインが向かないから、レスポンシブECサイトが少ない」のではありません。単に『レスポンシブWebデザインを導入したいけどできない』EC事業者様多いことが、現段階でECサイトにレスポンシブWebデザインが少ない一番の理由です。

まさにECサイトにはレスポンシブWebデザインが最高の効果を発揮することは前述しました。これらは私たちの約100社のレスポンシブECサイト導入実績から得た揺るぎ無い事実です。ですからこれから益々レスポンシブECサイトが増えていくことも確実です。

レスポンシブECサイト構築ASP　aishipRへの無料相談・お見積りはこちら

岩波

＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
掲載元のブログではわかりやすい画像つきで公開しています。
■aishipスマートフォン＆モバイルEC事例・ノウハウ集
http://www.aiship.jp/knowhow/archives/15689
＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝