アダプティブ(アダプティブデザイン)
画面サイズごとにあらかじめ用意した複数のレイアウトを切り替えて表示するデザイン手法。レスポンシブが 1 つのレイアウトを伸縮させて連続的に変化させるのに対し、アダプティブは「スマホ用」「タブレット用」「PC 用」など決まった幅(ブレークポイント ブレイクポイント)ごとに、固定したレイアウトを出し分ける点が異なる。
押さえておきたいのは「レスポンシブとの使い分け」。各デバイス専用に最適化できるため作り込みやすい反面、用意した幅以外の画面では崩れやすく、レイアウトの種類だけ制作・保守の手間が増える。1 つのソースで幅広く対応できるレスポンシブが新規制作では主流で、アダプティブは既存サイトの部分対応や特定端末への最適化といった場面で選ばれることが多い。
実務で関わる点は対応するブレークポイントの設計・メディアクエリや端末判定での出し分け・各レイアウトの表示確認・用意した幅の中間サイズでの崩れチェック・ビューポート設定。保守対象が「レイアウトの数だけ」増えることを、運用体制と照らして判断する。
陥りやすいのは、用意していない画面幅で表示が崩れること。ほかにも、レイアウトの種類が増えて保守が重くなる、端末判定が新機種に追従できず想定外の表示になる、レスポンシブで十分な要件なのにアダプティブを選んでコストが膨らむ、各レイアウトの更新漏れで表示に食い違いが出る、といった点に注意する。
言葉をよく利用する人
- Web 担当者(発注側)
- コーダー / フロントエンドエンジニア
- デザイナー
- ディレクター
- バックエンドエンジニア
会話上での使用例
スマホ対応の方式を選ぶ場面
-
Web 担当者
スマホ対応はアダプティブデザインとレスポンシブどちらがいいですか
-
コーダー
新規で 1 ソースで広く対応したいならレスポンシブが無難です。特定端末を専用に作り込みたい事情があればアダプティブ。保守対象が増える点は念頭に
中間サイズの崩れを指摘する場面
-
Web 担当者
タブレットの横向きでレイアウトが崩れています
-
コーダー
アダプティブは用意した幅以外で崩れやすいです。対象のブレークポイントを追加するか、レスポンシブへの切り替えを検討しましょう