応答性と適応性のあるWebデザインの違い

by ジェレミージラール

マルチデバイスWebデザインへの2つの異なるアプローチの比較

反応的で適応性のあるWebデザインは、さまざまな画面サイズでうまく動作するマルチデバイス対応のWebサイトを作成するための両方の方法です。レスポンシブウェブデザインはGoogleによって推奨されており、2つのアプローチの中でより一般的ですが、マルチデバイスウェブデザインのこれらの方法はどちらも長所と短所があります。

応答性と適応性のあるウェブデザインの違いを見てみましょう。具体的には、これらの主要分野に焦点を当ててみましょう。

容易な開発
デザインに対するコントロールのレベル
デバイス/画面サポートの幅
ソリューションが将来どのようにフレンドリーか
全体のダウンロード速度とサイトのパフォーマンス

いくつかの定義

応答性と適応性の高いWebデザインを並べて比較する前に、これらの2つのアプローチの高度な定義を見てみましょう。

応答性の高いWebサイトは、使用されている画面サイズに関係なく、変化し適応する流動的なレイアウトを持っています。メディア照会を使用すると、ブラウザのサイズを変更した場合でも、応答しているサイトでも「オンザフライ」で変更することができます。

アダプティブデザインでは、あらかじめ決められたブレークポイントに基づいて固定サイズを使用して、ページが最初に読み込まれたときに検出される画面サイズに最も適したレイアウトバージョンを提供します。

これらの幅広い定義が整ったので、我々の重要な分野に注目しましょう。

容易な開発

対応型Webデザインと適応型Webデザインの最も大きな違いは、これらのソリューションがWebサイトに適用される方法です。レスポンシブデザインは完全に流動的なレイアウトを作成するので、サイトを一から見直しているプロジェクトに最適です。既存のウェブサイトのコードを改造してレスポンシブにすることは、しばしば厄介なことです。そのコードを最初から開発し、そのプロセスの最も初期の段階で応答性の高いデザインを考慮する場合には、。これは、サイトを改造して応答性の高いものにすると、既存のコードベース内にとどまるために妥協を強いられることを意味します。

既存の固定幅のWebサイトを使用している場合、適応アプローチは、サイトがそのまま設計されたサイズのままにして、必要に応じて追加の適応ブレークポイントを追加できることを意味します。場合によっては、プロジェクトの予算が小さく、少量の開発作業にしか対応できない場合は、小さな画面/モバイル中心のサイズに対して新しい適応ブレークポイントを追加することもできます。つまり、大きな画面に同じレイアウトを使用することを許可します。おそらく、そのサイトがもともと設計していた可能性のある960のブレークポイントバージョンです。

適応型アプローチの利点は、既存のサイトのコードをより有効に活用できることです。ただし、欠点の1つは、サポートするブレークポイントごとに異なるレイアウトテンプレートを作成することです。これは長期的にこのソリューションを開発し、維持するのに必要な作業負荷に影響を与えます。

デザインコントロール

応答性の高いWebサイトの強みの1つは、適応性のあるアプローチで決められた事前設定されたブレークポイントだけではなく、すべての画面サイズを適応させてサポートできるということです。しかし、現実的には、応答性の高いサイトでは特定の重要な画面サイズ（通常は市場で入手可能な一般的なデバイスに対応するサイズ）が大きく見える場合がありますが、一般的な解像度間で視覚的なデザインがしばしば崩れます。

たとえば、1400ピクセルのワイド画面レイアウト、960ピクセルの中間画面サイズ、480ピクセルの小さな画面の外観でサイトが大きく見える場合がありますが、これらのサイズの中間の状態はどうですか？デザイナーとしては、これらの中間のサイズをほとんど制御することはできません。そのサイズのページの視覚的な外観は、しばしば理想的ではありません。

アダプティブウェブサイトでは、設定されたブレークポイントに基づいて固定されたサイズなので、使用されているさまざまなレイアウトをより多く設計できます。訪問者に配信される各 "ルック"（各ブレークポイントの表示を意味する）を慎重に設計したため、間違った中間状態は問題になりません。

このレベルのデザインコントロールが魅力的であるように、あなたはそれが価格で提供されることに気づく必要があります。はい、すべてのブレークポイントの外観を完全に制御できますが、それはそれらのユニークなレイアウトごとに設計するのに必要な設計時間を費やさなければならないことを意味します。設計するブレークポイントが多いほど、そのプロセスに費やす時間は長くなります。

サポートの幅

応答性と適応性の両方のウェブデザインは、特に現代のブラウザではかなり堅牢なサポートを受けています。

適応性のあるWebサイトには、画面サイズの検出にサーバーサイドコンポーネントまたはJavaScriptが必要です。明らかに、アダプティブサイトにJavascriptが必要な場合は、ブラウザがそのサイトを正しく動作させるために有効にする必要があることを意味します。ほとんどの人がブラウザにJavascriptを持っているので、それは大きな懸念事項ではないかもしれませんが、サイトが何かに重大な依存関係を持つときはいつでも注意する必要があります。

レスポンシブなウェブサイトとそれを動かすメディアクエリは、現代のすべてのブラウザでうまく機能します。バージョン8以降はメディアクエリをサポートしていないため、Internet Explorerの最も古いバージョンでのみ問題が発生します。この問題を回避するには、Javascript polyfillがよく使用されます。つまり、少なくとも古いバージョンのIEではJavascriptにも依存しています。繰り返しますが、特にサイト分析で、以前のバージョンのブラウザを使用している訪問者が多くないことがわかっている場合は、これは大きな懸念事項ではありません。

将来のフレンドリーさ

レスポンシブウェブサイトの流動的な性質は、将来の利便性を考えると、アダプティブサイトよりも優れています。これは、これらの応答サイトが、以前に確立されたブレークポイントのセットのみを収容できるように構築されていないためです。今日市場に実際には存在しないかもしれないものを含む、 すべての画面に合わせて適応します。つまり、新しい画面解像度が突然普及した場合、応答性の高いサイトを「固定」する必要はありません。

デバイスのランドスケープでの多様性を見てみると（2015年8月現在、24,000種類以上の異なるAndroid搭載デバイスがあります）、この幅広い画面に対応するために最善を尽くすサイトは、将来の利便性にとって非常に重要です。これは、将来的にランドスケープが多様化する可能性が低いためです。つまり、特定の画面やサイズの設計が不可能になった場合、その現実に到達していない場合です。

この比較シナリオの反対側では、サイトが適応性があり、市場で重要になる可能性のある新しい解決策に対応していない場合、作成したサイトにそのブレークポイントを追加することが強制されることがあります。これにより、設計と開発の時間がプロジェクトに追加されます。つまり、サイトに追加する必要がある新しいブレークポイントがマーケットに導入されないように、適応型サイトを一貫して監視する必要があります。繰り返しますが、デバイスの多様性はそのままで、新しいサイズを常にチェックし、新しいブレークポイントで対応できるようにすることは、サイトをサポートするために必要な作業やそのメンテナンスのコストに影響します。サイトの対象となる会社または組織

パフォーマンス

レスポンシブなウェブデザインは、ダウンロードスピード/パフォーマンスの観点からは貧弱な解決策であると長く非難されています（多くの場合、不公平です）。これは、このアプローチの初期段階では、多くのWebデザイナーがサイトの既存のCSSに小さな画面のメディアクエリを単純に貼り付けたという事実が主な原因です。これにより、小さな画面で最終レイアウトで使用しなくても、大きな画面用のイメージとリソースがすべてのデバイスに配信されました。現時点ではレスポンシブなデザインが長い道のりを歩んできましたが、現時点では質の高いレスポンシブルサイトはパフォーマンス上の問題を抱えていません。

遅いダウンロード速度と肥大化したウェブサイトは、反応しやすいウェブサイトの問題ではなく、すべてのウェブサイトで見つかる問題です。重すぎるイメージ、ソーシャルメディアからのフィード、過剰なスクリプトなど、サイトの負荷を軽減できますが、応答性の高いWebサイトと適応性の高いWebサイトの両方を高速ロードできるように構築できます。もちろん、パフォーマンスを最優先にしない方法で構築することもできますが、これはソリューションそのものの特性ではなく、サイト自体の開発に関わったチームの反映です。

レイアウトを超えて

適応型Webデザインの最も魅力的な側面の1つは、設定されたブレークポイントのサイト設計だけでなく、それらのサイトバージョン用に提供されるリソースも制御できることです。例えば、これは網膜画像が網膜装置にのみ送られることができることを意味し、網膜以外のスクリーンはファイルサイズがより小さいより適切な画像を得ることを意味する。他のサイトリソース（Javascriptファイル、CSSスタイルなど）は、必要なときにスマートに配信でき、使用されます。

このような適応型Webデザインの使用は、「Webサイトを改装する場合は、適応型を使用する方が簡単です」という単純な式をはるかに超えています。完全な再設計を含むすべてのサイトは、

このシナリオは、この「応答性対適応」論議の微妙な性質を示しています。現場改修のための適応型アプローチが適応型アプローチよりも適していることは事実ですが、完全な再設計にも最適なソリューションとなります。同様に、場合によっては、既存のサイトのコードベースに対応アプローチを追加して、完全対応型アプローチの利点をそのサイトに与えることもできます。

どのアプローチが良いですか？

応答性と適応性のあるWebデザインについては、明確な「勝者」はありませんが、応答性は確かに一般的なアプローチです。実際、「より良い」アプローチは、特定のプロジェクトのニーズに依存します。さらに、これは「どちらか/または」の状況である必要はありません。応答性の高いウェブデザイン（流体幅、将来のサポート）と適応設計の強み（より優れた設計管理、サイトリソースのスマートロード）を組み合わせたサイトを構築している多くのWebプロフェッショナルがいます。

レスポンシブウェブデザインとアダプティブの両方は、長所と課題を持っているため、どちらかを決定する必要があります（RESS（Server Side Components）を使用したレスポンシブウェブデザイン）。特定のプロジェクトに最適なソリューション、またはハイブリッドソリューションが実際に最適なソリューションを提供するかどうかを判断します。