多デバイス対応の対応方法

「多デバイス対応」には、大きく2種類の手法があります。お客様が各デバイスのWebサイトをどのような位置付けで構築していきたいか、ご要望に応じて最適な手法をご提示します。

レスポンシブデザイン(コーディング)

  • レイアウトの切り替え方法:表示画面の横幅(Nピクセル未満はレイアウトA、Nピクセル以上はレイアウトB)
    → 厳密にはデバイスごとに切り替えているわけではないので、稀に他のデバイスを想定したレイアウトが表示されることがある。
  • 本質的にテンプレートはワンソースで開発。
  • 原則として、構成要素の順序変更や、それらの追加・削除が出来ない。
  • 対応するデバイスが増えるほど、ワンソースでの管理が煩雑になってしまう。

アダプティブデザイン(コーディング)

  • レイアウトの切り替え方法:ユーザーエージェントによるデバイス判別(スマートフォンはレイアウトA、PCはレイアウトB)
    → ユーザーエージェントの設定から漏れるものについては、通常、PC用レイアウトが表示されることになる。
  • 本質的にテンプレートはマルチソースで開発。
    → 各ページで使用するコンテンツは、PC版 / スマートフォン版で同じものを使用することが可能。
  • 別のレイアウトなので、自由なレイアウトが可能。
  • 対応するデバイスが増えても、追加するデバイス分のレイアウトを新たに開発すれば問題とならない。