SYMMETRIC Web開発ブログ
レスポンシブWebデザイン、CSSフレームワークなど、Webフロントエンド開発に関するBLOGです。
※SYMMETRIC公式BLOGと統合し、ブログ名称を変更しました

レスポンシブの視点別デメリット

レスポンシブは、コスト/複雑性/画面変化が問題

現在のWebサイトでは、PCでもスマホでも快適なUIが求められています。その際に用いられる方式がレスポンシブ(デザイン)です。1つのhtmlソースで画面サイズの違うデバイスにフィットするUIを提供できるデファクトスタンダードな方式として広く普及しています。

レスポンシブをより効率的に実現する為の様々なツールやフレームワークも数多くリリースされており、制作を支援しています。

参考:レスポンシブ対応のおすすめCSSフレームワーク5選

ただ、問題が無いわけでは無く、スマホが普及段階⇒スマホメイン⇒スマホファーストと時代が進むにつれて、問題は大きくなりつつあります。ここでは、サイトオーナー、制作者、ユーザーのそれぞの立場からの問題を整理します。

サイトオーナーにとっての問題

サイトオーナーにとって、今や重要な顧客はスマホユーザーです。ユーザーの80%以上がスマホユーザーであるサイトは、もはや珍しくは無く、益々この傾向が強まると予想されます。

つまり、2割未満のユーザーの為に、PCサイトのUIをデザインする必要があります。当然、その制作コストも負担しなくてはなりません。

しかも、PCサイトのスマホ化によって、スマホUIがPCサイトによる制約を少なからず受けることになります。そのことで、スマホ専用サイトよりもユーザビリティにおいてハンデを背負ってしまうのです。

スマホのUIを向上させたい時には、PCサイトに対する変更コストが必然的に入るため、コストが割高になるにも関わらず、制作過程にハンデを背負っている。それが、スマホサイトが既に主戦場となっている中でサイトオーナーにとって大きな問題なのです。

※この問題に正面から挑んだのが、弊社製品「スマホのサイト制作。PCは自動変換 | alter.js」です。

制作者にとっての問題

PCサイトのスマホ対応(レスポンシブ化)では通常のサイト制作よりも高い費用を請求することができます。とはいえ、2つのサイトを作るわけでは無いので、2倍以上の料金の請求は難しく、PCよりもデザインがシンプルなスマホの追加費用は1.5倍程度です。

2つの画面サイズのデザインを1つのソースに埋め込むことは、1.5倍の制作コストで間に合うのでしょうか?それぞれのデバイスに合わせるほどソースは複雑になり、融通が利かなくなります。結局、構造をシンプルにしておくことにが最良の選択となりますが、それでは競争力のあるWebデザインとはならない可能性もあります。

レスポンシブは、オープンかつ唯一のPC/スマホ共有方式であることで、ほとんどのベンダーが参入し競争が激しく、上限もある中で、収益メリットが生まれ難い状況になっています。また、コンテンツが非常に複雑なため、保守についても高い収益性を得難い状況です。これら、制作会社にとっても収益性が低いことが大きな問題なのです。

※この問題に正面から挑んだのが、弊社製品「スマホのサイト制作。PCは自動変換 | alter.js」です。

ユーザーにとっての問題

レスポンシブは通常画面サイズ(横幅)に対応してデザインが流動的に変わります。ページ全体がリキッドレイアウトによってデザインが変貌していきます。

このため、PCでウィンドウを縮小・拡大すると全く異なったUIに変化して、これまでの操作が出来なくなることも多くあります。

本来同じコンテンツですが、デザインが大きく変わるので、外出先から戻ってPCサイトを見ても、外出先で見た情報の在り処が分からなかったりします。

スマホサイトも元来PCデザインベースだったりするので、情報が多すぎたり、画像が重すぎたり、ページが長くなり過ぎたりします。これは、UIはスマホ化されても、コンテンツがスマホに最適化されていないことによります。

これら、レスポンシブで凝るほどに出てくる問題であり、ユーザーにとっても2つの画面サイズによる弊害があることが分かります。

参考:モバイルファーストとは | alter.js

レスポンシブの問題を解決する方法

レスポンシブはPCとスマホサイトを1ソースで制作する唯一の選択肢であり、問題点を指摘できても根本からこれを解決するのは難しいのが現実でした。この問題に正面から挑んだのが、弊社製品「スマホのサイト制作。PCは自動変換 | alter.js」です。

これから、如何にしてalter.jsがレスポンシブの問題を解決しようとしているかを紹介していく予定ですが、その前にレスポンシブの問題をもう少し深堀していきます。

Page Top