そして、今やお馴染みになったレスポンシブデザインの方。
1つの HTML なんだけど、表示する画面サイズに合わせて最適化して表示します。
レスポンシブにも複数の概念があり、日本で言われているのは、端末のサイズを明確に「PC、スマホ、タブレット」のように分け、そのサイズ以上そのサイズ以下といった際に、それぞれのサイズごとに画面に「切り替える」という方式になります。
「切り替える」というキーワードがポイントで、用意されたサイズ以外の場合は最適化されません。
つまり、ちょっとでも画面サイズが変形した端末が登場した際には、最適化されていないという状況になります。
これは日本で「レスポンシブ・デザイン」という言葉が話題になった時に、制作の仕方を指南した多くの書籍やネット上の情報が間違った解釈の仕方をしていたせいだと思います。
多くの勉強家たちが間違った情報を鵜呑みにしてさらに広げてしまうという、ネットの怖さですね。
厳密に本来のレスポンシブの意味としては、「画面サイズに対して最適化する」というものになり、どんな新しい画面サイズの端末が登場しても、常に最適化された状態になるものです。
テキストや画像といった情報構造が記述された単一の HTML に対し、ヴィジュアルを CSS が制御するという仕組みになり、１ソースで見た目だけがフレキシブルに変更されています。
レスポンシブとアダプティブの、それぞれのメリットデメリット
くどいようですが、上記2つの概念で比べた場合です。
■アダプティブのメリット
・環境ごとに専用のデータが用意されている。
・表示速度が速い
・制作側にとっては、レイアウトが自由。
□アダプティブのデメリット
・制作側にとっては、コストがかかる
・運用側にとっては、コストがかかる
■レスポンシブのメリット
・PC端末のブラウザのサイズに最適化されるので見やすい。
・デバイスが変わっても、URLが必ず同じになる。
・Google が推奨しているため、SEO対策での優位性という希望がある
・制作側にとっては１ソースなので、データの管理が楽。
・運用側にとってはコストが良。
□レスポンシブのデメリット
・無駄なデータを読み込むため、ページの表示が遅くなる
・制作側にとっては、HTML が1ソースなので、デバイスごとの構造設計に対しての最適化ができない
・レイアウトに関して柔軟性が無いため、同じようなサイトばかりになる
制作者向き・どう使い分けるか
アダプティブは、デバイスごとにカスタマイズされた画面を作るので、よりお客様目線でのデザインや機能を提供することができます。
レスポンシブは、デバイスに関係なく最適化された画面を作るので、統一したデザイン・情報の提供が可能。
メリット・デメリットは双方あり、どこを重視するかで構築方法の選択が変わってくるのだと思います。
まずはスマホ対応を必ずすると考え、その後にPC版をどちらの方法で構築するか、と考えた方がスマートですね。
最後に、この記事のタイトルは適当です。
この記事に興味ある人におすすめ記事
2014/06/26
Google が、新しい UX の体系「Material Design」を発表しましたね。スマホやタブレットやPC、次世代の腕時計までを含めた端末の違いをこえて、UI を統一し、全てのスクリーンサイズで同じ操作体験ができるというコンセプト。ムービーを見ると、デザインコンセプトが伝わってきます。こういう動画いいなぁ。
2014/08/07
デザインって感覚的と言われるのですが、生み出すためにはいろんな知識が必要になってきます。数学、科学、地学、物理。あと薬事法とか法律とか。よく知られているのが、「赤十字」のマーク。これはデザインでの使用が禁止されています。病院とか救急箱のデザインに、この赤十字マークは使えないのです。…
2014/04/13
認知心理学のメンタルモデルの中でも屈指の「定義が難しい概念」である「ナラティヴ」という言葉。2年前くらいのマーケティングやバズ用語として聞く機会が増え、海外では爆発的に広まっている言葉でこれからの流行にもなりそうです。心理学でのナラティブセラピーが一番有名な単語っぽいですが。ナラティブは専門…
2012/12/12
今年１年のデザイントレンドを考えると、アレだったりアレだったりするのですが（自分が制作する際に使いづらいので自主規制）、話題になったものといえば、ドナルド・ノーマンが今年に入ってすぐに書いたコラム「Don Norman: Does Culture Matter for Product Design?」が様々な議論を巻き起こしました。■Does Cu…
画像一覧 
