現在のWebサイトでは、PCでもスマホでも快適なUIが求められています。その際に用いられる方式がレスポンシブ(デザイン)です。1つのhtmlソースで画面サイズの違うデバイスにフィットするUIを提供できるデファクトスタンダードな方式として広く普及しています。レスポンシブをより効率的に実現する為の様々なツールやフレームワークも数多くリリースされており、制作を支援しています。参考:レスポンシブ対応のおすすめCSSフレームワーク5選ただ、問題が無いわけでは無く、スマホが普及段階⇒スマホメイン⇒スマホファーストと時代が進むにつれて、問題は大きくなりつつあります。ここでは、サイトオーナー、制作者、ユーザーのそれぞの立場からの問題を整理します。サイトオーナーにとっての問題サイトオーナーにとって、今や重要な顧客はスマホユーザーです。ユーザーの80%以上がスマホユーザーであるサイトは、もはや珍しくは無く、益々この傾向が強まると予想されます。2割未満のユーザーの為に、PCサイトのUIをデザインする必要があります。その制作コストも負担しなくてはなりません。PCサイトのスマホ化によって、スマホUIがPCサイトによる制約を少なからず受けることになります。そのことで、スマホ専用サイトよりもユーザビリティにおいてハンデを背負ってしまうのです。スマホのUIを向上させたい時には、PCサイトに対する変更コストが必然的に入るため、コストが割高になるにも関わらず、制作過程にハンデを背負っている。それが、スマホサイトが既に主戦場となっている中でサイトオーナーにとって大きな問題なのです。※この問題に正面から挑んだのが、弊社製品「スマホのサイト制作。GCモバイルファースト」です。制作者にとっての問題PCサイトのスマホ対応(レスポンシブ化)では通常のサイト制作よりも高い費用を請求することができます。いえ、2つのサイトを作るわけでは無いので、2倍以上の料金の請求は難しく、PCよりもデザインがシンプルなスマホの追加費用は1.5倍程度です。2つの画面サイズのデザインを1つのソースに埋め込むことは、1.5倍の制作コストで間に合うのでしょうか?それぞれのデバイスに合わせるほどソースは複雑になり、融通が利かなくなります。結局、構造をシンプルにしておくことにが最良の選択となりますが、それでは競争力のあるWebデザインとはならない可能性もあります。レスポンシブは、オープンかつ唯一のPC/スマホ共有方式であることで、ほとんどのベンダーが参入し競争が激しく、上限もある中で、収益メリットが生まれ難い状況になっています。コンテンツが非常に複雑なため、保守についても高い収益性を得難い状況です。これら、制作会社にとっても収益性が低いことが大きな問題なのです。※この問題に正面から挑んだのが、弊社製品「スマホのサイト制作。GCモバイルファースト」です。ユーザーにとっての問題レスポンシブは通常画面サイズ(横幅)に対応してデザインが流動的に変わります。ページ全体がリキッドレイアウトによってデザインが変貌していきます。このため、PCでウィンドウを縮小・拡大すると全く異なったUIに変化して、これまでの操作が出来なくなることも多くあります。本来同じコンテンツですが、デザインが大きく変わるので、外出先から戻ってPCサイトを見ても、外出先で見た情報の在り処が分からなかったりします。スマホサイトも元来PCデザインベースだったりするので、情報が多すぎたり、画像が重すぎたり、ページが長くなり過ぎたりします。これは、UIはスマホ化されても、コンテンツがスマホに最適化されていないことによります。これら、レスポンシブで凝るほどに出てくる問題であり、ユーザーにとっても2つの画面サイズによる弊害があることが分かります。GCモバイルファーストレスポンシブの問題を解決する方法レスポンシブはPCとスマホサイトを1ソースで制作する唯一の選択肢であり、問題点を指摘できても根本からこれを解決するのは難しいのが現実でした。この問題に正面から挑んだのが、弊社製品「スマホのサイト制作。GCモバイルファースト」です。これから、如何にしてGCモバイルファーストがレスポンシブの問題を解決しようとしているかを紹介していく予定ですが、その前にレスポンシブの問題をもう少し深堀していきます。コメントをキャンセルメールアドレスが公開されることはありません。date*日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)検索:最近の投稿サイドバー内のコンテンツをスマホに配置するための3つの方法レスポンシブデザインのレイアウトパターンと実装方法レスポンシブ対応するためのCSSの書き方レスポンシブサイト用ブレイクポイント考察!時代に適するサイズとは?レスポンシブデザインがSEOに有利な理由レスポンシブデザインの確認が簡単に出来るChromeのデベロッパーツールの使い方レスポンシブ対応ページの簡単な作り方!導入部分を解説します。modernthemes.net。