シンクゼロマガジン専用ブログで掲載している毎週火曜日更新「Museプロトタイプ」第二回の記事コンテンツの後半が、「レスポンシブWebデザイン」についての内容なので、こちらのブログに転載しておきます。

レスポンシブWebデザインについては、テキストキャスティングでも解説する予定ですが、予備知識として、読んでおいてください。


アーカイブ:
12月29日から本日までの[第1〜7回]のまとめ
Dreamweaver+Bootstrap完全習得と、Muse+レスポンシブWebデザイン完全習得



「Museプロトタイプ」
第二回「一人出版社が使用する2つのウェブツールとレスポンシブ・アーキテクチャの概念」より一部抜粋



レスポンシブ・アーキテクチャの概念から生まれた「レスポンシブWebデザイン」

一人出版社のシングルページ、およびシングルロングページは、95%以上が「レスポンシブWebデザイン」だ。レスポンシブWebデザインとは、1つのページでパソコンのワイドスクリーンから、スマートフォンの小さな縦方向の画面まで、柔軟に適応させるための開発アプローチである。

通常、パソコン向けにデザインされたウェブページをスマートフォンでアクセスすると、縮小コピーのように表示されてしまう。利用者は、部分的にズームとスクロールの操作を繰り返しながら閲覧しなくてはいけない。レスポンシブWebデザインを採用したページは、閲覧環境にあわせてデザインを変更することができるため、パソコンでもスマートフォンでも視認性、可読性を低下させない。


レスポンシブWebデザインは、ボストンのウェブデザイナー/開発者であるイーサン・マルコッテ氏が、2010年5月にウェブマガジン「A List Apart」に寄稿した記事「Responsive Web Design」で詳細が公開され、世界中のウェブ制作者がこの新しい手法に注目した。

マルコッテ氏は、この記事の中で「レスポンシブ・アーキテクチャ(Responsive Architecture)」からインスピレーションを得たと書いている。


レスポンシブ・アーキテクチャとは、物理的形状を動的に変化させることが可能な変形機構を持つ建築物のことで、その概念については1970年代から提唱されている。

私たちの身近にあるレスポンシブ・アーキテクチャの実例で最もわかりやすいのが開閉式のドームスタジアムだ。試合を観戦中、大雨になった場合、屋根のないスタジアムでは、観客は傘をさしたり、レインコートを着て対応するが、開閉式の屋根を持つスタジアムなら、数分で雨を遮断できる。


マルコッテ氏は、室内におけるプライバシーを守る仕組みとして、スマートガラスの技術を紹介している。人が集まると透明なガラスが自動的に不透明になり、パーティションとして機能するテクノロジーだ。

人間の行動にあわせて、建築物の方が「適応」するというレスポンシブ・アーキテクチャの概念は、ウェブデザイナーにとっても応用できるものだと考え、2009年3月、「A List Apart」にページレイアウトを保持した状態でウィンドウの可変に適応する手法「Fluid Grids」を掲載、同年4月には、マルコッテ氏のサイト「Unstoppable Robot Ninja」に画像やビデオなどを可変ウィンドウに適応させる「Fluid Images」について解説している。

そして、翌年の5月に「Responsive Web Design」という開発アプローチが公開されることになる。



その後、スマートフォンの進化によって、レスポンシブ・アーキテクチャの概念は、ネイティヴアプリで具現化される段階にきており、GoogleやAppleが開発中の次世代スマートフォンには3Dスキャナーが搭載されると言われている。

すでにプロトタイプを完成させているGoogle「Project Tango」チームリーダー、ジョニー・チャン・リーは「スマートフォンは人間と同じような空間の認識能力を持つだろう」と述べている。Appleも2013年11月24日にPrimeSenseを買収し、すでに3Dセンサーの技術を獲得している。


このレベルにくると、センサーから得たリアルタイムデータを活用した「レスポンシブWebデザイン」に発展してもおかしくない。

テクノロジーによって、Webデザインもレスポンシブ・アーキテクチャの本質に近づくのである。




シンクゼロマガジン「Museプロタイピング」から一部転載。

2016年1月5日(火)
筆者:Creative Edge School Books
シンクゼロマガジン「Museプロタイピング」は、毎週火曜日に掲載されます。


シンクゼロマガジンとは?

筆者:
Creative Edge School Books