アダプティブ(アダプティブデザイン)
画面サイズごとに「あらかじめ用意した複数の固定レイアウト」を切り替えて表示するデザイン手法です。
レスポンシブデザインとの違い
- レスポンシブ：1 つのレイアウトが、画面幅に合わせてゴムのように連続して「伸縮」する。現在の新規制作の主流。
- アダプティブ：「スマホ用」「PC 用」など決まった幅（ブレイクポイント）ごとに、カチッと「固定レイアウトを切り替える」。
各デバイス専用に作り込みやすい反面、既存サイトの部分的なスマホ対応や、特定端末への最適化といった限られた場面で選ばれることが多い手法です。
実務における担当者のチェックポイント
- どの画面幅（ブレークポイント）でレイアウトを切り替えるかの設計。
- ユーザーの端末判定や出し分けの仕組みが正しく動いているか。
- 用意した幅の「中間サイズ」で表示が崩れていないかの確認。
※最も重要な判断基準は、「レイアウトの数だけ保守の手間（コスト）が増える」ことを、自社の運用体制でカバーできるかどうかです。
現場で陥りやすい「落とし穴」
- レスポンシブで十分な案件なのにアダプティブを選び、開発コストが膨らむ。
- 用意していない画面幅（新しいサイズのスマホなど）で見た目が大きく崩れる。
- 端末を判定するプログラムが新機種の発売に追従できず、想定外のレイアウトが表示される。
- PC 用とスマホ用でそれぞれ更新が必要なため、片方の更新漏れで情報に食い違いが起きる。
言葉をよく利用する人
- Web 担当者(発注側)
- コーダー / フロントエンドエンジニア
- デザイナー
- ディレクター
- バックエンドエンジニア
会話上での使用例
スマホ対応の方式をコーダーに相談する場面
-
Web担当者
スマホ対応はアダプティブデザインとレスポンシブ、どちらがいいんでしょう。
-
コーダー
新しく作って1つのソースで幅広く対応したいならレスポンシブが無難です。特定の端末向けに作り込みたい事情があるならアダプティブですが、レイアウトの数だけ保守の手間が増える点は頭に入れておいてください。
タブレットの横向きで表示が崩れている原因を相談する場面
-
Web担当者
タブレットを横にすると、レイアウトが崩れて見えるんですが。
-
コーダー
アダプティブはあらかじめ用意した幅以外で崩れやすいんです。対応する切り替え幅を1つ追加するか、いっそレスポンシブに切り替えるかを検討しましょう。