レスポンシブの定義を改めて調べる。

よく言われるアダプティブとの違いを明確にしたい。 どちらも明確に定義されているというわけではなく、便宜上呼び分けている状況。

Layoutの種類

まず、どんな種類のレイアウトがあるのか、あげてみる。

Fixed

pxで固定された世界 モバイルデバイス登場以前でメインのやり方 グラフィックスを忠実に再現する必要がある場合に有効

Fluid

レイアウトはそのままに、ブラウザサイズの変化に追従する。(%で指定するなど) 「htmlのテーマでもあるユーザーがどのような状況にあっても、コンテンツを読むことが出来る。」という点においてそれを守れる。 Fixedよりもコンテンツにフォーカスされた考え方と言える。

Adaptive

対応するデバイスサイズ(ブレイクポイント)を明確に決める。 AdaptiveはFixedのレイアウトの考え方の拡張とも捉えられる。

UX 対象デバイス専用のCSSを用意することで、必要最小限のファイルロード。負荷を軽減する。

デベロッパー cssを複数用意する

デメリット 対応していないサイズを考慮には入れないので、対象外のデバイスでレイアウト崩れがおきることも想定される。

Responsive

あらゆる画面サイズに対応する。 対応とは破綻せずにコンテンツが読めること。 ブレイクポイントは設定するが、ブレイクポイント間もレイアウト崩れが起きない。 ResponsiveはFluidの考え方の拡張版ともいえそう。

UX どんなデバイスでも、コンテンツが破綻することなく提供できる

デベロッパー 一つのCSSで対応

デメリット CSSやhtmlの複雑化 CSSの肥大化でロードが遅くなる

Responsive or Adaptive

どっちがいいのか・・・ 幸い、互いのコアなメリットに、はっきりとした違いがある。 responsiveは「すべてのデバイスに対応する」に対して、adaptiveは「負荷軽減で快適な閲覧を提供する」という点である。 どちらも重要で両方満たしているのが一番いいのだが、それは現実的ではない。(ってことは、すべてのデバイス用にadaptiveデザインを行うのが最強ってことか) 案件のコンセプトや調査の内容次第で使い分けるのがベターだと思われる。 コストに関してはどうだろう? 最終的にはあまり変わらない気もするけれど。


234 0 0