レスポンシブデザインのデメリット。ECサイトに不向きな3つの理由

レスポンシブデザイン

こんにちは。
現役ネットショップオーナー兼コンサルタントのみなこです。

ご自身のHPやブログ、ネットショップをお持ちの方であれば、一度はレスポンシブデザインという言葉を耳にしたことがあるかもしれません。

私自身も、最近「これはレスポンシブデザインのテンプレート!ただいま大人気です!」というような宣伝文句を見かけることが多くなりました。
今日ではWEBサイト構築の際にはこれを使用して当たり前、というほど一般的になっています。

ですが私はこれを自分のWEBサイト(ネットショップ)に使用しないことを決めました。

本日はその決め手となったレスポンシブデザインのデメリットにつきお話しします。

 

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

「レスポンシブデザイン」(正確にはレスポンシブウェブデザイン)とは、ユーザーが閲覧するデバイスのウィンドウ幅に応じて、見やすい表示に自動で切り替える仕組みを持つデザインのことです。

スマートフォンを操作していると、今でもよくスマートフォン用に最適化をしておらず、パソコン画面と同じものがそのまま表示されるWEBサイトに出会うことがありますが、それらのWEBサイトはどうしても見づらい部分が発生してしまったり、ボタンクリックなどの操作がしづらいなどの難点があります。

そしてこのような使いづらさはサイトを訪れたユーザーの離脱率にも直結し、これがネットショップであれば売り上げそのものにも悪影響を与えてしまいます。

そのような残念なことにならないよう、スマートフォンを最適化する方法の1つとして今注目を集めているのがこの「レスポンシブデザイン」なのです。

 

レスポンシブデザインの例

レスポンシブデザイン

(参照:https://shop-pro.jp/news/141201_mode/)

 

レスポンシブデザインにはデメリットがある

私が利用しているネットショップ作成サービス【カラーミーショップ】でもおしゃれなレスポンシブデザインのテンプレートがたくさん用意されていました。

が、この記事冒頭にも書きましたように、私は自分が運営するネットショップにレスポンシブデザインのテンプレートを使用しないことを決めました。

なぜならネットショップに使うには不向きとも言える理由があるからです。

 

スマホページが重くなる

最近のネットショップは、サイトを開いた瞬間パッと大きな画像が目に入ってくるようなインパクトのあるデザインが人気です。
その他、目立つ大きなバナーをトップページに表示したりして、トップページを華やかにしたい場合もあるかもしれません。

ですがPCの場合はともかく、このような大きな画像をスマホで表示させようとすれば大変無理がかかってしまいますので、スマホの場合はこれを小さな画像に変えたり、非表示にするようサイト構築せねばなりませんが、レスポンシブデザインの場合、その特徴としてPCであろうとスマホであろうと全ての端末を1つのHTMLで管理しています。

ということは、例えば大きな写真を「480ピクセルのときは非表示」(つまりスマホでは非表示)という風にCSSに記述しておいたとしても、
HTML上にある「img src=”xxx.jpg”」が消えるわけではありませんのでスマホは一旦そのソースを読み込もうとし、負担が重くなり表示速度が遅くなってしまうのです。

 

テンプレートデザインに制約ができる

レスポンシブデザインでは、どんな端末を使っても見やすい画面表示になるように、元からレイアウトや挿入する画像サイズ・配置位置などが絶妙なバランスで設計されています。

ということは逆から言えば、レスポンシブデザインのテンプレートは無難で自由度の低いデザインになっている場合が多いということです。

これではPCやスマホの端末ごとの特徴を十分に発揮したレイアウトやデザインができなくなるので、訴求力の低下やコンバージョンの低下に繋がってしまう可能性も否めません。

 

カスタマイズに気を遣う

レスポンシブデザインでは、「PCの場合はこのような画面表示、スマホの場合はこのような画面表示」という風に1つのCSS内に条件ごとに分けて記述をするため、CSSが長く複雑になりがちです。

そのためそれほどサイト構築に詳しくない人がここをいじってしまうとデザインや画面のバランスを大きく崩してしまうことがあり、またパソコンでの画面表示を変更したかっただけなのに、思いがけずスマホ表示の画面バランスを崩してしまった、というようなことも珍しくないケースです。

ネットショップを運営していると、表示させるコンテンツを変更したりレイアウトを変更したりなどカスタマイズの必要が出てくる場合が多々ありますが、そのようなときはよほどWEBサイト構築についての知識を持った人がやるか、またはそうでないならば「PC・タブレット・スマホ」全てによほど気を配りながら作業せねばならないということになります。

 

終わりに

以上、ECサイトにレスポンシブデザインが不向きである、と言える理由をご紹介しました。

もしあなたが今ECサイトの開設やデザイン変更を検討しており、レスポンシブデザインもその選択肢の中にあるならば、これらのデメリットがあることもよく知った上で利用するようにして下さい。







シェアして頂けると飛び上がって喜びます

2 件のコメント

  • はじめましてhiroです。
    私も仕事でカラーミーを使用していますが、
    レスポンシブを気にしながら、
    PCのサイトを作り上げているので・・・
    中々、手間が掛かっています^^;
    レスポンシブの見直しも検討してみます。
    記事とても参考になりました⤴
    またお邪魔させて頂きます!
    応援ポチして帰ります!

    • hiroさん、コメントをありがとうございました。
      お仕事で使っていらっしゃるのでしたらそう簡単に見直しもできないですよね。
      でも参考になったと言っていただけてとても嬉しいです。
      私もカラーミーユーザーですので、使い方などまたアップしていきますのでぜひまた覗いてみてください★

  • コメントを残す

    メールアドレスが公開されることはありません。 * が付いている欄は必須項目です