新人Webディレクターがゼロから学ぶ! CMSによる企業サイト制作 (3) スマホ向けを念頭に入れたサイトの構造化と、サイトの権限設定を考えてみた

1. レスポンシブレイアウトで、同じHTMLを表示

1つは、PCと同じHTMLをブラウザの表示横幅にあわせて最適なレイアウトで見せる方法だね。

【メリット】

1ソースなので、大規模サイトでもメンテナンスしやすい
モバイルからの閲覧性を重視し始めた検索エンジンからも、推奨されている
どの端末からもURLが同じなので、ソーシャルでシェアされるURLが散逸しない
シンプルなサイトであればベースとなるテンプレート等を用意しておけば素早く構築できる
将来、PC・タブレット・スマホとは大きく異なるサイズのネット閲覧デバイス(TVなど)が増えても、そのまま対応できる

【デメリット】

同じHTMLを表示するため、デザインやサイト内要素の配置をPCとスマホを考慮して作る必要がある
上記の考慮をした結果、デザイン上の制限が生まれる
スマホでは画面上非表示にしても、コンテンツ自体は読み込むため、無駄に容量が大きくなり表示が遅くなる場合がある
画面幅による自動レイアウトなので、スマホからPCサイトのスタイルに切り替えることができない
2. スマホ専用のページを生成して表示

2つ目は、閲覧デバイスに合わせて動的に表示サイトを分ける、または静的に/sp/などと別階層構造を作り、スマホ専用の表示ページを出力させるようにする方法かな。