Responsive and Adaptive Design
レスポンシブ & アダプティブ webデザイン
すっかり普及しているレスポンシブwebデサイン ( 以降 RWD )。
しかし、問題点も数多くあります。
UXを考えたUIを表現しにくい。デバイスごとに最適化しにくい。
デスクトップとモバイル機器の違いは何も画面サイズだけではありません。
使う「場所」も違えば、操作するツールも違う。
ニーズを持つユーザー層や、接続するスピードも違います。
デバイスごとに最適化されているサイトと、
レスポンシブでCSSの範囲で作られているサイト。
どちらが優れたUXをもたらすデザインを考えやすいのか。
いうまでもないと思います。
パフォーマンスが落ちる。
スマホがいくら高性能になってきたからといっても、
デスクトップ・ラップトップとの性能差は大きな壁として存在しています。
javascriptの処理スピード。
ネットへの接続状況。
javascriptがandroidのあの端末だけ異常に重い…….
なんてこともよくある話です。
構成から実装まで複雑である。
RWDでもしフレームワークを使わずに、
一から設計、実装をやる。
経験したことがある人にはわかると思いますが、
多大な時間と労力がかかるものですよね。
開発費用にコストがかかる。
多くの人が未だに、
RWD = ワンソースマルチユース
ワンソース？ = コストが低いのでは？
と考えている方がまだまだいます。
しかし現実は、デバイスごとにサイトを作成するのと同程度、
または、それ以上にコストがかかってしまうこともあります。
( もちろんやり方によっては、RWDで制作することにより、コストを削減できます。)
以上、RWDの問題点について簡単に書き出してみました。
レスポンシブwebデザイン。
確かに多様化するデバイスの中、
我々制作者が対応していくには必須の技術だと思いますが、
まだまだ考えるべき課題はたくさんあります。
レスポンシブwebデザインで以下に効率よく制作するか。
にいては、
Web Design Process for The Fiture – こもりまさあき さん –
のスライドがものすごく参考になるので是非目を通してみて下さい。
( 実際に僕もセミナーで発表をきいたのですが、衝撃的でした。)
臨機応変に手法を変える。
僕は別にレスポンシブwebデザイン自体がダメだとは思っておりません。
上記のデメリットについては、
Responsive Web Design is Not the Future
から拝借させて頂きましたが、
僕は、
A Response to ‘Responsive Web Design is Not the Future’
の意見に賛成です。
技術者の努力・知識によって解決出来る問題もたくさんあります。
そこで僕は、
調べてみました。
レスポンシブwebデザインに広まっている誤解
今のレスポンシブWebデザインは誤解されている
といった文献も見受けられました。
「今のレスポンシブWebデザインは誤解されている」英の著名デザイナーAndy Clarke氏が話す3つの修正点
Responsive and Adaptive Design: Defined
RWDはあくまでも可変するものです。
これがレスポンシブ。
.container{
width:90%;
max-width:1200px;
margin:0 auto;
}
そしてこれが、アダプティブ。
.container{
width:700px;
}
@media only screen and (max-width: 767px) and (min-width: 480px) {
.container{
width:420px;
}
}
@media only screen and (max-width: 767px) {
.container{
width:300px;
}
}
例とすると、
MR.SIMON COLLISON
が典型的なAWDとして紹介されています。
メディアクエリーを利用していますけど、
コンテンツの配置・幅自体は３段階しか種類がありませんね。
RWDは、デバイスのサイズに常に応答する(サイズが可変する)物。
という考え方が、どうやら海外では主流なようです。
でも、このやり方でもいいと思うんですけどもね。僕は。
もちろんクライアントには説明しますが、
予算は少ないけれど、スマートフォン・タブレットでも見たい。
という方にはぴったりなような気がします。
各メディアクエリーの最小幅に合わせないと崩れるというのがちょっとたまに傷ですが。
3つの「アダプティブwebデザイン」
アダプティブwebデザイン。
こちらもレスポンシブwebデザインが考えられた際に時同じく考案された手法です。
Responsiveが「応答性」なのに対し、
Adaptiveは「適応性」という意味。
いろいろ調べ直した結果、
今現在では、4つのアダプティブwebデザインという概念？があるような気がしました。
一つは、先ほど紹介した、メディアクエリーを利用したアダプティブデザイン。
しかし、こちらはなんだかレスポンシブwebデザインの下位互換として広まっています。
そして２つ目が、
デバイスごとに適応させたサイトを作る方法のこと。
ユーザーエージェントごとにスマートフォン専用サイトや、タブレット専門サイトにリダイレクトさせるものアダプティブwebデザインだそうです。
気になる3つ目は、RWDを内包した概念とした立ち位置のAWD。
以下の図をみるとよくわかります。
プログレッシブ・エンハンスメントは、最新のブラウザにはよりリッチに、古いブラウザには最低限の見れるものを、というあの概念です。
RWDというのは、 AWDという考え方の中の一つの手法でしかない、というわけです。
最後は、ユーザーのコンテキストに合わせて表示する内容を切り替えるAWD。
レスポンシブからアダプティブへ – 必要な情報を、必要なときに、必要としている人へ
性別、場所、年齢、といったユーザー属性や、ユーザーの行動を分析し、それに合わせたサイト設計をする。
ということらしいです。
上記の記事・元になったスライドでは、主にセンサーを利用した判別方法を使用していました。
確かに、
- wifiにつながっている時だけ、背景で動画を流す。
- 高齢者向けにサイトを用意する
なんてこともできますよね。
ポータルサイトでも、アクセスした地域によってスタートページを変えるということも今までよくあったと思います。
これは、結構面白い考え方だなと感じました。
レスポンシブwebデザイン + アダプティブwebデザイン ＝ ？
………ってことで、
-
レスポンシブwebデザイン ≠ アダプティブ webデザイン
-
これからのデザインはアダプティブ web デザイン。
-
センサーや位置情報を利用したもの
-
RESS ( Responsive web design + Server SIde Compornent )を使用してデバイスごとに適応。
![](\"http://web-layman.com/content/images/2014/Mar/_2014_03_16_at_0_13_09.png")
![](\"http://web-layman.com/content/images/2014/Mar/_2014_03_16_at_1_06_26.png")
![](\"http://web-layman.com/content/images/2014/Mar/2014_03_19_at_20_55_34.png")
![](\"http://web-layman.com/content/images/2014/Mar/_2014_03_19_at_20_56_18.png")
![](\"http://web-layman.com/content/images/2014/Mar/2014_03_19_at_20_56_44__2_.png")
![](\"http://web-layman.com/content/images/2014/Mar/2014_03_19_at_20_57_44.png")
![](\"http://web-layman.com/content/images/2014/Mar/_2014_03_19_at_21_03_45.png")
![](\"http://web-layman.com/content/images/2014/Apr/_2014_04_14_20_34_50.png")
![](\"http://web-layman.com/content/images/2014/Apr/admindashboard-2.gif")
![](\"http://web-layman.com/content/images/2014/Apr/adminwidgets.gif")
![](\"http://web-layman.com/content/images/2014/Apr/_2014_04_14_22_34_33.png")
![](\"http://web-layman.com/content/images/2014/Apr/_2014_04_14_22_48_06.png")
![](\"http://web-layman.com/content/images/2014/Apr/_2014_04_14_22_42_08.png")
![](\"http://web-layman.com/content/images/2014/Apr/_2014_04_15_0_31_59.png")
![](\"http://web-layman.com/content/images/2014/Apr/admin_acf-2.gif")