レスポンシブとアダプティブの違いを調べる

レスポンシブ以外にも幾つかのデザイン手法が存在しています。
普段、意識せずにやっているものでも、その方法がどれなのかをあまり意識せずに今まで来ていました。

簡単に整理して、意図を整理しましょう。

Layoutの種類

代表的な手法は以下のようなものがあげられるかと思います。

  1. Fixed
  2. Fluid
  3. Adaptive
  4. Responsive
  5. まとめ:Responsive or Adaptive

それぞれの特徴

Fixed

表示される要素を、pxで固定して構築する方法です。
おそらく、モバイルデバイス登場以前では、メインのやり方だったのではないでしょうか。

表示デバイスがPCで、解像度もある程度決まっている場合は、この方法で全く問題がありませんでした。
今でも、グラフィックスを忠実に再現する必要がある場合に有効で、無駄のない作業が可能になります。

Fluid

レイアウトはそのままに、ブラウザサイズの変化に追従する方法です。
%で指定するなどで実装していきます。

モバイルでなくとも、いろいろな大きさのPCや、ユーザーが設定しているブラウザの大きさに左右されないことが強みです。

webサイトのの重要なテーマでもある、
「ユーザーがどのような状況にあっても、コンテンツを読むことが出来る。」
という観点において、それを守ることができる方法です。

Fixedよりもユーザーにフォーカスされた考え方と言えるのではないでしょうか

Adaptive

ブレイクポイントによって、表示するデザインを変える方法です。
作成者が対応するデバイスサイズ(ブレイクポイント)を明確に決め、それぞれに対応するデザインを作ります。

想定されたブレイクポイント以外は、表示が保証されるとは限らないという点から、AdaptiveはFixedのレイアウトの考え方の拡張とも捉えられます。

Responsive

あらゆる画面サイズで、ユーザーがコンテンツを正しく理解することができるものを提供します。
ブレイクポイントは設定するのですが、ブレイクポイント間もレイアウト崩れが起きないという点で、adaptiveとは違います。

ResponsiveはFluidの考え方を更に拡張したもののような印象を受けました。

まとめ:Responsive or Adaptive

では、サイト制作にはどちらの手法を選択すべきなのでしょうか?
どっちがいいのか・・・

幸い、互いのメリットに、はっきりとした違いがあります。

  • responsiveは「すべてのデバイスに対応する」
  • adaptiveは「条件を限定する」

という点です。

一見レスポンシブのほうがいいように思うのですが、アダプティブでは例えば「モバイル用に別のデザインを用意する」といったことも考えられます。
よりよいUXを提供する場合には、こちらのほうが有利なこともあるでしょう。

対象とするユーザーによって大きく変わるんじゃないでしょうか。
個人的な考えとしては、文字を読ませるタイプのwebサイトであれば、レスポンシブがベターなんじゃないかと思っています。

あなたはどのスタイルを選びますか?

Next...
#responsive,#ux

UXとUIについて

ブログを作ってるうちに、マネタイズとUXの関係性を学んで活かせそうな気がしてきた

ウェブ系の人こそブログを作った方がいいと思う理由

サイトのAMP化を検討している方へ導入によるメリットとそうじゃない部分を解説します

モバイルファーストインデックス(MFI)が検索順位やインデックスに与える影響とは?