アダプティブウェブデザイン
Twitterの元祖モバイルウェブフロントエンドである「M2 Mobile Web」は、その後、JavaScriptをサポートしていないクライアントや、ウェブ閲覧機能が制限されているゲーム機など、互換性のないブラウザを利用するクライアント向けのフォールバックレガシーバージョンとして機能しました。2020年12月にサービスが終了しました。[ 1 ]

アダプティブ ウェブ デザイン( AWD ) は、すべてのデバイスで同じように読み込まれ (同じように表示される)単一の静的ページや、ユーザーのデバイス/画面サイズ/ブラウザーに基づいてコンテンツの順序やサイズが応答的に変更される単一のページではなく、ユーザーの デバイスにより適合するように複数のバージョンのウェブ ページを作成することを推進します。

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

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

技術的な定義

アダプティブウェブデザインとは、サーバー側でデザインレイアウトと表示サイズを選択するプロセスです。レスポンシブレイアウトを含む、あらゆる種類のウェブデザインレイアウトを使用できます。アダプティブデザインは、一般的な画面サイズと解像度に基づいて、異なるデバイスに異なるバージョンのページを提供します。この用語は、アーロン・グスタフソンが2011年に著した著書『アダプティブウェブデザイン：プログレッシブエンハンスメントによるリッチなエクスペリエンスの実現』で初めて提唱されました。[ 2 ]

技術用語

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

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

技術の進歩は必然をもたらす

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

歴史、適応、進化

アダプティブウェブデザインは、 HTTP GETリクエスト中に画面サイズを検出し、ユーザーエージェントに合わせてページを調整します。通常、アダプティブサイトは320、480、760、960、1200、1600の6つの画面幅に合わせて設計されます。[ 8 ] [ 9 ]これはモバイル最適化のための一般的な手法であるだけでなく、 4:3の低解像度CRTモニターと高解像度16:9のLCDモニター間の移行期にも用いられました。標準的なアダプティブウェブデザインは、利用可能な様々なモニターに合わせて柔軟なレイアウトを作成するために必要でした。[ 8 ]

スマートフォンの黎明期には、画面サイズは多種多様で、モバイルブラウザにはデスクトップブラウザのような高度な機能やプラグインがありませんでした。また、モバイルインターネットは高価で速度も遅かったため、読みやすさを重視し、画像の数を減らしたり低品質にしたり、テキストフォーマットを簡素化したりした「簡素化された」モバイルページを設計する必要がありました。[ 10 ] iPhoneの登場と3Gネットワ​​ークの普及により、接続速度と帯域幅が大幅に向上し、大きな変化が起こりました。ウェブサイトには、モバイルレイアウト（多くの場合「m」サブドメインを使用）とデスクトップレイアウトの2つのバージョンが用意されるのが一般的になりました。モバイル版は依然として縮小版が多く、画質が低下し、読み込み時間を短縮するために動画などのコンテンツが制限されていました。タッチスクリーンの普及もデザインに影響を与え、指での操作を容易にするためにボタンやリンクが大きくなりました。その後、4G LTEの普及により、メディアの品質やコンテンツを妥協する必要性が減りました。 GoogleのAndroid OSの人気が高まり、スマートフォン市場に多様な選択肢がもたらされるにつれ、標準的な動的ウェブデザインのマルチページパラダイムは一般的ではなくなりましたが、タッチスクリーン向けコンテンツのデザインとデスクトップ向けデザインを完全に分離するために、依然として一定の活用が見られます。マテリアルデザインやデバイス固有のレイアウトやカラースキームと統合する場合、一部の開発者は3ページのテンプレート（Android、iOS、デスクトップ）を作成し、それぞれのアイコンと色を調整し、レイアウトにはメディアクエリを使用します。これによりデザインとコードが簡素化されますが、3つのテンプレートすべてを更新する必要があります。

レスポンシブWebデザインとアダプティブWebデザイン

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

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

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

参照

  • AJAX  – 相互に関連するWeb開発技術のグループリダイレクト先の簡単な説明を表示するページ
  • 後方互換性 – 古い技術とやり取りできる技術的能力リダイレクト先の簡単な説明を表示するページ
  • コンテンツネゴシエーション – 同じURIで複数のドキュメントを提供する
  • CSS  – スタイルシート言語
  • メディアクエリ
  • モバイルファースト - さまざまなデバイスでウェブページが適切に表示されるようにするためのウェブデザインのアプローチリダイレクト先の簡単な説明を表示するページ
  • ポリフィル（プログラミング）  - ウェブブラウザでサポートされていない機能を実装するためのコード
  • レスポンシブWebデザイン - さまざまなデバイスでWebページが適切に表示されるようにするためのWebデザインアプローチリダイレクト先の簡単な説明を表示するページ
  • ユーザーインターフェース – ユーザーが機械と対話し、制御する手段リダイレクト先の簡単な説明を表示するページ
  • ビューポート – コンピュータグラフィックスにおけるポリゴンの表示領域

参考文献

  1. ^ 「従来のTwitterサービスが終了し、3DSからツイートできなくなりました」 ScreenRant 、 2020年11月28日。
  2. ^ a b cグスタフソン、アーロン.アダプティブWebデザイン：プログレッシブエンハンスメントによるリッチな体験の実現. Easy Readers, LLC; 第1版、2011年. ISBN 978-0-9835895-0-1
  3. ^ 「Graceful Degradation versus Progressive Enhancement」 2009年2月3日. 2014年11月13日時点のオリジナルよりアーカイブ。 2016年12月21日閲覧。
  4. ^パーカー, トッド; ワックス, マギー・コステロ; イェール, スコット (2010年2月).プログレッシブエンハンスメントによるデザイン. p. 456. ISBN 978-0-321-65888-3. 2010年3月1日閲覧。
  5. ^ 「デスクトップ vs モバイルの世界市場シェア」StatCounter Global Stats . 2024年2月19日閲覧。
  6. ^ 「デスクトップからモバイルへの移行：それが重要な理由と対処法」 Smart Insights、2018年12月7日。 2024年12月12日閲覧。
  7. ^ 「デスクトップからモバイルへの移行 - 米国のウェブサイトデザイン」 A.ウェブサイト. 2024年12月12日閲覧。
  8. ^ a b c d Adiseshiah, Emily Grace (2016年3月1日). 「Webデザインの選択：レスポンシブ vs アダプティブ」 .
  9. ^ a b「10000 画面対応の設計 レスポンシブ Web デザインのための 4 つのレイアウト ヒント」。
  10. ^ Teodorescu, A. (2023-07-14). 「モバイルインターネットの台頭：ポータブルデバイスの進化の軌跡」 .国際ビジネスエクセレンス会議議事録. 17 ( 1): 1645. doi : 10.2478/picbe-2023-0147 .
  11. ^ 「レスポンシブWebデザイン」 MDN 2025年7月1日. 2025年7月4日閲覧。
  12. ^ファートマン、マキシミリアーノ（2010年7月30日）『モバイルWebプログラミング』p.512. ISBN 978-0-596-80778-8。
「 https://en.wikipedia.org/w/index.php?title=Adaptive_web_design&oldid=1317151398」から取得