alter.js BLOG
レスポンシブWebデザイン、CSSフレームワークなど、Webフロントエンド開発に関するBLOGです。

PCサイトのスマートフォン対応の基本は、CMSとレスポンシブWebデザイン

PCサイトのスマートフォン対応の基本は、CMSとレスポンシブWebデザイン

002img_main_w640

クリティカルなシステムを共通化しつつ、PCとスマートフォンでデザインを入れ替える方法の一般解として、CMSとレスポンシブWebデザインがあります。

CMSでデバイス毎にテンプレートを切り替える機能を持つものはスマートフォンに最適化したデザインを提供することが可能です。既にPCサイト構築に使用しているCMSがあり、そのテンプレート追加開発が容易であれば、それを選択することは理に適っています。

ただし、通常CMSでスマートフォンサイトを別テンプレートで作ることはスクラッチに分類されます。

002img_cms_w640

CMSはWebコンテンツを生成するサーバーで動作し、サーバーサイドのテンプレートという概念はWebアプリケーションの標準的なスタイルです。構築手法も品質管理や保守についても既存の延長である点が長所です。PCとは別のテンプレートであるため、デザインの自由度は非常に高いですが、1つ1つ作りこむ必要があります。

レスポンシブWebデザインでは、デバイスサイズ毎にCSSプロパティを切り替えます。レスポンシブWebデザインではHTMLとCSSが密接に関連して動作するため、通常は新規Webサイト構築時にのみ選択ができる手法です。レンダリングの精密な計算が必要なので、動的で複雑なコンテンツよりも、静的でシンプルなコンテンツにより適合します。

002img_responsive_w640

レスポンシブWebデザインはCSSがレンダリングされるブラウザ上で動作する点でサーバーに負荷がかからないことや、HTML/CSSだけの知識で実現できるために汎用性が高いのが長所です。HTML/CSSだけとはいえ、俗人性が非常に高く保守性は著しく悪いため、要件を如何にシンプルに抑えるかが肝となります。シンプルに抑えたコンテンツでは真の1ソースが実現できることが最大の強みです。

また、CMSでレスポンシブWebデザインのテンプレートを作るということもできるでしょう。いづれにしてもPCとスマートフォンで二重管理を防止したい場合には、対象サイトがこの2つの手法がとれるのか、とれるとしたらどの位の期間・コストが掛るのかを最初に検討するのがよいでしょう。

bnr_bottom_gc_blue

 

シンメトリックでは、スマホサイトを制作するだけでマルチデバイス対応を実現する「スマホのサイト制作。PCは自動変換 | alter.js」を提供しています。
スマホ中心のサイト制作、リニューアルをお考えでしたら、ぜひ使ってみてください。

Page Top