レスポンシブWebデザインの真の意味
レスポンシブWebデザインという呼び名は、A List Apartに2010年5月に掲載されたEthan Marcotte氏の記事をきっかけに広く知られるようになりました。当時すでに同じような手法でウェブ制作をしていた製作者は存在していたと思います。しかし、単体ではその目的や用途を理解するのが難しい技術をひとくくりにして、分かりやすい名前を付けたことによって、その価値を大きく変えることになりました。ここではレスポンシブWebデザインの根底となる考え方をひも解いて、その真の意味を探ってみましょう。
１．命名によって加速的に普及する技術
レスポンシブWebデザインとは、1つのソースコードでスマホやタブレット端末のみでなく、さまざまなスクリーンサイズの端末にもレイアウトを順応できるように、主に3つの手法・技術を組み合わせて実現するウェブ制作の手法です。言葉には不思議な力があって、「AJAX」がそうであったように複数の技術を組み合わせてわかりやすい（または覚えやすい）名前を付けることでそれらの技術が加速的に普及することがあります。レスポンシブWebデザインは
- フレキシブル・グリッド
- フレキシブル・イメージ
- メディアクエリ
という当時すでに存在していた3つの手法・技術をひとくくりにして命名されたものです。この命名によって、それぞれの技術単体では不可能だった技術と手法の一般化を成し遂げました。
2．レスポンシブWebデザインの根底となる考え方
では、この名前にはどんな意味が込められ、どんな考え方があるのでしょうか？ Marcotte氏の記事「Responsive Web Design」を読むと、レスポンシブWebデザインの命名と内容に大きく影響を与えた2つの考え方があることがわかります。一つは2000年に「A List Apart」に掲載された「ウェブの哲学」ともいえるべき内容の「A Dao of Web Design」という記事。そして、もう一つは建築業界の「Responsive Architecture」という試みです。
3．ウェブの哲学「A Dao of Web Design」
「A Dao of Web Design」は、2000年4月に John Allsopp氏がA List Apartに寄稿したものです。以下の3つについて述べています。
- ウェブの特性である柔軟性
- ウェブデザイナーの「コントロールすること」からの脱却
- 順応性に優れたウェブサイトの必要性
ウェブ制作でも印刷媒体から引き継がれた、レイアウトやデザインが固定された制作が長年続けられてきました。しかし、ウェブはそもそも印刷媒体とは異なる柔軟性を持っています。たとえばウィンドウサイズやフォントサイズを変更するといった、印刷媒体ではできないことがウェブでは可能です。Allsopp氏はこの記事で、ウェブの柔軟性を受け入れ活用するべきだと訴えています。そして、その柔軟性をフルに活用したウェブ制作を根底とする考えにしているのがレスポンシブWebデザインです。Marcotte氏の記事「Responsive Web Design」でも、記事の初めに「A Dao of Web Design」のウェブの柔軟性について述べられた部分を引用し、その重要性を示すと同時に記事中でもところ所々に、「A Dao of Web design」を彷彿させる内容が盛り込まれています。
4．周囲に呼応する建築 Responsive Architecture
レスポンシブWebデザインという言葉は1960年後半に出現した建築の分野「Responsive Architecture」からそのアイデアを得たとMarcotte氏は書いています。レスポンシブ・アーキテクチャは、気温、光、動きなどの周囲の環境・状況により建築要素の姿や形を変える手法のことです。たとえば人が前を通ると自在に変形する壁であったり、部屋の人口密度が上がると透明なパーティション・スクリーンが不透明になりプライバシーが得られるようになるなど、周囲の環境に呼応して順応する建築手法を表します。Marcotte氏は彼の記事で「Interactive Architecture」という書籍で紹介されている「居住者と構造物はおたがいに影響を与え合うべき」という考えを引用しています。そして、この考え方が「私たちの進むべき道」だと述べています。
レスポンシブ・アーキテクチャの居住者と構造物はおたがいに影響を与え合うべきだという考え方は、レスポンシブWebデザインにとってすごく重要な考え方です。このレスポンシブという言葉を、レスポンシブ・アーキテクチャの考え方を取って呼応と理解するなら、レスポンシブWebデザインとはユーザとデバイスが互いに呼応するデザインです。つまり、ウェブサイトを使うユーザと、その環境であるウェブサイトに示すことでウェブサイトがユーザの環境に呼応するデザインだと考えられます。例えば、ユーザがスクリーンサイズや位置情報、また、時間情報や音声情報をデバイスを通じてウェブサイトに提供することで、ウェブサイトがその状況・環境に順応し、その状況にあったレイアウトやデザイン、また、情報を提供する。レスポンシブWebデザインという言葉の根底には「ウェブサイトがユーザの環境に呼応するデザイン」があるのです。
5．レスポンシブWebuデザインの魅力
新しい技術が出てくるとつい小手先の技法に走ってしまうことがあります。しかし、レスポンシブWebデザインは、スマホ対応のためにレイアウトを変更するだけで終わるものではありません。ユーザの状況や環境にウェブサイトが呼応して、ユーザにより良い体験を提供できるようにという意味合いを込めて命名されたものです。技術は着々と変化していきますが「A Dao of Web Design」のような哲学やレスポンシブという言葉に込められた意志は、時を経ても変わらず残っていくと思います。小手先の技法に走らず、その意図をくみ取ってウェブ全体の将来を考えた制作をすれば、ウェブはユーザにとっても制作者にとっても、より魅力的なものになると信じています。そして、レスポンシブWebデザインの魅力は、その将来の可能性にあると信じています。
引用元 渡辺竜 著 レスポンシブWebデザイン
※※※※※※※※※※※※※※※※※※※※※※※※※※※※※※※※※※ 青森、八戸、十和田、三沢市のスマホ、スマートフォンサイト制作は北の国ウェブ工房にお任せ下さい。 北の国ウェブ工房では、スマホ、スマートフォンウェブサイト制作をレスポンシブWebデザインで制作しております。いろいろな画面サイズに対応 したレスポンシブWebデザインはスマートフォンに限らず、今後も増加が予想される様々なデバイス（機器）の画面サイズに対応し、見やすく、使 いやすいウェブサイトを作成いたします。 どうぞお気軽にご相談ください。 ※※※※※※※※※※※※※※※※※※※※※※※※※※※※※※※※※※
