#016
UI設計パターン
#016あだぷてぃぶでざいん
アダプティブデザイン (Adaptive Design)
別名・表記:Adaptive Web DesignAWD適応的デザイン
UIXHERO Definition
「デバイスごとに専用の画面を用意する」。レスポンシブデザインが「1つの服を伸び縮みさせる」なら、アダプティブは「S・M・Lサイズの服を用意する」イメージ。
概要
レスポンシブデザイン（RWD）とよく対比される。 RWDが「流動的（Fluid）」にレイアウトを変えるのに対し、アダプティブデザイン（AWD）は特定の画面サイズ（ブレークポイント）に対して「固定（Fixed）＝ブレークポイントごとに意図的に設計されたレイアウ」のレイアウトをスナップさせる考え方に近い（※厳密な定義は議論があるが、実務的には「デバイスごとにHTML/CSSを出し分ける」または「ブレークポイントでレイアウトをガチッと切り替える」ことを指すことが多い）。
UXでの活用
- パフォーマンス最適化: デバイスに合わせて最適な画像サイズや不要なリソースを読み込ませないことで、表示速度を高速化できる。
- 体験の個別化: 「スマホユーザーは電話をかけたい」「PCユーザーは資料請求したい」など、デバイスごとのニーズに合わせてUIを大胆に変えることができる。
💡 使いどころ
PCとスマホでユーザーの目的や機能が大きく異なる場合（例：PCは管理画面、スマホは閲覧専用）。または、ガラケー対応などレスポンシブでは対応しきれない場合。
⚠️ 注意点・誤用
複数のテンプレートを管理するため、開発・保守コストが高くなる。Googleは1つのURLで管理できるレスポンシブデザインを推奨しているため、特別な理由がない限りはレスポンシブを選ぶのが一般的。
具体例
- PCサイトでは高機能なダッシュボードを表示し、スマホサイトでは簡易的な通知リストのみを表示する。
- AmazonのアプリとPCサイトのように、UI構造が根本的に異なる場合（Webとネイティブを含めた広義のアダプティブ設計）。
出典・参考文献:
- Aaron Gustafson: Adaptive Web Design
- MDN Web Docs: Adaptive vs. Responsive Design
- Google Developers: Responsive Web Design Basics