適応型ウェブデザイン

アダプティブ Web デザイン( AWD )は、すべてのデバイスで同じように読み込まれ (そして同じように表示される)単一の静的ページや、ユーザーのデバイス/画面サイズ/ブラウザーに基づいてコンテンツをレスポンシブに並べ替えたりサイズを変更したりする単一のページとは対照的に、ユーザーのデバイスにより適合するように Web ページの複数のバージョンを作成することを推進します。

これは、ほとんどの場合、ページのモバイル版とデスクトップ版（またはほとんどの場合、ウェブサイト全体）の使用を表します。いずれかのバージョンは、 HTTP GETリクエストで定義されたユーザーエージェントに基づいて取得されます。これは、動的提供と呼ばれます。アダプティブ ウェブ デザインは、サイトをモバイルで読みやすいように最適化する最初の戦略の 1 つであり、最も一般的な方法は、モバイルとデスクトップで完全に別のウェブサイトを使用することです。モバイル デバイスは、サブドメイン（多くの場合、第 3 レベルのサブドメインで、「m」で示されます。例: http:// m .website.com/; および/または YouTube で使用されるような URL パラメーター）で提供されるサイトのモバイル版にリダイレクトされます。今日では、モバイルとデスクトップの表示に 2 つの別々の静的サイトを使用することは段階的に廃止されつつあり、代わりにサーバー側スクリプトを使用して、動的に生成されたページを提供したり、静的ページのどのバージョンを提供するかを動的に決定したりしています。ただし、モバイルとデスクトップで独立したサイトが使用されていることも、依然として頻繁に見られます。多くのウェブサイトではレスポンシブウェブデザインかアダプティブウェブデザインのいずれかの手法を採用していますが、この2つは相互に排他的ではなく、最も普遍的に読みやすいデザインのコンテンツを実現するためのベストプラクティスでは、2つの手法を組み合わせて、ハードウェアとソフトウェアの完全な範囲をサポートします。^[2]&app=m&persist_app=1

別々のフロントエンドが存在することで、どちらかで技術的な問題が発生したクライアントは、別のフロントエンドにフォールバックすることができ、問題が発生しない可能性が高まります。

アダプティブ Web デザインは、表示するデザインのレイアウトとサイズを選択するサーバー側検出のプロセスです。レスポンシブ レイアウトを含むすべての種類の Web デザイン レイアウトを使用できます。アダプティブ デザインは、一般的な画面サイズと解像度に基づいて、さまざまなデバイスにさまざまなバージョンのページを提供します。この用語は、2011 年の Aaron Gustafson の著書「Adaptive Web Design: Crafting Rich Experiences with Progressive Enhancement」で初めて使用されました。^[2]

アダプティブ Web デザインでは、単一の Web ページに複数のページ レイアウトを使用し、場合によってはプログレッシブ エンハンスメント(PE) を使用します。アダプティブ モデルは、「モバイル セパレート」レイアウトであり、「モバイル ファースト」 JavaScriptやレスポンシブ Web デザインのプログレッシブ エンハンスメントとは対照的です。「モバイル セパレート」は「モバイル ファースト」と同じ概念ですが、AWD のデザイン レイアウトは、レスポンシブ Web デザインの単一のデザイン レイアウトとは対照的に、別のベース モバイル レイアウトを持つという点が異なります。

基本的な携帯電話のブラウザはJavaScriptやメディアクエリを理解しないため、複雑で画像を多用するサイトを機能させるためにグレースフルデグラデーションに頼るのではなく、基本的なモバイルレイアウトを作成し、スマートフォン向けにプログレッシブエンハンスメントを使用することをお勧めします。^{[3] [4]}

アダプティブデザインは、デスクトップディスプレイ向けのフォーマットに限定されるのではなく、さまざまなインターフェースへの適合性に重点を置いた、Webデザインへの幅広いアプローチです。モバイルデバイスの市場シェアがデスクトップよりも大きい現在、これは特に重要です。 ^[5]動的なWebの実践は20年以上前から存在していますが、特にモバイルデバイスでの表示のためのグラフィカルレイアウトに関する動的なデザインは、より最近の概念です。CSS3メディアクエリ、AJAX、HTML5、JavaScriptなどの新しいテクノロジーは、通常、アダプティブデザインよりも効率的で効果的なレスポンシブデザインを中心に展開されています。デスクトップからモバイルへの移行により、アダプティブWebデザインからレスポンシブWebデザインへの移行が進んでいます。^{[6] [7]}

アダプティブ Web デザインは、ページが提供される前のHTTP GETリクエスト中に画面サイズを検出し、ユーザー エージェントに固有の適切に設計されたページをロードします。アダプティブ標準レイアウトでは、「一般的に、320、480、760、960、1200、1600 の 6 つの一般的な画面幅に合わせてアダプティブ サイトを設計します」。^{[8] [9]これは、モバイル最適化の一般的な方法であるだけでなく、} 4:3の低解像度 CRTモニターと高解像度16:9 LCDモニターの間の移行期間でもありました。標準的なアダプティブ Web デザインは、利用可能なさまざまなモニターに合わせて流動的なレイアウトを作成するために必要でした。^[8]

スマートフォンのごく初期の頃は、画面のサイズは大きく異なり、モバイル ウェブ ブラウザには、デスクトップ ブラウザでリッチな環境を作成するために使用される高度な機能やプラグインがありませんでした。さらに、モバイル インターネットの使用は高価で非常に低速だったため、読みやすいように画像の数を減らしたり品質を下げたり、テキストをシャープに折り返したりして、「簡素化された」モバイル ページを設計する必要がありました。アダプティブ標準ウェブ デザインへの次の大きな変化は、iPhoneの登場と3Gの普及によってもたらされました。3G によって接続速度と使用可能な帯域幅が劇的に向上しました。サイトには、iPhone 用に最適化されたモバイル レイアウト (通常はサブドメイン プレフィックス「m」) とデスクトップ レイアウトの 2 つのバージョンがあることが一般的になりました。モバイル バージョンは、通常、低品質の画像で「縮小」されており、読み込み時間を短縮するためにビデオなどのコンテンツが欠けていることもありました。デザインはタッチスクリーン デバイスの普及にも影響され、Web サイトでは、指をポインターとして使用してナビゲートしやすくするために、より大きなリンクとボタンが使用されるようになりました。その後、 4G LTEの高速モバイル ブロードバンドが広く実装されたことで、低速接続に対処するためにモバイル メディアの品質を低下させたり、コンテンツをトリミングしたりする必要がなくなりました。Google のAndroid OS の人気が高まり、スマートフォン市場にさまざまなバリエーションが導入されるにつれて、標準的な動的 Web デザインのマルチページ パラダイムは一般的ではなくなりましたが、タッチスクリーン コンテンツ デザインをデスクトップ デザインから完全に分離するために、依然として多少使用されています。マテリアル デザインやデバイス固有のレイアウトおよびカラー スキームと統合する場合、一部の開発者は、3 ページのテンプレート (Android、iPhone/iOS、デスクトップ) を作成し、それぞれのアイコンと色を変更しながら、メディア クエリを使用してレイアウトを決定する方が簡単だと感じています。この方法により、ページ デザインとコードが大幅に簡素化されますが、更新には 3 つのテンプレートすべてを編集する必要があります。

名称については合意が得られておらず、アダプティブとレスポンシブはどちらも同じ動作を指すために使用されますが、一般的にレスポンシブデザインと呼ばれるものは、標準的なアダプティブデザインよりもページレイアウトが少なく、通常は1つだけです。一般的なデバイスの画面サイズは常に変化し、非常に可変的であるため、アダプティブデザインはレスポンシブデザインよりも将来性が低く、効率性が低いと考えられています。ハイブリッドアダプティブ/レスポンシブデザインモデルには、レスポンシブレイアウトのページの複数のバージョンが含まれます。^[8]

標準的なアダプティブレイアウトでは、ページのビューポートレスポンシブスケーリング（レスポンシブウェブデザインなど）も使用できますが、デバイスや解像度ごとに異なるレイアウトを作成するアプローチは現在ではまれであり、通常は、新しいレスポンシブデザインに必要なテクノロジーを使用できない、スマートインターネット対応でないモバイルデバイスや旧式のスマートフォンのユーザーをターゲットとするサイトで見られます。^[8]

これらの概念には、アダプティブWebデザインとレスポンシブWebデザインの境界を曖昧にするバリエーションがあります。たとえば、 Djangoの「ビュー」やAJAXの一部は、さまざまなデバイスでの流動性を目的として、さまざまなバージョンのページを提供しますが、ページは静的ではなく動的に生成されます。^{[9] [10] [2]}