お問合

レスポンシブデザイン Q

スマートフォン対応のコーディングの種類を教えてください。

A

コーディングの種類は、2種類です。
スマホ対応は、マルチデバイス対応ともいわれます。

1.レスポンシブ (1頁:1ソース・2レイアウト)
方法:見ているデバイス(スマホやタブレットおよびPC)の幅を取得し表示を切り替える

利点(メリット)
・HTMLソースファイルを1つ修正するだけで更新の利便性が高い
・URLを同一にできる※1

不利点(デメリット)
・あまりそのように感じたことはありませんが、スマホに最適化されたコーディングのため複雑なデザインに対応しきれないなどが一般的に言われています。
 

※1:一昔前は、Googleアナリティクス対応が・・・的問題がありましたが、2022年現在は、デバイスアクセス別に表示できるので計測に不利ではなくなりました。


スマートフォンファーストを提唱するGoogleポリシーに沿うためスマホ対応しているサイトは、その分評価が高くなります。

2.通常 (2頁:2ソース・2レイアウト)
方法:PC用とスマートフォン用に別々にページを設け、URLを同一にしたい場合、別でもいい場合に応じてサーバー設定を行う方法があります。

利点(メリット)
・HTMLソースファイルが2つあるためスマホだけに表示などの対応がしやすい。※1
・URLを同一もしくは別にできる

※1:レスポンシブでもJSを駆使すれば、スマホだけに表示するなどの操作は可能です。

不利点(デメリット)
・同一にしたい場合、サーバー側でダイナミックサービング(dynamic-serving)の設定ができる担当者がいないと実現できない。※2

※2:イデアルデザインはこれも含めて対応が可能です。

FAQ一覧に戻る
トップページに戻る